Mermaid是一种基于Javascript的绘图工具，使用类似于Markdown的语法，使用户可以方便快捷地通过代码创建图表。对于支持Mermaid语法的Markdown编辑器，可以实现使用文本和代码方便的实现图表创建及可视化效果。使用时需要使用"mermaid"作为代码块的语言标识。

• Mermaid绘图语法特别适合在Markdown文档中文本化的嵌入简单的绘图，如Flowchart、UML diagrams等绘图；
• 当绘图含有较多元素时，受限于Markdown渲染体验可能较差（图较小），可以拆分为多个小图；
• 需用使用Mermaid实现复杂绘图（多元素），推荐使用Mermaid Chart原生支持工具（商业）或其他渲染工具；
• Mermaid支持多种绘图，Markdown嵌入或使用其他渲染工具时，需要注意检查所支持的图表语法；
• 标准UML标准绘图推荐PlantUML，非技术类或高自由度绘图推荐drawio；
• …

Mermaid官方：https://mermaid.js.org/#/README
Mermaid文档：https://mermaid.js.org/intro/

一、流程图（Flowchart）

示例

flowchart TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

flowchart LR;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

二、状态图（State diagrams）

示例

stateDiagram-v2
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

三、时序图（Sequence diagram）

示例

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 <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

四、类图（Class diagram）

示例

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

五、其他

• 用户体验图（userJourney）
  
• 甘特图（gantt）
  
• 饼图（pie）
  
• 象限图（quadrantChart）
  
• 需求图（requirementDiagram）
  
• Git图（gitgraph）
  
• 思维导图（mindmap）
  
• 时间线（timeline）
  
• XY表（xyChart）
  
• 块图（block）
  
• 包图（packet）