帮助文本管理
Mermaid is library that helps you generate diagrams, flowcharts, and piecharts from text in a similar manner as markdown.
With compose theme, you can use mermaid using a custom shortcode as follows:
Sequence Diagrams
Syntax
1{{< mermaid >}}
2sequenceDiagram
3 participant Alice
4 participant Bob
5 Alice->>John: Hello John, how are you?
6 loop Healthcheck
7 John->>John: Fight against hypochondria
8 end
9 Note right of John: Rational thoughts<br/>prevail...
10 John-->>Alice: Great!
11 John->>Bob: How about you?
12 Bob-->>John: Jolly good!
13{{< /mermaid >}}
Result
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts
prevail... John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
prevail... John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
Flow Charts
Syntax
1{{< mermaid >}}
2flowchart TB
3 c1-->a2
4 subgraph one
5 a1-->a2
6 end
7 subgraph two
8 b1-->b2
9 end
10 subgraph three
11 c1-->c2
12 end
13 one --> two
14 three --> two
15 two --> c2
16{{< /mermaid >}}
Result
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
Graphs
Syntax
1{{< mermaid >}}
2graph TB
3 sq[Square shape] --> ci((Circle shape))
4
5 subgraph A
6 od>Odd shape]-- Two line<br/>edge comment --> ro
7 di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
8 di==>ro2(Rounded square shape)
9 end
10
11 %% Notice that no text in shape are added here instead that is appended further down
12 e --> od3>Really long text with linebreak<br>in an Odd shape]
13
14 %% Comments after double percent signs
15 e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
16
17 cyr[Cyrillic]-->cyr2((Circle shape Начало));
18
19 classDef green fill:#9f6,stroke:#333,stroke-width:2px;
20 classDef orange fill:#f96,stroke:#333,stroke-width:4px;
21 class sq,e green
22 class di orange
23{{< /mermaid >}}
Result
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line
edge comment --> ro di{Diamond with
line break} -.-> ro(Rounded
square
shape) di==>ro2(Rounded square shape) end %% Notice that no text in shape are added here instead that is appended further down e --> od3>Really long text with linebreak
in an Odd shape] %% Comments after double percent signs e((Inner / circle
and some odd
special characters)) --> f(,.?!+-*ز) cyr[Cyrillic]-->cyr2((Circle shape Начало)); classDef green fill:#9f6,stroke:#333,stroke-width:2px; classDef orange fill:#f96,stroke:#333,stroke-width:4px; class sq,e green class di orange
edge comment --> ro di{Diamond with
line break} -.-> ro(Rounded
square
shape) di==>ro2(Rounded square shape) end %% Notice that no text in shape are added here instead that is appended further down e --> od3>Really long text with linebreak
in an Odd shape] %% Comments after double percent signs e((Inner / circle
and some odd
special characters)) --> f(,.?!+-*ز) cyr[Cyrillic]-->cyr2((Circle shape Начало)); classDef green fill:#9f6,stroke:#333,stroke-width:2px; classDef orange fill:#f96,stroke:#333,stroke-width:4px; class sq,e green class di orange
Syntax
1{{< mermaid >}}
2graph LR
3 A[Hard edge] -->|Link text| B(Round edge)
4 B --> C{Decision}
5 C -->|One| D[Result one]
6 C -->|Two| E[Result two]
7{{< /mermaid >}}
Result
graph LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
Class Diagram
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
State Diagram
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
stateDiagram-v2
State1: The state with a note
note right of State1
Important information! You can write
notes.
end note
State1 --> State2
note left of State2 : This is the note to the left.
Relationship Diagrams
Syntax
1{{< mermaid >}}
2erDiagram
3 CUSTOMER ||--o{ ORDER : places
4 ORDER ||--|{ LINE-ITEM : contains
5 CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
6{{< /mermaid >}}
Result
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
User Journey
Syntax
1{{< mermaid >}}
2journey
3 title My working day
4 section Go to work
5 Make tea: 5: Me
6 Go upstairs: 3: Me
7 Do work: 1: Me, Cat
8 section Go home
9 Go downstairs: 5: Me
10 Sit down: 5: Me
11{{< /mermaid >}}
Result
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
Gantt
Syntax
1{{< mermaid >}}
2gantt
3 dateFormat YYYY-MM-DD
4 title Adding GANTT diagram functionality to mermaid
5 excludes weekends
6 %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
7
8 section A section
9 Completed task :done, des1, 2014-01-06,2014-01-08
10 Active task :active, des2, 2014-01-09, 3d
11 Future task : des3, after des2, 5d
12 Future task2 : des4, after des3, 5d
13
14 section Critical tasks
15 Completed task in the critical line :crit, done, 2014-01-06,24h
16 Implement parser and jison :crit, done, after des1, 2d
17 Create tests for parser :crit, active, 3d
18 Future task in critical line :crit, 5d
19 Create tests for renderer :2d
20 Add to mermaid :1d
21
22 section Documentation
23 Describe gantt syntax :active, a1, after des1, 3d
24 Add gantt diagram to demo page :after a1 , 20h
25 Add another diagram to demo page :doc1, after a1 , 48h
26
27 section Last section
28 Describe gantt syntax :after doc1, 3d
29 Add gantt diagram to demo page :20h
30 Add another diagram to demo page :48h
31{{< /mermaid >}}
Result
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
Pie Chart
1{{< mermaid >}}
2pie
3 title Key elements in Product X
4 "Calcium" : 42.96
5 "Potassium" : 50.05
6 "Magnesium" : 10.01
7 "Iron" : 5
8{{< /mermaid >}}
Result
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5