Mermaid Demo
Practice with mermaid syntax! Why didn't this update?
graph TD
%% this is a comment A -- text --> B{node}
A[Where thoughts start]-->B
A-->C((Sometimes rounder))
B[(Sometimes a database)]-->D
C---|w/ fill text|D
D-.->F( Dotted lines are cool too)
Hierarchical nodes
graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
Flowcharts
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
Styles
Vanilla HTML is ok!
graph 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
If you get fancier, they can be applied via CSS class too, or apply default CSS classes.
Font-awesome fonts
graph TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro perhaps?);