把 Cocoon AI 架构图生成器改造成 OpenClaw Skill

发表于 更新于 分类于

目标：将 Cocoon AI 的 architecture-diagram-generator 改造为 OpenClaw 可调用的 skill，补齐兼容层，保留原有视觉设计。

1. 原工具介绍

  • 项目：architecture-diagram-generator
  • 功能：自然语言描述 → 独立 HTML 架构图（内嵌 SVG）
  • 设计特点：暗色主题、组件分色、JetBrains Mono 字体、箭头遮挡处理

2. 改造目标

OpenClaw 对 skill 有两条硬要求：

  1. SKILL.md 顶部必须有 YAML frontmatter（name + description）
  2. 资源文件必须按约定目录结构放置，便于运行时读取

改造策略：不做视觉重写，只做兼容层补齐。

3. 改造过程

3.1 补齐 YAML frontmatter

SKILL.md 顶部加入标准声明：

1
2
3
4
---
name: architecture-diagram
description: 生成专业暗色主题系统架构图，输出为独立 HTML 文件（内嵌 SVG）。适用于系统架构图、基础设施图、云架构可视化、网络拓扑图等。
---

字段说明：

字段 必填 作用
name 是 skill 标识符，OpenClaw 用它匹配调用
description 是 自然语言触发器，描述何时使用该 skill

其他字段（version、license、metadata 等）可选，按项目需要添加。

3.2 调整资源路径

模板文件不直接写进 SKILL.md，而是放到 OpenClaw 约定位置：

1
2
3
4
/your/openclaw/skills/architecture-diagram/
├── SKILL.md
└── assets/
    └── template.html

目录作用：

  • SKILL.md：指令入口，包含调用逻辑和 frontmatter
  • assets/：模板、样式、字体等静态资源，避免大量 HTML 逻辑塞进 SKILL.md

3.3 保留原设计系统

不做视觉改造，沿用原有配色方案：

组件类型 颜色示例
前端 青色
后端 绿色
数据库 紫色
云服务 琥珀色
安全边界 玫瑰色

分工：OpenClaw 负责调用层，Cocoon AI 负责视觉层。

4. 结果验证

4.1 验证 skill 被识别

1
openclaw skills list

预期输出包含：

1
✓ ready | 🏗️ architecture-diagram | 生成专业暗色主题系统架构图...

4.2 验证输出效果

测试步骤：

  1. 准备真实项目的目录结构或组件清单
  2. 调用 skill 生成 HTML 文件
  3. 用浏览器直接打开 HTML
  4. 检查：SVG 是否正常渲染、图例是否完整、层级关系是否清晰

验证通过标准：

  • 浏览器能独立打开 HTML 文件（无需后端服务）
  • 暗色主题正确显示
  • 组件按类型分色
  • 箭头/连线无遮挡

5. 结论

改造要点只有三条：

  1. 补 frontmatter：让 OpenClaw 识别并调用
  2. 资源放 assets/：让模板路径符合规范
  3. 保留原设计：只做兼容层，不重写视觉

结果：一个原本面向 Claude.ai 的架构图生成器，变成了 OpenClaw 中可直接复用的技术工具。