前言¶
写设计文档、评审材料或运维 runbook 时，图往往比长段文字更省事：系统边界、调用顺序、数据流向、状态机，一张图能说清的事不必反复解释。常见做法是手画、用 draw.io，或先写 Mermaid 再贴进 Markdown。Mermaid 快，但版式与「架构图」审美不一定统一；纯手绘又费时间。
下面介绍 SkillHub 上的 dynamic-archify（坐标 @user_ab5ae6ee/dynamic-archify-unclecheng，当前版本 1.0.6）。它让 Agent 根据你的描述或已有 Mermaid 代码，生成带 SVG 的独立 HTML 图页，内置明暗主题切换，并支持导出为 PNG、JPEG、WebP、SVG；页面简介还提到可导出 GIF 动图。标签 requires_api_key=false，安装后无需额外 API Key。
这是什么¶
dynamic-archify 是社区来源（community）、分类为 design-media 的 Agent Skill，由 SkillHub 用户 user_ab5ae6ee（页面展示作者为 Uncle城）发布。定位可以概括为：把「架构图、流程图、时序图、数据流图、生命周期/状态图」等需求，落成 archify 风格 的排版，输出为 单文件 HTML + SVG，而不是只在对话里贴一段无法直接交付的代码块。
与「只在聊天窗口里生成 Mermaid 文本」相比，它强调可打开的成品页面和一键导出位图/矢量图，更适合放进 Wiki、PPT 或评审附件。
核心功能¶
以下能力均来自 SkillHub 官方简介与页面说明，已核对一致。
- 图类型：架构图、工作流、时序图、数据流图、生命周期/状态图；适用场景描述中还覆盖基础设施与云架构、安全与网络拓扑、审批与 CI/CD 流程、API 调用序列、数据管道与 ETL/ELT、PII 边界与数据血缘、状态机与状态迁移等。
- 输入方式：自然语言描述，或粘贴 Mermaid（支持 flowchart、sequenceDiagram、stateDiagram）；Skill 会按 archify 风格从零排版，也可用于「转换/美化」已有 Mermaid。
- 交付物：独立 HTML 文件，内嵌 SVG 图形。
- 交互与导出：内置 深色/浅色主题 切换；一键导出 PNG / JPEG / WebP / SVG；中文简介另提到 GIF 动图导出。
- 依赖：requires_api_key=false，不强制配置第三方密钥。
SkillHub 页面统计（抓取时）：评分 100000，下载 2221 次；分类 design-media。
安装与启用¶
安装流程以 SkillHub 通用文档为准：先确认本机是否有 skillhub CLI，再把技能装到当前 Agent 实际读取的 skills 目录（装错目录 Agent 不会加载）。
1、检查或安装 SkillHub CLI¶
command -v skillhub && skillhub --version
若未安装，可按官方安装脚本执行（完整安装或仅 CLI，以 https://skillhub.cn/install/skillhub.md 为准）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
2、安装 dynamic-archify¶
将包名与 skills 目录对应到你的环境。例如 Cursor 常用目录为 ~/.cursor/skills/：
skillhub install @user_ab5ae6ee/dynamic-archify-unclecheng --dir ~/.cursor/skills/
Claude Code 常用：~/.claude/skills/。Codex 常用：~/.codex/skills/ 或项目下的 .agents/skills/。其他客户端路径见 https://skillhub.cn/install/skillhub.md 第四节。
也可把下面提示发给已支持 Skill 安装的 AI，由 Agent 按同一安装文档完成：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_ab5ae6ee/dynamic-archify-unclecheng`。
安装后按你所用客户端要求刷新或重启，使新 Skill 被加载。
典型用法¶
Skill 的触发条件写在官方简介中：当用户要系统/基础设施/云/安全/网络拓扑类架构图，或工作流、审批、runbook、CI/CD、API 时序、数据管道、状态机等图，或要求转换、美化 Mermaid 时，Agent 应启用本 Skill。下面是可以直接复现的对话方式（输出为 HTML 文件路径与导出操作，以 Agent 实际执行为准）。
用自然语言从零画图
请用 dynamic-archify 画一张三层 Web 架构：CDN、负载均衡、两个应用实例、主从数据库；标出 HTTPS 入口和只读查询走从库。生成独立 HTML，并说明如何导出 PNG。
粘贴 Mermaid 再美化
下面是一段 Mermaid flowchart，请用 archify 风格重新排版成独立 HTML，保留节点语义，并支持明暗主题切换：
flowchart LR
A[Client] --> B[API Gateway]
B --> C[Service]
C --> D[(DB)]
时序与状态类
用 sequenceDiagram 描述：用户登录 → 鉴权服务校验 → 签发 token → 业务 API 带 token 访问。输出 HTML，并导出 SVG。
订单状态机：待支付、已支付、发货中、已完成、已取消；标出合法迁移。用 stateDiagram 或自然语言均可，交付 HTML。
经过上面的步骤，你应得到可在浏览器打开的 HTML；在页面内切换主题、选择 PNG/JPEG/WebP/SVG（及简介中的 GIF，若该版本提供）完成导出。
适用场景与注意¶
适合谁：需要快速出「能交差」的架构与流程图、又不想从零调 Mermaid 主题和布局的开发者、架构师、技术写作者；已有 Mermaid 草稿、希望统一成 archify 视觉风格时也可用。
注意：
- 复杂图仍建议在提示里写清边界、组件名与数据方向，减少 Agent 漏画或合并节点。
- Mermaid 仅官方写明支持 flowchart / sequenceDiagram / stateDiagram；其他 Mermaid 图种是否兼容需以实际生成为准。
- 安装目录必须对应当前 Agent（见
skillhub install --dir）；官方文档提醒装到默认./skills/可能不会被识别。 - 页面统计与版本会随 SkillHub 更新变化，安装前可在技能页确认版本号（当前 1.0.6）。
结尾¶
dynamic-archify 把架构、流程、时序、数据流与状态类图示，收敛为可分享的 HTML/SVG 成品，并附带主题切换与多格式导出；输入可以是口语化描述，也可以是 Mermaid 片段。需要安装或查看说明时，可打开 SkillHub 技能页：
- https://www.skillhub.cn/skills/user_ab5ae6ee/dynamic-archify-unclecheng
- https://api.skillhub.cn/user_ab5ae6ee/dynamic-archify-unclecheng
