来源：https://github.com/mermaid-js/mermaid
文档：https://mermaid-js.github.io/mermaid/#/
Mermaid is a Javascript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
Doc-Rot is a Catch-22 that Mermaid helps to solve.
Diagramming and documentation costs precious developer time and gets outdated quickly. But not having diagrams or docs ruins productivity and hurts organizational learning. Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).
Mermaid allows even non-programmers to easily create detailed and diagrams through the Mermaid Live Editor. Tutorials has video tutorials. Use Mermaid with your favorite applications, check out the list of Integrations and Usages of Mermaid.
For a more detailed introduction to Mermaid and some of its more basic uses, look to the Beginner's Guide and Usage.
🌐 CDN | 📖 Documentation | 🙌 Contribution | 📜 Changelog
The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here jump into the text syntax.
Flowchart [docs - live editor]
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
Sequence diagram [docs - live editor]
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Gantt chart [docs - live editor]
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
Class diagram [docs - live editor]
classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
<<service>>
int id
size()
}
classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
<<service>>
int id
size()
}
State diagram [docs - live editor]
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Pie chart [docs - live editor]
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Git graph [experimental - live editor]
User Journey diagram [docs - live editor]
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: 3: Me
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: 3: Me
graph TD
subgraph Node
VolumeManager-.->Kubelet
DesiredStateOfWorldPopulator-.->VolumeManager
Reconciler-.->VolumeManager
end
graph TD
subgraph Node
VolumeManager-.->Kubelet
DesiredStateOfWorldPopulator-.->VolumeManager
Reconciler-.->VolumeManager
end
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
graph TD
PI[PodInformer]-. Event .->RSC[ReplicaSetController]
RSI[ReplicaSetInformer]-. Event .->RSC
RSC-->worker1
RSC-. Add ReplicaSet .->queue
worker1-. Loop .->worker1
queue-. Get ReplicaSet .->worker1
RSC-->worker2
worker2-. Loop .->worker2
queue-. Get ReplicaSet .->worker2
style worker1 fill:#fffede,stroke:#ebebb7
style worker2 fill:#fffede,stroke:#ebebb7
graph TD
Deployment-.->ReplicaSet
ReplicaSet-.->Pod1
ReplicaSet-.->Pod2
ReplicaSet-.->Pod3
flowchart TD
subgraph service[极速空间服务 cluster]
controller
end
controller-.->agent-1
controller-.->agent-2
controller-.->agent-3
controller-.->agent-4
subgraph cluster-1[智慧工程 cluster]
agent-1[agent]
agent-1-.->worker-1
agent-1-.->pvc-1
subgraph worker-1[worker]
workspace-1([极速空间])
end
pvc-1[(pvc)]
end
subgraph cluster-2[媒体软件 cluster]
agent-2[agent]
agent-2-.->worker-2
agent-2-.->pvc-2
subgraph worker-2[worker]
workspace-2([极速空间])
end
pvc-2[(pvc)]
end
subgraph cluster-3[平台软件 cluster]
agent-3[agent]
agent-3-.->worker-3
agent-3-.->pvc-3
subgraph worker-3[worker]
workspace-3([极速空间])
end
pvc-3[(pvc)]
end
subgraph cluster-4[balong cluster]
agent-4[agent]
agent-4-.->worker-4
agent-4-.->pvc-4
subgraph worker-4[worker]
workspace-4([极速空间])
end
pvc-4[(pvc)]
end
style controller fill:#C1FFE4
style agent-1 fill:#97CBFF
style agent-2 fill:#97CBFF
style agent-3 fill:#97CBFF
style agent-4 fill:#97CBFF
flowchart TD
controller
controller-.->label-1
controller-.->label-2
controller-.->label-3
subgraph label-1[智慧工程 label]
workspace-1([极速空间])
end
subgraph label-2[平台软件 label]
workspace-2([极速空间])
end
subgraph label-3[媒体软件 label]
workspace-3([极速空间])
end
storage[(storage)]
workspace-1-.-storage
workspace-2-.-storage
workspace-3-.-storage
style controller fill:#C1FFE4