name: mermaid-diagramming description: 在Obsidian中创建Mermaid图表，包括流程图、序列图、类图等。用于可视化过程、系统架构、工作流程或Obsidian笔记中的任何结构化关系。
Mermaid 图表在Obsidian中的应用
Obsidian内置了Mermaid支持。使用带有mermaid语言标识符的围栏代码块。
对于常见语法（样式、注释、主题），请参见reference.md。
⚠️ Obsidian特定限制
渲染差异：Obsidian的Mermaid版本可能落后于mermaid.js发布。一些尖端功能可能无法工作。
主题交互：图表颜色适应Obsidian主题。使用显式样式以在不同主题间保持一致的外观。
性能：非常大的图表（50+节点）可能会降低渲染速度。如有必要，请分成多个图表。
导出：PDF导出将图表转换为图像。对于外部共享，请捕获为PNG/SVG。
无JavaScript：为安全起见，禁用了点击事件和JavaScript回调。
图表选择指南
| 使用场景 | 图表类型 | 关键词 |
|---|---|---|
| 流程流程、决策树 | 流程图 | flowchart |
| API调用、消息传递 | 序列 | sequenceDiagram |
| OOP设计、关系 | 类 | classDiagram |
| 项目时间线、调度 | 甘特图 | gantt |
| 状态机、生命周期 | 状态 | stateDiagram-v2 |
| Git分支策略 | Gitgraph | gitGraph |
| 头脑风暴、层级 | 思维导图 | mindmap |
| 比例、百分比 | 饼图 | pie |
| 数据库架构、实体 | ER图 | erDiagram |
| 用户体验步骤、满意度 | 用户旅程 | journey |
| 历史事件、里程碑 | 时间线 | timeline |
| 优先级矩阵、2D定位 | 象限图 | quadrantChart |
| 流程可视化、比例带 | 桑基图 | sankey-beta |
| 数值数据可视化 | XY图表 | xychart-beta |
| 精确元素定位、布局 | 块图 | block-beta |
| 云服务、服务关系 | 架构 | architecture-beta |
快速开始示例
流程图
flowchart TD
A[开始] --> B{决策}
B -->|是| C[行动1]
B -->|否| D[行动2]
C --> E[结束]
D --> E
关键语法：
- 方向：
TD（自上而下），LR（从左到右），BT，RL - 形状：
[rect]，(rounded)，{diamond},[(cylinder)]，((circle)) - 箭头：
-->，-.->（虚线），==>（粗线） - 标签：
-->|文本|或-- 文本 -->
详情：flowchart.md
序列图
sequenceDiagram
参与者C作为客户端
参与者S作为服务器
参与者D作为数据库
C->>S: HTTP请求
激活S
S->>D: 查询
D-->>S: 结果
S-->>C: 响应
停用S
关键语法：
- 箭头：
->>（同步），-->>（响应），-)（异步） - 激活：
激活/停用或+/-后缀 - 控制：
循环，alt/else，opt，par/and，critical - 注释：
注释右侧A: 文本，注释覆盖A,B: 文本
详情：sequence.md
类图
classDiagram
类动物 {
+字符串名称
+整数年龄
+发声() 空
}
类狗 {
+取回() 空
}
动物 <|-- 狗 : 扩展
关键语法：
- 可见性：
+公共，-私有，#受保护，~包 - 关系：
<|--继承，*--组合，o--聚合，-->关联 - 方法：
+方法(参数)返回类型
甘特图
gantt
标题项目时间线
日期格式YYYY-MM-DD
节计划
需求 :a1, 2024-01-01, 7d
设计 :a2, 在a1之后, 5d
节开发
实现 :2024-01-15, 14d
测试 :7d
关键语法：
日期格式: 日期格式（YYYY-MM-DD等）- 任务：
名称 :id, 开始, 持续时间或名称 :在id之后, 持续时间 - 修饰符：
完成，激活，关键，里程碑
详情：gantt.md
状态图
stateDiagram-v2
[*] --> 空闲
空闲 --> 处理 : 开始
处理 --> 成功 : 完成
处理 --> 错误 : 失败
成功 --> [*]
错误 --> 空闲 : 重试
关键语法：
- 开始/结束：
[*] - 转换：
状态1 --> 状态2 : 事件 - 复合：
状态名称 { ... } - 叉/合并：
状态叉名称 <<叉>>,<<合并>>
详情：state.md
Gitgraph
gitGraph
提交id: "init"
分支开发
检出开发
提交id: "feat-1"
提交id: "feat-2"
检出主分支
合并开发id: "v1.0" 标签: "发布"
关键语法：
提交: 添加提交，可选id:,标签:,类型:分支名称: 创建分支检出名称: 切换分支合并名称: 合并分支
详情：gitgraph.md
思维导图
mindmap
根((项目))
前端
反应
类型脚本
后端
节点.js
邮政greSQL
开发运营
码头
CI/CD
关键语法：
- 缩进定义层次
- 形状：
根((圆圈)),(圆润),[正方形],))云(( - 使用4个空格或制表符缩进
详情：mindmap.md
饼图
pie showData
标题浏览器市场份额
"Chrome" : 65
"Safari" : 19
"Firefox" : 8
"Edge" : 5
"其他" : 3
关键语法：
标题: 可选图表标题showData: 在段上显示值- 格式：
"标签" : 值
详情：pie.md
ER图
erDiagram
客户 ||--o{ 订单 : 放置
订单 ||--|{ 行项目 : 包含
客户 {
整数id PK
字符串电子邮件UK
字符串名称
}
关键语法：
- 实体：
ENTITY_NAME - 属性：
类型名称 [PK/FK/UK] - 基数：
||--o{(一对多),||--||(一对一) - 关系：
ENTITY1 REL ENTITY2 : 标签
用户旅程
journey
标题客户支持
节联系
提交工单: 2: 客户
收到通知: 4: 代理
节解决
故障排除问题: 3: 代理
确认解决方案: 5: 客户
关键语法：
- 节：
节名称 - 任务：
任务名称: 分数: 参与者 - 分数：1-5 (1 = 不满意，5 = 满意)
- 参与者：涉及的用户角色
详情：journey.md
时间线
timeline
标题产品路线图
节2023
Q1 2023 : MVP发布
Q4 2023 : v1.0发布
节2024
Q2 2024 : 主要功能
Q4 2024 : v2.0
关键语法：
- 时间周期：
周期 : 事件 - 节：分组相关周期
- 多个事件：
周期 : 事件1 : 事件2 - 灵活格式：年份、月份、季度或自定义文本
详情：timeline.md
象限图
quadrantChart
标题功能优先级
x轴努力 --> 价值
y轴复杂性 --> 影响
深色模式: [0.4, 0.7]
搜索: [0.6, 0.8]
导出PDF: [0.7, 0.6]
修复UI错误: [0.2, 0.3]
关键语法：
- 轴：
x轴标签 --> 标签和y轴标签 --> 标签 - 点：
名称: [x, y]（坐标0.0-1.0） - 象限：自动在两个轴上的0.5处划分
桑基图
sankey-beta
A,B,10
A,C,15
B,D,8
C,D,22
关键语法：
- CSV格式：
源，目标，值 - 需要三个列
- 值是数值（流量大小）
- 节点自动从源/目标创建
详情：sankey.md
XY图表
xychart-beta
标题"销售数据"
x轴 [一月，二月，三月，四月，五月]
y轴 "收入" 0 --> 100
线 [30, 45, 55, 70, 85]
关键语法：
- 图表类型：
xychart-beta或xychart-beta horizontal - X轴：
[类别]或最小 --> 最大 - Y轴：
"标签" 最小 --> 最大 - 系列：
线 [值]或条 [值]
详情：xychart.md
块图
block-beta
列2
A["前端"]:1
B["后端"]:1
C["数据库"]:2
样式A填充:#e3f2fd,笔画:#1565c0,颜色:#0d47a1
样式B填充:#f3e5f5,笔画:#7b1fa2,颜色:#4a148c
样式C填充:#e8f5e9,笔画:#2e7d32,颜色:#1b5e20
关键语法：
- 块：
ID["标签"]:SPAN- 每个块在新行 - 列：
列N- 定义布局宽度 - 样式：
样式ID填充:#hex,笔画:#hex,颜色:#hex - 跨度：
:N后缀 - 块占据多少列
详情：block.md
架构图
architecture-beta
组云(云)[云基础设施]
服务web(服务器)[Web服务器]在云中
服务api(服务器)[API服务器]在云中
服务db(数据库)[数据库]
web:R --> L:api
api:R --> L:db
关键语法：
- 组：
组 {id}({icon})[{label}]- 组织服务 - 服务：
服务 {id}({icon})[{label}] (在 {parent})?- 可用图标：服务器，数据库，云，磁盘，互联网 - 嵌套：
在 {parent_id}- 将服务/组放在父组内 - 连接：
{id1}:{pos} {箭头} {pos}:{id2}- 位置：L(eft), R(ight), T(op), B(ottom) - 箭头：
-->（右），<--（左），--（两者）
常见模式
添加样式
flowchart LR
A[正常] --> B[样式化]
样式B填充:#f96,笔画:#333,笔画宽度:2px
使用类
flowchart LR
A:::highlight --> B --> C:::highlight
类Def highlight填充:#ff0,笔画:#f00,笔画宽度:2px
注释
flowchart TD
%% 这是一个注释
A --> B
参考
有关常见功能的完整文档：
- reference.md - 样式，主题，注释，指令
有关图表特定指南：
- flowchart.md - 节点形状，链接，子图
- sequence.md - 消息，激活，控制流
- class-diagram.md - 类，关系
- gantt.md - 任务，依赖关系，里程碑
- state.md - 状态，转换，复合状态
- gitgraph.md - 提交，分支，合并
- mindmap.md - 层次结构，节点形状
- pie.md - 比例数据
- er-diagram.md - 实体，属性，关系（会话1）
- journey.md - 用户旅程，满意度分数（会话1）
- timeline.md - 事件，里程碑，时间段（会话1）
- quadrant-chart.md - 优先级矩阵，2D定位（会话2）
- sankey.md - 流程可视化，比例带（会话2）
- xychart.md - 数值数据可视化（会话2）
- block.md - 元素定位，多列布局（会话3）
- architecture.md - 云服务，服务关系（会话3）