Mermaid subgraph title not showing

[schuemie]

Not sure if this is a Mermaid issue or DiagrammeR, but the subgraph titles are not showing:

DiagrammeR("
  graph TB
         subgraph one
         a1-->a2
         end
         subgraph two
         b1-->b2
         end
         subgraph three
         c1-->c2
         end
         c1-->a2

  classDef default fill:#CCCCCC,stroke:#333,stroke-width:1px;
  classDef cluster fill:#EEEEEE,stroke:#333,stroke-width:1px;
")

My sessionInfo:

R version 3.1.2 (2014-10-31)
Platform: x86_64-w64-mingw32/x64 (64-bit)

locale:
[1] LC_COLLATE=English_United States.1252  LC_CTYPE=English_United States.1252   
[3] LC_MONETARY=English_United States.1252 LC_NUMERIC=C                          
[5] LC_TIME=English_United States.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] DiagrammeR_0.4

loaded via a namespace (and not attached):
 [1] bitops_1.0-6      devtools_1.7.0    digest_0.6.8      evaluate_0.5.5    formatR_1.0      
 [6] htmltools_0.2.6   htmlwidgets_0.3.2 httr_0.6.1        knitr_1.9         RCurl_1.95-4.5   
[11] RJSONIO_1.3-0     rmarkdown_0.5.1   rstudio_0.98.1091 rstudioapi_0.2    stringr_0.6.2    
[16] tools_3.1.2       yaml_2.1.13   

[timelyportfolio]

Subgraphs are new functionality in mermaid. If pull #74 is accepted, mermaid should have subgraphs and also the alpha version of gantt charts.

[rich-iannone]

The pull was accepted and the examples work on my machine as well. @timelyportfolio , many thanks for this!

[timelyportfolio]

probably should increment minor version to denote change.

[rich-iannone]

Yes, I think I'll tag this after increasing the minor version.

[schuemie]

Even though the subgraphs are showing, I don't see the titles (just pulled the latest version from master). It is working fine when I manually create a HTML page with Mermaid, so it is not a Mermaid issue:

Mermaid:

DiagrammeR:

Diagram code:

graph TB
         subgraph one
         a1-->a2
         end
         subgraph two
         b1-->b2
         end
         subgraph three
         c1-->c2
         end
         c1-->a2

    classDef default fill:#CCCCCC,stroke:#333,stroke-width:1px;
    classDef cluster fill:#EEEEEE,stroke:#333,stroke-width:1px;

[timelyportfolio]

Looks like a css issue. I'll check into it.

[timelyportfolio]

This is going to be trickier than I thought, since the text labels are not getting rendered for subgraph. I'll try to revert back to the official mermaid release to see if anything has changed in the development version to cause this.

[timelyportfolio]

Ok, I figured out the root of the trouble, and for now a fix will require a manual change to the mermaid source, but I have filed as an issue for consideration mermaid-js/mermaid#133. I'll submit a pull shortly that will allow us to use subgraphs.

[timelyportfolio]

@schuemie , could you possibly do fresh devtools::install_github("rich-iannone/DiagrammeR") once @rich-iannone has accepted the pull? I used your example, and it works in RStudio Viewer, Firefox, and Chrome for me, but I just want to make sure other setups work also. Thanks so much.

[schuemie]

It works fine in a lot of settings. But if I include the diagram in an ioslides presentation the font size is wrong. Not sure if you want to have ioslides on your list of supported frameworks (I tried revealjs, but it didn't fit my needs).

(There is also a weird thing in ioslides where the diagrams sometimes have no labels at all, and I have to push refresh to get them back)

[timelyportfolio]

You can customize the CSS however you would like. Generally, I think it is good to inherit the non-specific CSS from the site, so I do not think it would be wise to change DiagrammeR to handle this case. Here is a CSS rule that will demonstrate something that might work for you.

<style>
  .cluster text { font-size:60%;}
</style>

The slide frameworks are definitely one of the most difficult to get anything to render properly. Another trick (but not in htmlwidgets master) is to include them as an iframe with htmlwidgets::as.iframe, but this also presents some difficulties.

[timelyportfolio]

@schuemie can we close this one? Would love to see examples of all that you have created.