workflow-diagram

工作流图

根据代码或文档生成 Mermaid 流程图，展示工作流、 流水线或状态机。

适用场景

• 可视化 CI/CD 或部署流水线
• 记录多步骤开发工作流
• 描绘状态机或生命周期流程
• 回答“运行 X 时会发生哪些步骤？”

不适用场景

• 描述组件间的数据流动（使用 cartograph:data-flow）
• 描述组件结构（使用 cartograph:architecture-diagram）

工作流

第 1 步：探索代码库

调度代码库探索 Agent：

Agent(cartograph:codebase-explorer)
Prompt: Explore [scope] and return a structural model.
Focus on process steps, conditional logic, state
transitions, and pipeline stages for a workflow diagram.
Look for: Makefiles, CI configs, hook chains, command
sequences, and lifecycle methods.

第 2 步：生成 Mermaid 语法

将结构模型转换为 Mermaid 流程图， 并加入决策节点和处理步骤。

工作流图规则：

• 顺序流程使用 flowchart TD
• 包含并行轨道的流水线使用 flowchart LR
• 使用形状区分步骤类型：
  • [Rectangle] 表示处理步骤
  • {Diamond} 表示决策点
  • ([Stadium]) 表示开始／结束状态
  • [[Subroutine]] 表示子流程
  • ((Circle)) 表示汇合／同步点
• 使用 -->|label| 标记转换条件
• 将并行轨道分组到子图中
• 按结果着色：
  • 默认样式表示正常路径
  • 虚线（-.->）表示错误／回退路径
  • 粗线（==>）表示关键路径
• 节点数最多为 20 个

输出示例：

flowchart TD
    start([Start: PR Created])
    lint[Run Linters]
    test[Run Tests]
    review{Code Review}
    approve[Approved]
    changes[Request Changes]
    merge([Merge to Main])

    start --> lint --> test
    test --> review
    review -->|pass| approve --> merge
    review -->|fail| changes -.-> lint

第 3 步：通过 MCP 渲染

调用 Mermaid Chart MCP 进行渲染：

mcp__claude_ai_Mermaid_Chart__validate_and_render_mermaid_diagram
  prompt: "Workflow diagram of [scope/process]"
  mermaidCode: [generated syntax]
  diagramType: "flowchart"
  clientName: "claude-code"

如果渲染失败，请修复语法并重试（最多重试 2 次）。

第 4 步：呈现结果

展示渲染后的图表，并用简短文字说明 工作流阶段和决策点（2-3 句话）。

完成标准

• 已生成 Mermaid flowchart 语法，其中至少包含一个 表示条件分支的菱形 {Decision} 节点
• 已调用 mcp__claude_ai_Mermaid_Chart__validate_and_render_mermaid_diagram 且未报错返回（或已尝试重试并报告结果）
• 如果源代码中存在错误路径，则使用虚线箭头（-.->）绘制错误／回退路径， 与正常路径箭头区分开来
• 节点数不超过 20 个；如果步骤更多，则将子流程 折叠为 [[Subroutine]] 节点
• 在图表旁展示 2-3 句话，说明工作流阶段和决策点