mermaid 流程图
时间: 2025-05-16 18:45:41 浏览: 99
### 使用 Mermaid.js 创建流程图
Mermaid.js 是一种用于通过简单文本语法生成图表的工具[^1]。它支持多种类型的图表,其中包括流程图。以下是关于如何使用 Mermaid.js 的流程图语法以及一些示例。
#### 基本语法结构
Mermaid 流程图的基本语法遵循特定模式,其中节点和连接线被定义为一组关系。以下是一个基本的例子:
```mermaid
graph TD;
A[流程 1] --> B{决策};
B -- 是 --> C[流程 2];
B -- 否 --> D[流程 3];
```
上述代码表示了一个简单的流程图,其中 `A` 节点指向一个决策节点 `B`,而该决策有两个可能的结果:“是”和“否”,分别通向不同的后续节点[^2]。
#### 更复杂的例子
可以进一步扩展这种语法以创建更复杂的关系网络。例如:
```mermaid
graph TD;
Start((开始)) --> A[任务 1];
A --> Decision{决定};
Decision -- 方案 1 --> B[路径 1];
Decision -- 方案 2 --> C[路径 2];
B --> End1[(结束)];
C --> End2[(完成)];
```
在这个例子中,“Start” 表示起点,“Decision” 是一个条件分支,最终导向两个不同终点 “End1” 和 “End2”。此结构展示了多条路径的可能性及其逻辑流向。
#### 自定义样式
除了基础功能外,还可以自定义颜色、箭头方向以及其他视觉属性来增强可读性和美观度。比如设置主题或者调整线条风格:
```mermaid
%% 设置全局配置
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
graph TB;
classDef red fill:red,color:white;
start((启动)):::green ---|触发事件|--> process(Process);
process ===|同步操作|=== end((终止));
alt 条件判断
if (成功?) then
success(State):::red;
else
failure(Failure);
endif
end
```
这里引入了 CSS 类定义 (`classDef`) 并应用到某些元素上以便区分状态或阶段的颜色编码。
---
###
阅读全文
相关推荐


















