Archify: AI Architecture Diagram Generator in Chat

Diagrams That Rot the Moment the System Changes

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.

One Prompt, a Self-Contained HTML Diagram

Archify is an AI architecture diagram generator packaged as an agent skill for Claude, Codex CLI, and opencode. You describe a system in plain English and it generates a single self-contained HTML file — no dependencies, no install — with a built-in dark/light theme toggle. It also draws workflow, sequence, data-flow, and lifecycle diagrams from a typed JSON representation. It's MIT-licensed, currently at version 2.10.

Five Diagram Types, One Theme-Aware SVG Export

• ✓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

From a Description to a Diagram You Can Export

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.

Adding Archify to Claude, Codex, or opencode

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.

Documenting Architecture, Sequences, and Data Flow

• •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

A Mermaid Alternative for the Two-Theme README

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.

Mermaid, draw.io, and Excalidraw

For Agent Users Tired of Two-Theme Diagrams

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.

Archify FAQ

Related repositories