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

If you've ever spent hours wrestling with diagramming tools to document your system architecture, you're not alone. Architecture diagrams are one of the most valuable artifacts a team can produce — yet most developers still rely on outdated tools, hand-drawn sketches, or just skip documentation entirely because it's too time-consuming.

Enter Archify — an open-source agent skill that's exploding on GitHub with over 36,000 stars and climbing. It turns your AI coding agent into a professional diagram designer that produces polished, interactive, and verifiable architecture diagrams directly in your chat.

What Is Archify and Why Is Everyone Talking About It?

Archify is a Node.js rendering and validation system designed specifically for AI coding agents like Cursor, Claude Code, Codex CLI, and OpenCode. When you describe your system in natural language, your AI agent produces typed JSON IR (Intermediate Representation), and Archify deterministically compiles it into beautiful HTML/SVG diagrams.

What makes Archify different from traditional diagramming tools like Mermaid, Draw.io, or Lucidchart is that it's agent-native. It doesn't ask you to learn a DSL or drag boxes around a canvas. You simply describe your architecture in plain English, and the AI agent — empowered by Archify — generates a production-quality diagram in seconds.

The project was created by tt-a1i and is licensed under MIT. At the time of writing, it has amassed:

• 36,537 GitHub stars
• 2,339 forks
• 3,722 stars in a single day — making it the #1 trending repository on GitHub today
• v2.16.0 as the current stable release

Five Diagram Types for Every Engineering Need

Archify isn't limited to box-and-arrow architecture diagrams. It supports five distinct diagram types, each optimized for a specific engineering communication need:

1. Architecture Diagrams

Map out your components, services, storage layers, trust boundaries, and deployment topology. Perfect for onboarding docs, system design reviews, and technical RFCs.

// Prompt your AI agent:
"Use Archify to create a high-level runtime architecture diagram
of this microservices backend. Show the API gateway, auth service,
user service, Redis cache, and PostgreSQL database with trust boundaries."

2. Workflow Diagrams

Visualize CI/CD pipelines, approval flows, tool call chains, and operational runbooks across multiple lanes. Great for DevOps documentation and incident response playbooks.

3. Sequence Diagrams

Trace API calls, cache fallbacks, authentication flows, and async message patterns over time. Ideal for debugging distributed systems and documenting API contracts.

4. Data Flow Diagrams

Map data pipelines, lineage tracking, PII boundaries, and consumer relationships. Essential for data engineering teams and compliance documentation.

5. Lifecycle Diagrams

Model state machines, retry logic, wait states, and terminal outcomes. Perfect for documenting order processing, job queues, and saga patterns.

How to Install and Use Archify in Under 60 Seconds

Getting started with Archify is incredibly simple. Here's the complete setup process:

Step 1: Install Globally

npx skills add tt-a1i/archify -g

Step 2: For Cursor Users (Explicit Install)

npx -y skills add tt-a1i/archify --skill archify --agent cursor --global --copy --yes

Step 3: Try Without Installing

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

Once installed, just describe your system in any agent chat:

"Use Archify to draw: Browser -> API Gateway -> Redis Cache -> PostgreSQL fallback.
Show trust boundaries and highlight the cache-miss path."

Archify will generate a self-contained HTML file that you can open in any browser, share with your team, or export to PNG, SVG, WebM, or a 1200×630 share card for social media and documentation.

Architecture Delta: Review Changes Before Merge

One of Archify's most powerful features is Architecture Delta — a tool for comparing two validated architecture snapshots as Before / Delta / After, with exact details on what was added, removed, changed, moved, or rerouted.

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

This is incredibly useful for:

• PR reviews — see exactly what changed in the architecture
• Migration planning — compare the current state to the target state
• Audit trails — maintain a visual history of architectural decisions
• Team alignment — ensure everyone understands the impact of proposed changes

The Validation Pipeline: Why Archify Diagrams Are Trustworthy

