Archify: AI Architecture Diagram Generator in Chat
tt-a1i/archifyArchify is an AI architecture diagram generator you drive from chat: describe your system in plain English and it hands back a polished, self-contained HTML diagram. It's an agent skill for Claude, Codex CLI, and opencode that also draws workflow, sequence, data-flow, and lifecycle diagrams, with a one-click dark/light toggle and export to PNG, JPEG, WebP, or SVG.
Reach for Archify if you live inside an AI agent (Claude, Codex, opencode) and want architecture or workflow diagrams without opening a drawing tool — you describe the system, it returns a shareable HTML file you can theme and export at up to 4x. Skip it if you don't use a supported agent, or you want pixel-level manual control over layout, since you're steering an LLM through JSON rather than dragging boxes.
The problem it solves
Keeping architecture diagrams current is the chore nobody wants: you open draw.io or write Mermaid, hand-place the boxes, then redo it every time the system changes. Whiteboard photos rot immediately, and a Mermaid graph in a README ships one theme while your reader may be viewing in the other. Archify exists to cut out the manual drawing — you describe the system to an agent you already use and get a diagram back.
What is it?
Archify is an AI architecture diagram generator packaged as an agent skill for Claude, Codex CLI, and opencode. You describe a system or process in plain English and it generates a single self-contained HTML file — no dependencies, no runtime install — that renders the diagram with a built-in dark/light theme toggle. Beyond architecture, it draws workflow, sequence, data-flow, and lifecycle diagrams from a typed JSON intermediate representation that passes schema and layout validation before rendering. It's MIT-licensed and currently at version 2.10.
Why it's getting attention
Agent skills are the current way to add capabilities to Claude and other coding agents, and diagramming is an obvious fit — the model already reads your codebase, so letting it draw the architecture is a small step. Archify installs with one `npx skills add` command, works across Claude, Codex CLI, and opencode, and pitches itself as a Mermaid alternative that solves the two-theme README problem. That combination has carried it past 3,600 stars.
Key features
- ✓Five diagram types from one skill: architecture, workflow, sequence, data-flow, and lifecycle/state-machine diagrams
- ✓Output is a single self-contained HTML file with zero dependencies — open it in any browser and share by sending the file
- ✓One-click dark/light theme toggle (keyboard T) that persists across sessions
- ✓Raster export to PNG, JPEG, or WebP rendered natively at up to 4x resolution, plus SVG — or Copy PNG straight to the clipboard
- ✓SVG export ships both themes with a @media (prefers-color-scheme) rule, so one file in a GitHub README follows each reader's color preference
- ✓Renderer-backed diagrams run through JSON-schema and layout validation plus a post-render artifact check before delivery
- ✓Semantic tech labels like aws.lambda, postgres, or redis map to visual categories without needing a full icon library
Best use cases
- •Documenting a repo's runtime architecture by asking an agent to analyze the code and diagram its components, data flow, and trust boundaries
- •Drawing a CI/CD or approval workflow with a clear happy path plus exception and async lanes
- •Explaining a request path as a sequence diagram — for example a cache miss falling back from Redis to Postgres
- •Mapping a data pipeline with PII boundaries, or a task/order state machine, then iterating by chat
- •Dropping a theme-aware SVG into a GitHub README so it matches dark-mode and light-mode readers
How to install / try
Install globally with one command: `npx skills add tt-a1i/archify -g`, then pick your agent (Claude Code, Codex CLI, or opencode) when prompted. To try it without a permanent install, `npx skills use tt-a1i/archify@archify --agent codex` starts a temporary copy. You can also unzip the packaged `archify.zip` into your agent's skills directory, or upload it under Settings -> Capabilities -> Skills on Claude.ai. It bundles standalone validators, so there's no `npm install` step.
How to use
After installing, prompt your agent with something like `Use archify to draw an architecture diagram: React frontend calls a Node API backed by Postgres and Redis`. It returns a self-contained HTML file; open it, press T to toggle theme or E for the export menu, then save as PNG, JPEG, WebP, or SVG. Refine by chat — `add Redis`, `move auth to the left`, `highlight the rollback path` — and it edits the underlying JSON instead of regenerating from scratch. A bundled CLI (`bin/archify.mjs`) can render, validate, and check diagrams directly.
Strengths
- ✓Diagrams live as plain-English prompts, so updating one means asking for the change instead of re-dragging boxes
- ✓The output HTML is self-contained with no dependencies — easy to share, embed, or commit to a repo
- ✓The dual-theme SVG genuinely replaces the two-PNGs-in-a-picture-tag hack for README diagrams
- ✓Renderer-backed types get schema and layout validation, which catches malformed output before you see it
- ✓One skill works across Claude, Codex CLI, and opencode rather than locking you to a single agent
Limitations & risks
- △It's a young, single-maintainer project (around 3,600 stars) — fine for personal docs, but weigh that before making it core to a team's workflow
- △It's an agent skill, not a standalone app: you need Claude, Codex CLI, or opencode to run it, and diagram quality depends on how well the model interprets your description
- △Because you steer an LLM through a JSON representation, complex or unusual layouts can take several chat iterations to get right, and there's no direct drag-to-position control
- △Raster exports fall back to a system monospace font unless you install JetBrains Mono locally, and WebP plus clipboard export depend on your browser's support
- △The Project Knowledge install surface on Claude.ai only does architecture mode with no code execution, per the README
Alternatives
Who should try it — and who should skip
Developers and teams who already work inside Claude, Codex CLI, or opencode and want architecture, workflow, or sequence diagrams as a byproduct of chatting with their agent — especially anyone tired of maintaining two-theme diagrams in a README. If you don't use a supported agent, or you need precise manual control over every box and line, a direct tool like draw.io or Excalidraw will fit better.
Frequently asked questions
Archify is an AI architecture diagram generator built as an agent skill for Claude, Codex CLI, and opencode. You describe a system in plain English and it returns a self-contained HTML diagram with a dark/light toggle and PNG/JPEG/WebP/SVG export.
It's positioned as one — the repo is tagged mermaid-alternative and accepts Mermaid-style input guidance. The main difference is that you describe the diagram to an agent in plain English, and the SVG export is theme-aware, so a single file follows a reader's dark or light preference.
No. You install it with one `npx skills add` command and then prompt your agent in plain English. It bundles standalone validators, so there's no `npm install` or runtime dependency to set up. A CLI is available if you'd rather render or validate diagrams directly.
It works with Claude (Claude Code and the desktop app via zip upload), Codex CLI, and opencode. It produces five diagram types: architecture, workflow, sequence, data-flow, and lifecycle/state-machine.
Yes. Its SVG export bundles both themes plus a @media (prefers-color-scheme) rule, so a single .svg dropped into a GitHub README follows each reader's system preference without needing two separate images.