PuGong

Mermaid Samples

03 May 2020

Mermaid, a simple markdown-like script language for generating charts from text via javascript.

Flowchart

TopDown flowchart

graph TD
A[CEO] -->B[CTO]
A -->C[CF0]
B -->D[Framework Dev Team]
B -->E[Arch Dev Team]
B -->F[CommaonBiz Dev Team]
B -->G[Core Biz Dev Team]
C -->H[Finance Dept]

LeftRight Flowchart

graph LR
A[Step 1] -->|Yes|B[Step 2]
A -->|No|C[Another 2]
B -->D[Result]
C -->D

More about flowchart

Sequence Diagram

sequenceDiagram
    Client->>Service: Request
    activate Service
    Service-->>Client: Response
    deactivate Service

More about Sequence Diagram

Gratt

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Project 1
    Perpair           :a1, 2019-01-01, 10d
    Processing     :after a1, 20d
    section Project 2
    Init      :2019-01-12, 5d
    Processing     : 24d

More about Gratt

Reference

Mermaid Doc

Mermaid Source