建议看完简明看完《 mermaid快速入门指南 》再看实例教程，然后再看这篇文章，这篇文章做为已经熟悉了mermaid代码基础语法，查漏补缺和提高理论基础，内容有些晦涩，另外请根据你需要的图学习相应的部分即可，无需将所有内容完全掌握。

Mermaid 语法全集

一、Mermaid 支持的所有图表类型总览

二、图表声明语法全集

1. 基础声明格式

图表类型 方向/参数

2. 各图表声明语法

flowchart LR
    A[图表声明] --> B[方向/参数]
    B --> C{具体配置}

具体声明：

• graph TD - 标准流程图（传统语法）
• flowchart TD - 新流程图语法（推荐）
• sequenceDiagram - 序列图
• classDiagram - 类图
• stateDiagram-v2 - 状态图 v2
• erDiagram - 实体关系图
• journey - 用户旅程图
• gantt - 甘特图
• pie - 饼图
• requirementDiagram - 需求图
• timeline - 时间线
• C4Context - C4上下文图
• C4Container - C4容器图
• C4Component - C4组件图
• quadrantChart - 四象限图
• mindmap - 思维导图
• gitGraph - Git图
• packet - 包图

三、节点/形状语法全集

1. 基础节点类型

方括号类：

id[显示文本]          # 矩形
id[文本\n换行]        # 带换行的矩形

圆角类：

id(显示文本)          # 圆角矩形
id((显示文本))        # 圆形
id(文本\n换行)        # 圆角矩形带换行

特殊形状：

id{显示文本}          # 菱形（决策）
id{{显示文本}}        # 六边形（准备）
id>显示文本]          # 非对称形状（右向）
id[/显示文本/]        # 平行四边形（右倾）
id[\显示文本\]        # 平行四边形（左倾）
id[/梯形\]           # 梯形
id[\梯形/]           # 反向梯形

存储类：

id[[显示文本]]        # 双矩形（子系统）
id[(圆柱体)]         # 圆柱形（数据库）

其他：

id((圆形))           # 圆形
id[文本]            # 基础矩形
id(文本)            # 圆角矩形（替代）

2. 节点样式标记

A:::className        # 应用CSS类
style A fill:#f9f    # 内联样式
linkStyle 0 stroke:#f00  # 连接线样式

四、连接线语法全集

1. 基本连接线

A --> B              # 实线箭头
A --- B              # 实线无箭头
A -.- B              # 虚线无箭头
A -.-> B             # 虚线箭头

2. 增强连接线

A ==> B              # 粗实线箭头
A === B              # 粗实线无箭头
A == 文本 ==> B      # 带文本粗箭头
A -- 文本 --> B      # 带文本箭头
A -. 文本 .-> B      # 带文本虚线箭头
A --o B              # 空心圆箭头
A --x B              # X形箭头
A o--o B             # 双空心圆
A x--x B             # 双X形

3. 多段连接线

A -- 文本1 --> B -- 文本2 --> C
A --> B & C --> D     # 多目标连接

4. 连接线长度控制

A ---- B             # 长连接线
A ------ B           # 更长连接线
A --------> B        # 长箭头

五、方向控制语法全集

1. 主方向

flowchart LR
    subgraph 方向控制
        direction TB
        T[Top to Bottom]
        direction BT
        B[Bottom to Top]
        direction LR
        L[Left to Right]
        direction RL
        R[Right to Left]
    end

2. 子图方向

subgraph 名称 [显示文本]
    direction LR/RL/TB/BT
    ...
end

六、序列图语法全集

1. 参与者定义

participant 名称
participant A as 别名
actor 名称           # 角色图标
actor A as 别名
database 名称        # 数据库图标

2. 消息类型

A->>B: 同步消息       # 实线箭头
A-->>B: 异步消息      # 虚线箭头
A->B: 实线无箭头
A-->B: 虚线无箭头
A-xB: 同步终止
A--xB: 异步终止
A-)B: 异步返回
A--)B: 异步虚线返回

3. 激活区

