Mermaid 流程图语法要点与常见写法

1. Mermaid 简介

Mermaid 是一个基于 JavaScript 的绘图库，可以方便地创建流程图、序列图、时序图、甘特图等。它简单易用，语法简洁，支持多种图形和布局，广泛应用于文档、博客、演示文稿等领域。

2. Mermaid 语法基础

Mermaid 的语法基于 Markdown，使用特殊的语法规则来定义图形元素和连接关系。以下是一些基本的语法要点：

2.1 流程图元素

• 01
  节点

  使用括号 `()` 包围节点内容，例如：`() 开始`

• 02
  连接

  使用箭头 `->` 或 `–>` 连接节点，例如：`开始 -> 结束`

• 03
  菱形

  使用 `菱形` 关键字定义菱形节点，例如：`菱形 判断`

• 04
  连接线样式

  使用 `style` 关键字定义连接线样式，例如：`style dashed`

2.2 流程图布局

• 01
  横向布局

  默认布局，使用 `flowchart LR` 定义

• 02
  纵向布局

  使用 `flowchart TD` 定义

• 03
  网格布局

  使用 `flowchart MD` 定义

3. Mermaid 常见写法

3.1 基础流程图

“`mermaid

flowchart LR

A[开始] –> B{判断}

B — 是 –> C[处理]

B — 否 –> D[结束]

C –> D

“`

3.2 分支流程图

“`mermaid

flowchart LR

A[开始] –> B{判断}

B — 是 –> C[处理]

B — 否 –> D[分支1]

D –> E[处理1]

D –> F[处理2]

E –> G[结束]

F –> G

C –> G

“`

3.3 并行流程图

“`mermaid

flowchart LR

A[开始] –> B{判断}

B — 是 –> C[处理1]

B — 否 –> D[处理2]

C & D –> E[结束]

“`

4. 总结

Mermaid 流程图语法简单易学，能够满足大部分流程图绘制需求。通过掌握基本的语法规则和常见写法，可以轻松创建各种类型的流程图。在实际应用中，可以根据具体需求调整布局和样式，使流程图更加清晰易懂。