Data Visualization
Jump to navigation
Jump to search
Contents
Mermaid
- Automated flow chart generation from markdown via Javascript package
- mermaid on Github
- 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