Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

class & classDef not working for mermaid graph? #81

Closed
happyshows opened this issue Mar 17, 2015 · 14 comments
Closed

class & classDef not working for mermaid graph? #81

happyshows opened this issue Mar 17, 2015 · 14 comments

Comments

@happyshows
Copy link

d <- "graph LR

A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]

classDef test fill:#A2EB86,stroke:#777,stroke-width:4px;
class B test;
"

mermaid(d)

@happyshows happyshows changed the title class & classDef not working? class & classDef not working for mermaid graph? Mar 17, 2015
@pommedeterresautee
Copy link
Contributor

I was about to post the same bug. I am under Windows. Color are not displayed anymore.

I notice that this example doesn't work anymore (use class def)

# Load in the 'mtcars' dataset
data(mtcars)
connections <- sapply(
 1:ncol(mtcars)
  ,function(i){
     paste0(
        i
      ,"(",colnames(mtcars)[i],")---"
      ,i,"-stats("
      ,paste0(
        names(summary(mtcars[,i]))
        ,": "
        ,unname(summary(mtcars[,i]))
        ,collapse="<br/>"
      )
      ,")"
   )
 }
)

DiagrammeR(
   paste0(
     "graph TD;", "\n",
     paste(connections, collapse = "\n"),"\n",
     "classDef column fill:#0001CC, stroke:#0D3FF3, stroke-width:1px;" ,"\n",
     "class ", paste0(1:length(connections), collapse = ","), " column;"
   )
 )

But this example works (color are used but no class / classDef):

DiagrammeR("graph LR;A(Rounded)-->B[Squared];B-->C{A Decision};
 C-->D[Square One];C-->E[Square Two];
 style A fill:#E5E25F;  style B fill:#87AB51; style C fill:#3C8937;
 style D fill:#23772C;  style E fill:#B6E6E6;"
)

Kind regards,
Michaël

@timelyportfolio
Copy link
Contributor

@happyshows and @pommedeterresautee I think mermaid will now be much easier to work with after pulls
mermaid-js/mermaid#134
mermaid-js/mermaid#135
mermaid-js/mermaid#136

I just need to do some testing.

@rich-iannone
Copy link
Owner

@pommedeterresautee @jennybc Michaël, I noticed you have some issue displaying colors and this same issue came up recently. Could you run the code in the gist at https://gist.github.com/rich-iannone/3db4fa95f27ba28fabe4 and let me know if colors display or not? Trying to diagnose the cause of this.

@timelyportfolio
Copy link
Contributor

@rich-iannone I think this issue is with mermaid not grViz

@rich-iannone
Copy link
Owner

Yeah, true, and I'm probably grasping at straws, but I thought there might be some underlying reason.

@timelyportfolio
Copy link
Contributor

pretty sure with big and rapid changes in mermaid that this needs to be eliminated first. hope to have fix soon.

@timelyportfolio
Copy link
Contributor

actually appears to be css priority preference; can't imagine that bare mermaid is working either. Prob will have to file issue over there.

@timelyportfolio
Copy link
Contributor

looks like this was partially addressed in mermaid-js/mermaid#128

@timelyportfolio
Copy link
Contributor

explains why the more specific id works, but the general class name does not

rich-iannone added a commit that referenced this issue Mar 20, 2015
@pommedeterresautee
Copy link
Contributor

Installed last version from Github and it works now on my Ubuntu machine (was not working before updating, like on Windows laptop). Will try later on Windows.

@abdulkerimgok
Copy link

colors work with the github version on windows but now the arrow heads disappeared, which works with the cran version (with no color)...

another thing with the CSS styling in mermaid...I am trying the make the font larger with font-size: argument but even when you do make the font larger the problem is that the node size stays the same and the text inside nodes becomes not readable and I couldn't find a solution to make nodes larger as well..

I don't know if this is the right place for this kinds of requests but I wish I could play more with styling options in mermaid such as diagram title, node size (as mentioned above), and font size of the text between nodes along the connection lines, and possibility of adding a legend, etc..

thanks for the great package..looking forward to new features..

abdulkerim

@rich-iannone
Copy link
Owner

@abdulkerimgok there has been a request to reference a CSS stylesheet and I think it's a good feature to have (Graphviz allows this with an XML stylesheet). So, this will be worked on.

@alforj
Copy link

alforj commented May 5, 2015

@rich-iannone just checking in to see if the first part of @abdulkerimgok comment above on Mar 23 regarding the arrow heads missing in windows is being wrapped up under this issue or not. Seeing the same behavior, arrow heads appear in Mavericks but not in Windows 7 (using both DiagrammeR v0.6 and github dev version).

Thanks, love the package and looking forward to implementing some of your latest grViz features into my (very nascent) 'muir' package.

@alforj
Copy link

alforj commented May 7, 2015

Quick update on the "missing arrow heads" in Windows. The arrow heads are not showing in the RStudio viewer (v0.98.1103) but if I save the htmlwidget to an HTML file, the arrows appear, at least in Chrome and Firefox.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants