Compile System Architecture Diagrams Directly in Cursor and Claude Code Chats
Archify compiles system descriptions or repositories into interactive HTML/SVG architecture maps within agentic IDEs. It supports Cursor, Claude Code, and Codex, validating JSON IR before outputting verified, shareable artifacts.
Why it matters
You can generate and review architecture changes as clean, interactive diagrams directly inside your AI-assisted development workflow.
TL;DR
- 01Archify translates natural language code descriptions into verified, structured layouts directly inside agent chats.
- 02Strict JSON IR schemas prevent layout deterioration and arrow cluttering common in generic auto-layout scripts.
- 03Built-in visual diffing enables precise architectural tracking on code modifications and pull requests.
Key facts
- Stable Version
- v2.16.0
- Supported Formats
- HTML, PNG, SVG, WebM, 1200x630 Share Cards
- Update Check Interval
- 72 Hours
Agentic Integration and Installation
Archify is a Node.js-based rendering system designed specifically for developer tools like Cursor, Claude Code, Codex CLI, and OpenCode. To integrate it globally as a skill for Cursor, you can run:
npx -y skills add tt-a1i/archify --skill archify --agent cursor --global --copy --yesFor Codex users, use:
npx skills use tt-a1i/archify@archify --agent codexMulti-Mode Diagram Validation
The tool supports five visual modes: Workflow, Sequence, Data Flow, Lifecycle, and Architecture. Instead of auto-layout tools that pile up arrows, Archify uses deterministic validation rules. Run validation locally with:
node bin/archify.mjs validate workflow examples/agent-tool-call.workflow.json --quality showcase --jsonIf validation fails, the CLI returns stable rule codes and precise repair receipts.
Visual Git Diffs
You can compare architecture states between two Git commits using:
node archify/bin/archify.mjs compare architecture base.json head.json architecture-delta.html --jsonThis creates a self-contained HTML page containing the visual diff (Before, Delta, and After states) with highlighted routing paths, upstream/downstream dependencies, and actor boundaries.
Try it in 2 minutes
npx -y skills add tt-a1i/archify --skill archify --agent cursor --global --copy --yesbash
✓ When to use
- When you want to generate system diagrams directly from natural language descriptions in Cursor or Claude Code.
- When reviewing architecture changes during pull requests using structured Before/After visual diffs.
- When you need interactive, verifiable SVG/HTML artifacts that link back to specific code lines.
✕ When NOT to use
- Not for manual drag-and-drop vector editing or design brainstorming where strict schemas are restrictive.
- Not as a replacement for real-time live infrastructure monitoring systems.
What to do today
- Install the Archify global skill using the npx command in your local Cursor workspace.
- Test visual schema validation with the provided example configurations in the examples directory.
- Configure visual diffing inside your CI pipeline to generate delta visual cards on pull requests.