Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Styling mermaid diagrams with DiagrammeR

Tags:

r

svg

mermaid

I'm using the DiagrammeR package in R to render a flowchart with mermaid:

graph LR
A[text]-->B[a very, very, very, very, very, very, very, very, long text]

style A fill:red, font-size:50px

Looking at the compiled XML, this produces:

#mermaidChart0 .node { fill:#ffa; stroke:#666; stroke-width:3px; }
#mermaidChart0 .node text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart0 .edgeLabel text  { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
.mermaid .label { color: rgb(51, 51, 51); }
.mermaid .node { fill: #d2d2d2; stroke: #929193; stroke-width: 1px; }
.mermaid .edgePath .path { stroke: #333333 !important; }
.DiagrammeR g .label { font-family: Helvetica; font-size: 14px; color: rgb(51, 51, 51); }

My questions are:

  1. Why does the specified font-size show up? (doesn't seem to work for any font attributes)
  2. Is there a way to specify the width of nodes, such that I don't have to manually insert html breaks in long paragraphs?
  3. Is there a way in the mermaid code to break up long lines to make it more readable, like e.g. "\" in Python?
like image 785
user2987808 Avatar asked Oct 31 '22 04:10

user2987808


1 Answers

To break up long lines use <br>. Hat-tip: https://github.com/rich-iannone/DiagrammeR/issues/106#issuecomment-103304351

like image 135
Ben Avatar answered Nov 15 '22 04:11

Ben