Archify

Generate beautiful architecture, technical workflow, sequence, data-flow, and lifecycle diagrams in chat. Switch dark / light. Copy to clipboard or export crisp up-to-4× PNG / JPEG / WebP / SVG.

Archify is an agent skill for Claude, Codex CLI, and opencode. It turns a plain-English description of your system or process into a polished, self-contained technical diagram — a single HTML file you can open, toggle themes on, copy to the clipboard, and export at maximum resolution.

• No design skills needed — describe your architecture in English, get a diagram
• Workflow, sequence, data-flow, and lifecycle diagrams too — technical flows, approvals, tool calls, CI/CD, runbooks, request call chains, data pipelines, PII boundaries, and state machines can be drawn
• Built-in theme toggle — one click between dark and light, persists across sessions
• Copy PNG to clipboard — one click, paste straight into Slack / Notion / GitHub
• Ultra-crisp image export — PNG / JPEG / WebP rendered natively at up to 4× source resolution (no upsampling blur), or SVG for true vector
• SVG follows system dark/light — exported SVGs ship with both variable sets + @media (prefers-color-scheme), so dropping one into a GitHub README makes it follow the reader's color preference (no more two PNGs wrapped in <picture>)
• Validation loop built in — renderer-backed diagrams go through JSON schema validation, layout checks, HTML/SVG artifact checks, and targeted iteration
• Semantic tech labels — describe components as aws.lambda, postgres, redis, github-actions, openai, etc.; Archify maps them to the right visual category without needing a full icon library
• Self-contained HTML — the generated file has zero dependencies, share by sending it
• Iterate by chat — "add Redis", "move auth to the left", "use emerald for the API"

Project page: tt-a1i.github.io/archify

中文

Preview

Same diagram, two themes, one click to switch:

Dark	Light

The Export menu — Copy PNG to clipboard plus 4 download formats (all raster exports at up to 4× source resolution):

Live example: examples/web-app.html — open in a browser, press T to toggle theme, E to open Export. Append ?theme=light or ?openExport=1 to the URL for deterministic screenshots.

Diagram types

Archify now has five primary outputs:

Architecture diagrams explain system structure — components, boundaries, and how they connect:

Use archify to draw an architecture diagram:
React frontend calls a Node.js API backed by PostgreSQL and Redis, deployed on AWS behind CloudFront.

Sample SaaS diagram: examples/web-app.html.

Real-repo examples (renderer-backed JSON IR):

• examples/archify-repo.html — this project's skill → JSON IR → renderers pipeline
• examples/archify-repo-grid.html — same pipeline with layout.mode: "grid" (row/col placement)
• examples/maka-architecture.html — third-party desktop agent workbench (Maka)

Workflow is not trying to replace every general-purpose flowchart. It is a technical communication diagram: swimlanes, semantic colors, a clear happy path, and secondary async / approval / trace paths.

Use archify to draw a workflow:
User submits a request -> Agent plans -> Approval Gate if needed -> Tool Call -> Trace Log -> Final Reply

Open the example here: examples/workflow-agent-tool-call-rendered.html.

Sequence diagrams explain a narrower interaction over time:

Use archify to draw a sequence diagram:
User opens a page, the frontend calls the API, the API verifies JWT, reads Redis, falls back to Postgres on cache miss, returns JSON, and emits trace.

Open the example here: examples/sequence-cache-miss-request.html.

Data Flow diagrams explain how data assets move and change:

Use archify to draw a data flow:
Web and Mobile emit analytics events, Edge API collects them, Consent Gate filters PII, Kafka carries accepted events,
Warehouse stores analytics tables, Feature Store derives daily features, Dashboards and an ML Model consume downstream data.

Open the example here: examples/dataflow-product-analytics.html.

Lifecycle diagrams explain how an object changes state:

Use archify to draw a lifecycle diagram:
Agent Run starts at Queued, moves through Planning, Executing, and Reviewing. It can pause at Needs Approval,
wait at Blocked, retry after Failed, end at Cancelled or Expired, or finish at Completed.

Open the example here: examples/lifecycle-agent-run.html.

What's new

