发现一个专门给 AI Agent 画技术架构图的 Skill：Archify。

不用学 Mermaid，也不用手动拖框拉线。直接用大白话告诉 Claude Code / Codex： “读一下这几个仓库，帮我画张架构对比图。”

它就会生成一个可交互的单 HTML 文件。 比较讲究的是，它不是画完就交差： 自带 JSON Schema 校验 标签重叠、连线穿过节点会拒绝渲染 报错会告诉你该往哪移、调整多少像素 一键切换深色/浅色主题 支持导出 PNG、JPEG、WebP、SVG、WebM

支持 Claude Code、Codex CLI 和 opencode，MIT 开源。 安装也只要一行： npx skills add tt-a1i/archify -g 以后读陌生仓库、写技术方案、做架构对比，确实能省下不少画图时间。 传送门 https://github.com/tt-a1i/archify

tt-a1i/archify

Source: https://github.com/tt-a1i/archify

English · 简体中文

Archify

Turn plain-English system descriptions into polished architecture, workflow, sequence, data-flow, and lifecycle diagrams — directly in chat.

Archify is an agent skill for Claude, Codex CLI, and opencode. It produces a self-contained HTML diagram that opens in any modern browser, switches between dark and light themes, supports focused exploration, and exports clean static or motion assets.

• Five diagram types — architecture, workflow, sequence, data flow, and lifecycle
• Three visual presets — stable classic, luminous signal-flow, and precise blueprint
• Explore real topology — find nodes, inspect relationships, trace routes, compare roles, and play guided stories
• Motion is optional — output stays static unless meta.animation: "trace" is explicitly enabled
• Portable exports — copy PNG or download PNG, JPEG, WebP, dual-theme SVG, and trace-enabled WebM
• Typed and checked — JSON IR, bundled schema validation, layout checks, and opt-in quality profiles
• Self-contained output — one shareable HTML file with no viewer runtime dependency
• Built for agent workflows — install once, then create and refine diagrams through conversation

Project page · Scenario guide · Proof Lab

npx skills add tt-a1i/archify -g

Then ask your agent: Use archify to map this repository's runtime architecture.

Interactive demos in 2.11

These are generated Archify artifacts, not product mockups. Click a frame to open its live, shareable state.

_{Three real generated artifacts. Signal Flow · Blueprint · Classic · open the interactive Proof Lab ↗}

Guided story	Route probe	Semantic lens
Play one finite named chapter.	Inspect the shortest authored directed path.	Compare real traffic between semantic roles.

The Proof Lab contains all 11 checked-in scenarios, their JSON sources, named views, and validation receipts.

Preview

Same diagram, two themes, one click to switch:

Dark	Light

The Export menu copies PNG to the clipboard and downloads static or motion formats:

Open examples/web-app.html locally to try the complete viewer.

Quick start

1. Install

npx skills add tt-a1i/archify -g

To try it without a permanent install:

npx skills use tt-a1i/archify@archify --agent codex

Replace codex with claude-code or opencode when needed. The packaged archify.zip also works without npm install.

2. Ask for one bounded view

Analyze this repository, then use archify to create a high-level runtime architecture diagram.
Show 8–12 core components, one primary path, external dependencies, and trust boundaries.
Put supporting detail in cards instead of adding more edges.

For a focused flow:

Use archify to draw this login flow: Browser -> Web App -> API -> JWT validation ->
Redis session lookup -> PostgreSQL fallback. Keep the cache-miss path secondary.

3. Refine in chat

Continue with focused requests such as add Redis, move auth to the left, or highlight the rollback path. Archify keeps the typed source available for targeted iteration.

Choose the right diagram

Not sure which one fits? Use the interactive scenario guide, or ask the zero-dependency CLI:

node archify/bin/archify.mjs guide "Show an API request with Redis cache miss"
node archify/bin/archify.mjs guide "Map Kafka topics, consumer groups, replay, and DLQ" --json

Workflow keeps the happy path clear across lanes:

Sequence explains one interaction over time:

Data Flow makes movement and sensitivity boundaries explicit:

Lifecycle separates progress, waits, retries, and terminal outcomes:

Architecture examples: web-app · Archify pipeline · grid placement · desktop agent

Why Archify

• Layout judgment over generic auto-layout — the agent chooses hierarchy, spacing, routes, and emphasis for the story.
• Typed JSON IR — every renderer-backed mode has a schema and reproducible source.
• Validation before delivery — schema, layout, HTML/SVG, route, and optional showcase checks catch broken output.
• Truthful interaction — focus, routes, role comparison, and stories reuse authored nodes and relationships instead of inventing topology.
• Portable by default — the result is one HTML file; exports remain full-diagram and free of temporary viewer state.

Archify is not a general-purpose drawing editor or a Mermaid theme. It turns technical intent into a communication artifact.

How it works

Useful repository commands:

cd archify
node bin/archify.mjs doctor
node bin/archify.mjs demo /tmp/archify-demo
node bin/archify.mjs guide "Show CI/CD checks, approval, deploy, and rollback"
node bin/archify.mjs render workflow examples/agent-tool-call.workflow.json /tmp/workflow.html
node bin/archify.mjs validate workflow examples/agent-tool-call.workflow.json --quality showcase --json
node bin/archify.mjs check /tmp/workflow.html

Optional motion and presentation styling are explicit:

{
  "meta": {
    "animation": "trace",
    "visual_preset": "signal-flow"
  }
}

Omit animation for a truly static diagram. classic remains the default visual preset.

Explore and share the output

Stable links can restore #focus=<id>, #relation=<id>, #route=<source>~<target>, #lens=<kind>~<kind>, and #view=<view-id>. Reader-driven motion is finite, respects prefers-reduced-motion, and never enters canonical exports.

The complete generation and viewer contract lives in archify/SKILL.md.

Installation options

Reference and scope

• Schema reference
• Skill and renderer contract
• Examples
• Changelog
• Roadmap
• Generated Proof Lab

Archify 2.11 includes typed IR across all five modes, three visual presets, optional finite motion, guided views, semantic exploration, shareable deep links, browser-native WebM recording, and explicit standard / showcase quality profiles.

Automatic Mermaid parsing, general-purpose auto-layout, hosted sharing, and WYSIWYG editing are intentionally outside the current scope.

Attribution

Archify is a fork and rewrite of Cocoon-AI/architecture-diagram-generator v1.0. The original visual language remains credited to Cocoon AI; Archify 2.x adds themes, exports, typed renderers, validation, accessibility, interaction, and a unified CLI. Both projects use the MIT License.

License

MIT — free to use, modify, and distribute.

Contributing

Issues, pull requests, and shared diagrams are welcome. For generated-output problems, include the prompt, diagram type, and Archify version. Run node scripts/build-gallery.mjs after changing bundled examples or the standalone viewer.