Claude Skill  ·  v2.4.0

From plain English
to architecture in seconds.

Describe your system in chat. Archify generates a polished, self-contained HTML diagram — with dark/light themes, clipboard copy, and ultra-crisp 4× export built in.

Get started View on GitHub
Archify hero screenshot
Diagram Types

Five ways to see your system.

Architecture, workflows, sequences, data flows, or state machines — describe what you need and Archify picks the right visual language.

Architecture

System components, cloud resources, databases, caches, services, security groups, and the connections between them.

  • AWS / GCP / Azure infra
  • Microservices topology
  • Security boundaries
  • Network layout
Architecture diagram

Sequence

API call chains, request lifecycles, cache fallback paths, auth checks, async traces — who calls whom, in what order, and what returns.

  • API request / response
  • Cache miss fallback
  • Auth & JWT flow
  • Async trace emit
Sequence diagram

Data Flow

Data pipelines, ETL/ELT, analytics events, PII isolation, warehouse sync, lineage, and downstream consumers — with governance boundaries.

  • Analytics pipelines
  • PII & consent gates
  • Warehouse lineage
  • ML feature stores
Data flow diagram

Lifecycle

State machines, object lifecycles, run/order/deployment status transitions — with wait states, retries, cancellation, and terminal outcomes.

  • Agent run lifecycle
  • Order status machine
  • Deployment pipeline
  • Approval & retry paths
Lifecycle diagram
Features

Production-ready output,
zero configuration.

One-click theme toggle

Every diagram ships with dark and light themes. Toggle with a click or press T. Persists to localStorage, respects prefers-color-scheme on first visit.

DARK & LIGHT

Ultra-crisp 4× export

PNG, JPEG, WebP — all rasterized natively at 4× source resolution by the browser. No upsampling blur. Sharp on retina displays, slides, and print.

PNG · JPEG · WEBP

Dual-theme SVG

The SVG export ships with both variable sets plus a @media prefers-color-scheme rule. Drop one file into a GitHub README — it follows the reader's theme.

VECTOR · SELF-THEMED

Copy to clipboard

One button puts a PNG straight on your clipboard. Paste directly into Slack, Notion, GitHub, or Figma — no intermediate save step.

INSTANT SHARE

Self-contained HTML

One HTML file. Zero dependencies, no server, no runtime. Open it in any browser and it works. Share by attaching it to an email or PR comment.

ZERO DEPS

Iterate by chat

"Add Redis", "move auth to the left", "use emerald for the API" — refine in natural language. No diagram editor to learn.

CONVERSATIONAL

Export formats

PNG
Transparent · 4× native
JPEG
Theme bg · 4× native
WEBP
Small · 4× native
SVG
Vector · dual-theme
Clipboard
Copy PNG · instant paste
Design System

A semantic color language for infrastructure.

Seven component types. Each with coordinated dark and light variants that switch together via the theme toggle.

Frontend
Client apps, browsers, mobile, UI
Backend
Services, APIs, workers, daemons
Database
DBs, caches, stores, AI/ML
Cloud
Managed services, infra
Security
Auth, secrets, guards
Message Bus
Kafka, RabbitMQ, SNS
External
Users, 3rd parties, generic
Quick Start

Up and running
in three steps.

Requires Claude Pro, Max, Team, or Enterprise — or Claude Code CLI.

1

Install the Skill

Download archify.zip, go to Claude Settings → Capabilities → Skills, click + Add and upload it. Or unzip to ~/.claude/skills/ for CLI use.

2

Describe your system

Write a plain-English description of your architecture — components, connections, cloud services. Or ask Claude to analyze your codebase first.

3

Ask Claude to draw it

Tell Claude to use the Archify skill. It generates a self-contained HTML file you open in any browser. Iterate from there — in plain English.

example prompt
# Step 2 — describe your system Architecture: - React frontend - Node.js/Express API - PostgreSQL database - Redis cache - JWT authentication - AWS + CloudFront CDN # Step 3 — ask Claude Use your archify skill to create an architecture diagram from this description. # Iterate by chat "Add a Kafka message bus" "Move Redis next to the DB" "Use rose for the auth path"

Keyboard shortcuts

Toggle themeT
Open export menuE
Navigate menu↑ ↓
Close menuEsc