Mermaid

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

Syntax

TB/TD - top bottom
BT - bottom top
RL - right left
LR - left right

Single Node

Node

A node is single a box/entity

graph LR
    id1
graph LR id1

Node with Title

graph LR
    id1[This is the text in the box]
graph LR id1[This is the text in the box]

Node with Round Borders

graph LR
    id1(This is the text in the box)
graph LR id1(This is the text in the box)

Node with Circle

graph LR
    id1((This is the text in the circle))
graph LR id1((This is the text in the circle))

Node with Asymmetric Shape

graph LR
    id1>This is the text in the box]
graph LR id1>This is the text in the box]

Node with Rhombus

graph LR
    id1{This is the text in the box}
graph LR id1{This is the text in the box}

Arrow Head

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

Flowchart

Top Down

graph TD
  A-->B
  A-->C
  B-->D
  C-->D
graph TD A-->B A-->C B-->D C-->D

Left Right

graph LR
  A-->B
  A-->C
  B-->D
  C-->D
graph LR A-->B A-->C B-->D C-->D

Special Characters

graph LR
  A["A double quote:#quot;"] -->B["A dec char:#9829;"]
graph LR A["A double quote:#quot;"] -->B["A dec char:#9829;"]
graph LR;
  A-->B;
  click A callback "Tooltip for a callback"
  click B "http://www.github.com" "This is a tooltip for a link"
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

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?)
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

graph LR
  A[Square Rect] -- Link text --> B((Circle))
  A --> C(Round Rect)
  B --> D{Rhombus}
  C --> D
graph LR A[Square Rect] -- Link text --> B((Circle)) A --> C(Round Rect) B --> D{Rhombus} C --> D

Sequence Diagram

Syntax

-> a solid line without arrow
--> a dotted line without arrow
->> a solid line with arrowhead
-->> a dotted line with arrowhead
-x a solid line with a cross at the end (async)
--x a dotted line with a cross at the end (async)

Generation

sequenceDiagram
  participant John
  participant Alice
  Alice->>John: Hello John, how are you?
  John-->>Alice: Great!
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

results matching ""

    No results matching ""