前言¶
写架构图的常见痛点不是不会画，而是画完没法动：导出一张静态 PNG，别人看不到调用顺序、切不了暗色主题、也点不开某个节点的出处。另一种痛点是图和代码脱节，设计文档里的架构图与仓库里的实际调用对不上。下面介绍的这个 Skill 就是针对这两类问题：把架构、工作流、时序、数据流、状态机描述转成可探索的独立 HTML，并且支持在需要时回到仓库里找证据。
这是什么¶
archify-skillhub-workbuddy 是 Archify 移植到 WorkBuddy 的技能，坐标 @user_74e3042b/archify4workbuddy，SkillHub 版本 1.0.1，来源 community，分类 dev-programming，标签 requires_api_key=false（不需要 API key）。发布者为 user_74e3042b，SkillHub 抓取资料显示评分 100000、下载 3453、安装 0。
它解决的问题是：把自然语言需求或已有的 Mermaid 片段，变成带内联 SVG、可交互、可导出的 HTML 图。技能定位是「架构 / 工作流 / 时序 / 数据流 / 生命周期（状态机）图生成器」。
官方地址：https://api.skillhub.cn/user_74e3042b/archify4workbuddy
SkillHub 页面：https://www.skillhub.cn/skills/user_74e3042b/archify4workbuddy
核心功能¶
1、接受两种输入：自然语言需求，或直接粘贴的 Mermaid flowchart、sequenceDiagram、stateDiagram。粘贴 Mermaid 的场景相当于「把图变好看、变可交互」。
2、产出独立的 HTML 文件，图以内联 SVG 绘制，不依赖外部服务即可打开和分享。
3、支持暗色 / 亮色主题切换。
4、支持 trace motion（沿调用路径的运动动画），用于演示请求流转过程。
5、导出格式：PNG、JPEG、WebP、SVG、WebM。
6、当图必须反映真实代码时，会去仓库里找证据（repository evidence），而不是凭描述想象。
需要说明的一点：SkillHub 页面把上游来源标为 github.com/tt-a1i/archify v2.16.0、MIT、Node.js 零依赖；但上游仓库 README 目前显示的是 Apache License 2.0、版本 3.2.0。两者归属一致、版本与许可证表述不一致，如果要用于正式交付，建议先以仓库实际 LICENSE 文件为准核对。
安装与启用¶
WorkBuddy 侧的安装路径来自 SkillHub 抓取资料：
~/.workbuddy/skills/archify
资料中标注「已生效，WorkBuddy 内可直接调用」，即文件就位后无需额外注册步骤。
上游 Archify 的通用安装命令（适用于 Cursor、Claude Code、Codex CLI、OpenCode）：
npx skills add tt-a1i/archify -g
这条命令是上游仓库提供的安装方式，与 WorkBuddy 技能目录安装是两套路径，按你使用的客户端选择其一。
移植时做过四项适配，属于这个 WorkBuddy 版本的实现细节：
1、frontmatter 增加 agent_created: true。
2、命令改为 $ARCHIFY_HOME/bin/archify.mjs 绝对路径。
3、Windows 路径坑：node 原生程序不识别 Git Bash 的 /c/... 形式，必须写成 C:/Users/...。
4、更新检查默认关闭，环境变量 ARCHIFY_UPDATE_CHECK_DISABLED=1。
典型用法¶
输入可以是一段需求描述，例如上游 README 给出的请求链路示例：
Use Archify to diagram a web request: Browser calls the API,
the API checks Redis, and a cache miss queries PostgreSQL and fills the cache.
画完之后可以继续在同一轮里追加修改：
Add authentication
Highlight the cache-miss path
Switch to the light theme
如果你已经有 Mermaid 文本，直接粘贴给技能即可，它会做美化与校验，输出同样的可交互 HTML。
需要图与代码一致时，让技能去读仓库，例如「Read the repository and diagram the current architecture」。此时它会走 repository evidence 流程，图上的节点应与代码实际调用对应。
适用场景与注意¶
适合这几类人：要在文档或评审里解释系统架构、基础设施与网络拓扑、API 调用时序、请求生命周期、数据管道（ETL/ELT、数据血缘）、状态机的人；以及手里已有 Mermaid 文本、只想把它变成可交付 HTML 的人。
限制与坑：
1、输出是 HTML + 内联 SVG，如果你要的是纯 Mermaid 文本或矢量图编辑器文件（drawio、vsdx），不是这个技能的目标产物。
2、Windows 上必须用 C:/Users/... 形式路径，否则 node 程序会因为 /c/... 形式失败。
3、版本与许可证存在来源不一致（MIT / v2.16.0 与 Apache-2.0 / v3.2.0），商用或合入前需自行核对上游 LICENSE。
4、安装数据为 0，说明这个 WorkBuddy 移植版目前主要是内部跑通验证，生态成熟度参考上游 Archify。
5、图片、视频格式导出（WebM）依赖本地运行环境，SkillHub 页面未给出导出命令的完整说明，具体命令需在使用端确认。
结语¶
这个技能的价值在于把「描述清楚结构」这件事变成可直接交付的产物：一张能点、能切主题、能导出的 HTML 图，而不是贴在文档里的静态截图。对需要反复解释系统行为的团队，省掉了每次重新画图的成本。
官方地址：https://api.skillhub.cn/user_74e3042b/archify4workbuddy
