本文主要介绍了如何快速绘制流程图、系统架构图和处理流程，以及如何在 Markdown 中渲染 Mermaid。

渲染 Mermaid

商业产品，支持高级功能，丰富的自定义，但是一般不太需要那么精美：https://www.mermaidchart.com/
vscode markdown 插件：Markdown Preview Mermaid Support 或者 Markdown Preview Mermaid Support，前者更加重，支持更多的功能。
draw.io：https://www.drawio.com/blog/mermaid-diagrams
各种markdown编辑器。
Excalidraw 的手绘风格，更加适合快速绘制：https://excalidraw.com/

Mermaid 流程图

Mermaid 的 flowchart（流程图） 是用来绘制流程图、系统架构图和处理流程的核心功能之一。以下是详细的语法和功能解释，涵盖基本用法、节点类型、箭头连接、条件分支等。

基本结构

Mermaid 的流程图以 flowchart 开头，后面跟方向标识，定义图表的布局方向.

flowchart LR
  A[Start] --> B[Process]
  B --> C[End]

D (Top to Down)：从上到下（默认方向）。
LR (Left to Right)：从左到右。
RL (Right to Left)：从右到左。
BT (Bottom to Top)：从下到上。

节点类型

节点类型	Mermaid 语法	描述
矩形	`A[矩形]`	标准的处理步骤
圆角矩形	`B(圆角矩形)`	过程（例如子过程）
菱形	`C{菱形}`	决策/分支
圆形	`D((圆形))`	起点或终点
六边形	`E{{六边形}}`	预定义的过程
平行四边形	`F[/平行四边形/]`	输入或输出
圆柱体	`G[(圆柱体)]`	数据存储或文件
尖角方框	`H>尖角方框]`	决策点，类似菱形

箭头类型

语法	效果	说明
`A --> B`	单向箭头	用于单向连接。
`A --- B`	更长的箭头	表示松散关系或注释连接。
`A -.-> B`	点线箭头	表示非直接关系。
`A ==> B`	粗箭头	强调某种重要连接。
`A --o B`	空心箭头	表示连接的方向。
`A --x B`	叉箭头	表示连接的终止。

此外如果需要在箭头上添加文字，可以使用 A -->|文本| B 的方式。
如果要区分不同的层级，可以增加 - 的数量，例如 A ---|文本| B。
条件分支可以使用 A -->|条件| B 的方式，其中条件可以是任意文本。

子图

可以将图表中的部分节点划分为子图，表示不同的模块或区域。语法如下

1
2
3

subgraph 子图名称
  节点定义
end

样式

可以用CSS语法来定义样式，但是个人感觉一般没必要弄那么复杂，展示清楚，或者增加必要的颜色区分就可以了。详细用法多看文档。

flowchart LR
  style A fill:#f9f,stroke:#333,stroke-width:4px
  style B fill:#bbf,stroke:#000,stroke-width:2px
    A[A矩形]
    B(B圆角矩形)
    C{C菱形}
    D((D圆形))
    E
    F[/平行四边形/]
    G[(G圆柱体)]
    H>尖角方框]


    A --> B
    B -.-> C
    C ---> |是| D
    C --> |否| E
    E ==> F
    A --o F
    A--x G
    G<-->H

    subgraph 子图
        B
        C
        D
    end

flowchart LR
  style A fill:#f9f,stroke:#333,stroke-width:4px
  style B fill:#bbf,stroke:#000,stroke-width:2px
    A[A矩形]
    B(B圆角矩形)
    C{C菱形}
    D((D圆形))
    E{{E六边形}}
    F[/平行四边形/]
    G[(G圆柱体)]
    H>尖角方框]


    A --> B
    B -.-> C
    C ---> |是| D
    C --> |否| E
    E ==> F
    A --o F
    A--x G
    G<-->H

    subgraph 子图
        B
        C
        D
    end