Mermaid 图表技能

生成 Mermaid 图表，并使用 mmdc CLI 工具将其渲染为 PNG 格式。

参考文件

• 架构模式（流程图、C4、云架构、网络、微服务）→ references/architecture-patterns.md
• 时序图模式（API 流程、认证流程、CI/CD 流程、DLP 流程）→ references/sequence-patterns.md

根据请求的图表类型，加载对应的参考文件。

渲染工具

使用 mermaid.ink（免费在线渲染器，无需浏览器插件或本地安装）：

mkdir -p /home/bcaddy/.openclaw/workspace/diagrams
ENCODED=$(cat  | base64 -w 0)
curl -s "https://mermaid.ink/img/${ENCODED}?bgColor=white&width=2048" 
  -o /home/bcaddy/.openclaw/workspace/diagrams/.png

• 输出目录：/home/bcaddy/.openclaw/workspace/diagrams/
• 宽度：默认为 2048px；若图表极宽，可增大该值（例如 &width=3000）
• 务必先创建输出目录：mkdir -p /home/bcaddy/.openclaw/workspace/diagrams

工作流

1. 确定图表类型

• 网络/系统/云/微服务类图表 → 使用 flowchart 或 C4Context
• API/认证/数据流向、分步流程类图表 → 使用 sequenceDiagram
• 不确定时：若问题聚焦于“X 如何一步步工作”，优先选用时序图；若问题聚焦于“X 的整体结构是怎样的”，优先选用架构图

2. 加载参考文件

• 架构类图表 → references/architecture-patterns.md
• 时序类图表 → references/sequence-patterns.md

3. 生成 Mermaid 代码

• 编写完整且语法正确的 Mermaid 代码
• 节点标签需具备描述性（避免仅用 A、B、C 等简略标识）
• 在架构图中使用 subgraph 对相关组件进行逻辑分组
• 在时序图中合理使用 alt、loop、note 等块增强可读性
• 风格应与对应参考文件中的示例模式保持一致

4. 保存 .mmd 文件

保存路径：/home/bcaddy/.openclaw/workspace/diagrams/.mmd

文件名采用 kebab-case 并具备明确语义，例如：auth-flow.mmd、aws-architecture.mmd、api-gateway-sequence.mmd

5. 通过 mermaid.ink 渲染为 PNG

ENCODED=$(cat /home/bcaddy/.openclaw/workspace/diagrams/.mmd | base64 -w 0)
curl -s "https://mermaid.ink/img/${ENCODED}?bgColor=white&width=2048" 
  -o /home/bcaddy/.openclaw/workspace/diagrams/.png

6. 确认输出结果

报告已保存 PNG 文件的完整路径。同时可主动提供以下支持：调整布局、添加新组件，或生成一份 .mmd 文件供在 mermaid.live 或 VS Code 中进一步编辑。

提示

• 表示从左到右的流水线或网络流向时，使用 flowchart LR
• 表示自上而下的层级结构或云平台堆栈时，使用 flowchart TD
• 宽幅图表：增大 -w 参数（宽度）；高幅图表：增大 -H 参数（高度）
• 对于极其复杂的图表，建议拆分为多个独立图表
• 务必在每个 .mmd 文件顶部添加标题注释：%% Title: ...