Data Visualization

Mermaid

• Automated flow chart generation from markdown via Javascript package
• mermaid on Github
• Configuration
  • YAML front matter is for config options
  • Can also style using comments
• Jupyter notebook extension %reload_ext mermaid

mermaid-cli

• npm install -g @mermaid-js/mermaid-cli
• mmdc -i input.mmd -o output.svg
• mmdc -i input.mmd -o output.png -t dark -b transparent
• mmdc --input test-positive/flowchart1.mmd --cssFile test-positive/flowchart1.css -o docs/animated-flowchart.svg

Flowchart syntax

• Flowchart syntax docs
• Comment lines start with %%

Chart types

• flowchart (alias "graph") (LR, RL, TD, TB, BT)
• group subgraphs using subgraph/end tokens. label subgraph using regular [label] syntax. subgraphs can have their own directionality

Nodes (boxes)

• node_id_name["square box"]
• node_id_name("rounded edge box")
• node_id_name(["Pressure vessel box"])
• node_id_nameDouble side edge box"
• node_id_name[(Database cylinder box have parens interior")]
• node_id_name(("Circle boxes have double parens"))
• node_id_name{"Diamond node have single brace"}
• Other node shapes, asym flag >], hexagon {{}}, parallelogram [//] [\\], trapezoid [/\], [\/], double circle has triple parens ((()))
• Markdown strings by "`...`"
• Include fontawesome in strings via fa:, e.g., fa:fa-spinner

Edges/Links

• -->
• ---
• -.- - dotted link
• === - thick line
• Colettace (talk) - invisible link to help with positioning
• --o
• --x
• <-->, o--o
• ---|Text delimited by pipes|
• A ---> B --> C
• a --> b & c --> d - multi node links
• Add additional dashes to make longer (i.e., add ranks)
• special text given using html character names

attributes

• node click effects

flowchart LR
    A-->B
    B-->C
    C-->D
    D-->E
    click A "https://www.github.com" _blank
    click B "https://www.github.com" "Open this in a new tab" _blank
    click C href "https://www.github.com" _blank
    click D href "https://www.github.com" "Open this in a new tab" _blank

• node styling by element id

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

• node styling by class

flowchart LR
    A:::foo & B:::bar --> C:::foobar
    classDef foo stroke:#f00
    classDef bar stroke:#0f0
    classDef foobar stroke:#00f

Graphviz

• Non directed graph, directed graph
• from graphviz import Digraph, Graph
• Really not a lot of control over placement of the nodes.
• Some experimentation