【mermaid 绘图】学习总结

一、总览

参考链接

语法学习：https://www.processon.com/mermaid/flowchart

网友做的mermaid在线绘图工具：https://www.min2k.com/tools/mermaid/

什么是 Mermaid 语法？

mermaid是一种JavaScript库, 可以用于生成"饼形图(Pie Chart)流程图(Flow Chart)时序图(Sequence Diagram)状态图(State Diagram)甘特图(Gantt Diagram)类图(class Diagram)，用户旅程图"等各种图表。由于其简单易用、功能强大,越来越多的人开始使用它来创建图表。（我用Typora可以自动渲染，CSDN也行）

在哪用 Mermaid 语法出图？

使用一些专门支持 Mermaid 渲染的在线编辑器。网上一大堆。

在哪学习 Mermaid 语法？

链接：知乎-Mermaid 使用教程：从入门到精通，Process-on Mermaid语法，也可也配合AI工具生成Mermaid代码。也可也去官网。

二、快速入门指南

Mermaid 语法基础版

关于缩进：

尽管不同图表类型的要求不同，但为了保证代码的清晰、可维护并避免潜在的解析问题，强烈建议在所有 Mermaid 图表中都使用统一、规范的缩进（通常推荐2个空格）

2.1 流程图（Flowchart）

txt 复制代码

graph LR
    %% === 这样增加注释信息 ===
    A[Node 1]---B[Node 2];
    A-->D[Node 4];
    B-->|action|C[Node 3];
style A fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 9 9

action
Node 1
Node 2
Node 4
Node 3

graph ：关键字用于定义要给图表。（注意：新版用 flowchart 关键字替代了，graph太老不要用了）
ABCD为节点id，节点后中括号中的内容为节点注释。
style可根据节点id来设置节点格斯。
LR 参数：指定图标方向从左到右（类似的还有 TB,TD,LR,BT,RL，下面有详细介绍）
我们选择---或-->来绘制有箭头或没箭头的连接线。连接线后增加 |text|为线头注释。

2.2 序列图（Sequence Diagram）

复制代码

sequenceDiagram
   A->>B: Message 1
   B-->>A: Message 2

B A B A Message 1 Message 2

sequenceDiagram 关键字：用于定义一个序列图
定义了两个对象 A B
->>，-->> 分别为有箭头的实线和虚线。->，--> 分别为没有箭头的实线和虚线。
对信息的备注放到冒号之后。

2.3 甘特图（Gantt Chart）

复制代码

gantt
    title 【项目计划】
    dateFormat  YYYY-MM-DD 
    axisFormat  %m月%d日
    section 硬件设计   
        器件选型:  done, a1, 2026-02-01, 5d    # done表示干完了，a1是ID 
        原理图设计: active, a2, after a1, 10d  # active 表示正在进行，a2是ID ，after a1 为引用上一个任务
        硬件制板: a3, after a2, 15d
    section 软件开发   
        框架设计:  active, 2026-02-05, 5d   
        驱动开发: 2026-02-12, 10d
        应用开发: 2026-02-24, 7d
    section 项目节点
        里程碑1: milestone, 2026-02-15, 0d
        里程碑2: milestone, 2026-02-22, 0d

02月01日 02月03日 02月05日 02月07日 02月09日 02月11日 02月13日 02月15日 02月17日 02月19日 02月21日 02月23日 02月25日 02月27日 03月01日 03月03日器件选型框架设计原理图设计驱动开发里程碑1 硬件制板里程碑2 应用开发硬件设计软件开发项目节点【项目计划】

gantt 关键字：用于定义一个甘特图
title 关键字：用于定义图表标题
dateFormat ：用于定义日期格式，增加axisFormat %m月%d日来精确控制时间轴

2.4 饼图（Pie Chart）- 展示占比

复制代码

pie
   title Example Pie Chart
   "First slice": 30
   "Second slice": 20
   "Third slice": 50

50% 30% 20% Example Pie Chart First slice Second slice Third slice

