Communitygithub.com

cubxxw/archify

根据简单的 JSON 规范创建自包含的交互式 HTML 图表,支持架构图、流程图、时序图、数据流图和生命周期图,并支持导出为 PNG/JPEG/WebP/SVG/WebM 格式。

archify 是什么?

Archify 是一款专为开发者设计的 AI 技能,能够从简单的类型化 JSON 规范生成自包含的交互式 HTML 图表。它支持五种图表类型:架构图、流程图、时序图、数据流图和生命周期图,并提供深色/浅色主题、可选的动画轨迹以及 PNG/JPEG/WebP/SVG/WebM 格式导出。该技能旨在快速创建清晰、经过验证的图表,适合可视化系统架构、基础设施、云/安全/网络拓扑等场景。它接受自然语言需求或粘贴的 Mermaid 流程图、时序图和状态图作为输入,并能检查仓库证据以确保图表反映真实代码。Archify 遵循严格的作者认证流程,包括对 JSON 规范进行验证,并最终生成独立的 HTML 输出。它主要作为 AI 工具(如 Claude Code、Cursor、Codex)的增强技能使用,帮助开发者快速将设计文档转化为可交互的示意图。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cubxxw/agent-kit/tree/HEAD/skills/archify

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

archify 是做什么的?

根据一个简单的类型化 JSON 规范创建自包含的交互式 HTML 图表。静态输出为默认模式;仅当用户要求进行演示或演示时才启用动画。

快速创作路径

使用以下有限路径进行常规生成。除非用户询问相关功能,否则不要阅读可选的查看器运行时参考。

  1. 从问题中选择 architecture、workflow、sequence、dataflow 或 lifecycle。

  2. 读取 schemas/ 中的一个匹配模式、schemas/common.schema.json 以及 examples/ 中的一个匹配 JSON 示例。仅读取这些文件。全新创作意味着使用新的稳定 ID、领域用语和布局;将示例用于字段形状,而非事实。

  3. 先实现工件:下一个工具操作必须写入候选文件。在检查渲染器内部实现之前写入候选文件。不要用文字精确规划坐标。从一条清晰的主路径、简短的分支、稀疏的标签以及最多 12 个主节点开始。将 meta.quality_profile 设置为 "showcase",除非用户明确请求一个密集的 standard 地图。从自动路由和标签开始。在诊断要求添加之前,不要添加 via、channelX、channelY 或 labelAt;每次修复最多应用一个经诊断的几何控制。

  4. 每次编辑候选文件后以及交接前立即进行验证:

    node bin/archify.mjs validate <type> <candidate.json> --quality showcase --json
    

    一个只包含 4 项工件检查的回执是基本验证,绝非展示级验收。展示级通过必须报告所有 9 项工件检查,且包含 0 个组成错误和 0 个警告。如果候选文件省略或拼写错误的 meta.quality_profile 字段,请在调整几何之前修复它。验证通过后即冻结候选文件:之后切勿编辑。

  5. 对于交付的 HTML,deliver 是最终验收命令:

    node bin/archify.mjs deliver <type> <candidate.json> <output.html> --quality showcase --json
    

    非零退出码绝不能描述为成功。如果验证失败,仅更改诊断出的 subject,验证 evidence,从 supportedFixes 中选择,并重新运行。持续进行针对性修正,直到目标错误计数达到新的最小值。如果连续两轮未能改善该最佳计数,则停止并如实报告未解决的诊断信息。

在第一个候选文件之前,不要阅读 renderers/shared/geometry.mjs、渲染器源代码、验证器源代码、测试或基准测试。仅在出现不支持的内部诊断,或两次针对性修复失败后,才检查实现代码。

生命周期说明:阶段列 0..4 占据主轨道;事件/结果列 0..2 对齐在后续阶段下方。可恢复状态使用 type: "failure" 加上一个返回活动状态的实际转换。

类型路由器

