参数配置
在配置文件 config 中找到 mermaid 配置，并设置为 true，theme 可以设置浅色和深色背景的样式，共有4个可用选项。如果找不着就自己在 config 中添加。
mermaid:
enable: true
theme: default # default | dark | forest | neutral
options:
displayMode: true
startOnLoad: true流程图
下为Mermaid图形工具插件的一些流程图的具体用法示例，参考了官方指导教程Mermaid Flowchart以及其他人的博客，后面的其他几种类型的图表同理：
flowchart TD
classDef oval stroke:#333,fill:#E6E6FA;
classDef rect stroke:#333,fill:#ADD8E6;
classDef diamond stroke:#333,fill:#90EE90;
classDef parallelogram stroke:#333,fill:#F0E68C;
classDef stadium stroke:#333,fill:#D2B48C;
classDef predef stroke:#333,fill:#D8BFD8;
classDef cylinder stroke:#333,fill:#FFFACD;
classDef asym stroke:#333,fill:#FFDAB9;
classDef circle stroke:#333,fill:#FFFFFF;
classDef delay stroke:#333,fill:#D3D3D3;
classDef document stroke:#333,fill:#FAFAD2;
classDef note stroke-dasharray:3,stroke:gray,fill:#FFFFE0;
A(("开始")):::oval -->|启动程序| B["初始化系统"]:::rect
B --> C{用户登录?}:::diamond
C -->|是| D["输入用户名/密码"]:::parallelogram
C -->|否| H>"发送邮件通知"]:::asym
D --> E([手动验证身份]):::stadium
E -->|通过| F[[用户认证模块]]:::predef
F --> G[(用户数据库)]:::cylinder
G --> I((conn1)):::circle
I -->|连接点1| J>"API响应延迟"]:::delay
J --> K[[支付处理子流程]]:::predef
K --> L["生成报告"]:::parallelogram
L --> M[/"审计日志.pdf"/]:::document
M --> N{"金额 > 5000?"}:::diamond
N -->|是| O([主管签名]):::stadium
O --> R(("结束")):::oval
N -->|否| R
F -.->|错误日志| P>"注意：需3日内归档"]:::note
P --> R
linkStyle 14 stroke:gray,stroke-dasharray:3,color:gray%% ============== 样式定义 ==============
%% 使用 classDef 定义可复用的节点样式，语法：classDef 样式名称 stroke:<边框颜色>,fill:<填充颜色>,<其他样式>
classDef oval stroke:#333,fill:#E6E6FA; %% 椭圆样式（开始/结束节点）
classDef rect stroke:#333,fill:#ADD8E6; %% 矩形样式（常规处理步骤）
......（后续省略）
%% ============== 节点定义 ==============
%% 节点语法：唯一标识符(("显示内容")):::样式类
A(("开始")):::oval %% A节点标识符，双括号表示圆形/椭圆，用于开始/结束节点
B["初始化系统"]:::rect %% B节点标识符，方括号表示矩形（常规处理步骤）
......（后续省略）
%% ============== 连接线定义 ==============
%% 连接线基本语法：节点A -->|连线文字| 节点B
A -->|启动程序| B %% 带文字说明的实线箭头
B --> C %% 无文字实线箭头
C -->|是| D %% 带条件判断的实线箭头
C -->|否| H %% 另一个条件分支
D --> E
E -->|通过| F %% 带处理结果的箭头
F --> G
G --> I
I -->|连接点1| J %% 连接点说明
J --> K
K --> L
L --> M
M --> N
N -->|是| O %% 金额判断分支
N -->|否| R %% 直接结束分支
O --> R
%% 特殊连接线
F -.->|错误日志| P %% -.-> 表示虚线箭头（特殊流程）
P --> R %% 注释指向结束
%% ============== 线样式定义 ==============
%% linkStyle 语法：linkStyle 序号 stroke:<颜色>,stroke-dasharray:<虚线样式>
linkStyle 14 stroke:gray,stroke-dasharray:3,color:gray %% 设置索引为14的连接线样式（F到P）- 流程图方向：
TB/TD ↓、BT ↑、RL ←、LR → - 连接线定义：
A[Hard] -->|Text| B(Round)节点A通过带文本”Text”的箭头指向节点B - 图形介绍：
[ ]：矩形节点，表示常规处理步骤
{ }：菱形节点，用于条件判断且必须有两个以上出口
[ ]：平行四边形，作为输入输出接口（用户交互或数据输出）
(( ))：椭圆形开始/结束节点，标记流程起点或终点
([ ])：圆角矩形，人工操作环节需要人员介入
[[ ]]：双中括号子流程节点，表示预设的独立功能模块
[( )]：圆柱体节点，代表数据库存储
时序图
sequenceDiagram
爱丽丝->>鲍勃: 嗨，鲍勃，你最近还好吗？
鲍勃->>爱丽丝: 我很好，谢谢。你呢？
create participant 卡尔
爱丽丝->>卡尔: 嗨，卡尔！
create actor D as 唐纳德
卡尔->>D: 嗨！
destroy 卡尔
爱丽丝-x卡尔: 我们数量太多了！
destroy 鲍勃
鲍勃->>爱丽丝: 我同意。sequenceDiagram
爱丽丝->>鲍勃: 嗨，鲍勃，你最近还好吗？
鲍勃->>爱丽丝: 我很好，谢谢。你呢？
create participant 卡尔
爱丽丝->>卡尔: 嗨，卡尔！
create actor D as 唐纳德
卡尔->>D: 嗨！
destroy 卡尔
爱丽丝-x卡尔: 我们数量太多了！
destroy 鲍勃
鲍勃->>爱丽丝: 我同意。甘特图
甘特图是一种条形图，由 Karol Adamiecki 于 1896 年首次开发，并由 Henry Gantt 在 1910 年代完善，它说明了项目时间表以及完成任何一个项目所需的时间，常用于项目规划。
---
displayMode: compact
---
gantt
title 《赤红之夜》开发计划 (v1.0)
dateFormat YYYY-MM-DD
axisFormat %m-%d
todayMarker stroke-dasharray:5,5,stroke:#000,stroke-width:2px
section 剧情
劫匪 : done, story1, 2025-07-10, 5d
落脚 : active, story2, after story1, 3d
亲朋 : story3, after story2, 3d
夜色 : story4, after story3, 3d
杀机 : story5, after story4, 3d
回溯 : story6, after story5, 3d
section 机制
战斗系统 : tech1, after story6, 10d
剧情回溯 : tech2, after tech1, 10d
section 测试
招人 : teste1, after tech2, 5d
测试 : teste2, after teste1, 10d
section 里程碑
剧本完成 : milestone, story_done, 2025-07-30, 0d
机制完成 : milestone, tech_start, 2025-08-19, 0d
初版完成 : milestone, release, 2025-09-03, 0d---
displayMode: compact %% 紧凑布局
---
gantt
title 《赤红之夜》开发计划 (v1.0)
dateFormat YYYY-MM-DD
axisFormat %m-%d %% X轴显示单位
todayMarker stroke-dasharray:5,5,stroke:#000,stroke-width:2px
section 剧情
劫匪 : done, story1, 2025-07-10, 5d %% done 已完成
落脚 : active, story2, after story1, 3d %% active 进行中
亲朋 : story3, after story2, 3d
夜色 : story4, after story3, 3d
杀机 : story5, after story4, 3d
回溯 : story6, after story5, 3d
section 机制
战斗系统 : tech1, after story6, 10d
剧情回溯 : tech2, after tech1, 10d
section 测试
招人 : teste1, after tech2, 5d
测试 : teste2, after teste1, 10d
section 里程碑
剧本完成 : milestone, story_done, 2025-07-30, 0d
机制完成 : milestone, tech_start, 2025-08-19, 0d
初版完成 : milestone, release, 2025-09-03, 0d柱状图
---
config:
xyChart:
width: 900
height: 600
showDataLabel: true
themeVariables:
xyChart:
titleColor: "#ff0000"
---
xychart-beta
title "销售收入"
x-axis [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
y-axis "收入（以美元为单位）" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]---
config:
xyChart:
width: 900
height: 600
showDataLabel: true
themeVariables:
xyChart:
titleColor: "#ff0000"
---
xychart-beta
title "销售收入"
x-axis [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
y-axis "收入（以美元为单位）" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]本文作者：晝行燈
版权声明：本文采用 CC BY-NC 4.0 协议授权
转载需注明作者及原文链接： https://mansifield.pages.dev/90h0qo/