Mermaid 流程图
|
25
|
0
|
学习

545 字
|
5 分钟

在线编辑器

在线编辑器: https://www.mermaidchart.com/

流程图示例 (Flowchart Example)

---
title: 一个简单的小例子
---

graph TD

    %% 这是一段注释
    A("开始<br>检查咖啡机是否工作") --> B{有电源吗?};
    B -- 是 --> C{水箱有水吗?};
    B -- 否 --> D[插上电源];
    D --> A;
    C -- 是 --> E1[烧开水];

subgraph 制作咖啡工作流程

    E1--> E2[磨咖啡粉];
    E2 --> E3[煮咖啡];
    E3 --> E4[倒咖啡]

end

    C -- 否 --> F[加水];
    F --- Fnote[请使用纯净水]
    F --> C;
    E4 --> G((完成<br>享用咖啡!));

    %% 1. 定义模拟的内置类样式
    classDef state_error fill:#f8d7da,stroke:#dc3545,stroke-width:2px,color:#dc3545;
    classDef state_primary fill:#cce5ff,stroke:#004085,stroke-width:2px,color:#004085;
    classDef state_success fill:#d4edda,stroke:#155724,stroke-width:2px,color:#155724;
    classDef state_warning fill:#fff3cd,stroke:#856404,stroke-width:2px,color:#856404;
    %% 2. 定义一个备注类：透明背景，无边框，斜体文本
    classDef state_note fill:transparent,stroke:none,font-style:italic,color:#666;

    %% 节点应用样式
    class A state_primary
    class F state_warning
    class G state_success
    class Fnote state_note

file

简明语法手册

核心结构

  • 声明图表类型： 流程图必须以 graph 关键字开头，后面跟着图表的方向。
语法 说明
​graph TD​ Top to Down (从上到下) - 最常用
​graph LR​ Left to Right (从左到右)
​graph BT​ Bottom to Top (从下到上)
​graph RL​ Right to Left (从右到左)

节点 (Node) 定义和形状

  • 流程图中的每个步骤或实体被称为节点。
  • 节点的定义格式是：节点ID[节点显示的文本]。
  • 节点ID (如 A, B) 只能包含字母和数字，用于连接，不会显示。
  • 节点显示的文本 (如 开始, 处理步骤) 可以包含空格。
语法 形状 描述 示例
​ID[文本]​ 矩形 默认形状，用于处理步骤或活动。 ​A[处理数据]​
​ID(文本)​ 圆角矩形 用于开始/结束或子程序。 ​B(开始)​
​ID{文本}​ 菱形 用于判断或决策点。 ​C{是/否?}​
​ID>文本]​ 旗形 用于延迟/输入/输出。 ​D>输入文件]​
​ID((文本))​ 双圆 另一种用于开始/结束。 ​E((结束))​

连接 (Link) 方式

  • 使用箭头符号来连接两个节点，表示流程方向。
语法 描述 示例
​ID1 --> ID2​ 基本连接 (实线箭头) ​A --> B​
​ID1 --- ID2​ 实线连接 (无箭头) ​B --- C​
​ID1 -- 描述 -- ID2​ 带文本标签的连接 ​A -- Yes -- C​
​ID1 ==> ID2​ 粗连接 (粗实线箭头) ​B ==> D​

‍

特殊字符

  • 节点中的换行符使用 <br>​
  • 节点中的特殊符号（HTML 保留字符）要使用 html 转义符，或是（Mermaid 保留字符）先简单使用 " 试试
  • 使用 %% 进行注释

‍

样式

使用 classDef 定义样式，然后再使用 class 应用样式，也可以直接使用 class 写样式

下面定义了一些常用样式。

​state_note 定义了一个备注使用的样式

    %% 1. 定义模拟的内置类样式
    classDef state_error fill:#f8d7da,stroke:#dc3545,stroke-width:2px,color:#dc3545;
    classDef state_primary fill:#cce5ff,stroke:#004085,stroke-width:2px,color:#004085;
    classDef state_success fill:#d4edda,stroke:#155724,stroke-width:2px,color:#155724;
    classDef state_warning fill:#fff3cd,stroke:#856404,stroke-width:2px,color:#856404;
    %% 2. 定义一个备注类：透明背景，无边框，斜体文本
    classDef state_note fill:transparent,stroke:none,font-style:italic,color:#666;

    %% 节点应用样式
    class A state_primary
    class F state_warning
    class G state_success
    class Fnote state_note
上一篇