Archify is based on Cocoon-AI/architecture-diagram-generator v1.0 (dark-only, HTML output). 2.0 rewrote the template around a themeable CSS-variable system and added a client-side export pipeline. 2.1 added copy-to-clipboard + keyboard nav. 2.2 added a print stylesheet + local-font fallback. 2.3 fixed the raster upsampling bug and made exports genuinely sharp at up to 4× source resolution. 2.4 upgraded SVG export to a dual-theme self-contained file. 2.5 added renderer-backed workflow / sequence / data-flow / lifecycle modes, Mermaid input guidance, CJK-aware text measurement, golden tests, and CI. 2.6 brought the architecture renderer to schema + layout validation parity. 2.7 hardens workflow diagrams with phase headers, groups, exception lanes, happy-path linting, same-lane orthogonal routing, and a post-render HTML/SVG checker. 2.8 adds opt-in trace animation and rejects workflow routes that cross unrelated nodes. 2.9 adds a unified CLI (bin/archify.mjs) and real-repo architecture examples. 2.10 adds actionable validator hints, optional architecture grid placement (row/col), and archify inspect for computed layout JSON.

Quick start

1. Install the skill

Archify is packaged as an agent skill directory (archify/SKILL.md), so the same archify.zip works with Claude, Codex CLI, and opencode.

Claude.ai:

1. Download archify.zip
2. Go to Settings -> Capabilities -> Skills
3. Click + Add and upload the zip file
4. Toggle the skill on

Claude Code CLI:

# Global (all projects)
unzip archify.zip -d ~/.claude/skills/

# Or project-local
unzip archify.zip -d ./.claude/skills/

Codex CLI:

# Global (all projects)
unzip archify.zip -d ~/.agents/skills/

# Or project-local
unzip archify.zip -d ./.agents/skills/

opencode:

# Global (opencode-native)
unzip archify.zip -d ~/.config/opencode/skills/

# Or project-local
unzip archify.zip -d ./.opencode/skills/

# Also works: the shared agent directory used above for Codex
unzip archify.zip -d ~/.agents/skills/

The typed renderers (architecture / workflow / sequence / dataflow / lifecycle) rely on ajv for schema validation, which takes a one-time npm install in the installed skill directory. Many agent runtimes can run it automatically on first use, following the Setup instructions in SKILL.md — or run it yourself:

cd ~/.agents/skills/archify && npm install

Without the dependency the renderers skip schema validation (layout checks still run).

Renderer-backed diagrams follow a small quality loop before delivery:

You can run the final artifact check directly:

node scripts/check-render-output.mjs output.html

The bundled CLI wraps the same renderer and checker commands:

node bin/archify.mjs render workflow examples/agent-tool-call.workflow.json workflow.html
node bin/archify.mjs validate workflow examples/agent-tool-call.workflow.json --json
node bin/archify.mjs check workflow.html
node bin/archify.mjs examples

Renderer-backed diagrams can also opt into lightweight motion for demos:

{ "meta": { "title": "Release Flow", "animation": "trace" } }

Trace animation runs inside the generated HTML/SVG: arrows flow in order, nodes pulse lightly, and prefers-reduced-motion disables movement for users who request it. Omit animation for the default static diagram.

Claude.ai Projects (alternative): Upload archify.zip to your Project Knowledge.

What each install surface can do:

2. Describe your system

Any of these work:

Have AI analyze your codebase:

Analyze this codebase and describe the architecture. Include all major
components, how they connect, what technologies they use, and any cloud
services or integrations. Format as a list for an architecture diagram.

Write it yourself:

- React frontend talking to a Node.js API
- PostgreSQL database
- Redis for caching
- Hosted on AWS with CloudFront CDN

Or ask for a typical architecture:

What's a typical architecture for a SaaS application?

3. Ask Claude to use the skill

Use your archify skill to create an architecture diagram from this description:

[PASTE YOUR ARCHITECTURE DESCRIPTION HERE]

That's it. Claude generates an HTML file you can open in any browser. Iterate by chat: "add Redis", "swap Postgres for MySQL", "highlight the auth path".

Using the output

Open the generated HTML in any browser. Top-right you'll see two buttons:

• Theme button (Dark