ai_member_xiaobian/.agents/skills/lark-whiteboard/scenes/mermaid.md
2026-05-15 10:57:05 +08:00

3.4 KiB
Raw Permalink Blame History

Mermaid 图表路径

本场景与 DSL 路径互斥。

DSL 路径 Mermaid 路径
中间格式 JSONWBDocument 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 的流程图样式较基础,也无法在节点内部嵌套复杂排版;复杂流程优先走 DSLscenes/flowchart.md),极简文字流程或用户显式给 Mermaid 代码时再使用 Mermaid。