pie 关键字：用于定义一个饼图
title ：用于定义图表标题。
更高版本还支持颜色修改：colors #4CAF50, #2196F3, #FFC107，可能是我这个Typora不支持。

Mermaid 语法高级版

常见的关键字或符号

--> 或 -|>：定义两个形状之间的连接，--> 表示直线连接，-|> 表示垂直连接。
--- 或 --：定义形状之间的水平或垂直线条。
=> 或 ==>：定义形状之间的带箭头的连接线，=> 表示直线箭头，==> 表示加粗实线箭头。
class 或 interface：定义一个类或接口形状。
participant：定义一个参与者形状。note：定义一个注释形状。
title：定义图表标题。
style：定义形状的样式。
click：定义一个可以单击的形状。
loop 或 alt：定义一个循环或条件块。
activate 或 deactivate：定义对象的激活或停用状态。
subroutine：定义一个子程序。

决定流程图从哪个方向到哪个方向绘制：

关键字	全称含义	布局方向	适用场景
TB	Top to Bottom	从上到下	最通用的流程图，如组织结构图、决策树。
TD	Top-Down	从上到下	同 TB，是 Mermaid 的默认设置。
LR	Left to Right	从左到右	适合步骤较多、横向展示的流程，如时间轴、CI/CD流水线。
BT	Bottom to Top	从下到上	较少用，通常用于逆向流程或依赖回溯。
RL	Right to Left	从右到左	较少用，通常用于适配从右向左阅读的语言环境。

除此之外，其他语法规则详情可以参考 Mermaid 的文档。

2.6 subgraph 基本绘图及连线格式

使用 graph 和 subgraph 关键字可以帮助我们更好地组织和管理复杂的流程图（subgraph 需匹配 end），将相关的形状分组并以更清晰的方式呈现。-.->就可以实现虚线的效果。==> ：加粗实线箭头（强调重点）,-.-：虚线（无箭头），--x：实线末端带叉号（表示阻断或错误）<-->可表示双向箭头。其他的还有，不常用。

txt 复制代码

graph LR
	subgraph Subgraph A
        B1 --> C1
        C1 --> D1
    end
    A <--> B1
    A --> B
    B ==> C1
    B --> C
    C -.- D1

Subgraph A
B1
C1
D1
A
B
C

2.7 style - 设置形状的样式和颜色 - 暂时没用

style 关键字的语法如下:

shell 复制代码

style <shape-id> <style-attr>:<style-value>[;<style-attr>:<style-value>]...

<shape-id> 是形状的 ID,
<style-attr> 是样式属性，
<style-value> 是样式属性的值。可以为形状设置多个样式属性，多个样式属性之间用分号 ; 分隔。

txt 复制代码

graph LR;
  A[Square] --> B((Circle));
  C(Rectangle) --> D{Diamond};

  style A fill:#f9c;
  style B stroke:#333,stroke-width:4px;
  style C fill:#f96,stroke:#333,stroke-width:2px;
  style D fill:#fc9,stroke:#f63,stroke-width:4px,stroke-dasharray: 5 5;

Square
Circle
Rectangle
Diamond

2.7 loop 和 alt - 让一个形状重复多次 - 暂时没用

语法如下：

复制代码

loop [循环次数]
   [形状 1]
   [形状 2]
   ...
end

2.8 alt 关键字用于定义一个条件块，它可以根据条件选择不同的路径

语法如下：

复制代码

loop [循环次数]
   [形状 1]
   [形状 2]
   ...
end

Mermaid 绘图-例子

2.9 Flowchart 流程图（graph的升级版）

在 Mermaid 中，flowchart 和 graph 都可以用来绘制流程图，但它们之间存在代际差异。简单来说，**flowchart 是 graph 的现代化、功能更强的继任者，也是官方推荐用于新项目的语法。**你可以将 graph 理解为旧版语法，主要用于向后兼容；而 flowchart 则是当前和未来的标准，提供了更强大的功能和更稳定的渲染效果。

复制代码

flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

Link text
One
Two
Hard edge
Round edge
Decision
Result one
Result two

