mermaid

概述

Mermaid 是一个基于 JavaScript 的图表绘制工具。它的核心理念是：用简单的文本和 Markdown 类似的语法，就能快速生成各种专业图表。 无论您是写技术文档、项目报告，还是仅仅想在 GitHub Readme 中展示流程，Mermaid 都是一个极佳的选择，因为它能直接集成到 Markdown 文件中。

🌐 官方网站

Mermaid 的官方网站，您可以在这里找到完整的文档和在线编辑器：

https://mermaid.js.org/

✨ 核心优势

1. 易于编写： 语法简洁，比传统的绘图工具快得多。
2. 版本控制友好： 图表即代码（Diagrams as Code），可以和代码一起进行版本管理。
3. 兼容性强： 被许多平台（如 GitHub、GitLab、Jira、Obsidian 等）原生支持。

---

💡 快速入门示例

Mermaid 代码块使用 mermaid 标识符来标记。

1. 流程图 (Flowchart)

这是一个简单的项目决策流程图。

---
title: Node with text
---
graph TD
    A[开始: 新功能需求] --> B{是否批准?};
    B -- 是 --> C[开发新功能];
    B -- 否 --> D[拒绝并归档];
    C --> E[测试通过?];
    E -- 是 --> F(发布);
    E -- 否 --> C;

2. 时序图 (Sequence Diagram)

这是一个客户端与服务器交互的时序图。

---
config:
  title: Node

sequenceDiagram
participant C as 客户端
participant S as 服务器

C->>S: 发送请求(GET /data)
activate S
S-->>S: 内部处理数据
S->>C: 返回数据 (200 OK)
deactivate S
C->>C: 渲染页面</pre>

基础

如何控制图表方向 Direction

This statement declares the direction of the Flowchart.

This declares the flowchart is oriented from top to bottom (TD or TB).

• TB - Top to bottom
• TD - Top-down/ same as top to bottom
• BT - Bottom to top
• RL - Right to left
• LR - Left to right

从左到右

flowchart LR
	A[开始]---> B[结束]

从右到左

flowchart RL
	A[开始]---> B[结束]

从顶到底

flowchart TB
	A[开始]---> B[结束]

从底到顶

flowchart BT
	A[开始]---> B[结束]

节点形状

flowchart LR
    id1(This is the text in the box)
    id2([This is the text in the box])
    id3[[This is the text in the box]]
    id4[(Database)]
    id5((This is the text in the circle))
    id6>This is the text in the box]
    id7{This is the text in the box}
    id9[/This is the text in the box/]
    id10[\This is the text in the box\]
    A[/Christmas\]
    B[\Go shopping/]
    id11(((This is the text in the circle)))

占比图

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

状态图

---
title: Simple sample
---
stateDiagram-v2
	%% direction LR 可以这里制定方向
    [*] --> Still
    Still --> [*]

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

node直接的连接

flowchart LR
    A ---> B
    A2--->|text|B2
    A5 ===> B5
    a ---> b & c---> d
    A6 & B6---> C6 & D6
    A7 ---o B7

子图表

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

思维导图

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness
and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

treemap-beta

treemap-beta
"Section 1"
    "Leaf 1.1": 12
    "Section 1.2"
      "Leaf 1.2.1": 12
"Section 2"
    "Leaf 2.1": 20
    "Leaf 2.2": 25

packet

---
title: "TCP Packet"
---
packet
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106: "URG"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-255: "Data (variable length)"