Skip to content

Latest commit

 

History

History
410 lines (330 loc) · 4.73 KB

mermaid.md

File metadata and controls

410 lines (330 loc) · 4.73 KB

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
```mermaid graph LR id1 ```

Node with Title

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

Node with Round Borders

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

Node with Circle

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

Node with Asymmetric Shape

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

Node with Rhombus

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

Links Between Nodes

Arrow Head

graph LR
  A-->B
```mermaid graph LR A-->B ``` 
graph LR
  A---B
```mermaid graph LR A---B ```

Link with Text

graph LR
  A-- This is the text -->B
```mermaid graph LR A-- This is the text -->B ``` 
graph LR
  A-- This is the text ---B
```mermaid graph LR A-- This is the text ---B ```

Dotted Link

graph LR
  A-.-B
```mermaid graph LR A-.-B ``` 
graph LR
  A-.->B
```mermaid graph LR A-.->B ``` 
graph LR
  A-. This is the text .-B
```mermaid graph LR A-. This is the text .-B ``` 
graph LR
  A-. This is the text .->B
```mermaid graph LR A-. This is the text .->B ```

Thick Link

graph LR
  A==>B
```mermaid graph LR A==>B ``` 
graph LR
  A===B
```mermaid graph LR A===B ``` 
graph LR
  A== This is the text ===B
```mermaid graph LR A== This is the text ===B ``` 
graph LR
  A== This is the text ==>B
```mermaid graph LR A== This is the text ==>B ```

Flowchart

Top Down

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

Left Right

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

Special Characters

graph LR
  A["A double quote:#quot;"] -->B["A dec char:#9829;"]
```mermaid graph LR A["A double quote:#quot;"] -->B["A dec char:#9829;"] ```

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

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

graph LR
  A[Square Rect] -- Link text --> B((Circle))
  A --> C(Round Rect)
  B --> D{Rhombus}
  C --> D
```mermaid 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!
```mermaid sequenceDiagram participant John participant Alice Alice->>John: Hello John, how are you? John-->>Alice: Great! ```

Reference

Footnotes

  1. Github: https://github.com/knsv/mermaid ↩