Data Visualization

Mermaid

• Javascript
• Automated flow chart generation from markdown
• on Github
• Jupyter notebook extension %reload_ext mermaid

Flowchart syntax

• Flowchart syntax docs

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 "`...`"

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

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

Graphviz

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