Mermaid绘制与学习
2026/4/9大约 27 分钟
Mermaid绘制与学习
一个简单的例子
相关知识解读：
flowchart TD:其中flowchart表示图表类型
图表类型
| 图表类型 | 语法关键词 | 主要用途 | 典型应用场景 |
|---|---|---|---|
| 流程图 | flowchart 或 graph | 表示工作流程、算法或过程 | 业务流程、程序逻辑、工作步骤 |
| 序列图 | sequenceDiagram | 显示对象之间交互的时间顺序 | API调用流程、用户交互流程、消息传递 |
| 类图 | classDiagram | 展示系统中的类及其关系 | 软件架构、面向对象设计 |
| 状态图 | stateDiagram | 描述对象可能的状态和转换 | 状态机、工作流状态流转 |
| 甘特图 | gantt | 项目日程安排和进度跟踪 | 项目管理、时间线规划 |
| 饼图 | pie | 显示比例关系 | 数据统计、占比分析 |
| 实体关系图 | erDiagram | 数据库设计 | 数据库模型、实体关系 |
| 用户旅程图 | journey | 用户体验映射 | 用户体验分析、业务流程优化 |
| 需求图 | requirementDiagram | 系统需求可视化 | 软件需求分析 |
| Git图 | gitGraph | Git操作和分支流程 | 版本控制、Git工作流 |
TD表示创建一个从上到下(Top-Down)方向的流程图
图表整体方向设置
| 方向关键字 | 含义 | 语法示例 | 适用场景 |
|---|---|---|---|
| TB | Top to Bottom（从上到下） | flowchart TB | 层级关系明显的流程，如组织架构 |
| TD | Top to Down（从上到下） | flowchart TD | 与TB完全相同，是另一种写法 |
| BT | Bottom to Top（从下到上） | flowchart BT | 自下而上的过程，如数据汇总 |
| RL | Right to Left（从右到左） | flowchart RL | 从结果到起因的分析流程 |
| LR | Left to Right（从左到右） | flowchart LR | 线性流程，如时间序列或数据流 |
注意，不是所有类型的图都有方向设置这个属性。以下给出具体的解释。
| 图表类型 | 支持整体方向设置 | 支持子图方向设置 | 支持的方向 | 备注 |
|---|---|---|---|---|
| flowchart/graph | ✅ | ✅ | TB, TD, BT, RL, LR | 流程图完全支持所有方向设置 |
| sequenceDiagram | ❌ | ❌ | 固定从上到下 | 序列图始终是从上到下时间顺序，不可改变 |
| classDiagram | ❌ | ❌ | 固定布局 | 类图遵循标准UML布局，不可指定方向 |
| stateDiagram | ✅ | ❌ | LR, TB | 状态图支持有限的整体方向，无子图 |
| erDiagram | ❌ | ❌ | 固定布局 | ER图遵循标准数据库模型布局 |
| gantt | ❌ | ❌ | 固定横向 | 甘特图始终横向展示时间线 |
| pie | ❌ | ❌ | 固定布局 | 饼图是固定的圆形布局 |
| requirementDiagram | ❌ | ❌ | 固定布局 | 需求图遵循固定布局规则 |
| gitGraph | ❌ | ❌ | 固定横向 | Git图显示提交历史，固定方向 |
| journey | ❌ | ❌ | 固定横向 | 用户旅程图固定横向展示 |
Mermaid图表在Markdown中的最佳显示方案
如果原图采用横向或竖向布局
横向布局
垂直纵向布局
这在markdown中显示和阅读都不方便
所以，原图采用了一种比较合适的解决方案
混合布局分组优化
将内容拆分为多个子图，内部采用横向布局，子图之间采用纵向布局
Mermaid 子图(Subgraph)
子图基础语法
| 功能 | 语法 | 示例 | 说明 |
|---|---|---|---|
| 基本子图 | subgraph id 节点内容 end | subgraph sg1 A --> B end | 创建基本分组，无标题 |
| 带ID和标题子图 | subgraph id [标题] 节点内容 end | subgraph process [处理流程] C --> D end | 创建带ID和显示标题的子图 |
| 带引号标题 | subgraph id ["标题"] 节点内容 end | subgraph sg2 ["复杂流程"] E --> F end | 标题中可使用特殊字符 |
| 仅标题无ID | subgraph ["标题"] 节点内容 end | subgraph ["输入处理"] G --> H end | 自动生成ID的子图 |
子图方向控制
| 方向 | 语法 | 说明 | 适用场景 |
|---|---|---|---|
| 从左到右 | subgraph id direction LR 节点内容 end | 子图内节点从左到右排列 | 线性流程，数据流向 |
| 从上到下 | subgraph id direction TB 节点内容 end | 子图内节点从上到下排列 | 层级关系，决策树 |
| 从右到左 | subgraph id direction RL 节点内容 end | 子图内节点从右到左排列 | 逆向分析流程 |
| 从下到上 | subgraph id direction BT 节点内容 end | 子图内节点从下到上排列 | 归纳汇总流程 |
子图嵌套与结构
| 功能 | 语法 | 效果 | 使用场景 |
|---|---|---|---|
| 子图嵌套 | subgraph 外层ID subgraph 内层ID 节点内容 end end | 创建层次化的嵌套分组 | 复杂系统分层展示 |
| 子图间连接 | subgraph sg1 A end subgraph sg2 B end A --> B | 不同子图中的节点相互连接 | 模块间数据流或关系 |
| 子图整体连接 | sg1 --> sg2 | 整个子图作为一个单元连接到另一个子图 | 高层次流程概览 |
| 多列子图 | 使用方向和样式控制子图并排显示 | 创建多列布局效果 | 并行流程或对比展示 |
子图交互与连接
| 连接类型 | 语法 | 示例 | 说明 | ||||
|---|---|---|---|---|---|---|---|
| 子图到子图 | 子图ID --> 子图ID | sg1 --> sg2 | 整体子图之间的连接 | ||||
| 节点到子图 | 节点ID --> 子图ID | A --> sg1 | 从外部节点到整个子图的连接 | ||||
| 子图到节点 | 子图ID --> 节点ID | sg1 --> B | 从整个子图到外部节点的连接 | ||||
| 跨子图节点连接 | 节点ID --> 节点ID | A --> B (A和B在不同子图中) | 不同子图中节点间的直接连接 | ||||
| 带文本连接 | `子图ID --> | "文本" | 子图ID` | `sg1 --> | "数据流" | sg2` | 添加连接说明的子图连接 |
![[写作绘图PPT等文员技能学习/Untitled Diagram.svg]]
高级子图技巧
| 技巧 | 实现方法 | 效果 | 应用场景 |
|---|---|---|---|
| 透明子图 | style 子图ID fill:transparent,stroke:transparent | 创建无可见边界的逻辑分组 | 保持分组而不影响视觉 |
| 强调子图 | 使用醒目的填充色和边框 | 突出显示重要流程或组件 | 重点关注区域 |
| 扁平化边框 | style 子图ID stroke-width:0 | 只有背景色的分组 | 现代简约设计 |
| 创建标签区 | 使用小型、简单内容的子图 | 为图表添加标签或注释区域 | 图表说明、图例 |
| 多彩主题 | 为不同子图使用配色方案 | 创建视觉上区分的功能区域 | 复杂系统的模块划分 |
| 隐形容器 | subgraph none[""] style none fill:none,stroke:none | 创建不可见的组织容器 | 控制布局但不显示边界 |
classDef objClass xxxxxxxx
classDef：是关键字，代表以下要定义样式类
objClass:是自定义的类名。代表以下xxxx 的名字
样式及样式应用
基本样式定义方法
| 方法 | 语法 | 示例 | 适用范围 |
|---|---|---|---|
| 内联样式 | style 节点ID 样式属性 | style A fill:#f9f,stroke:#333 | 单个节点 |
| 样式类定义 | classDef 类名 样式属性 | classDef red fill:#f00,color:white | 可重用于多个节点 |
| 默认样式 | classDef default 样式属性 | classDef default fill:#f9f9f9 | 所有未指定样式的节点 |
常用样式属性
| 类别 | 属性名 | 值示例 | 支持程度 | 说明 |
|---|---|---|---|---|
| 填充与颜色 | fill | #f9f9fa, red, rgba(0,0,0,0.1) | ✅ 完全支持 | 节点背景填充色 |
| stroke | #333, blue | ✅ 完全支持 | 节点边框颜色 | |
| color | #666, white | ✅ 完全支持 | 文本颜色 | |
| fill-opacity | 0.5, 1 | ✅ 完全支持 | 填充透明度 | |
| stroke-opacity | 0.7 | ✅ 完全支持 | 边框透明度 | |
| opacity | 0.8 | ✅ 完全支持 | 整体透明度 | |
| 边框 | stroke-width | 2px, 1.5 | ✅ 完全支持 | 边框粗细 |
| stroke-dasharray | 5 3, 10 2 | ✅ 完全支持 | 虚线边框模式 | |
| stroke-linecap | round, square | ✅ 完全支持 | 线条端点样式 | |
| stroke-linejoin | miter, round | ✅ 完全支持 | 线条连接处样式 | |
| border-radius | 4px, 50% | ✅ 完全支持 | 边角圆润度 | |
| 文本样式 | font-family | Arial, "Times New Roman" | ✅ 完全支持 | 字体 |
| font-size | 16px, 1.2em | ✅ 完全支持 | 字体大小 | |
| font-weight | bold, normal, 500 | ✅ 完全支持 | 字体粗细 | |
| font-style | italic, normal | ✅ 完全支持 | 文字样式(如斜体) | |
| text-align | center, left, right | ✅ 完全支持 | 文本对齐方式 | |
| text-anchor | middle, start, end | ⚠️ 部分支持 | SVG文本锚点 | |
| dominant-baseline | middle | ⚠️ 部分支持 | 文本基线对齐 | |
| alignment-baseline | middle | ⚠️ 部分支持 | 文本基线对齐(替代属性) | |
| letter-spacing | 1px | ⚠️ 部分支持 | 字母间距 | |
| 尺寸与间距 | width | 120px, 80% | ✅ 完全支持 | 节点宽度 |
| height | 60px | ✅ 完全支持 | 节点高度 | |
| padding | 10px, 5px 10px | ✅ 完全支持 | 内部填充间距 | |
| margin | 5px | ⚠️ 有限支持 | 外部边距(部分场景有效) | |
| rx | 5 | ✅ 完全支持 | 水平圆角半径(SVG) | |
| ry | 5 | ✅ 完全支持 | 垂直圆角半径(SVG) | |
| 位置与布局 | x | 10 | ⚠️ 有限支持 | 在某些内部元素可用 |
| y | 20 | ⚠️ 有限支持 | 在某些内部元素可用 | |
| text-indent | 5px | ⚠️ 部分支持 | 文本缩进 | |
| SVG特效 | transform | scale(1.1) | ⚠️ 有限支持 | 变换(仅部分场景支持) |
| shape-rendering | crispEdges, geometricPrecision | ✅ 完全支持 | 形状渲染方式 | |
| text-rendering | optimizeLegibility | ✅ 完全支持 | 文本渲染方式 | |
| 内置扩展 | rounded | true | ✅ 完全支持 | Mermaid特有，设置为圆角 |
| bold | true | ✅ 完全支持 | Mermaid特有，设置为粗体 | |
| underline | true | ⚠️ 部分支持 | Mermaid特有，文本下划线 | |
| dashed | true | ✅ 完全支持 | Mermaid特有，设置为虚线 | |
| filled | true | ✅ 完全支持 | Mermaid特有，设置为填充 | |
| 不建议使用 | filter | blur(2px) | ❌ 几乎不支持 | SVG滤镜效果 |
| clip-path | circle(50%) | ❌ 不支持 | 裁剪路径 | |
| mask | url(#mask) | ❌ 不支持 | 蒙版效果 | |
| animation | fadeIn 1s | ❌ 不支持 | 动画属性 |
Mermaid样式中的大部分属性（如fill、stroke、color、font-weight等）直接对应于SVG/CSS中的同名属性。
底层渲染机制：
Mermaid首先将图表定义解析为内部数据结构
然后生成SVG或HTML元素
最后将样式属性应用为CSS样式
SVG与CSS结合：由于大多数Mermaid图表最终渲染为SVG，所以支持的属性也主要是SVG支持的CSS属性。
样式类应用
| 功能 | 语法 | 示例 | 说明 |
|---|---|---|---|
| 样式类应用(单节点) | class 节点ID 类名 | class A important | 将样式应用到单个节点 |
| 样式类应用(多节点) | class 节点ID,节点ID 类名 | class A,B,C important | 将同一样式应用到多个节点 |
| 节点定义时应用 | 节点ID:::类名 | A[开始]:::important | 在定义节点的同时应用样式 |
标题设置
标题设置基础
| 功能 | 语法 | 示例 | 说明 |
|---|---|---|---|
| 基本标题 | title [标题文本] | title [Java消息处理流程] | 在图表上方添加简单标题 |
| 使用变量 | title 节点ID | title titleNode["我的标题"] | 使用预定义节点作为标题 |
内置标题样式方法
| 方法 | 语法 | 示例 | 效果 |
|---|---|---|---|
| 标题节点样式 | style title 样式属性 | style title fill:none,stroke:none,color:#333 | 直接设置标题样式 |
| 标题样式类 | classDef titleClass 样式属性 class title titleClass | classDef titleClass fill:#f5f5f5 class title titleClass | 使用样式类定义标题样式 |
| 标题节点自定义 | title["标题文本"] class title 样式类 | title["项目流程"] class title myTitle | 定义标题节点并应用样式 |
具体节点与内容
节点ID与引用
| 功能 | 语法 | 示例 | 说明 |
|---|---|---|---|
| 基本ID | id[文本] | A[开始] | 使用字母作为简单ID |
| 数字ID | 数字id[文本] | 1[第一步] | 使用数字作为ID |
| 复合ID | 复合id[文本] | start_node[开始节点] | 使用下划线连接的复合ID |
| 节点重用 | 多次使用相同ID | A[开始] ... A | 重复使用相同ID表示同一节点 |
| 连接引用 | id1-->id2 | A-->B | 通过ID创建节点间连接 |
| 节点样式引用 | style id 样式 | style A fill:red | 通过ID应用样式 |
| 样式类引用 | class id 类名 | class A important | 通过ID应用预定义样式类 |
基本节点形状
| 节点形状 | 语法 | 示例 | 适用场景 |
|---|---|---|---|
| 方形 | id[文本] | A[方形节点] | 一般处理步骤、数据 |
| 圆角矩形 | id(文本) | B(圆角节点) | 开始/结束、友好界面 |
| 体育场形 | id([文本]) | C([体育场形]) | 开始/结束、触发器 |
| 子程序形 | id[[文本]] | D[[子程序]] | 函数、子流程 |
| 圆柱形 | id[(文本)] | E[(数据库)] | 数据库、永久存储 |
| 圆形 | id((文本)) | F((圆形)) | 连接点、事件 |
| 非对称形 | id>文本] | G>非对称] | 输入/输出、数据流 |
| 菱形 | id{文本} | H{判断} | 条件判断、决策点 |
| 六边形 | id{{文本}} | I{{预处理}} | 预处理、准备步骤 |
| 平行四边形 | id[/文本/] | J[/输入/] | 输入、数据录入 |
| 反向平行四边形 | id[\文本\] | K[\输出\] | 输出、结果展示 |
| 梯形 | id[/文本\] | L[/梯形\] | 手动操作、物理过程 |
| 反向梯形 | id[\文本/] | M[\反向梯形/] | 数据汇总、合并 |
节点间连接类型
| 连接类型 | 语法 | 示例 | 外观 | ||||
|---|---|---|---|---|---|---|---|
| 带箭头实线 | --> | A-->B | 有方向的实线 | ||||
| 无箭头实线 | --- | A---B | 无方向的实线 | ||||
| 带箭头虚线 | -.-> | A-.->B | 有方向的虚线 | ||||
| 无箭头虚线 | -.- | A-.-B | 无方向的虚线 | ||||
| 粗实线带箭头 | ==> | A==>B | 有方向的粗实线 | ||||
| 粗实线无箭头 | === | A===B | 无方向的粗实线 | ||||
| 带文本连接 | `--> | "文本" | ` | `A--> | "处理" | B` | 添加说明文字的连接 |
| 多段线 | 使用多个连接 | A-->C-->B | 经过多个节点的路径 |
节点文本内容格式化
| 格式特性 | 语法 | 示例 | 效果 |
|---|---|---|---|
| 多行文本 | 使用<br>标签 | A[第一行<br>第二行] | 在节点内显示多行文本 |
| 文本加粗 | 使用**文本** | B[普通文本**粗体文本**] | 部分文本加粗显示 |
| 斜体文本 | 使用*文本* | C[普通文本*斜体文本*] | 部分文本斜体显示 |
| 特殊字符 | 直接使用或转义 | D["特殊符号: &, #, (等"] | 在引号内使用特殊字符 |
| 使用表情符号 | 直接使用emoji | E[👍 成功] | 在文本中添加表情符号 |
| HTML标签 | 在双引号内使用 | F["<b>HTML</b>标签"] | 有限支持HTML格式化 |
| 使用空格 | 在文本中直接使用 | G[多个 空格] | 保留文本中的空格 |