【在 Typora 的 Mermaid 代码块实现流程图】

Mermaid 是一种基于文本的图表绘制工具，使用简单的 Markdown 风格语法，可以轻松创建 流程图、甘特图、序列图、状态图 等。它广泛用于 Markdown 编辑器（如 Typora）、文档系统（如 Obsidian）、Wiki（如 GitHub Wiki） 以及网页应用中。

---

1. 流程图（Flowchart）

Mermaid 的流程图支持 方向、条件判断、循环、子流程等。

📌 基本流程图

📝 说明

graph TD  
  A[开始] --> B{条件判断}  
  B -- 是 --> C[执行操作]  
  B -- 否 --> D[结束]  
  C --> D

• graph TD：TD 表示 从上到下（Top to Down），还可以用 LR（从左到右）。
• A[文本]：矩形 节点。
• B{文本}：菱形（条件判断）。
• -->：表示普通的箭头连接。
• -- 文字 -->：箭头上带文本。

---

📌 复杂流程图

📝 说明

graph LR  
  A[用户请求] -->|成功| B(服务器)  
  A -->|失败| C{错误处理}  
  C -->|重试| A  
  C -->|终止| D[结束]

• B(文本)：表示圆角矩形。
• {文本}：条件判断（菱形）。
• |文本|：箭头上带文字。

---

2. 序列图（Sequence Diagram）

用于描述 系统中各个对象之间的交互过程。

📝 说明

sequenceDiagram
  participant A as 用户
  participant B as 服务器
  participant C as 数据库

  A->>B: 发送请求
  B->>C: 查询数据库
  C-->>B: 返回数据
  B-->>A: 返回结果

• participant A as 名称：定义 参与者。
• A->>B: 消息：从 A 发送消息到 B。
• B-->>A: 返回消息：B 发送返回消息到 A（虚线表示返回）。
• ->>：实线表示主动调用，-->> 表示响应或返回数据。

---

3. 甘特图（Gantt Chart）

用于 任务管理和项目进度可视化。

📝 说明

gantt
  title 项目进度
  dateFormat YYYY-MM-DD
  section 需求分析
    需求调研:done, 2024-01-01, 2024-01-10
    需求确认:active, 2024-01-11, 2024-01-15
  section 开发阶段
    后端开发: 2024-01-16, 2024-02-15
    前端开发: 2024-02-01, 2024-02-20
  section 测试阶段
    内测: 2024-02-21, 2024-02-28
    公测: 2024-03-01, 2024-03-10

• title：甘特图标题。
• dateFormat：日期格式。
• section：任务分区。
• 任务名称: 状态, 开始日期, 结束日期：
  • done：已完成
  • active：进行中

---

4. 状态图（State Diagram）

用于描述 状态转换。

📝 说明

stateDiagram
  [*] --> 空闲
  空闲 --> 运行 : 启动
  运行 --> 暂停 : 用户操作
  暂停 --> 运行 : 继续
  运行 --> [*] : 停止

• [ * ]：表示 开始状态 或 终止状态。
• 状态A --> 状态B : 事件：状态转换。

---

5. 类图（Class Diagram）

用于描述 面向对象的类结构。

📝 说明

classDiagram
  class 人 {
    +姓名
    +年龄
    +说话()
  }
  class 学生 {
    +学号
    +上课()
  }
  人 <|-- 学生

• class 类名 {}：定义类。
• + 表示 公共（public） 方法或属性。
• 类A <|-- 类B：表示 继承关系。

---

6. 实体关系图（ER Diagram）

📝 说明

