Archify: Technical Diagrams from Plain English

The Problem with Technical Diagrams

Have you ever tried to explain a complex system using a whiteboard? You draw boxes, arrows, and labels. Then you take a photo. A week later, you need to update it because the system changed. You redraw everything. The photo gets lost in Slack.

Engineering teams face this problem constantly. Diagrams get outdated. Different tools produce different styles. Nobody can find the latest version. And when it's time to present to stakeholders, you spend hours making things look professional.

The Solution

Archify solves this. Describe your system in plain English (or structured JSON), and Archify generates a polished, interactive HTML diagram with dark/light themes, search, zoom, and export built in.

Open Source

What is Archify?

Archify is an open-source agent skill that turns a repository or plain-English system description into validated, interactive, self-contained HTML architecture diagrams.

Installationbash

npx skills add tt-a1i/archify -g

Works with Cursor, Claude Code, Codex CLI, and OpenCode.

Visit Website View on GitHub

Benefits

Why Archify Helps Communicate Technical Solutions

1. Consistency Across Teams

When everyone uses Archify, all diagrams share the same visual language. Frontend engineers, backend engineers, and DevOps teams produce diagrams that look like they belong together.

2. Living Documentation

Because Archify diagrams are generated from JSON (or plain English), you can version control them alongside your code. When the architecture changes, update the source and regenerate.

3. Interactive Exploration

Static images force viewers to ask "what connects to what?" Archify diagrams let readers search for nodes, trace routes between components, and explore relationships.

4. Validated Correctness

Before delivery, Archify runs 9 checks: structure validation, layout rules, arrow routing, label placement. You cannot ship a broken diagram.

Enterprise AI Agents Platform

Multi-tenant architecture with auth, caching, and domain isolation

Open Full Diagram

Interactive Features

Every Archify diagram includes powerful interactive features out of the box:

Search Nodes

Press / to find any component by name, type, or tag

Trace Routes

Press R to find the path between any two components

Dark/Light Themes

Toggle themes instantly; preference persists across sessions

Export Anywhere

PNG (up to 4x), SVG (dual-theme), WebM video, and 1200x630 share cards

Usage

How to Generate This Diagram

With Archify installed, describe your system in chat or save the JSON source and run:

Validate the diagrambash

node bin/archify.mjs validate architecture \
  ai-agents-platform.architecture.json \
  --quality showcase --json

Runs 9 checks: structure, layout, arrows, labels, boundaries, and more.

Reference

Five Diagram Types

Archify supports five diagram types, each optimized for different communication needs:

Architecture

Components and services

Cloud infra

Microservices

Network topology

Workflow

Processes and approvals

CI/CD

Runbooks

Tool calls

Sequence

Calls and timing

API calls

Auth flows

Cache fallback

Data Flow

Pipelines and lineage

ETL

PII tracking

Analytics

Lifecycle

States and transitions

Agent runs

Order status

Retries

Key takeaways

Describe, don't draw

Tell an AI agent what your system does. Archify handles the visual design.

Version control diagrams

JSON source files live with your code. Diagrams stay in sync with reality.

Validate before shipping

9 automated checks catch layout errors, overlaps, and routing problems.

One file, zero dependencies

Self-contained HTML works offline, in any browser, forever.

Questions I get asked

What diagram types does Archify support?

Archify supports five types: Architecture (components and services), Workflow (CI/CD and approvals), Sequence (API calls and timing), Data Flow (pipelines and lineage), and Lifecycle (states and transitions).

Do I need to learn JSON to use Archify?

No. You can describe your system in plain English to an AI agent (Cursor, Claude Code, Codex), and it generates the JSON for you. The JSON is only needed if you want fine-grained control.

Can I use Archify diagrams in presentations?

Yes. Archify exports to PNG (up to 4x resolution), SVG (dual-theme), and WebM video. It also generates 1200x630 share cards perfect for social media and documentation.