2.10 Sequence diagram (没用到)

序列图（也叫时序图）描述的是随时间发生的动态交互。它就像电影剧本，展示了在某个具体的业务流程中，不同的角色（用户、系统、数据库）是谁先说话，谁后说话，传递了什么消息。

应用场景与领域：

领域：API 接口设计、微服务架构、复杂业务逻辑梳理。
场景：
- 接口开发：前端问后端要数据，后端去查数据库，数据库返回，后端再返回给前端。这个"一来一回"的过程必须用序列图画清楚。
- 故障排查：系统报错了，通过序列图看看到底是哪一步卡住了（是支付网关没响应？还是数据库连不上？）。
- 支付流程：下单 -> 扣款 -> 通知商家 -> 发货，这种有时间先后顺序的流程。

John Bob Alice John Bob Alice loop [Healthcheck] Rational thoughts prevail! Hello John, how are you? Fight against hypochondria Great! How about you? Jolly good!

2.11 Class diagram （没用到）

应用场景与领域：

领域：面向对象编程（如 Java, C++, Python, C# 开发）。
场景：
- 数据库设计：设计表结构时，用类图理清用户、订单、商品之间的关系（比如一个用户对应多个订单）。
- 代码重构：当代码乱成一团麻时，画个类图看看哪里耦合太紧。
- 新人入职：给新程序员看类图，让他一眼看懂整个系统的骨架。

Cool
Where am i?
Cool label
Class01
int chimp
int gorilla
size()
AveryLongClass
Class03
Class04
Class05
Class06
Class07
Object[] elementData
equals()
Class08
Class09
C2
C3

2.12 State Diagram-v2 - 状态图

状态图中的核心概念：

状态 (State)：对象在特定时刻所处的状况。例如，一台洗衣机的状态可以是"空闲"、"正在洗涤"、"脱水"。
转换 (Transition) ：从一个状态变化到另一个状态的过程，通常由某个事件或条件触发。

步骤：

Mermaid 画一个状态图。推荐使用 stateDiagram-v2，它功能更全，渲染效果更好。
定义起始与结束状态：起始状态 ：[*] --> 你的第一个状态；结束状态 ：你的最后一个状态 --> [*]
定义状态与转换：添加更多的状态，并用箭头 --> 将它们连接起来，表示状态的转换。
为转换添加描述（事件）：在箭头后面加上 : 事件描述，说明是什么触发了这次状态变化。
通过 direction 关键字来改变状态图的布局方向。（TB,TD,LR,BT,RL）

复合状态（嵌套）：state 状态名 { ... } 来定义复合状态。例如，"已支付"状态内部可能包含"配货"和"打包"两个子步骤。

复制代码

stateDiagram-v2
    direction LR
    [*] --> 待支付
    待支付 --> 已支付: 支付成功
    
    state 已支付 {
        direction LR
        [*] --> 配货中
        配货中 --> 打包中
        打包中 --> [*]
    }
    
    已支付 --> 已发货: 发货完成
    已发货 --> 已完成
    已完成 --> [*]

支付成功
发货完成
待支付
已支付
配货中
打包中
已发货
已完成

选择与分支：

当状态的转换取决于某个条件时，可以使用 <<choice>> 伪状态来表示一个决策点。
尝试支付
$支付成功$ $支付失败$
用户重试
待支付
支付处理中
已支付
支付失败
已完成
样式定制 与无障碍辅助
- 定义样式 (classDef)：语法：classDef 类名样式属性;这样就可以定义一个样式类 。（可以定义填充颜色 (fill)、字体颜色及加粗 (color:white,font-weight:bold)、边框及颜色 (stroke-width:2px,stroke:yellow)
- 使用三个冒号 ::: 将样式类绑定到具体的状态节点上。
- 无障碍辅助：为了提升视障人士的可读性而加入的功能，后面的描述文字可以用来描述这个流程图在干什么。
  复制代码
```
   accTitle: 这是个售货机。
   accDescr: 这是个售货机交易流程图。
```

