Mermaid简介
Mermaid 允许使用文本和代码创建图表和可视化效果。它是一个基于 JavaScript 的图表绘制和图表工具，可呈现受 Markdown 启发的文本定义，以动态创建和修改图表。
Mermaid使用方法
1、流程图（graph）
graph TD; A-->B; A-->C; B-->D;
graph LR A[Square Rect] -- Link text --> B((Circle)) A --> C(Round Rect) B --> D{Rhombus} C --> D
graph TB sq[Square shape] --> ci((Circle shape)) subgraph A od>Odd shape]-- Two line<br/>edge comment --> ro di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>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<br>in an Odd shape] %% Comments after double percent signs e((Inner / circle<br>and some odd <br>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
2、时序图(sequenceDiagram)
sequenceDiagram Alcie->>Johb:hello John, how are you? John-->>Alice:Great!
3、状态图（stateDiagram）
stateDiagram [*]-->s1 s1-->[*]
4、类图
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() }
5、甘特图（gantt）
gantt section Section Completed :done, des1, 2022-01-06,2022-01-08 Active :active, des2, 2022-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
6、饼图(pie)
pie title Key elements in Product X "Dogs" : 25 "Cats" : 25 "Rats" : 15 "Iron" : 35
7、需求图
flowchat st=>start: Start op=>operation: Your Operation cond=>condition: Yes or No? e=>end st->op->cond cond(yes)->e cond(no)->op
