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

发表于 更新于 分类于

之前在 Cocoon AI 那边看到一个架构图生成器（architecture-diagram-generator），能用自然语言描述生成暗色主题的 SVG 架构图，效果挺不错的。后来开始用 OpenClaw，就想把这个工具搬过来，做成 OpenClaw 可以直接调用的 skill。

原工具长什么样

这个工具的核心功能是：输入一段自然语言描述，输出一个独立的 HTML 文件，里面内嵌了 SVG 架构图。设计上有一些特点：

  • 暗色主题
  • 不同类型的组件用不同颜色区分（前端青色、后端绿色、数据库紫色、云服务琥珀色）
  • 用 JetBrains Mono 字体
  • 处理了箭头遮挡的问题

视觉效果还不错，所以我的改造策略是不动视觉层，只补齐兼容层。

改造过程

OpenClaw 对 skill 有两个基本要求：SKILL.md 顶部要有 YAML frontmatter（name + description），资源文件要放在约定的目录结构里。

补 YAML frontmatter

在 SKILL.md 最上面加上：

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

name 是 skill 的标识符，description 是触发条件——当你用自然语言提到架构图相关的需求时，OpenClaw 会根据这个描述判断要不要调用这个 skill。其他字段像 version、license 这些看需要加。

调整资源路径

原来的模板 HTML 是直接写在 SKILL.md 里面的，这样不太方便。OpenClaw 有个约定的目录结构，把模板放到 assets/ 目录下：

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

SKILL.md 负责指令逻辑，assets/ 放模板、样式、字体这些静态资源。这样 SKILL.md 清爽很多，不用塞一大堆 HTML 代码。

保留原设计

配色方案完全没改，原来怎么样就怎么样：

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

分工很明确：OpenClaw 管调用，Cocoon AI 管视觉。

验证

改造完跑一下 openclaw skills list，看到 ✓ ready | 🏗️ architecture-diagram 就说明识别到了。

然后拿一个真实项目的组件清单测试了一下，生成的 HTML 直接用浏览器打开：

  • 暗色主题正常显示
  • 组件按类型正确分色
  • SVG 渲染正常
  • 箭头和连线没有遮挡

小结

改造其实就三件事：补 frontmatter、资源移到 assets/、保留原设计不动。整个过程不大，但把一个原本面向 Claude.ai 的工具变成了 OpenClaw 里可以直接用的 skill，以后画架构图就方便了。