activate A
deactivate A
A->>+B: 激活开始
B-->>-A: 激活结束

4. 注释

Note right of A: 单行注释
Note over A,B: 多对象注释
Note left of A: 多行<br/>注释

5. 循环和条件

loop 循环条件
    A->>B: 消息
end
alt 条件1
    A->>B: 消息1
else 条件2
    A->>B: 消息2
end
opt 可选
    A->>B: 消息
end
par 并行
    A->>B: 消息1
    A->>C: 消息2
end

七、类图语法全集

1. 类定义

class 类名 {
    +publicField
    -privateField
    #protectedField
    ~packageField
    +method()
    -privateMethod()
}

2. 关系类型

ClassA <|-- ClassB      # 继承
ClassA *-- ClassB       # 组合
ClassA o-- ClassB       # 聚合
ClassA --> ClassB       # 关联
ClassA -- ClassB        # 链接
ClassA ..> ClassB       # 依赖
ClassA ..|> ClassB      # 实现
ClassA <--* ClassB      # 反向组合

3. 关系标签

ClassA "1" --> "many" ClassB : 包含
ClassA --> ClassB : 关联标签

4. 注解

<<interface>>           # 接口
<<abstract>>           # 抽象类
<<enumeration>>        # 枚举
<<service>>            # 服务

八、状态图语法全集

1. 状态定义

state 状态名 {
    [*] --> 子状态1
    子状态1 --> 子状态2
}

2. 特殊状态

[*]                    # 起始状态
stateName : 描述        # 状态描述
state "描述" as 状态名   # 状态别名

3. 状态类型

state 状态名 <<fork>>   # 分叉
state 状态名 <<join>>   # 合并
state 状态名 <<choice>> # 选择
state 状态名 <<note>>   # 注释
state 状态名 <<input>>  # 输入

4. 转换语法

源状态 --> 目标状态 : 事件/动作
状态名 --> [*] : 结束

九、实体关系图语法全集

1. 实体定义

实体名 {
    字段名 数据类型 PK
    字段名 数据类型 FK
}

2. 关系定义

实体1 ||--o{ 实体2 : "关系标签"
实体1 }o--|| 实体2 : "标签"

3. 关系基数

||--|| : 一对一
}|--|| : 一对多（左多）
||--|{ : 一对多（右多）
}|--|{ : 多对多
o|--|| : 可选对必须
}|--o| : 必须对可选

4. 数据类型

STRING
INT
BOOL
DATE
等...

十、用户旅程图语法全集

1. 旅程定义

journey
    title 旅程标题
    section 阶段1
        任务1: 5: 用户
        任务2: 3: 系统
    section 阶段2
        任务3: 1: 用户

2. 任务评分

任务名: 评分: 参与者
评分范围: 0-10

十一、甘特图语法全集

1. 基础配置

gantt
    title 标题
    dateFormat YYYY-MM-DD
    excludes weekends
    section 阶段

2. 任务定义

任务名 :里程碑, id, 开始日期, 时长d
任务名 :crit, id, after id2, 时长d

3. 任务状态

done            # 已完成
active          # 进行中
crit            # 关键路径
里程碑          # 里程碑

4. 时间排除

excludes weekends     # 排除周末
excludes 2024-01-01   # 排除特定日期

十二、饼图语法全集

1. 基础语法

pie title 标题
    "标签1" : 数值1
    "标签2" : 数值2

2. 显示选项

pie showData          # 显示数据值

十三、需求图语法全集

1. 需求定义

requirementDiagram

requirement 需求ID {
    id: 需求编号
    text: 需求描述
    risk: High/Medium/Low
    verifymethod: Test/Analysis/Inspection
}

2. 关系类型

contains             # 包含
copies              # 复制
derives             # 派生
satisfies           # 满足
verifies            # 验证
refines             # 细化
traces              # 跟踪

十四、时间线语法全集

1. 基础语法

timeline
    title 时间线标题
    时间点 : 事件描述
    2024-01 : 事件1
    2024-02 : 事件2

2. 分组语法

