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.
Impact: Medium
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.
Sources