Archify v2.10: Open‑Source AI Drawing Skill Generates Diagrams in One Sentence

Core Positioning

Archify v2.10.0 is an open‑source AI drawing skill that creates architecture, sequence, data‑flow, workflow, and lifecycle diagrams from natural‑language prompts. It eliminates manual drag‑and‑drop, Mermaid syntax memorisation, and low‑quality AI‑generated images.

Deterministic Pipeline

User supplies natural language or Mermaid code; the Agent (Claude, Codex, OpenCode) identifies the diagram type and produces a standardised JSON description. ajv validates the JSON against a strict schema, filtering illegal structures and node conflicts.

Five specialised renderers independently compute layout with built‑in collision detection, cross‑lane path optimisation, and CJK width adaptation.

The layout is packaged into a dependency‑free HTML file that includes theme switching, an export panel, and keyboard shortcuts.

Before output a full‑pipeline validation automatically repairs arrow mis‑alignments, out‑of‑bounds coordinates, legend occlusions, and invalid diagonal connections.

Technical stack: Node.js ≥ 18, CSS variable theming, Canvas vector rasterisation, JetBrains Mono (CJK‑compatible), MIT licence, no closed‑source components.

Supported Diagram Types

Architecture : "React front‑end + Kong gateway + Go user service + PostgreSQL + Redis + Kafka on K8s".

Workflow : "PR submission → unit test → manual approval → image build → gray release → full rollout, with rollback on failure".

Sequence : "Browser → API gateway → JWT verification → Redis session lookup → Postgres user query → JSON response".

Data Flow : "APP/Web event → edge gateway → PII filter → Kafka → data warehouse → feature platform → dashboard".

Lifecycle : "Queue → plan → execute → review; supports blocking, retry, cancellation, and final states".

Flagship Features

Dual‑theme adaptive system : Press T to toggle light/dark mode; OS preference is followed automatically; URL parameter ?theme=light or ?theme=dark forces a theme for documentation screenshots.

4× native high‑definition export : SVG is rasterised at four times the size; large images automatically downgrade to 3×/2× to stay within Canvas limits; export panel (press E) supports PNG, JPEG, WebP.

Conversational iterative editing : Short‑phrase tweaks such as "add Redis cache", "move auth module left", "color API component green" modify the diagram without full regeneration; optional animation shows arrow flow (added in v2.8).

Automatic validation : Post‑render checks repair arrow crossovers, overlapping nodes, label overflow, and schema errors, providing actionable hints.

Zero‑dependency sharing : Generates a single HTML file that can be opened in any browser and embedded in GitHub READMEs with automatic dark‑mode adaptation.

Feature Comparison (Archify v2.10 vs. alternatives)

AI natural‑language generation : Archify supports one‑sentence diagram creation; Mermaid is code‑only; Draw.io and Excalidraw require manual drawing.

One‑click dual theme : Archify provides global sync and SVG auto‑adaptation; Mermaid has limited theme support; Draw.io and Excalidraw offer manual toggles.

4× HD export : Archify renders vector losslessly; Mermaid output is screenshot‑level blur; Draw.io and Excalidraw also support vector export.

SVG dual‑theme auto‑adapt : Archify’s single HTML respects system mode; Mermaid requires separate images; Draw.io and Excalidraw are single‑theme.

Supported diagram count : Archify offers 5 professional types; Mermaid provides 10+ generic types; Draw.io is all‑purpose; Excalidraw focuses on hand‑drawn style.

Learning curve : Archify rates ★★★★★ (plain language); Mermaid ★★ (syntax memorisation); Draw.io ★★★ (drag‑and‑drop); Excalidraw ★★★★ (low).

Iteration method : Archify uses chat‑based text tweaks; Mermaid requires code edit & re‑render; Draw.io and Excalidraw rely on manual adjustments.

Agent integration : Archify integrates Claude, Codex, and OpenCode with one‑click install; other tools have no official Agent support.

Installation Guide

Method 1 – Global install (recommended) npx skills add tt-a1i/archify -g Follow the prompts to select your Agent (Claude Code, Codex CLI, or OpenCode). The skill becomes globally available.

Method 2 – Manual zip install (for web Claude or local deployment)

# Global install
unzip archify.zip -d ~/.claude/skills/
# Project‑local install
unzip archify.zip -d ./.claude/skills/

Optional dependency for full schema validation:

cd ~/.agents/skills/archify && npm install

Built‑in CLI Tools (v2.9+)

# Validate drawing configuration
node bin/archify.mjs doctor
# Generate demo diagram
node bin/archify.mjs demo /tmp/demo.html
# Render JSON diagram locally
node bin/archify.mjs render workflow test.json output.html
# Check diagram for errors
node bin/archify.mjs check output.html

Practical Scenarios

Scenario 1 – Microservice Architecture Diagram

Use archify to draw a microservice architecture: Web React front‑end + mobile SDK, Kong gateway, Go user service, Java order service, Python product service, PostgreSQL, MongoDB, Elasticsearch, Kafka, Redis, K8s, Cognito auth.

Press T to toggle theme, then E to export a 4× PNG for documentation.

Scenario 2 – Login Authentication Sequence Diagram

User browser → HTTPS request to API gateway → JWT verification → Redis session lookup → Postgres user query → JSON response, with full‑trace logging.

Scenario 3 – CI/CD Workflow Diagram

PR submission → unit tests → code quality scan → manual approval → container image build → pre‑release deployment → smoke test → production release; failures trigger automatic rollback.

Advanced Use – Auto‑Parsing Codebase

Archify can analyse a repository and generate a runtime architecture diagram that visualises component dependencies, data flows, third‑party services, and security boundaries without manual description.

Common Pitfalls

WebP export button may be disabled on older browsers; Chrome/Firefox recent versions work, Safari older versions fall back to PNG/JPEG.

Copy‑to‑clipboard PNG fails on browsers older than Chromium, Firefox 127+, Safari 16+.

Chinese text mis‑alignment can be fixed by installing JetBrains Mono locally.

Web Claude sandbox limits Node execution; for full rendering use local Claude Code.

Large‑image export is automatically down‑scaled to protect Canvas limits; this is expected behaviour.

Mermaid code import is not direct rendering; the Agent re‑generates an Archify‑compliant diagram.

Conclusion

Archify is an AI‑Agent‑paired productivity tool that removes the need for software switching, syntax memorisation, and manual layout adjustments. It delivers instant, theme‑aware, high‑definition diagrams suitable for technical documentation, design reviews, and presentations.

Open‑Source Links

https://github.com/tt-a1i/archify

https://tt-a1i.github.io/archify/