Mermaid 流程图语法参考二

Mermaid 流程图语法参考二

文章目录

• [Mermaid 流程图语法参考二](#Mermaid 流程图语法参考二)
• • 扩展节点形状（v11.3.0+）
  • • 完整形状列表
    • 示例流程图
    • 各形状示例
    • • 过程（矩形）
      • 事件（圆角矩形）
      • 终点（Stadium）
      • 子过程
      • 数据库（圆柱）
      • 开始（圆形）
      • 奇数形
      • 决策（菱形）
      • 准备/条件（六边形）
      • 数据输入/输出（右倾斜）
      • 数据输入/输出（左倾斜）
      • 数据存储（顶底边框）
      • 优先行动（梯形底宽）
      • 手动操作（梯形顶宽）
      • 停止（双圆）
      • 文本块
      • 卡片（缺口矩形）
      • 内衬/阴影过程
      • 开始（小圆形）
      • 停止（带框圆）
      • 分叉/合并（长矩形）
      • 整理（沙漏）
      • 注释（左花括号）
      • 注释（右花括号）
      • 注释（两侧花括号）
      • 通信链路（闪电符号）
      • 文档
      • 延迟（半圆矩形）
      • 直接访问存储（水平圆柱）
      • 磁盘存储（内衬圆柱）
      • 显示器（弧形梯形）
      • 分割过程（分割矩形）
      • 提取（小三角形）
      • 内部存储（窗格）
      • 接合点（填充圆）
      • 内衬文档
      • 循环限制（缺口五边形）
      • 手动文件（翻转三角形）
      • 手动输入（斜角矩形）
      • 多文档（堆叠文档）
      • 多过程（堆叠矩形）
      • 纸带（旗形）
      • 存储数据（蝴蝶结矩形）
      • 摘要（交叉圆）
      • 标记文档
      • 标记过程（标记矩形）

扩展节点形状（v11.3.0+）

Mermaid 引入了 30 种新形状，提升流程图的灵活性和语义表达能力。

新语法格式：

A@{ shape: rect }

此语法将节点 A 渲染为矩形，等同于 A["A"] 或 A。

完整形状列表

语义名称	形状名称	短名	描述	别名
Bang	Bang	bang	Bang 形状	bang
卡片	缺口矩形	notch-rect	代表一张卡片	card, notched-rectangle
云	云形	cloud	云形状	cloud
整理	沙漏	hourglass	表示整理操作	collate, hourglass
通信链路	闪电符号	bolt	通信链路	com-link, lightning-bolt
注释（左）	花括号	brace	添加注释	brace-l, comment
注释（右）	花括号	brace-r	添加注释
注释（两侧）	花括号	braces	添加注释
数据输入/输出	右倾斜	lean-r	表示输入或输出	in-out, lean-right
数据输入/输出	左倾斜	lean-l	表示输出或输入	lean-left, out-in
数据存储	数据存储	datastore	数据流图数据存储	data-store
数据库	圆柱	cyl	数据库存储	cylinder, database, db
决策	菱形	diam	决策步骤	decision, diamond, question
延迟	半圆矩形	delay	表示延迟	half-rounded-rectangle
直接访问存储	水平圆柱	h-cyl	直接访问存储	das, horizontal-cylinder
磁盘存储	内衬圆柱	lin-cyl	磁盘存储	disk, lined-cylinder
显示器	弧形梯形	curv-trap	表示显示器	curved-trapezoid, display
分割过程	分割矩形	div-rect	分割过程形状	div-proc, divided-process, divided-rectangle
文档	文档	doc	代表文档	doc, document
事件	圆角矩形	rounded	代表事件	event
提取	三角形	tri	提取过程	extract, triangle
分叉/合并	填充矩形	fork	分叉或合并	join
内部存储	窗格	win-pane	内部存储	internal-storage, window-pane
接合点	填充圆	f-circ	接合点	filled-circle, junction
内衬文档	内衬文档	lin-doc	内衬文档	lined-document
内衬/阴影过程	内衬矩形	lin-rect	内衬过程形状	lin-proc, lined-process, lined-rectangle, shaded-process
循环限制	梯形五边形	notch-pent	循环限制步骤	loop-limit, notched-pentagon
手动文件	翻转三角形	flip-tri	手动文件操作	flipped-triangle, manual-file
手动输入	斜角矩形	sl-rect	手动输入步骤	manual-input, sloped-rectangle
手动操作	梯形顶宽	trap-t	表示手动任务	inv-trapezoid, manual, trapezoid-top
多文档	堆叠文档	docs	多个文档	documents, st-doc, stacked-document
多过程	堆叠矩形	st-rect	多个过程	processes, procs, stacked-rectangle
奇数形	奇数形	odd	奇数形状
纸带	旗形	flag	纸带	paper-tape
准备/条件	六边形	hex	准备或条件步骤	hexagon, prepare
优先行动	梯形底宽	trap-b	优先行动	priority, trapezoid, trapezoid-bottom
过程	矩形	rect	标准过程形状	proc, process, rectangle
开始	圆形	circle	起始点	circ
开始	小圆形	sm-circ	小起始点	small-circle, start
停止	双圆	dbl-circ	停止点	double-circle
停止	带框圆	fr-circ	停止点	framed-circle, stop
存储数据	蝴蝶结矩形	bow-rect	存储数据	bow-tie-rectangle, stored-data
子过程	带框矩形	fr-rect	子过程	framed-rectangle, subproc, subprocess, subroutine
摘要	交叉圆	cross-circ	摘要	crossed-circle, summary
标记文档	标记文档	tag-doc	标记文档	tag-doc, tagged-document
标记过程	标记矩形	tag-rect	标记过程	tag-proc, tagged-process, tagged-rectangle
终点	体育场形	stadium	终点站	pill, terminal
文本块	文本块	text	文本块

示例流程图

```mermaid
flowchart RL
    A@{ shape: manual-file, label: "File Handling"}
    B@{ shape: manual-input, label: "User Input"}
    C@{ shape: docs, label: "Multiple Documents"}
    D@{ shape: procs, label: "Process Automation"}
    E@{ shape: paper-tape, label: "Paper Records"}
```

File Handling
User Input
Multiple Documents
Process Automation
Paper Records

各形状示例

过程（矩形）

```mermaid
flowchart TD
    A@{ shape: rect, label: "This is a process" }
```

This is a process

事件（圆角矩形）

```mermaid
flowchart TD
    A@{ shape: rounded, label: "This is an event" }
```

This is an event

终点（Stadium）

```mermaid
flowchart TD
    A@{ shape: stadium, label: "Terminal point" }
```

Terminal point

子过程

```mermaid
flowchart TD
    A@{ shape: subproc, label: "This is a subprocess" }
```

This is a subprocess

数据库（圆柱）

```mermaid
flowchart TD
    A@{ shape: cyl, label: "Database" }
```

Database

开始（圆形）

```mermaid
flowchart TD
    A@{ shape: circle, label: "Start" }
```

Start

奇数形

```mermaid
flowchart TD
    A@{ shape: odd, label: "Odd shape" }
```

Odd shape

决策（菱形）

```mermaid
flowchart TD
    A@{ shape: diamond, label: "Decision" }
```

Decision

准备/条件（六边形）

```mermaid
flowchart TD
    A@{ shape: hex, label: "Prepare conditional" }
```

Prepare conditional

数据输入/输出（右倾斜）

```mermaid
flowchart TD
    A@{ shape: lean-r, label: "Input/Output" }
```

Input/Output

数据输入/输出（左倾斜）

```mermaid
flowchart TD
    A@{ shape: lean-l, label: "Output/Input" }
```

Output/Input

数据存储（顶底边框）

```mermaid
flowchart TD
    A@{ shape: datastore, label: "Data Store" }
```

渲染错误: Mermaid 渲染失败: No such shape: datastore.

优先行动（梯形底宽）

```mermaid
flowchart TD
    A@{ shape: trap-b, label: "Priority action" }
```

Priority action

手动操作（梯形顶宽）

```mermaid
flowchart TD
    A@{ shape: trap-t, label: "Manual operation" }
```

Manual operation

停止（双圆）

```mermaid
flowchart TD
    A@{ shape: dbl-circ, label: "Stop" }
```

Stop

文本块

```mermaid
flowchart TD
    A@{ shape: text, label: "This is a text block" }
```

This is a text block

卡片（缺口矩形）

```mermaid
flowchart TD
    A@{ shape: notch-rect, label: "Card" }
```

Card

内衬/阴影过程

```mermaid
flowchart TD
    A@{ shape: lin-rect, label: "Lined process" }
```

Lined process

开始（小圆形）

```mermaid
flowchart TD
    A@{ shape: sm-circ, label: "Small start" }
```

停止（带框圆）

```mermaid
flowchart TD
    A@{ shape: framed-circle, label: "Stop" }
```

分叉/合并（长矩形）

```mermaid
flowchart TD
    A@{ shape: fork, label: "Fork or Join" }
```

整理（沙漏）

```mermaid
flowchart TD
    A@{ shape: hourglass, label: "Collate" }
```

注释（左花括号）

```mermaid
flowchart TD
    A@{ shape: comment, label: "Comment" }
```

Comment

注释（右花括号）

```mermaid
flowchart TD
    A@{ shape: brace-r, label: "Comment" }
```

Comment

注释（两侧花括号）

```mermaid
flowchart TD
    A@{ shape: braces, label: "Comment" }
```

Comment

通信链路（闪电符号）

```mermaid
flowchart TD
    A@{ shape: bolt, label: "Communication link" }
```

文档

```mermaid
flowchart TD
    A@{ shape: doc, label: "Document" }
```

Document

延迟（半圆矩形）

```mermaid
flowchart TD
    A@{ shape: delay, label: "Delay" }
```

Delay

直接访问存储（水平圆柱）

```mermaid
flowchart TD
    A@{ shape: das, label: "Direct access storage" }
```

Direct access storage

磁盘存储（内衬圆柱）

```mermaid
flowchart TD
    A@{ shape: lin-cyl, label: "Disk storage" }
```

Disk storage

显示器（弧形梯形）

```mermaid
flowchart TD
    A@{ shape: curv-trap, label: "Display" }
```

Display

分割过程（分割矩形）

```mermaid
flowchart TD
    A@{ shape: div-rect, label: "Divided process" }
```

Divided process

提取（小三角形）

```mermaid
flowchart TD
    A@{ shape: tri, label: "Extract" }
```

Extract

内部存储（窗格）

```mermaid
flowchart TD
    A@{ shape: win-pane, label: "Internal storage" }
```

Internal storage

接合点（填充圆）

```mermaid
flowchart TD
    A@{ shape: f-circ, label: "Junction" }
```

内衬文档

```mermaid
flowchart TD
    A@{ shape: lin-doc, label: "Lined document" }
```

Lined document

循环限制（缺口五边形）

```mermaid
flowchart TD
    A@{ shape: notch-pent, label: "Loop limit" }
```

Loop limit

手动文件（翻转三角形）

```mermaid
flowchart TD
    A@{ shape: flip-tri, label: "Manual file" }
```

Manual file

手动输入（斜角矩形）

```mermaid
flowchart TD
    A@{ shape: sl-rect, label: "Manual input" }
```

Manual input

多文档（堆叠文档）

```mermaid
flowchart TD
    A@{ shape: docs, label: "Multiple documents" }
```

Multiple documents

多过程（堆叠矩形）

```mermaid
flowchart TD
    A@{ shape: processes, label: "Multiple processes" }
```

Multiple processes

纸带（旗形）

```mermaid
flowchart TD
    A@{ shape: flag, label: "Paper tape" }
```

Paper tape

存储数据（蝴蝶结矩形）

```mermaid
flowchart TD
    A@{ shape: bow-rect, label: "Stored data" }
```

Stored data

摘要（交叉圆）

```mermaid
flowchart TD
    A@{ shape: cross-circ, label: "Summary" }
```

标记文档

```mermaid
flowchart TD
    A@{ shape: tag-doc, label: "Tagged document" }
```

Tagged document

标记过程（标记矩形）

```mermaid
flowchart TD
    A@{ shape: tag-rect, label: "Tagged process" }
```

Tagged process

---