erDiagram
  User ||--o{ Order : places
  Order ||--|{ Product : contains

erDiagram 语法不支持中文

• ||--o{：一对多 关系。
• ||--||：一对一 关系。

---

7. 饼图（Pie Chart）

📝 说明

pie
  title 市场份额
  "苹果" : 40
  "安卓" : 35
  "其他" : 25

---

8. 其他 Mermaid 语法

📌 定义子图（子流程）

📝 说明

graph TD
  subgraph 子流程1
    A --> B
  end
  subgraph 子流程2
    C --> D
  end
  B --> C

子流程（subgraph）可以组织流程图，使其更清晰。

---

📌 使用 ID 连接

📝 说明

graph TD
  id1["自定义 ID"] --> id2["另一个 ID"]

ID 可以用于在不同子图之间创建连接。

---

9. Mermaid 主题与样式

📌 1. 如何使用 themeVariables 自定义样式？

在 Mermaid 代码开头，使用 %%{init: {...}}%% 进行自定义：

🔹 说明

• theme: 'base' → 主题风格（也可用 default、dark、forest 等）。
• primaryColor: 'white' → 节点背景白色。
• primaryBorderColor: 'black' → 节点边框黑色。
• primaryBorderWidth: 3 → 边框加粗。

---

📌 2. Mermaid themeVariables 全部参数

✨ 核心参数

参数	作用	示例值
theme	主题风格	'default', 'base', 'dark', 'forest'
primaryColor	主要节点背景颜色	'white', '#ffcc00'
primaryTextColor	主要节点文本颜色	'black', '#333333'
primaryBorderColor	主要节点边框颜色	'black', '#666666'
primaryBorderWidth	主要节点边框宽度	1, 3, 5
lineColor	连接线颜色	'black', '#999999'
secondaryColor	次要节点背景色	'lightgray', '#f0f0f0'
tertiaryColor	第三级节点背景色	'lightblue', '#add8e6'

---

✨ 文本 & 字体

参数	作用	示例值
textColor	全局文本颜色	'black', 'gray'
fontSize	字体大小	12px, 16px, 20px
fontFamily	字体	'Arial', 'Courier New', 'Verdana'

---

✨ 箭头 & 线条

参数	作用	示例值
edgeColor	箭头颜色	'black', '#333333'
edgeLabelBackground	箭头标签背景	'white', '#ffcc00'
arrowheadColor	箭头颜色	'black', 'blue'
lineWidth	线条宽度	1, 2, 3
lineHeight	线条高度	1.2, 1.5

---

✨ 特殊节点

参数	作用	示例值
nodeBackground	普通节点背景色	'white', '#f0f0f0'
nodeBorderColor	普通节点边框色	'black', '#666666'
nodeBorderWidth	普通节点边框宽度	1, 2, 3
altBackground	交替行背景色（表格）	'lightgray', '#f0f0f0'

---

📌 3. Mermaid 主题风格

Mermaid 预设了几种主题，你可以在 theme 里指定：

主题	说明
default	默认主题（浅色背景）
dark	深色主题
forest	绿色森林风格
base	自定义基础主题

示例

---

📌 4. Mermaid 主题自定义示例

🎨 方案 1：白色背景，黑色边框

%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': 'white', 'primaryBorderColor': 'black', 'primaryBorderWidth': 3, 'textColor': 'black', 'edgeColor': 'black'}}}%%
graph TD
  A[开始] --> B{判断}
  B -->|是| C[操作1]
  B -->|否| D[操作2]
  C --> E[结束]
  D --> E

🎨 方案 2：黑色背景，白色文本

%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': 'black', 'primaryTextColor': 'white', 'primaryBorderColor': 'white', 'primaryBorderWidth': 2, 'textColor': 'white', 'edgeColor': 'white'}}}%%
graph TD
  A[开始] --> B{判断}
  B -->|是| C[操作1]
  B -->|否| D[操作2]
  C --> E[结束]
  D --> E

🎨 方案 3：蓝色背景，橙色边框

%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#1E90FF', 'primaryBorderColor': '#FFA500', 'primaryBorderWidth': 3, 'textColor': 'white'}}}%%
graph TD
  A[开始] --> B{判断}
  B -->|是| C[操作1]
  B -->|否| D[操作2]
  C --> E[结束]
  D --> E

---

总结

类型	语法
流程图	graph TD/LR
序列图	sequenceDiagram
甘特图	gantt
状态图	stateDiagram
类图	classDiagram
实体关系图	erDiagram
饼图	pie

Mermaid 语法简单易懂，适用于 项目管理、软件架构设计、数据建模等，可以在 Typora、Obsidian、GitHub Wiki 等工具中使用。