---
title: Mermaid 流程图写法入门
canonical: "https://mermaid.vloam.com/zh/docs/flowchart/"
pubDate: 2026-09-13
author: Vloam
description: 用方框、判断节点与带标签的箭头，画出从上到下或从左到右的流程图；并说明常用形状、箭头样式、subgraph 分组，以及让标签保持可读的写作建议。
---

流程图描述过程。步骤放在方框里，箭头表示顺序，菱形用来问「是或否」。

## 先选方向

- `flowchart TD` — 从上到下（适合短路径）
- `flowchart LR` — 从左到右（适合横向流水线）

也可以写 `flowchart TB`，和 `TD` 意思相同。

## 给节点起名并连线

每个节点先写 id，再在括号里写读者看到的文字：

```mermaid
flowchart LR
  A[收集] --> B[审阅]
  B --> C[发布]
```

`A`、`B`、`C` 是 id。`[]` 里的文字才是展示内容。要连回某个节点时，复用同一个 id。

## 常用形状

| 形状 | 写法 | 适合 |
| --- | --- | --- |
| 矩形 | `A[步骤]` | 普通动作 |
| 圆角 | `A([开始])` | 开始或结束 |
| 菱形 | `A{问题?}` | 判断 |
| 胶囊 | `A([标签])` | 柔和的起止 |
| 圆形 | `A((备注))` | 小状态 |

不必用全。矩形加一个菱形，就够写多数草稿。

## 给箭头加说明

说明文字放在 `|` 之间：

```mermaid
flowchart TD
  Ask{通过?} -->|是| Ship[发布]
  Ask -->|否| Fix[修改]
  Fix --> Ask
```

说明要短：`是`、`否`、`重试`。长句子放进方框，不要堆在箭头上。

## 箭头样式

- `-->` 实线箭头
- `-.->` 虚线箭头
- `==>` 粗箭头

可选路径用虚线。主路径用粗线，更容易扫读。

## 把相关步骤分组

图变大时，用 `subgraph` 包一组：

```mermaid
flowchart TD
  subgraph 准备
    A[起草] --> B[审阅]
  end
  B --> C[发布]
```

给分组起名，但别嵌套太深。分组一多，图就难扫。

## 写作建议

- 一个节点只表达一件事。
- 多用动词：`校验令牌`，少用空洞长句。
- 预览里文字折行超过两三次，就缩短文案。
- 先画成功路径，读通后再加失败分支。