Mermaid

Mermaid is simple markdown-like script language for generating charts from text via javascript [^1]

Syntax

  1. TB/TD - top bottom
  2. BT - bottom top
  3. RL - right left
  4. LR - left right

Single Node

Node

A node is single a box/entity

  1. graph LR
  2.     id1
mermaid graph LR id1

Node with Title

  1. graph LR
  2.     id1[This is the text in the box]
mermaid graph LR id1[This is the text in the box]

Node with Round Borders

  1. graph LR
  2.     id1(This is the text in the box)
mermaid graph LR id1(This is the text in the box)

Node with Circle

  1. graph LR
  2.     id1((This is the text in the circle))
mermaid graph LR id1((This is the text in the circle))

Node with Asymmetric Shape

  1. graph LR
  2.     id1>This is the text in the box]
mermaid graph LR id1>This is the text in the box]

Node with Rhombus

  1. graph LR
  2.     id1{This is the text in the box}
mermaid graph LR id1{This is the text in the box}

Arrow Head

  1. graph LR
  2.   A-->B
mermaid graph LR A-->B
  1. graph LR
  2.   A---B
mermaid graph LR A---B

Link with Text

  1. graph LR
  2.   A-- This is the text -->B
mermaid graph LR A-- This is the text -->B
  1. graph LR
  2.   A-- This is the text ---B
mermaid graph LR A-- This is the text ---B
  1. graph LR
  2.   A-.-B
mermaid graph LR A-.-B
  1. graph LR
  2.   A-.->B
mermaid graph LR A-.->B
  1. graph LR
  2.   A-. This is the text .-B
mermaid graph LR A-. This is the text .-B
  1. graph LR
  2.   A-. This is the text .->B
mermaid graph LR A-. This is the text .->B
  1. graph LR
  2.   A==>B
mermaid graph LR A==>B
  1. graph LR
  2.   A===B
mermaid graph LR A===B
  1. graph LR
  2.   A== This is the text ===B
mermaid graph LR A== This is the text ===B
  1. graph LR
  2.   A== This is the text ==>B
mermaid graph LR A== This is the text ==>B

Flowchart

Top Down

  1. graph TD
  2.   A-->B
  3.   A-->C
  4.   B-->D
  5.   C-->D
mermaid graph TD A-->B A-->C B-->D C-->D

Left Right

  1. graph LR
  2.   A-->B
  3.   A-->C
  4.   B-->D
  5.   C-->D
mermaid graph LR A-->B A-->C B-->D C-->D

Special Characters

  1. graph LR
  2.   A["A double quote:#quot;"] -->B["A dec char:#9829;"]
mermaid graph LR A["A double quote:#quot;"] -->B["A dec char:#9829;"]
  1. graph LR;
  2.   A-->B;
  3.   click A callback "Tooltip for a callback"
  4.   click B "http://www.github.com" "This is a tooltip for a link"
mermaid graph LR; A-->B; click A callback "Tooltip for a callback" click B "http://www.github.com" "This is a tooltip for a link"

Font Awesome

  1. graph TD
  2.   B["fa:fa-twitter for peace"]    
  3.   B-->C[fa:fa-ban forbidden]
  4.   B-->D(fa:fa-spinner)
  5.   B-->E(A fa:fa-camera-retro perhaps?)
mermaid 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?);

Basic Flowchart

  1. graph LR
  2.   A[Square Rect] -- Link text --> B((Circle))
  3.   A --> C(Round Rect)
  4.   B --> D{Rhombus}
  5.   C --> D
mermaid graph LR A[Square Rect] -- Link text --> B((Circle)) A --> C(Round Rect) B --> D{Rhombus} C --> D

Sequence Diagram

Syntax

  1. -> a solid line without arrow
  2. --> a dotted line without arrow
  3. ->> a solid line with arrowhead
  4. -->> a dotted line with arrowhead
  5. -x a solid line with a cross at the end (async)
  6. --x a dotted line with a cross at the end (async)

Generation

  1. sequenceDiagram
  2.   participant John
  3.   participant Alice
  4.   Alice->>John: Hello John, how are you?
  5.   John-->>Alice: Great!
mermaid sequenceDiagram participant John participant Alice Alice->>John: Hello John, how are you? John-->>Alice: Great!

Reference

[^1]: Github: https://github.com/knsv/mermaid[^2]: Mermaid Reference: http://knsv.github.io/mermaid/#mermaid[^3]: Gitbook Mermaid Plugin: https://plugins.gitbook.com/plugin/mermaid-gb3