\ud83e\udd9e Nm Cartograph Architecture Diagram — 代码架构图

v1.0.0

读取代码目录结构,自动生成 Mermaid 架构图,可用于新人上手、PR 评审或文档可视化,无需安装与凭证。

0· 54·1 当前·1 累计
by @athola·MIT-0
下载技能包 项目主页
License
MIT-0
最后更新
2026/4/10
0
安全扫描
VirusTotal
无害
查看报告
OpenClaw
安全
high confidence
该技能所请求的操作、无需安装/凭证及指令均与其声明的“从代码库生成 Mermaid 架构图”目的一致;未发现不匹配或无法解释的需求。
安全有层次,运行前请审查代码。

License

MIT-0

可自由使用、修改和再分发,无需署名。

运行时依赖

无特殊依赖

版本

latestv1.0.02026/4/10

- 首次发布“architecture-diagram”技能。 - 从代码库结构生成 Mermaid 架构图。 - 用于新人上手、PR 评审及可视化组件关系。 - 提供代码库探索、图表生成与渲染的工作流。 - 遵循节点分组与形状使用等图表清晰规范。

无害

安装命令

点击复制
官方npx clawhub@latest install nm-cartograph-architecture-diagram
🇨🇳 镜像加速npx clawhub@latest install nm-cartograph-architecture-diagram --registry https://cn.longxiaskill.com

技能文档

Night Market 技能 —— 移植自 claude-night-market/cartograph。如需完整的 agent、hooks 与 commands 体验,请安装 Claude Code 插件。

# 架构图

生成 Mermaid 流程图,展示代码库的高层级组件关系。

何时使用

  • 可视化插件/模块之间的关联
  • 新人上手时快速了解系统结构
  • 为 PR 评审提供架构文档
  • 回答“这个系统是如何拼装在一起的?”

工作流程

步骤 1:探索代码库

派遣 codebase explorer agent 分析范围:

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


若未提供 scope,则使用项目根目录。

步骤 2:生成 Mermaid 语法

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

  • 使用 flowchart TD(自上而下)表示层级系统
  • 使用 flowchart LR(自左向右)表示管道/流式系统
  • 按包将相关模块分组为 subgraph
  • 用描述性边标签说明关系
  • 节点上限 15–20 个(小模块可聚合)
  • 用形状区分组件类型:
- [Rectangle] 表示模块/包 - ([Stadium]) 表示入口点/命令 - [(Database)] 表示数据存储 - {Diamond} 表示决策点

示例输出

mermaid 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 句话简要说明其内容。

数据来源:ClawHub ↗ · 中文优化:龙虾技能库