CopybookEnglish搜索

技能包Skill

Archify:从代码画系统图

要给人讲清系统结构:从代码生成一张能搜索、能追踪上下游、能对比版本的 HTML 图,可导出 PNG。

1,560 X 收藏,截至 发帖日期

命令:全局安装 Archify
npx skills add tt-a1i/archify -g
模板
Turn [CODEBASE / FEATURE / WORKFLOW] into a [DIAGRAM TYPE] diagram. Choose from Architecture, Workflow, Sequence, Data Flow, or Lifecycle.
提示词:完整系统图
Then read this repo and use Archify to generate a system diagram.

Choose the diagram type that best fits what I need to understand: Architecture, Workflow, Sequence, Data Flow, or Lifecycle.

Keep the 8-12 most important components and one primary path. Label external services, databases, and component connections clearly. Put supporting details in cards instead of adding more edges to the main diagram.

Generate and verify a standalone HTML file. Confirm that component search and upstream/downstream tracing work, then export a high-resolution 2400 × 1260 PNG.

下一步 在终端里运行命令,再在仓库里把模板或提示词发给 Codex 或 Grok Bot。

如果只能给 Codex 或 Grok Bot 一个画系统图的 skill,我选 Archify。它在 GitHub 上已经有 29K+ 颗星,现在我要画系统图时默认就用它。

装好以后,你的 agent 可以:

  • 生成一个自包含的 HTML 文件,导出成 PNG、SVG 或视频
  • 搜索任意组件,追踪它的上下游路径
  • 把前后两个版本并排对比,看哪些加了、删了或重新排了