Mermaid语法介绍

一、基础语法

1. 图表声明
   使用 graph TD（自上而下）或 graph LR（从左到右）定义图表方向，节点间用箭头连接。例如：

A

B

C

2. 节点类型

   • 矩形：A[文本]
   • 圆角矩形：B(文本)
   • 菱形：C{文本}
   • 圆形：D((文本))
   • 自定义形状：通过中括号调整，如 E>（旗帜形）、F{{}}（六边形）

3. 连接方式

   • 实线箭头：-->
   • 虚线：-.->
   • 带文字：-->|文本| 或 --|文本|-->
   • 粗箭头：==>
   • 双向箭头：<-->

二、高级功能

1. 子图（Subgraph）
   通过 subgraph 标题 创建模块化结构，支持嵌套和连接外部节点：

   subgraph one
       A --> B
   end
   subgraph two
       C --> D
   end
   A --> C
   

2. 注释与样式

   • 单行注释：%% 这是注释
   • 节点样式：通过 style 节点ID 定义颜色、边框等属性，如：

     style A fill:#f9f,stroke:#333
     style B fill:#bbf,stroke:#f66
     

3. 特殊字符处理
   复杂字符需用引号包裹或转义，例如：

   A["(TEXT)"] --> B  // 引号包裹
   A[“TEXT WITH QUOTE#quot;”] --> B  // 转义字符
   

三、支持的图表类型

Mermaid 可绘制多种图表，包括：

• 流程图（graph）
• 序列图（sequenceDiagram）
• 甘特图（gantt）
• 类图（classDiagram）
• 饼图（pie）等

四、示例代码

graph TD;
    A[开始] --> B{判断条件};
    B -->|是| C[执行操作];
    B -->|否| D[结束];
    click A "https://example.com"  // 点击事件

此代码展示了一个带交互的流程图。

更多语法细节可参考官方网页。