Mermaid 流程图教程

基础语法

流程图由节点（Nodes）和连线（Edges）组成。

节点形状

你可以通过不同的括号定义节点形状：

代码示例：

graph LR
    id1[矩形节点]
    id2(圆角节点)
    id3{菱形节点}
    id4((圆形节点))

渲染结果：

graph LR
    id1[矩形节点]
    id2(圆角节点)
    id3{菱形节点}
    id4((圆形节点))

连线样式

Mermaid 支持多种连线方式：

代码示例：

graph TD
    A --> B
    C --- D
    E -- 描述 --> F
    G -.-> H
    I ==> J

渲染结果：

graph TD
    A --> B
    C --- D
    E -- 描述 --> F
    G -.-> H
    I ==> J

子图（Subgraphs）

你可以将相关的节点组织在子图中：

代码示例：

graph TB
    subgraph 客户端
        C1[浏览器]
        C2[App]
    end
    subgraph 服务端
        S1[API 服务器]
        S2[数据库]
    end
    C1 --> S1
    S1 --> S2

渲染结果：

graph TB
    subgraph 客户端
        C1[浏览器]
        C2[App]
    end
    subgraph 服务端
        S1[API 服务器]
        S2[数据库]
    end
    C1 --> S1
    S1 --> S2

立即练习

前往我们的 Mermaid 在线编辑器 尝试以上语法。通过实践，你将很快掌握流程图的绘制技巧。