类型用途
architecture组件、服务、云/安全边界、基础设施
workflow流程、审批门、工具调用、运行手册、CI/CD
sequenceAPI 调用链、请求生命周期、异步追踪、返回
dataflow管道、ETL/ELT、血缘关系、治理、消费者
lifecycle状态/状态转换、重试、等待和终端状态

当存在歧义时,运行 node bin/archify.mjs guide "<scenario>" --json。场景证明示例是结构参考,而非要复制的事实。

Mermaid 输入

读取 Mermaid 以获取拓扑和含义,然后创作全新的 Archify JSON;不要机械地渲染 Mermaid 样式。

  • flowchart / graph → workflow,或 architecture(用于组件映射)。
  • sequenceDiagram → sequence;参与者成为语义参与者,箭头成为消息。
  • stateDiagram → lifecycle;状态和转换保留其含义,而非 Mermaid 样式。

创作不变量

  • 一条明显的主路径;侧分支从最近的主路径节点离开。在添加路由控制之前,移除低价值边。
  • 对真实的 auto 默认值省略 meta.legend。需要时,仅使用 mode: auto|all|hidden 和渲染器支持的 entries.<kind>.label|visible;标签绝不更改语义。
  • 组件类型为 frontend、backend、database、cloud、security、messagebus 和 external;变体为 default、emphasis、security 和 dashed。
  • 间距指清晰间隙,而非中心距离。对于关系标签,清晰间隙必须超过其测量的遮罩宽度;否则省略标签或有意移动它。
  • 自动路由拥有其端点侧的所有权。侧是一个方向契约:第一段和最后一段必须垂直于该侧进入/离开。
  • 自动端口扩散是架构图、流程图、数据流图和生命周期的默认渲染器行为。它跳过单条关系和显式的 via、channelX、channelY、labelAt 或非 auto 路由。近乎平行的端口使用外部桥接,因此自动路由无法创建小于 8px 的线段或小于 16px 的内部弯角。
  • 切勿接受边穿过不透明节点、模糊的共享通道或关系标签遮挡另一条路由的情况。

仅在需要字段枚举、间距计算、几何修复规则、仓库证据或特定模式放置时,阅读 references/authoring-contract.md。

交付

在修复期间使用 validate,在最终验收时使用 deliver 一次。交付将确切的规范字节冻结到一个私有同目录快照中,渲染并检查该快照,原子化提交 HTML,并报告规范和图元的 SHA-256 及字节数。

仅当用户想要立即的本地预览时添加 --open。对于活跃的桌面创作循环,可选命令为:

node bin/archify.mjs preview <type> <input>.json <output>.html --quality showcase

默认情况下切勿启动预览。使用预览、仓库证据、导出回执、视觉审查或提交后打开时,阅读 references/delivery-contract.md。

可选的查看器功能

生成的 HTML 已经包含主题切换、平移/缩放、搜索、聚焦、关系追踪、语义视图、演示和真实的导出功能。这些是阅读器能力,而非额外的创作工作。meta.animation: "trace" 是选择加入的;meta.views 是可选的,最多应包含五个精心策划的章节。

仅当用户明确询问共享卡、路径/可达卡、动画、引导故事、深度链接、演示、搜索/聚焦或任何其他查看器运行时功能时,阅读 references/viewer-runtime.md。

设置和回退

技能包内无需安装。使用以下命令验证:

node bin/archify.mjs doctor
node bin/archify.mjs demo <output-directory>

当无法使用 shell 时,手动将架构 SVG 放置到 assets/template.html 中,使用 CSS 语义类而非内联颜色,并遵循 references/delivery-contract.md 中的视觉审查契约。

输出

返回检查后的 HTML 路径、图表类型、验证摘要、规范/图元回执以及真实的视觉审查状态。不要声称成功执行了非零命令,也不要声称执行了未实际进行的视觉检查。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

相关技能