Unlike most diagramming tools that just render whatever you give them, Archify has a built-in validation pipeline that ensures every diagram is accurate and well-formed:

1. Generate — The agent creates typed JSON IR from your description
2. Validate — Bundled validators check schema, layout, routes, and label clearance
3. Preview — Optional desktop loop watches the JSON file and only reloads verified revisions
4. Deliver — Final HTML is rendered, checked, and exported

When validation fails, Archify doesn't just show an error — it returns a repair receipt with stable rule codes, exact subjects, measured evidence, and supported repair controls. This makes it possible for AI agents to self-correct and produce high-quality diagrams without human intervention.

Real-World Example: Documenting a Microservices E-Commerce Platform

Let's walk through a practical example. Imagine you're building an e-commerce platform with the following components:

• React frontend
• API Gateway (Kong)
• Auth Service (JWT-based)
• Product Service (Go)
• Order Service (Node.js)
• Payment Service (Python)
• Redis Cache
• PostgreSQL
• Kafka for event streaming

Simply tell your AI agent:

"Analyze this e-commerce repository and use Archify to create a
runtime architecture diagram. Show 9 core components, the primary
order-flow path from frontend to payment, trust boundaries between
public and internal services, and highlight the Kafka event bus."

Archify will produce an interactive HTML diagram where you can:

• Search nodes — find any component instantly
• Trace routes — follow the exact path from frontend to payment
• Focus reach — see upstream/downstream dependencies of any service
• Compare roles — group services by team or deployment zone
• Play guided stories — step through the order flow one stage at a time
• Export — copy as PNG, download SVG, or generate a share card

Key Benefits

• ⚡ One-command install — npx skills add tt-a1i/archify -g and you're ready
• 🤖 Agent-native — works seamlessly with Cursor, Claude Code, Codex CLI, and OpenCode
• 🎨 Five diagram types — Architecture, Workflow, Sequence, Data Flow, and Lifecycle
• ✅ Built-in validation — every diagram passes schema, layout, and route checks
• 🔄 Architecture Delta — compare Before/After snapshots for PR reviews
• 🌗 Dark/Light themes — one click to switch, brand marks included
• 📦 Self-contained HTML — no dependencies, no server, just open and share
• 📤 Multiple exports — PNG, SVG, WebM, and 1200×630 share cards
• 🔍 Interactive features — search, trace routes, focus reach, guided stories
• 🆓 MIT License — fully open-source and free to use

Frequently Asked Questions

Is Archify free to use?

Yes, Archify is completely free and open-source under the MIT license. You can use it in personal projects, commercial products, and enterprise environments without any cost.

Which AI coding agents does Archify support?

Archify supports Cursor, Claude Code, Codex CLI, and OpenCode out of the box. It uses the open Agent Skills standard, so any agent that supports this standard can integrate with Archify.

Do I need to learn a new language or DSL?

No. You describe your system in plain English (or any language your AI agent supports), and Archify handles the rest. There's no DSL to learn, no drag-and-drop interface to master.

Can I edit the generated diagrams manually?

Archify generates typed JSON IR as its source format. You can edit this JSON directly, or simply ask your AI agent to modify the diagram with natural language instructions like "add Redis" or "move auth to the left."

What's the difference between Archify and Mermaid?

Mermaid requires you to write code in a specific syntax. Archify is agent-native — your AI generates the diagram from natural language descriptions, and the output is a fully interactive HTML file with validation, themes, and export options that Mermaid doesn't provide.

Can I use Archify for non-code diagrams?

Absolutely. You can describe any system — business processes, organizational structures, network topologies, or data pipelines — and Archify will generate the appropriate diagram type.

How do I share diagrams with my team?

Every Archify diagram is a self-contained HTML file. You can share it via email, Slack, GitHub, or any file-sharing service. You can also export to PNG, SVG, or a 1200×630 share card for social media.