mcpField
A
architecture-diagram

architecture-diagram

github.com/athola开发34391 次安装3 天前更新
代码仓库

关于 architecture-diagram

architecture-diagram 用于分析代码库并生成展示高层组件关系的 Mermaid 流程图，适合架构文档、项目入门和 PR 讨论，并通过 Mermaid Chart MCP 渲染图表。

主要功能

  1. 01探索代码库结构
  2. 02生成 Mermaid 架构流程图
  3. 03用子图归类模块
  4. 04渲染并验证图表
  5. 05附上图表摘要

适用场景

  1. 01了解插件和模块关系
  2. 02熟悉陌生项目
  3. 03在 PR 评审中记录架构

MCP 相关

使用 Mermaid Chart MCP 验证并渲染生成的流程图。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/athola/claude-night-market --skill architecture-diagram

安装后在 Claude Code 中输入/architecture-diagram确认已加载。

详细介绍

架构图

生成 Mermaid 流程图，展示代码库中各组件的高层关系。

适用场景

  • 可视化插件／模块之间的关系
  • 帮助新成员了解系统结构
  • 为 PR 评审记录架构
  • 回答“这个系统是如何组合在一起的？”

不适用场景

  • 导入级别的耦合关系（使用 cartograph:dependency-graph）
  • 运行时调用路径（使用 cartograph:call-chain）

工作流

步骤 1：探索代码库

调用代码库探索 Agent 分析范围：

Agent(cartograph:codebase-explorer)
Prompt: Explore [scope] and return a structural model.
Focus on packages, modules, and their relationships
for an architecture diagram.

如果未提供范围，则使用项目根目录。

步骤 2：生成 Mermaid 语法

将结构模型转换为 Mermaid 流程图。

架构图规则：

  • 对分层系统使用 flowchart TD（自上而下）
  • 对管道／流式系统使用 flowchart LR（从左到右）
  • 按包将相关模块归入子图
  • 使用描述性边标签说明关系
  • 节点最多 15–20 个（将小型模块合并表示）
  • 使用不同形状区分组件类型：
    • [Rectangle] 表示模块／包
    • ([Stadium]) 表示入口点／命令
    • [(Database)] 表示数据存储
    • {Diamond} 表示决策点

输出示例：

flowchart TD
    subgraph sanctum[Sanctum Plugin]
        commit[Commit Messages]
        pr[PR Preparation]
        workspace[Workspace Review]
    end

    subgraph leyline[Leyline Plugin]
        git[Git Platform]
        patterns[Error Patterns]
    end

    commit --> git
    pr --> workspace
    pr --> git
    workspace --> patterns
步骤 3：通过 MCP 渲染

调用 Mermaid Chart MCP 进行渲染：

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

如果渲染失败，请根据错误消息修正 Mermaid 语法并重试（最多重试 2 次）。

步骤 4：呈现结果

向用户展示渲染后的图表，并简要总结图表所展示的内容（2–3 句话）。

完成标准

  • 已生成 Mermaid flowchart 语法，其中包含至少一个用于归组相关模块的 subgraph 块
  • 已调用 mcp__claude_ai_Mermaid_Chart__validate_and_render_mermaid_diagram，且调用成功、未返回错误（或首次失败后已尝试重试并报告结果）
  • 图表节点数为 3 到 20 个（符合技能规则）
  • 渲染结果旁已附上 2–3 句话的图表说明
  • 如果 MCP 渲染在重试 2 次后仍失败，仍须以代码块形式展示 Mermaid 语法，并说明错误

评论

支持 Markdown