timeline
    title 标题
    section 组1
        事件1 : 描述
    section 组2
        事件2 : 描述

十五、C4图语法全集

1. 上下文图

C4Context
    title 系统上下文图
    
    Person(用户, "系统用户")
    System(系统, "目标系统")
    
    Rel(用户, 系统, "使用")

2. 元素类型

Person(别名, "标签", "描述")
System(别名, "标签", "描述")
SystemDb(别名, "标签", "描述")
Boundary(别名, "标签")

3. 关系

Rel(源, 目标, "标签", "技术")

十六、四象限图语法全集

1. 基础语法

quadrantChart
    title 标题
    x-axis "低优先级" --> "高优先级"
    y-axis "易实施" --> "难实施"
    quadrant-1 "立即执行"
    quadrant-2 "计划执行"
    quadrant-3 "重新评估"
    quadrant-4 "避免"
    
    "项目A": [0.3, 0.6]
    "项目B": [0.7, 0.3]

十七、思维导图语法全集

1. 根节点

mindmap
    root(根节点)
        子节点1
            孙节点1
            孙节点2
        子节点2

2. 节点形状

(Root)               # 圆形根节点
[方形节点]           # 方形节点
{六边形节点}          # 六边形节点
((圆形节点))          # 圆形节点

十八、Git图语法全集

1. 基础语法

gitGraph
    commit
    branch 分支名
    checkout 分支名
    commit
    merge 分支名

2. 操作命令

commit
branch
checkout
merge
reset

十九、样式和配置语法全集

1. 内联样式

style 元素ID fill:#颜色,stroke:#颜色,stroke-width:px,color:#文本色

2. CSS类定义

classDef 类名 fill:#色,stroke:#色,stroke-width:px
class 元素ID 类名

3. 主题配置

%%{init: {'theme':'base'}}%%
%%{init: {'theme':'dark'}}%%
%%{init: {'theme':'forest'}}%%
%%{init: {'theme':'neutral'}}%%

4. 配置选项

%%{init: {'themeVariables': {
    'primaryColor': '#ff0000',
    'primaryTextColor': '#fff'
}}}%%

二十、交互语法全集

1. 点击事件

click 元素ID "URL" "提示文本"
click 元素ID call 回调函数 "提示"

2. 链接目标

click 元素ID "https://example.com" _blank

二十一、注释和指令全集

1. 单行注释

%% 这是注释

2. 指令语法

%%{指令: 参数}%%

3. 常用指令

%%{init: {配置}}%%          # 初始化配置
%%{config: {配置}}%%        # 配置设置

二十二、特殊语法元素

1. Unicode支持

A["包含Unicode: 🚀"]

2. HTML实体

A["包含HTML: <br/>换行"]

3. Markdown支持

A["**加粗**和*斜体*"]

二十三、高级特性

1. 多行文本

A["第一行<br/>第二行"]

2. 自动换行

A[很长很长很长的文本会自动换行显示]

3. 子图嵌套

subgraph A
    subgraph B
        C
    end
end

二十四、语法限制和注意事项

1. 命名限制

• 节点ID：字母开头，可包含数字和下划线
• 避免使用Mermaid关键字作为ID
• 中文ID需要引号包裹

2. 语法冲突

• 避免特殊字符未转义
• 确保括号匹配
• 连接线语法要完整

3. 渲染限制

• 部分复杂嵌套可能渲染异常
• 超大数据集可能性能问题
• 浏览器兼容性考虑

总结

Mermaid 提供了 23 种图表类型，每种类型都有其独特的语法元素。主要语法类别包括：

1. 声明语法 - 定义图表类型和方向
2. 节点语法 - 15+种形状定义
3. 连接语法 - 10+种连接线类型
4. 关系语法 - 各图表特有的关系定义
5. 样式语法 - CSS样式控制
6. 交互语法 - 点击事件和链接
7. 配置语法 - 主题和全局设置

所有图表共享基础语法规则，但每种图表类型都有其专属的语法扩展。正确使用这些语法元素，可以创建出从简单流程图到复杂系统架构的各种可视化图表。