Archify: The Open-Source AI Agent Skill With 32,500+ GitHub Stars That Turns Code Into Beautiful Architecture Diagrams

Why Architecture Diagrams Just Got a Massive Upgrade

If you've ever tried to explain a system architecture to a colleague, you know the pain: whiteboard sketches that fade, Mermaid diagrams that look like they were drawn in 1998, or expensive tools that require yet another subscription. Enter Archify—the open-source agent skill that's been climbing GitHub Trending at nearly 3,900 stars per day and has already amassed over 32,500 stars.

Archify isn't just another diagramming library. It's a rendering and validation system that your AI coding agent uses to produce professional, interactive architecture diagrams directly in your chat. Describe your system, and your agent generates a polished, shareable HTML file with dark/light themes, animations, and export options—including a 1200×630 share card perfect for READMEs and social media.

Let's dive into why developers are calling this the most important agent skill of 2026.

How Archify Works: From Description to Diagram

Archify follows a clean, deterministic pipeline that separates it from every other diagramming tool:

1. The Agent Produces Typed JSON IR

When you ask your AI agent to diagram a system, it doesn't draw pixels—it generates a structured JSON Intermediate Representation (IR). This typed schema ensures every node, edge, label, and relationship is explicitly defined.

{
  "type": "architecture",
  "theme": "dark",
  "nodes": [
    { "id": "browser", "label": "Browser", "kind": "client" },
    { "id": "api", "label": "API Gateway", "kind": "service" },
    { "id": "cache", "label": "Redis Cache", "kind": "store" },
    { "id": "db", "label": "PostgreSQL", "kind": "store" }
  ],
  "edges": [
    { "from": "browser", "to": "api", "label": "HTTPS" },
    { "from": "api", "to": "cache", "label": "read/write" },
    { "from": "api", "to": "db", "label": "fallback" }
  ],
  "paths": [
    { "name": "happy-path", "steps": ["browser", "api", "cache"] }
  ]
}

2. Validation Before Delivery

Every diagram passes through atomic validation gates before it reaches you: schema checks, layout rules, HTML/SVG rendering, route integrity, and label-to-route clearance. If any check fails, Archify returns a machine-readable repair receipt with exact rule codes and measured evidence—no guessing, no retry storms.

3. Self-Contained HTML Output

The result is a single HTML file you can open in any browser, share via link, or embed in documentation. It includes:

• Interactive viewer — search nodes, trace routes, play guided stories
• Theme switching — dark and light with one click
• Export options — PNG, SVG, WebM (animated), and 1200×630 share cards
• No dependencies — the file is fully self-contained

Five Diagram Types for Every Engineering Need

Archify isn't limited to architecture diagrams. It covers five distinct diagram types, each with its own optimized schema:

Each type has its own validation rules. Architecture diagrams enforce deployment-ownership profiles; Sequence diagrams validate call ordering; Data Flow diagrams check PII boundary crossings.

Architecture Delta: Review Changes Before They Merge

One of Archify's most powerful features is Architecture Delta. Instead of reviewing a wall of code changes, you get a visual diff of how your system architecture changed:

• Before — the validated snapshot of the previous architecture
• Delta — exact additions, removals, moves, and reroutes
• After — the new validated architecture

node archify/bin/archify.mjs compare architecture base.json head.json architecture-delta.html --json

This produces a machine receipt of every change—no subjective "this looks different" reviews. For PR reviews, design discussions, and post-mortems, this is transformative.

Real-World Example: Mapping a Production System

Let's say you're onboarding a new engineer to your team. Instead of spending an hour drawing on a whiteboard, you open your IDE with Archify installed and ask:

"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."

Your agent reads the codebase, generates the typed JSON IR, passes all validation gates, and produces an interactive diagram. The new engineer can:

• Search for specific components by name
• Trace routes to see the exact path a request follows
• Explore reach to understand upstream/downstream dependencies
• Play guided stories that walk through specific scenarios step by step
• Export a share card for the team wiki

Then you iterate: "Add Redis, move auth to the left, and highlight the rollback path." Archify maintains the typed source, so every change is versioned and validated.

Key Benefits

• Agent-native design — built for AI coding agents, not humans clicking drag-and-drop editors
• Typed JSON IR — every diagram has a reproducible, versionable source
• Atomic validation — schema, layout, rendering, and route checks all pass before delivery
• Self-contained output — one HTML file, no server required, works offline
• Five diagram types — covers architecture, workflow, sequence, data flow, and lifecycle
• Architecture Delta — visual diffs for PR reviews and design discussions
• Export flexibility — PNG, SVG, WebM, and 1200×630 share cards
• Dark/Light themes — switch with one click, export in either
• Source evidence — optionally pin nodes to Git-verified files and line ranges
• MIT licensed — free and open source, no vendor lock-in

Getting Started in 60 Seconds

# Install globally
npx skills add tt-a1i/archify -g

# Or try without installing
npx skills use tt-a1i/archify@archify --agent codex

Then in your agent chat, simply describe what you want to diagram:

Use Archify to draw: Browser → API → Redis cache → PostgreSQL fallback.
Show the cache-miss path as a sequence diagram with timing annotations.

No repository required. No configuration files. Just describe and diagram.

Frequently Asked Questions

What is Archify and how does it work?

Archify is an open-source agent skill that turns system descriptions into interactive architecture diagrams. Your AI coding agent (Cursor, Claude Code, Codex CLI, or OpenCode) generates typed JSON IR, and Archify deterministically compiles it into self-contained HTML/SVG files with validation, theming, and export options.

Which AI coding agents does Archify support?

Archify works with Cursor, Claude Code, Codex CLI, and OpenCode. It uses the standard Agent Skills format, so any agent that supports the open Agent Skills standard can use it. There's also a manual ZIP install option for other environments like Raven.

Is Archify free to use?

Yes, Archify is completely free and open source under the MIT license. There are no premium tiers, no usage limits, and no vendor lock-in. You can use it in personal projects, commercial products, and enterprise environments without restriction.

How is Archify different from Mermaid or PlantUML?

Mermaid and PlantUML are text-to-diagram renderers that produce static images. Archify is a validation and rendering system that produces interactive, self-contained HTML files with search, route tracing, theme switching, animations, and export options. It also includes atomic validation gates and Architecture Delta for PR reviews—features that go far beyond simple rendering.

Can I use Archify to document existing codebases?

Absolutely. Open a repository and ask your agent to analyze it and create an architecture diagram. Archify can optionally pin diagram nodes to Git-verified source files and line ranges, creating evidence-backed diagrams that stay accurate as code evolves.

What export formats does Archify support?

Archify exports to PNG (including 1200×630 share cards), SVG, and WebM for animated sequences. The primary output is a self-contained HTML file that works in any browser without dependencies. All exports preserve the full diagram—no cropped viewer state.