rongshu/.agents/skills/lark-whiteboard/scenes/mermaid.md

Mermaid 图表路径

本场景与 DSL 路径互斥。

	DSL 路径	Mermaid 路径
中间格式	JSON（WBDocument）	Mermaid 文本（.mmd 文件）
布局控制	精确控制（x/y 坐标、Flex）	由 parser-kit 自动布局
视觉定制	完全可控（颜色、字号、圆角等）	有限（Mermaid 语法）
参考模块	references/ + 对应 scene	仅本文件

适用条件

满足以下任一条件时使用：

• 用户明确要求 "用 Mermaid" 或 "输出 Mermaid"
• 用户直接粘贴了 Mermaid 语法文本
• 图表类型为思维导图、时序图、类图、饼图（自动路由）

思维导图 (Mindmap)

mindmap
  root((主题))
    分支A
      子项A1
      子项A2
    分支B
      子项B1
    分支C

时序图 (Sequence Diagram)

sequenceDiagram
    participant A as 浏览器
    participant B as 服务器
    participant C as 数据库
    A->>B: 请求数据
    B->>C: 查询
    C-->>B: 返回结果
    B-->>A: 响应数据

消息类型：

• ->> 实线箭头（同步请求）
• -->> 虚线箭头（响应/异步）
• -x 带 x 箭头（失败）

类图 (Class Diagram)

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +fetch()
    }
    Animal <|-- Dog

饼图 (Pie Chart)

pie title 分布
    "类别A" : 40
    "类别B" : 30
    "类别C" : 20
    "类别D" : 10

流程图 (Flowchart)

[!WARNING] 流程图不推荐使用 Mermaid 路径！ 带复杂分支、复合节点、高保真卡片样式的流程图应优先走 DSL 路径（参见 scenes/flowchart.md）。只有用户明确给出 Mermaid 代码，或场景本身就是极简文字流程时，才走此路径。

适用于：极简的文字节点判断业务流。

flowchart TD
    A([开始]) --> B{条件判断}
    B -->|是| C[处理步骤]
    B -->|否| D[另一步骤]
    C --> E([结束])
    D --> E

约束与规范

• 节点文字 ≤ 8 字（超过必须缩写，必要时加图例说明）
• 判断节点（菱形）只写条件关键词，不写长描述
• 步骤数 ≤ 12（超过需合并步骤或拆分为子流程）
• 遵循标准流程图符号：开始/结束用体育场形状或圆形 A([开始])，判断用菱形 B{判断}，步骤用矩形 C[步骤]

语法参考

方向：TD（上到下）、LR（左到右）、BT（下到上）、RL（右到左）

节点形状：A[矩形]、A(圆角)、A{菱形}、A((圆形))、A([体育场])、A[[子程序]]

连线：-->（实线）、-.->（虚线）、==>（粗线）、-->|标签|（带标签）

State Diagram

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing : 收到请求
    Processing --> Success : 处理成功
    Processing --> Failed : 处理失败
    Success --> [*]
    Failed --> Idle : 重试

其他支持的图表类型

• 甘特图：gantt
• ER 图：erDiagram
• Git 分支图：gitGraph

注意事项

• 输出纯 Mermaid 文本，不是 JSON，不要混用 DSL
• 节点文字含特殊字符时用双引号包裹：A["包含(括号)的文字"]
• subgraph 用于逻辑分组
• Mermaid 的流程图样式较基础，也无法在节点内部嵌套复杂排版；复杂流程优先走 DSL（见 scenes/flowchart.md），极简文字流程或用户显式给 Mermaid 代码时再使用 Mermaid。