mcpField
A
arch-diagrams

arch-diagrams

github.com/alphaonedev开发49 次安装
代码仓库

关于 arch-diagrams

供 OpenClaw 使用的架构图技能，可从文字描述生成、编辑和渲染多种图表，并导出代码或图像，适用于软件设计与技术文档工作。

主要功能

  1. 01生成 C4 架构图
  2. 02渲染 PlantUML 为 SVG 或 PNG
  3. 03创建 Mermaid 流程图、时序图和 ERD
  4. 04支持基础设施图
  5. 05解析并修改现有图表源码
  6. 06导出代码片段或图像文件

适用场景

  1. 01记录软件架构设计
  2. 02规划系统交互流程
  3. 03从数据库结构创建 ERD
  4. 04为文档导出图表

安装

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

$npx skills add https://github.com/alphaonedev/openclaw-graph --skill arch-diagrams

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

详细介绍

arch-diagrams

用途

此技能允许 OpenClaw 使用 C4 模型、PlantUML、Mermaid、时序图、ERD 和基础设施图等工具生成、编辑和渲染架构图。它将图表创建集成到编码工作流中，用于可视化系统设计。

适用场景

在记录软件架构、规划系统交互，或为 ERD 和时序流程创建可视化辅助材料时，使用此技能。在设计阶段、代码审查期间，或与他人协作搭建基础设施时使用它，以便根据文本描述快速制作图表原型。

主要功能

  • 根据高层描述生成 C4 图。
  • 将 PlantUML 代码渲染为 SVG 或 PNG 输出。
  • 创建用于流程图、时序图和 ERD 的 Mermaid 图表。
  • 支持使用 AWS 或通用云图标等工具绘制基础设施图。
  • 通过解析和修改源代码（例如 PlantUML 语法）来编辑现有图表。
  • 将图表导出为代码片段或图像文件，以便插入文档。

使用模式

要完成任务，请向 OpenClaw 提供清晰的文本描述或部分图表代码，然后指定图表类型。例如，通过 CLI 或 API 调用此技能，并传入 JSON 配置等输入。始终提供上下文，例如“为一个带数据库的 Web 应用生成 C4 容器图”。通过串联命令处理迭代，例如先生成，再审查，最后优化。使用环境变量进行身份验证，例如在操作前设置 $OPENCLAW_API_KEY。

常用命令/API

使用 OpenClaw CLI 直接执行，或通过 API 以编程方式访问。在环境中使用 $OPENCLAW_API_KEY 进行身份验证。

  • CLI 命令：openclaw arch-diagrams generate --type mermaid --input "sequenceDiagram: A->B: Request" --output diagram.md 此命令根据输入字符串生成 Mermaid 时序图，并将其保存到文件中。

  • API 端点：向 /api/v1/arch-diagrams/generate 发送 POST 请求，并附带 JSON 请求体：{"type": "plantuml", "description": "@startuml\nAlice -> Bob: Hello\n@enduml", "format": "svg"} 响应中包含渲染后的 SVG；请使用 HTTP 标头处理身份验证。

  • 配置格式：输入使用 YAML，例如：

    type: c4
elements:
  - name: System
    type: container

    通过 CLI 标志传入：--config path/to/config.yaml。

  • 代码片段（Python）：

    import requests
response = requests.post('https://api.openclaw.ai/api/v1/arch-diagrams/generate', json={"type": "erd", "input": "User has many Posts"}, headers={'Authorization': f'Bearer {os.environ["OPENCLAW_API_KEY"]}'})
print(response.json()['output'])

集成说明

将此技能添加到 IDE 扩展（例如 OpenClaw 的 VS Code 插件）或 CI/CD 流水线中，以便将其集成到工作流。例如，在 GitHub Action 中使用：run: openclaw arch-diagrams generate --type sequence --input ./specs.md && echo '::set-output name=diagram::$(cat diagram.md)'。在环境中将 $OPENCLAW_API_KEY 设置为密钥。与其他技能结合使用时，可通过管道传递输出；例如，根据代码分析结果生成图表。通过指定版本确保兼容性，例如 OpenClaw CLI v2.5+。

错误处理

始终检查响应代码或 CLI 退出状态，以发现错误。对于无效输入，OpenClaw 会返回 HTTP 400，并提供类似“无效的 PlantUML 语法：缺少 @enduml”的详情。通过指数退避重试来处理网络问题，例如在代码中：if response.status_code == 503: time.sleep(5); retry()。发送前验证输入，例如确保图表类型来自 ["c4", "mermaid", "plantuml", "sequence", "erd"]。对 API 调用使用 try-except 块，例如：

try:
    result = requests.post(url, json=data)
    result.raise_for_status()
except requests.exceptions.HTTPError as e:
    print(f"Error: {e.response.text} - Fix input and retry")

具体使用示例

  1. 生成 C4 系统图： 若要可视化一个简单的 Web 应用，请运行：openclaw arch-diagrams generate --type c4 --input "System: WebApp with Database and API" --output c4_diagram.puml。这会生成一个用于 C4 系统上下文图的 PlantUML 文件。检查并完善图表，可添加：openclaw arch-diagrams edit --file c4_diagram.puml --add "Container: Frontend"。

  2. 为数据库架构创建 ERD： 若要对关系建模，请使用：openclaw arch-diagrams generate --type erd --input '{"entities": [{"name": "User", "attributes": ["id", "name"]}, {"name": "Post", "attributes": ["id", "content"]}]}' --output erd.mmd。这会输出 Mermaid ERD 代码，你可以在 Markdown 文件中渲染。

图关系

  • 在 C4 图中：“系统依赖外部系统”“容器使用组件”。
  • 在时序图中：“参与者向对象发送消息”“对象向参与者返回响应”。
  • 在 ERD 中：“实体与另一个实体存在一对多关系”“属性属于实体”。
  • 在基础设施图中：“服务器连接到数据库”“负载均衡器将请求路由到服务”。

评论

支持 Markdown