Mermaid 是一个基于文本的图表绘制工具，让你像写代码一样创建流程图、时序图、甘特图等。它被广泛应用于技术博客、项目文档和知识库中。本文为你梳理了一套从零到一的入门路径，涵盖核心语法、关键字速查、实用编辑技巧和常见问题，读完即可上手绘制专业图表。
1. 认识 Mermaid：为什么要用文本绘图？
Mermaid = “美人鱼”，它允许你用类似 Markdown 的简单文本语法定义图表，然后由 JavaScript 渲染成 SVG/PNG。
传统绘图方式的痛点：
- 拖拽对齐耗时
- 版本管理困难（二进制图片）
- 难以协作和自动化
Mermaid 的优势：
- 纯文本，可纳入 Git 版本控制
- 语法简洁，学习曲线极低
- 生态丰富，GitHub、GitLab、Notion、Obsidian 等原生支持
- 易于集成，可直接嵌入 Markdown 或网页
2. 快速开始：一个流程图的最小示例
Mermaid 代码块通常用 ```mermaid 包裹，内部以图表类型关键字开头。
最小示例：
#mermaid-svg-2HtTrM5FffBp2Ink{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-2HtTrM5FffBp2Ink .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-2HtTrM5FffBp2Ink .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-2HtTrM5FffBp2Ink .error-icon{fill:#552222;}#mermaid-svg-2HtTrM5FffBp2Ink .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-2HtTrM5FffBp2Ink .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-2HtTrM5FffBp2Ink .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-2HtTrM5FffBp2Ink .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-2HtTrM5FffBp2Ink .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-2HtTrM5FffBp2Ink .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-2HtTrM5FffBp2Ink .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-2HtTrM5FffBp2Ink .marker{fill:#333333;stroke:#333333;}#mermaid-svg-2HtTrM5FffBp2Ink .marker.cross{stroke:#333333;}#mermaid-svg-2HtTrM5FffBp2Ink svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-2HtTrM5FffBp2Ink p{margin:0;}#mermaid-svg-2HtTrM5FffBp2Ink .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-2HtTrM5FffBp2Ink .cluster-label text{fill:#333;}#mermaid-svg-2HtTrM5FffBp2Ink .cluster-label span{color:#333;}#mermaid-svg-2HtTrM5FffBp2Ink .cluster-label span p{background-color:transparent;}#mermaid-svg-2HtTrM5FffBp2Ink .label text,#mermaid-svg-2HtTrM5FffBp2Ink span{fill:#333;color:#333;}#mermaid-svg-2HtTrM5FffBp2Ink .node rect,#mermaid-svg-2HtTrM5FffBp2Ink .node circle,#mermaid-svg-2HtTrM5FffBp2Ink .node ellipse,#mermaid-svg-2HtTrM5FffBp2Ink .node polygon,#mermaid-svg-2HtTrM5FffBp2Ink .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-2HtTrM5FffBp2Ink .rough-node .label text,#mermaid-svg-2HtTrM5FffBp2Ink .node .label text,#mermaid-svg-2HtTrM5FffBp2Ink .image-shape .label,#mermaid-svg-2HtTrM5FffBp2Ink .icon-shape .label{text-anchor:middle;}#mermaid-svg-2HtTrM5FffBp2Ink .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-2HtTrM5FffBp2Ink .rough-node .label,#mermaid-svg-2HtTrM5FffBp2Ink .node .label,#mermaid-svg-2HtTrM5FffBp2Ink .image-shape .label,#mermaid-svg-2HtTrM5FffBp2Ink .icon-shape .label{text-align:center;}#mermaid-svg-2HtTrM5FffBp2Ink .node.clickable{cursor:pointer;}#mermaid-svg-2HtTrM5FffBp2Ink .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-2HtTrM5FffBp2Ink .arrowheadPath{fill:#333333;}#mermaid-svg-2HtTrM5FffBp2Ink .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-2HtTrM5FffBp2Ink .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-2HtTrM5FffBp2Ink .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-2HtTrM5FffBp2Ink .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-2HtTrM5FffBp2Ink .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-2HtTrM5FffBp2Ink .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-2HtTrM5FffBp2Ink .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-2HtTrM5FffBp2Ink .cluster text{fill:#333;}#mermaid-svg-2HtTrM5FffBp2Ink .cluster span{color:#333;}#mermaid-svg-2HtTrM5FffBp2Ink div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-2HtTrM5FffBp2Ink .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-2HtTrM5FffBp2Ink rect.text{fill:none;stroke-width:0;}#mermaid-svg-2HtTrM5FffBp2Ink .icon-shape,#mermaid-svg-2HtTrM5FffBp2Ink .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-2HtTrM5FffBp2Ink .icon-shape p,#mermaid-svg-2HtTrM5FffBp2Ink .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-2HtTrM5FffBp2Ink .icon-shape .label rect,#mermaid-svg-2HtTrM5FffBp2Ink .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-2HtTrM5FffBp2Ink .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-2HtTrM5FffBp2Ink .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-2HtTrM5FffBp2Ink :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}
是
否
起床
外面下雨吗?
带伞
出门
渲染效果：一个从上到下(TD)的流程图，包含矩形节点、菱形判断节点和带标签的连线。
在哪里写？
- 在线编辑器：Mermaid Live Editor 实时预览，最适合学习。
- 本地 VS Code：安装插件 Markdown Preview Mermaid Support 可直接在 .md 预览。
- 嵌入 Markdown：支持 Mermaid 的平台（GitHub、Typora、Obsidian）只需用 ```mermaid 代码块即可。
3. 核心图表类型及语法详解
Mermaid 支持十几种图表，下面重点讲解最常用的 6 种，每种都配备关键字总结和示例。
3.1 流程图 (Flowchart) — 最通用的图表
用途：展示步骤流程、决策分支、逻辑判断。
基本结构：
渲染错误: Mermaid 渲染失败: Lexical error on line 1. Unrecognized text. graph 方向 节点定义 连线定 —–^
方向关键字：
- TB 或 TD — 从上到下
- BT — 从下到上
- LR — 从左到右
- RL — 从右到左
节点形状速查（括号定形状）：
| A[矩形] | 标准矩形 | Start[开始] |
| B(圆角矩形) | 圆角矩形 | Process(处理) |
| C([体育场形]) | 两侧圆弧形 | C([结束]) |
| D[[子程序形]] | 带边框的子程序 | D[[子流程]] |
| E[(数据库)] | 圆柱体 | DB[(数据库)] |
| F((圆形)) | 圆形 | F((起始)) |
| G>不对称形] | 旗帜形 | G>输入] |
| H{菱形} | 判断/决策 | H{是否通过?} |
| I{{六边形}} | 准备/准备 | I{{初始化}} |
连线类型：
- –> 带箭头实线
- — 无箭头实线
- -.-> 虚线箭头
- ==> 粗线箭头
- 可在连线上添加文字：–>|是|、—文字—
子图 (subgraph)：
#mermaid-svg-WDkkoEOxFqAmk3SL{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-WDkkoEOxFqAmk3SL .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-WDkkoEOxFqAmk3SL .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-WDkkoEOxFqAmk3SL .error-icon{fill:#552222;}#mermaid-svg-WDkkoEOxFqAmk3SL .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-WDkkoEOxFqAmk3SL .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-WDkkoEOxFqAmk3SL .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-WDkkoEOxFqAmk3SL .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-WDkkoEOxFqAmk3SL .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-WDkkoEOxFqAmk3SL .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-WDkkoEOxFqAmk3SL .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-WDkkoEOxFqAmk3SL .marker{fill:#333333;stroke:#333333;}#mermaid-svg-WDkkoEOxFqAmk3SL .marker.cross{stroke:#333333;}#mermaid-svg-WDkkoEOxFqAmk3SL svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-WDkkoEOxFqAmk3SL p{margin:0;}#mermaid-svg-WDkkoEOxFqAmk3SL .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-WDkkoEOxFqAmk3SL .cluster-label text{fill:#333;}#mermaid-svg-WDkkoEOxFqAmk3SL .cluster-label span{color:#333;}#mermaid-svg-WDkkoEOxFqAmk3SL .cluster-label span p{background-color:transparent;}#mermaid-svg-WDkkoEOxFqAmk3SL .label text,#mermaid-svg-WDkkoEOxFqAmk3SL span{fill:#333;color:#333;}#mermaid-svg-WDkkoEOxFqAmk3SL .node rect,#mermaid-svg-WDkkoEOxFqAmk3SL .node circle,#mermaid-svg-WDkkoEOxFqAmk3SL .node ellipse,#mermaid-svg-WDkkoEOxFqAmk3SL .node polygon,#mermaid-svg-WDkkoEOxFqAmk3SL .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-WDkkoEOxFqAmk3SL .rough-node .label text,#mermaid-svg-WDkkoEOxFqAmk3SL .node .label text,#mermaid-svg-WDkkoEOxFqAmk3SL .image-shape .label,#mermaid-svg-WDkkoEOxFqAmk3SL .icon-shape .label{text-anchor:middle;}#mermaid-svg-WDkkoEOxFqAmk3SL .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-WDkkoEOxFqAmk3SL .rough-node .label,#mermaid-svg-WDkkoEOxFqAmk3SL .node .label,#mermaid-svg-WDkkoEOxFqAmk3SL .image-shape .label,#mermaid-svg-WDkkoEOxFqAmk3SL .icon-shape .label{text-align:center;}#mermaid-svg-WDkkoEOxFqAmk3SL .node.clickable{cursor:pointer;}#mermaid-svg-WDkkoEOxFqAmk3SL .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-WDkkoEOxFqAmk3SL .arrowheadPath{fill:#333333;}#mermaid-svg-WDkkoEOxFqAmk3SL .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-WDkkoEOxFqAmk3SL .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-WDkkoEOxFqAmk3SL .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-WDkkoEOxFqAmk3SL .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-WDkkoEOxFqAmk3SL .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-WDkkoEOxFqAmk3SL .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-WDkkoEOxFqAmk3SL .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-WDkkoEOxFqAmk3SL .cluster text{fill:#333;}#mermaid-svg-WDkkoEOxFqAmk3SL .cluster span{color:#333;}#mermaid-svg-WDkkoEOxFqAmk3SL div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-WDkkoEOxFqAmk3SL .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-WDkkoEOxFqAmk3SL rect.text{fill:none;stroke-width:0;}#mermaid-svg-WDkkoEOxFqAmk3SL .icon-shape,#mermaid-svg-WDkkoEOxFqAmk3SL .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-WDkkoEOxFqAmk3SL .icon-shape p,#mermaid-svg-WDkkoEOxFqAmk3SL .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-WDkkoEOxFqAmk3SL .icon-shape .label rect,#mermaid-svg-WDkkoEOxFqAmk3SL .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-WDkkoEOxFqAmk3SL .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-WDkkoEOxFqAmk3SL .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-WDkkoEOxFqAmk3SL :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}
服务端
客户端
浏览器
前端
API
数据库
样式控制：
- 使用 style 命令：style A fill:#f9f,stroke:#333,stroke-width:2px
- 使用 classDef 定义样式类：classDef highlight fill:#ff0; class A highlight
关键字汇总： graph, subgraph, end, style, classDef, class, TB, LR, 各种括号形状。
3.2 时序图 (Sequence Diagram) — 交互过程可视化
用途：描述对象之间的消息传递顺序，如 API 调用、登录流程。
基本结构：
渲染错误: Mermaid 渲染失败: Parse error on line 4: …cipant 参与者2 交互描述 ———————-^ Expecting '()', 'SOLID_OPEN_ARROW', 'DOTTED_OPEN_ARROW', 'SOLID_ARROW', 'SOLID_ARROW_TOP', 'SOLID_ARROW_BOTTOM', 'STICK_ARROW_TOP', 'STICK_ARROW_BOTTOM', 'SOLID_ARROW_TOP_DOTTED', 'SOLID_ARROW_BOTTOM_DOTTED', 'STICK_ARROW_TOP_DOTTED', 'STICK_ARROW_BOTTOM_DOTTED', 'SOLID_ARROW_TOP_REVERSE', 'SOLID_ARROW_BOTTOM_REVERSE', 'STICK_ARROW_TOP_REVERSE', 'STICK_ARROW_BOTTOM_REVERSE', 'SOLID_ARROW_TOP_REVERSE_DOTTED', 'SOLID_ARROW_BOTTOM_REVERSE_DOTTED', 'STICK_ARROW_TOP_REVERSE_DOTTED', 'STICK_ARROW_BOTTOM_REVERSE_DOTTED', 'BIDIRECTIONAL_SOLID_ARROW', 'DOTTED_ARROW', 'BIDIRECTIONAL_DOTTED_ARROW', 'SOLID_CROSS', 'DOTTED_CROSS', 'SOLID_POINT', 'DOTTED_POINT', got 'NEWLINE'
参与者：
- 自动创建：A->>B: 消息 会自动创建 A 和 B
- 显式定义别名：participant A as 用户
- 参与者类型：actor 用户（人形图标）
箭头与消息：
- ->> 实线箭头（同步消息）
- –>> 虚线箭头（返回消息）
- –) 异步消息（空心箭头）
- -x 异步消息（叉号结尾）
- 在箭头上加激活框：activate B / deactivate B，或在消息后加 + / -：A->>+B: 请求 B–>>-A: 响应
注释：
- Note right of A: 文本 或 Note over A,B: 跨越两人的注释
循环、条件、并行：
系统
用户
系统
用户
#mermaid-svg-dypP4ppjfIUoXBEf{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-dypP4ppjfIUoXBEf .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-dypP4ppjfIUoXBEf .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-dypP4ppjfIUoXBEf .error-icon{fill:#552222;}#mermaid-svg-dypP4ppjfIUoXBEf .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-dypP4ppjfIUoXBEf .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-dypP4ppjfIUoXBEf .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-dypP4ppjfIUoXBEf .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-dypP4ppjfIUoXBEf .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-dypP4ppjfIUoXBEf .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-dypP4ppjfIUoXBEf .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-dypP4ppjfIUoXBEf .marker{fill:#333333;stroke:#333333;}#mermaid-svg-dypP4ppjfIUoXBEf .marker.cross{stroke:#333333;}#mermaid-svg-dypP4ppjfIUoXBEf svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-dypP4ppjfIUoXBEf p{margin:0;}#mermaid-svg-dypP4ppjfIUoXBEf .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-dypP4ppjfIUoXBEf text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-dypP4ppjfIUoXBEf .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-dypP4ppjfIUoXBEf .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-dypP4ppjfIUoXBEf .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-dypP4ppjfIUoXBEf .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-dypP4ppjfIUoXBEf #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-dypP4ppjfIUoXBEf .sequenceNumber{fill:white;}#mermaid-svg-dypP4ppjfIUoXBEf #sequencenumber{fill:#333;}#mermaid-svg-dypP4ppjfIUoXBEf #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-dypP4ppjfIUoXBEf .messageText{fill:#333;stroke:none;}#mermaid-svg-dypP4ppjfIUoXBEf .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-dypP4ppjfIUoXBEf .labelText,#mermaid-svg-dypP4ppjfIUoXBEf .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-dypP4ppjfIUoXBEf .loopText,#mermaid-svg-dypP4ppjfIUoXBEf .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-dypP4ppjfIUoXBEf .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-dypP4ppjfIUoXBEf .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-dypP4ppjfIUoXBEf .noteText,#mermaid-svg-dypP4ppjfIUoXBEf .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-dypP4ppjfIUoXBEf .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-dypP4ppjfIUoXBEf .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-dypP4ppjfIUoXBEf .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-dypP4ppjfIUoXBEf .actorPopupMenu{position:absolute;}#mermaid-svg-dypP4ppjfIUoXBEf .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-dypP4ppjfIUoXBEf .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-dypP4ppjfIUoXBEf .actor-man circle,#mermaid-svg-dypP4ppjfIUoXBEf line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-dypP4ppjfIUoXBEf :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}
alt
[成功]
[失败]
loop
[每分钟一次]
提交请求
200 OK
500 错误
心跳检测
关键字汇总： sequenceDiagram, participant, actor, activate, deactivate, Note, loop, alt, else, opt, par, and, end。
3.3 类图 (Class Diagram) — 面向对象设计
用途：展示类、接口及它们之间的关系（继承、实现、关联等）。
基本类定义：
#mermaid-svg-vt8dSwC7uNinkonb{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-vt8dSwC7uNinkonb .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-vt8dSwC7uNinkonb .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-vt8dSwC7uNinkonb .error-icon{fill:#552222;}#mermaid-svg-vt8dSwC7uNinkonb .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-vt8dSwC7uNinkonb .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-vt8dSwC7uNinkonb .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-vt8dSwC7uNinkonb .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-vt8dSwC7uNinkonb .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-vt8dSwC7uNinkonb .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-vt8dSwC7uNinkonb .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-vt8dSwC7uNinkonb .marker{fill:#333333;stroke:#333333;}#mermaid-svg-vt8dSwC7uNinkonb .marker.cross{stroke:#333333;}#mermaid-svg-vt8dSwC7uNinkonb svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-vt8dSwC7uNinkonb p{margin:0;}#mermaid-svg-vt8dSwC7uNinkonb g.classGroup text{fill:#9370DB;stroke:none;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:10px;}#mermaid-svg-vt8dSwC7uNinkonb g.classGroup text .title{font-weight:bolder;}#mermaid-svg-vt8dSwC7uNinkonb .cluster-label text{fill:#333;}#mermaid-svg-vt8dSwC7uNinkonb .cluster-label span{color:#333;}#mermaid-svg-vt8dSwC7uNinkonb .cluster-label span p{background-color:transparent;}#mermaid-svg-vt8dSwC7uNinkonb .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-vt8dSwC7uNinkonb .cluster text{fill:#333;}#mermaid-svg-vt8dSwC7uNinkonb .cluster span{color:#333;}#mermaid-svg-vt8dSwC7uNinkonb .nodeLabel,#mermaid-svg-vt8dSwC7uNinkonb .edgeLabel{color:#131300;}#mermaid-svg-vt8dSwC7uNinkonb .edgeLabel .label rect{fill:#ECECFF;}#mermaid-svg-vt8dSwC7uNinkonb .label text{fill:#131300;}#mermaid-svg-vt8dSwC7uNinkonb .labelBkg{background:#ECECFF;}#mermaid-svg-vt8dSwC7uNinkonb .edgeLabel .label span{background:#ECECFF;}#mermaid-svg-vt8dSwC7uNinkonb .classTitle{font-weight:bolder;}#mermaid-svg-vt8dSwC7uNinkonb .node rect,#mermaid-svg-vt8dSwC7uNinkonb .node circle,#mermaid-svg-vt8dSwC7uNinkonb .node ellipse,#mermaid-svg-vt8dSwC7uNinkonb .node polygon,#mermaid-svg-vt8dSwC7uNinkonb .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-vt8dSwC7uNinkonb .divider{stroke:#9370DB;stroke-width:1;}#mermaid-svg-vt8dSwC7uNinkonb g.clickable{cursor:pointer;}#mermaid-svg-vt8dSwC7uNinkonb g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-vt8dSwC7uNinkonb g.classGroup line{stroke:#9370DB;stroke-width:1;}#mermaid-svg-vt8dSwC7uNinkonb .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-vt8dSwC7uNinkonb .classLabel .label{fill:#9370DB;font-size:10px;}#mermaid-svg-vt8dSwC7uNinkonb .relation{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-vt8dSwC7uNinkonb .dashed-line{stroke-dasharray:3;}#mermaid-svg-vt8dSwC7uNinkonb .dotted-line{stroke-dasharray:1 2;}#mermaid-svg-vt8dSwC7uNinkonb #compositionStart,#mermaid-svg-vt8dSwC7uNinkonb .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vt8dSwC7uNinkonb #compositionEnd,#mermaid-svg-vt8dSwC7uNinkonb .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vt8dSwC7uNinkonb #dependencyStart,#mermaid-svg-vt8dSwC7uNinkonb .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vt8dSwC7uNinkonb #dependencyStart,#mermaid-svg-vt8dSwC7uNinkonb .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vt8dSwC7uNinkonb #extensionStart,#mermaid-svg-vt8dSwC7uNinkonb .extension{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vt8dSwC7uNinkonb #extensionEnd,#mermaid-svg-vt8dSwC7uNinkonb .extension{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vt8dSwC7uNinkonb #aggregationStart,#mermaid-svg-vt8dSwC7uNinkonb .aggregation{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vt8dSwC7uNinkonb #aggregationEnd,#mermaid-svg-vt8dSwC7uNinkonb .aggregation{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vt8dSwC7uNinkonb #lollipopStart,#mermaid-svg-vt8dSwC7uNinkonb .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vt8dSwC7uNinkonb #lollipopEnd,#mermaid-svg-vt8dSwC7uNinkonb .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#mermaid-svg-vt8dSwC7uNinkonb .edgeTerminals{font-size:11px;line-height:initial;}#mermaid-svg-vt8dSwC7uNinkonb .classTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-vt8dSwC7uNinkonb .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-vt8dSwC7uNinkonb .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-vt8dSwC7uNinkonb :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}
继承
Animal
+String name
+int age
+eat() : void
Dog
+bark() : void
- 属性和方法前面的符号：+ 公有，- 私有，# 保护，~ 包内可见。
- 抽象类/方法用斜体：*Abstract* 或 <<abstract>> 注解。
- 接口：<<interface>> 接口名
关系类型速查：
| <|– | 继承（子类指向父类） | Dog <|– Animal |
| *– | 组合（强拥有，同生命周期） | Car *– Engine |
| o– | 聚合（弱拥有） | Department o– Employee |
| –> | 关联 | Student –> Course |
| — | 实线连接 | 可带标签 |
| ..> | 依赖 | ClassA ..> ClassB |
| <|.. | 实现（类实现接口） | Fly <|.. Bird |
注解： <<Interface>>, <<Abstract>>, <<Enum>> 等，写在类名冒号后面。
关键字汇总： classDiagram, class, <<interface>>, <|–, *–, o–, –>, ..>。
3.4 状态图 (State Diagram) — 状态转换建模
用途：描述系统状态变化，如订单状态流转、登录状态切换。
#mermaid-svg-qBRsxXaWyvLHD5RP{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-qBRsxXaWyvLHD5RP .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-qBRsxXaWyvLHD5RP .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-qBRsxXaWyvLHD5RP .error-icon{fill:#552222;}#mermaid-svg-qBRsxXaWyvLHD5RP .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-qBRsxXaWyvLHD5RP .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-qBRsxXaWyvLHD5RP .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-qBRsxXaWyvLHD5RP .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-qBRsxXaWyvLHD5RP .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-qBRsxXaWyvLHD5RP .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-qBRsxXaWyvLHD5RP .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-qBRsxXaWyvLHD5RP .marker{fill:#333333;stroke:#333333;}#mermaid-svg-qBRsxXaWyvLHD5RP .marker.cross{stroke:#333333;}#mermaid-svg-qBRsxXaWyvLHD5RP svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-qBRsxXaWyvLHD5RP p{margin:0;}#mermaid-svg-qBRsxXaWyvLHD5RP defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-qBRsxXaWyvLHD5RP g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-qBRsxXaWyvLHD5RP g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-qBRsxXaWyvLHD5RP g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-qBRsxXaWyvLHD5RP g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-qBRsxXaWyvLHD5RP g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-qBRsxXaWyvLHD5RP .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-qBRsxXaWyvLHD5RP .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-qBRsxXaWyvLHD5RP .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-qBRsxXaWyvLHD5RP .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-qBRsxXaWyvLHD5RP .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-qBRsxXaWyvLHD5RP .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-qBRsxXaWyvLHD5RP .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-qBRsxXaWyvLHD5RP .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-qBRsxXaWyvLHD5RP .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-qBRsxXaWyvLHD5RP .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-qBRsxXaWyvLHD5RP .edgeLabel .label text{fill:#333;}#mermaid-svg-qBRsxXaWyvLHD5RP .label div .edgeLabel{color:#333;}#mermaid-svg-qBRsxXaWyvLHD5RP .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-qBRsxXaWyvLHD5RP .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-qBRsxXaWyvLHD5RP .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-qBRsxXaWyvLHD5RP .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-qBRsxXaWyvLHD5RP .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-qBRsxXaWyvLHD5RP .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-qBRsxXaWyvLHD5RP .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-qBRsxXaWyvLHD5RP #statediagram-barbEnd{fill:#333333;}#mermaid-svg-qBRsxXaWyvLHD5RP .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-qBRsxXaWyvLHD5RP .cluster-label,#mermaid-svg-qBRsxXaWyvLHD5RP .nodeLabel{color:#131300;}#mermaid-svg-qBRsxXaWyvLHD5RP .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-qBRsxXaWyvLHD5RP .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-qBRsxXaWyvLHD5RP .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-qBRsxXaWyvLHD5RP .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-qBRsxXaWyvLHD5RP .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-qBRsxXaWyvLHD5RP .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-qBRsxXaWyvLHD5RP .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-qBRsxXaWyvLHD5RP .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-qBRsxXaWyvLHD5RP .note-edge{stroke-dasharray:5;}#mermaid-svg-qBRsxXaWyvLHD5RP .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-qBRsxXaWyvLHD5RP .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-qBRsxXaWyvLHD5RP .statediagram-note text{fill:black;}#mermaid-svg-qBRsxXaWyvLHD5RP .statediagram-note .nodeLabel{color:black;}#mermaid-svg-qBRsxXaWyvLHD5RP .statediagram .edgeLabel{color:red;}#mermaid-svg-qBRsxXaWyvLHD5RP #dependencyStart,#mermaid-svg-qBRsxXaWyvLHD5RP #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-qBRsxXaWyvLHD5RP .statediagramTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-qBRsxXaWyvLHD5RP :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}
付款成功
仓库打包
签收
取消订单
待支付
已支付
已发货
复合状态：
#mermaid-svg-9PRQa4j8Jn3hm59u{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-9PRQa4j8Jn3hm59u .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-9PRQa4j8Jn3hm59u .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-9PRQa4j8Jn3hm59u .error-icon{fill:#552222;}#mermaid-svg-9PRQa4j8Jn3hm59u .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-9PRQa4j8Jn3hm59u .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-9PRQa4j8Jn3hm59u .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-9PRQa4j8Jn3hm59u .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-9PRQa4j8Jn3hm59u .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-9PRQa4j8Jn3hm59u .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-9PRQa4j8Jn3hm59u .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-9PRQa4j8Jn3hm59u .marker{fill:#333333;stroke:#333333;}#mermaid-svg-9PRQa4j8Jn3hm59u .marker.cross{stroke:#333333;}#mermaid-svg-9PRQa4j8Jn3hm59u svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-9PRQa4j8Jn3hm59u p{margin:0;}#mermaid-svg-9PRQa4j8Jn3hm59u defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-9PRQa4j8Jn3hm59u g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-9PRQa4j8Jn3hm59u g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-9PRQa4j8Jn3hm59u g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-9PRQa4j8Jn3hm59u g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-9PRQa4j8Jn3hm59u g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-9PRQa4j8Jn3hm59u .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-9PRQa4j8Jn3hm59u .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-9PRQa4j8Jn3hm59u .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-9PRQa4j8Jn3hm59u .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-9PRQa4j8Jn3hm59u .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-9PRQa4j8Jn3hm59u .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-9PRQa4j8Jn3hm59u .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-9PRQa4j8Jn3hm59u .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-9PRQa4j8Jn3hm59u .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-9PRQa4j8Jn3hm59u .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-9PRQa4j8Jn3hm59u .edgeLabel .label text{fill:#333;}#mermaid-svg-9PRQa4j8Jn3hm59u .label div .edgeLabel{color:#333;}#mermaid-svg-9PRQa4j8Jn3hm59u .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-9PRQa4j8Jn3hm59u .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-9PRQa4j8Jn3hm59u .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-9PRQa4j8Jn3hm59u .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-9PRQa4j8Jn3hm59u .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-9PRQa4j8Jn3hm59u .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-9PRQa4j8Jn3hm59u .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-9PRQa4j8Jn3hm59u #statediagram-barbEnd{fill:#333333;}#mermaid-svg-9PRQa4j8Jn3hm59u .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-9PRQa4j8Jn3hm59u .cluster-label,#mermaid-svg-9PRQa4j8Jn3hm59u .nodeLabel{color:#131300;}#mermaid-svg-9PRQa4j8Jn3hm59u .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-9PRQa4j8Jn3hm59u .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-9PRQa4j8Jn3hm59u .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-9PRQa4j8Jn3hm59u .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-9PRQa4j8Jn3hm59u .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-9PRQa4j8Jn3hm59u .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-9PRQa4j8Jn3hm59u .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-9PRQa4j8Jn3hm59u .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-9PRQa4j8Jn3hm59u .note-edge{stroke-dasharray:5;}#mermaid-svg-9PRQa4j8Jn3hm59u .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-9PRQa4j8Jn3hm59u .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-9PRQa4j8Jn3hm59u .statediagram-note text{fill:black;}#mermaid-svg-9PRQa4j8Jn3hm59u .statediagram-note .nodeLabel{color:black;}#mermaid-svg-9PRQa4j8Jn3hm59u .statediagram .edgeLabel{color:red;}#mermaid-svg-9PRQa4j8Jn3hm59u #dependencyStart,#mermaid-svg-9PRQa4j8Jn3hm59u #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-9PRQa4j8Jn3hm59u .statediagramTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-9PRQa4j8Jn3hm59u :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}
登录状态
登录
退出
未登录
已登录
说明： [*] 表示起点/终点。转换条件可以写在连线上。可使用 note left of 添加注释。
关键字汇总： stateDiagram-v2, state, [*], note。
3.5 甘特图 (Gantt) — 项目时间线
用途：展示任务排期、里程碑、依赖关系。
#mermaid-svg-J1vyuvoU1GFLVbFB{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-J1vyuvoU1GFLVbFB .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-J1vyuvoU1GFLVbFB .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-J1vyuvoU1GFLVbFB .error-icon{fill:#552222;}#mermaid-svg-J1vyuvoU1GFLVbFB .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-J1vyuvoU1GFLVbFB .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-J1vyuvoU1GFLVbFB .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-J1vyuvoU1GFLVbFB .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-J1vyuvoU1GFLVbFB .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-J1vyuvoU1GFLVbFB .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-J1vyuvoU1GFLVbFB .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-J1vyuvoU1GFLVbFB .marker{fill:#333333;stroke:#333333;}#mermaid-svg-J1vyuvoU1GFLVbFB .marker.cross{stroke:#333333;}#mermaid-svg-J1vyuvoU1GFLVbFB svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-J1vyuvoU1GFLVbFB p{margin:0;}#mermaid-svg-J1vyuvoU1GFLVbFB .mermaid-main-font{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}#mermaid-svg-J1vyuvoU1GFLVbFB .exclude-range{fill:#eeeeee;}#mermaid-svg-J1vyuvoU1GFLVbFB .section{stroke:none;opacity:0.2;}#mermaid-svg-J1vyuvoU1GFLVbFB .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-J1vyuvoU1GFLVbFB .section2{fill:#fff400;}#mermaid-svg-J1vyuvoU1GFLVbFB .section1,#mermaid-svg-J1vyuvoU1GFLVbFB .section3{fill:white;opacity:0.2;}#mermaid-svg-J1vyuvoU1GFLVbFB .sectionTitle0{fill:#333;}#mermaid-svg-J1vyuvoU1GFLVbFB .sectionTitle1{fill:#333;}#mermaid-svg-J1vyuvoU1GFLVbFB .sectionTitle2{fill:#333;}#mermaid-svg-J1vyuvoU1GFLVbFB .sectionTitle3{fill:#333;}#mermaid-svg-J1vyuvoU1GFLVbFB .sectionTitle{text-anchor:start;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}#mermaid-svg-J1vyuvoU1GFLVbFB .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-J1vyuvoU1GFLVbFB .grid .tick text{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;fill:#333;}#mermaid-svg-J1vyuvoU1GFLVbFB .grid path{stroke-width:0;}#mermaid-svg-J1vyuvoU1GFLVbFB .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-J1vyuvoU1GFLVbFB .task{stroke-width:2;}#mermaid-svg-J1vyuvoU1GFLVbFB .taskText{text-anchor:middle;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}#mermaid-svg-J1vyuvoU1GFLVbFB .taskTextOutsideRight{fill:black;text-anchor:start;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}#mermaid-svg-J1vyuvoU1GFLVbFB .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-J1vyuvoU1GFLVbFB .task.clickable{cursor:pointer;}#mermaid-svg-J1vyuvoU1GFLVbFB .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-J1vyuvoU1GFLVbFB .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-J1vyuvoU1GFLVbFB .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-J1vyuvoU1GFLVbFB .taskText0,#mermaid-svg-J1vyuvoU1GFLVbFB .taskText1,#mermaid-svg-J1vyuvoU1GFLVbFB .taskText2,#mermaid-svg-J1vyuvoU1GFLVbFB .taskText3{fill:white;}#mermaid-svg-J1vyuvoU1GFLVbFB .task0,#mermaid-svg-J1vyuvoU1GFLVbFB .task1,#mermaid-svg-J1vyuvoU1GFLVbFB .task2,#mermaid-svg-J1vyuvoU1GFLVbFB .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-J1vyuvoU1GFLVbFB .taskTextOutside0,#mermaid-svg-J1vyuvoU1GFLVbFB .taskTextOutside2{fill:black;}#mermaid-svg-J1vyuvoU1GFLVbFB .taskTextOutside1,#mermaid-svg-J1vyuvoU1GFLVbFB .taskTextOutside3{fill:black;}#mermaid-svg-J1vyuvoU1GFLVbFB .active0,#mermaid-svg-J1vyuvoU1GFLVbFB .active1,#mermaid-svg-J1vyuvoU1GFLVbFB .active2,#mermaid-svg-J1vyuvoU1GFLVbFB .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-J1vyuvoU1GFLVbFB .activeText0,#mermaid-svg-J1vyuvoU1GFLVbFB .activeText1,#mermaid-svg-J1vyuvoU1GFLVbFB .activeText2,#mermaid-svg-J1vyuvoU1GFLVbFB .activeText3{fill:black!important;}#mermaid-svg-J1vyuvoU1GFLVbFB .done0,#mermaid-svg-J1vyuvoU1GFLVbFB .done1,#mermaid-svg-J1vyuvoU1GFLVbFB .done2,#mermaid-svg-J1vyuvoU1GFLVbFB .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-J1vyuvoU1GFLVbFB .doneText0,#mermaid-svg-J1vyuvoU1GFLVbFB .doneText1,#mermaid-svg-J1vyuvoU1GFLVbFB .doneText2,#mermaid-svg-J1vyuvoU1GFLVbFB .doneText3{fill:black!important;}#mermaid-svg-J1vyuvoU1GFLVbFB .doneText0.taskTextOutsideLeft,#mermaid-svg-J1vyuvoU1GFLVbFB .doneText0.taskTextOutsideRight,#mermaid-svg-J1vyuvoU1GFLVbFB .doneText1.taskTextOutsideLeft,#mermaid-svg-J1vyuvoU1GFLVbFB .doneText1.taskTextOutsideRight,#mermaid-svg-J1vyuvoU1GFLVbFB .doneText2.taskTextOutsideLeft,#mermaid-svg-J1vyuvoU1GFLVbFB .doneText2.taskTextOutsideRight,#mermaid-svg-J1vyuvoU1GFLVbFB .doneText3.taskTextOutsideLeft,#mermaid-svg-J1vyuvoU1GFLVbFB .doneText3.taskTextOutsideRight{fill:black!important;}#mermaid-svg-J1vyuvoU1GFLVbFB .crit0,#mermaid-svg-J1vyuvoU1GFLVbFB .crit1,#mermaid-svg-J1vyuvoU1GFLVbFB .crit2,#mermaid-svg-J1vyuvoU1GFLVbFB .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-J1vyuvoU1GFLVbFB .activeCrit0,#mermaid-svg-J1vyuvoU1GFLVbFB .activeCrit1,#mermaid-svg-J1vyuvoU1GFLVbFB .activeCrit2,#mermaid-svg-J1vyuvoU1GFLVbFB .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-J1vyuvoU1GFLVbFB .doneCrit0,#mermaid-svg-J1vyuvoU1GFLVbFB .doneCrit1,#mermaid-svg-J1vyuvoU1GFLVbFB .doneCrit2,#mermaid-svg-J1vyuvoU1GFLVbFB .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-J1vyuvoU1GFLVbFB .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-J1vyuvoU1GFLVbFB .milestoneText{font-style:italic;}#mermaid-svg-J1vyuvoU1GFLVbFB .doneCritText0,#mermaid-svg-J1vyuvoU1GFLVbFB .doneCritText1,#mermaid-svg-J1vyuvoU1GFLVbFB .doneCritText2,#mermaid-svg-J1vyuvoU1GFLVbFB .doneCritText3{fill:black!important;}#mermaid-svg-J1vyuvoU1GFLVbFB .doneCritText0.taskTextOutsideLeft,#mermaid-svg-J1vyuvoU1GFLVbFB .doneCritText0.taskTextOutsideRight,#mermaid-svg-J1vyuvoU1GFLVbFB .doneCritText1.taskTextOutsideLeft,#mermaid-svg-J1vyuvoU1GFLVbFB .doneCritText1.taskTextOutsideRight,#mermaid-svg-J1vyuvoU1GFLVbFB .doneCritText2.taskTextOutsideLeft,#mermaid-svg-J1vyuvoU1GFLVbFB .doneCritText2.taskTextOutsideRight,#mermaid-svg-J1vyuvoU1GFLVbFB .doneCritText3.taskTextOutsideLeft,#mermaid-svg-J1vyuvoU1GFLVbFB .doneCritText3.taskTextOutsideRight{fill:black!important;}#mermaid-svg-J1vyuvoU1GFLVbFB .vert{stroke:navy;}#mermaid-svg-J1vyuvoU1GFLVbFB .vertText{font-size:15px;text-anchor:middle;fill:navy!important;}#mermaid-svg-J1vyuvoU1GFLVbFB .activeCritText0,#mermaid-svg-J1vyuvoU1GFLVbFB .activeCritText1,#mermaid-svg-J1vyuvoU1GFLVbFB .activeCritText2,#mermaid-svg-J1vyuvoU1GFLVbFB .activeCritText3{fill:black!important;}#mermaid-svg-J1vyuvoU1GFLVbFB .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}#mermaid-svg-J1vyuvoU1GFLVbFB :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}
2026-06-01
2026-06-02
2026-06-03
2026-06-04
2026-06-05
2026-06-06
2026-06-07
2026-06-08
2026-06-09
2026-06-10
2026-06-11
2026-06-12
2026-06-13
2026-06-14
2026-06-15
需求分析
原型设计
编码
测试
里程碑
设计阶段
开发阶段
项目计划
语法要点：
- dateFormat 定义日期格式
- section 分隔任务组
- 任务语法：任务名 : 状态, 别名, 开始时间, 持续时间
- 状态：done, active, crit(关键), 也可省略
- 依赖：after 别名
- 里程碑：持续时间设为 0d
关键字汇总： gantt, dateFormat, section, done, active, after, milestone。
3.6 饼图 (Pie) — 占比展示
#mermaid-svg-KWN0AaKe34vReOSX{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-KWN0AaKe34vReOSX .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-KWN0AaKe34vReOSX .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-KWN0AaKe34vReOSX .error-icon{fill:#552222;}#mermaid-svg-KWN0AaKe34vReOSX .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-KWN0AaKe34vReOSX .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-KWN0AaKe34vReOSX .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-KWN0AaKe34vReOSX .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-KWN0AaKe34vReOSX .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-KWN0AaKe34vReOSX .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-KWN0AaKe34vReOSX .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-KWN0AaKe34vReOSX .marker{fill:#333333;stroke:#333333;}#mermaid-svg-KWN0AaKe34vReOSX .marker.cross{stroke:#333333;}#mermaid-svg-KWN0AaKe34vReOSX svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-KWN0AaKe34vReOSX p{margin:0;}#mermaid-svg-KWN0AaKe34vReOSX .pieCircle{stroke:#000000;stroke-width:2px;opacity:0.7;}#mermaid-svg-KWN0AaKe34vReOSX .pieOuterCircle{stroke:#000000;stroke-width:1px;fill:none;}#mermaid-svg-KWN0AaKe34vReOSX .pieTitleText{text-anchor:middle;font-size:25px;fill:#000000;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}#mermaid-svg-KWN0AaKe34vReOSX .slice{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;fill:#000000;font-size:17px;}#mermaid-svg-KWN0AaKe34vReOSX .legend text{fill:#000000;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:17px;}#mermaid-svg-KWN0AaKe34vReOSX :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}
45%
30%
15%
10%
技术栈占比
JavaScript [45]
Python [30]
Go [15]
其他 [10]
- showData 可选，显示数值标签
- 数据部分用键值对，值会自动归一化为百分比
关键字汇总： pie, showData, title。
3.7 其他常用图表速览
- 用户旅程图 (User Journey)：journey 描述用户体验流程
- Git 图 (Gitgraph)：gitGraph 展示分支与合并历史
- 思维导图 (Mindmap)：mindmap 以树形结构呈现思路 (v10.2+)
- 四象限图 (Quadrant Chart)：quadrantChart 用于二维评估
- 时序图（ZenUML）：另一种简洁的时序语法
新手掌握前 6 种已经足够应对 90% 的场景。
4. 通用编辑技巧：让图表更专业
4.1 主题与外观
- 内置主题：default, neutral, dark, forest, base
- 在代码首行用初始化指令切换：%%{init: {'theme': 'forest'}}%%
graph TD … - 自定义主题变量（高级）：通过 themeVariables 修改主色、字号等。
4.2 节点内换行与特殊字符
- 节点文本内换行：使用 <br> 或换行时在多行文本内实际换行（部分渲染器支持）
- 特殊字符：使用 HTML 实体，如 & 表示 &；或使用双引号包裹整个文本时内部的引号需转义，例如 "他说 \\"你好\\""。
4.3 注释
- 在 Mermaid 代码块内用 %% 开头写注释，不会渲染。%% 这是单行注释
4.4 使用变量和别名
- 对于复杂图，用短别名定义节点，再使用别名连线，提高可读性：
#mermaid-svg-Hm4fibf07vkBb0K3{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-Hm4fibf07vkBb0K3 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-Hm4fibf07vkBb0K3 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-Hm4fibf07vkBb0K3 .error-icon{fill:#552222;}#mermaid-svg-Hm4fibf07vkBb0K3 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Hm4fibf07vkBb0K3 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-Hm4fibf07vkBb0K3 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Hm4fibf07vkBb0K3 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Hm4fibf07vkBb0K3 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-Hm4fibf07vkBb0K3 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Hm4fibf07vkBb0K3 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Hm4fibf07vkBb0K3 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Hm4fibf07vkBb0K3 .marker.cross{stroke:#333333;}#mermaid-svg-Hm4fibf07vkBb0K3 svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Hm4fibf07vkBb0K3 p{margin:0;}#mermaid-svg-Hm4fibf07vkBb0K3 .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-Hm4fibf07vkBb0K3 .cluster-label text{fill:#333;}#mermaid-svg-Hm4fibf07vkBb0K3 .cluster-label span{color:#333;}#mermaid-svg-Hm4fibf07vkBb0K3 .cluster-label span p{background-color:transparent;}#mermaid-svg-Hm4fibf07vkBb0K3 .label text,#mermaid-svg-Hm4fibf07vkBb0K3 span{fill:#333;color:#333;}#mermaid-svg-Hm4fibf07vkBb0K3 .node rect,#mermaid-svg-Hm4fibf07vkBb0K3 .node circle,#mermaid-svg-Hm4fibf07vkBb0K3 .node ellipse,#mermaid-svg-Hm4fibf07vkBb0K3 .node polygon,#mermaid-svg-Hm4fibf07vkBb0K3 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Hm4fibf07vkBb0K3 .rough-node .label text,#mermaid-svg-Hm4fibf07vkBb0K3 .node .label text,#mermaid-svg-Hm4fibf07vkBb0K3 .image-shape .label,#mermaid-svg-Hm4fibf07vkBb0K3 .icon-shape .label{text-anchor:middle;}#mermaid-svg-Hm4fibf07vkBb0K3 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-Hm4fibf07vkBb0K3 .rough-node .label,#mermaid-svg-Hm4fibf07vkBb0K3 .node .label,#mermaid-svg-Hm4fibf07vkBb0K3 .image-shape .label,#mermaid-svg-Hm4fibf07vkBb0K3 .icon-shape .label{text-align:center;}#mermaid-svg-Hm4fibf07vkBb0K3 .node.clickable{cursor:pointer;}#mermaid-svg-Hm4fibf07vkBb0K3 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-Hm4fibf07vkBb0K3 .arrowheadPath{fill:#333333;}#mermaid-svg-Hm4fibf07vkBb0K3 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Hm4fibf07vkBb0K3 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Hm4fibf07vkBb0K3 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Hm4fibf07vkBb0K3 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-Hm4fibf07vkBb0K3 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Hm4fibf07vkBb0K3 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-Hm4fibf07vkBb0K3 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Hm4fibf07vkBb0K3 .cluster text{fill:#333;}#mermaid-svg-Hm4fibf07vkBb0K3 .cluster span{color:#333;}#mermaid-svg-Hm4fibf07vkBb0K3 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Hm4fibf07vkBb0K3 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-Hm4fibf07vkBb0K3 rect.text{fill:none;stroke-width:0;}#mermaid-svg-Hm4fibf07vkBb0K3 .icon-shape,#mermaid-svg-Hm4fibf07vkBb0K3 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Hm4fibf07vkBb0K3 .icon-shape p,#mermaid-svg-Hm4fibf07vkBb0K3 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-Hm4fibf07vkBb0K3 .icon-shape .label rect,#mermaid-svg-Hm4fibf07vkBb0K3 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Hm4fibf07vkBb0K3 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-Hm4fibf07vkBb0K3 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-Hm4fibf07vkBb0K3 :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}
用户
登录系统
验证
4.5 样式集中管理
- 用 classDef 定义多套样式，然后 class 节点1,节点2 样式名 批量应用。
- 示例：
渲染错误: Mermaid 渲染失败: Parse error on line 3: …oke:#333 A[已完成] :::done B[进行中] ———————-^ Expecting 'SEMI', 'NEWLINE', 'SPACE', 'EOF', 'AMP', 'COLON', 'START_LINK', 'LINK', 'LINK_ID', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'NODE_STRING', 'BRKT', 'MINUS', 'MULT', 'UNICODE_TEXT', got 'STYLE_SEPARATOR'
4.6 代码块内自定义配置
- 可以在任何 Mermaid 代码块中插入 %%{init: {…}}%% 修改渲染参数，如图表宽度、流程图曲线样式等。
- 例如让连线使用曲线：%%{init: {'flowchart': {'curve': 'basis'}}}%%
5. 推荐工具链
| Mermaid Live Editor | 在线实时编辑 | 导出 PNG/SVG，分享链接 |
| VS Code + Mermaid 插件 | 本地写作 | 预览、导出、代码补全 |
| Typora / Obsidian | Markdown 笔记 | 原生支持，所见即所得 |
| mermaid-cli (mmdc) | 批量转换/CI | 命令行将 .mmd 转图片 |
| Kroki.io | API 生成图片 | 无需本地环境，适合自动化 |
新手最佳起步：Mermaid Live Editor 写代码，边写边看。
6. 常见问题排错
Q1: 图表渲染不出来，显示空白？
- 检查图表类型关键字是否拼写正确（如 graph 非 graphh）。
- 检查括号是否匹配，特别是子图和循环的 end。
- 主题或配置不兼容（尝试去掉 %%{init} 部分）。
Q2: 连线或节点文字显示异常？
- 包含特殊字符时，用双引号包裹整个文本，并将内部双引号转义 \\"。
- 某些渲染器不支持 HTML 标签，用纯文本代替。
Q3: 如何控制图片大小？
- 在 Live Editor 中导出时可设置尺寸。
- 在 Markdown 中使用 <img> 标签指定宽度：<img src="diagram.png" width="400">。
- 在 %%{init} 中无法直接设置总像素，但可调整字体大小间接影响。
Q4: 能否不渲染某些节点的连线？
- 连线必须显式编写，没有连线则无连接。如果想隐藏节点但保留布局，试试透明样式。
Q5: 不同平台支持程度不同？
- GitHub 支持大部分图（基于官方库），极少数新型图表（如 mindmap）可能滞后。
- 某些平台（如 Confluence）需要单独插件。遇到不兼容时可降级为 flowchart 代替。
7. 学习路径建议
8. 总结
Mermaid 让技术写作中的图表与文字融为一体，极大提升了文档的可维护性。本文梳理的核心语法和技巧已经覆盖了日常 80% 的需求。从流程图到时序图，从节点形状到样式定制，只要记住关键关键字并善用在线编辑器，你也可以几分钟内画出清晰的图表。
记住：绘图是手段，表达才是目的。用最简单的语法画出最清晰的逻辑，这就是 Mermaid 之道。
现在，打开 Mermaid Live Editor 试试吧！