This is the accessible title This is an accessible description action1
action2
action3
Still
Moving
Crash

2.13 Git graph (没用到)

main develop 0-c27aea4 1-96bd65e 2-1efc9bc 3-142fc12 4-82f2f6d 5-115c62c 6-2e975c4 8-dca1dcb 9-c29a04e

2.14 C4 Diagrams (没用到)

C4 模型（C4 Model）可以说是软件架构领域的"地图导航系统"。

如果说刚才聊的类图是"显微镜"（看代码细节），序列图 是"录像机"（看运行过程），那么 C4 图就是"地图集" 。它专门用来解决一个痛点：如何向不同的人讲清楚一个复杂的软件系统长什么样。它通常出现在中大型系统的架构设计文档 、技术评审会 或者新员工入职手册里。

C4 模型的核心思想是**"分层"**，就像地图可以缩放一样，它把架构图分成了 4 个层级（4个C），每个层级对应不同的听众。

🗺️ C4 模型的四个层级（什么时候用哪个？）

系统上下文图 (System Context) ------ "上帝视角"

什么时候用：项目启动会、给老板/非技术人员汇报、向外部人员介绍系统时。
画什么：你的系统在整个世界里的位置。
内容：只显示你的系统 （作为一个黑盒）和外部用户 （人）、外部系统（如银行接口、邮件服务）的关系。
潜台词："别管里面怎么写，我们系统就是帮用户解决这个问题的，跟这些外部系统打交道。"

容器图 (Container) ------ "架构师视角"

什么时候用：技术选型、架构评审、前后端分离讨论、部署方案制定时。
画什么：系统里用了哪些独立运行的技术组件。
内容：Web应用、移动App、微服务、数据库、文件存储等。这里会标注技术栈（如 React, Spring Boot, MySQL）。
潜台词："我们要用 React 写前端，Java 写后端，数据存 MySQL，它们之间通过 HTTP 通信。"

组件图 (Component) ------ "开发组长视角"

什么时候用：模块设计、代码分工、定义接口契约时。
画什么：某个"容器"（比如后端服务）内部的功能模块划分。
内容：控制器、服务层、仓储层、第三方库等。
潜台词："在这个后端服务里，用户模块负责登录，订单模块负责算钱，它们之间怎么调用要定好。"

代码图 (Code) ------ "程序员视角"

什么时候用：极少手绘。通常由 IDE 自动生成，或者在极其复杂的算法逻辑设计时使用。
画什么：类图（Class Diagram）、数据库表结构。
注意：C4 模型官方其实不推荐专门去画这个级别的图，因为代码变动太快，画了容易过时，直接看代码或让 IDE 生成更好。

<<person>> Banking Customer A A customer of the bank, with personal bank accounts. <<person>> Banking Customer B <<external_person>> Banking Customer C desc <<person>> Banking Customer D A customer of the bank, with personal bank accounts. <<system>> Internet Banking System Allows customers to view information about their bank accounts, and make payments. <<external_system_db>> Mainframe Banking System Stores all of the core banking information about customers, accounts, transactions, etc. <<external_system>> E-mail system The internal Microsoft Exchange e-mail system. <<system_db>> Banking System D Database A system of the bank, with personal bank accounts. <<system>> Banking System A <<system>> Banking System B A system of the bank, with personal bank accounts. next line. BankBoundary2 [SYSTEM] <<system_queue>> Banking System F Queue A system of the bank. <<external_system_queue>> Banking System G Queue A system of the bank, with personal bank accounts. BankBoundary3 [boundary] BankBoundary [ENTERPRISE] BankBoundary0 [ENTERPRISE] Uses Uses Sends e-mails [SMTP] Sends e-mails to System Context diagram for Internet Banking System

2.15 mermaid - 思维导图 (没用到)
项目计划
需求分析
问卷与访谈
竞品分析 >SWOT 分析]
开发阶段
前端开发
fa fa-paint-brush
页面切图
后端开发
fa fa-database
接口编写
上线部署
测试验收
正式发布