Archify is an agent skill for Claude, Codex CLI, and opencode that generates technical diagrams from plain-English descriptions. The tool produces self-contained HTML files that render architecture, workflow, sequence, data-flow, and lifecycle diagrams without requiring design skills or external dependencies. Users describe their system or process in natural language, and Archify converts that description into a polished diagram with built-in interactivity and export capabilities.
The repository is written in JavaScript and provides five primary diagram types. Architecture diagrams display system components, cloud resources, databases, caches, and security boundaries. Workflow diagrams illustrate request lifecycles, approval flows, tool calls, and CI/CD pipelines with swimlanes and semantic colors. Sequence diagrams show API call chains and service interactions over time. Data-flow diagrams map data pipelines, ETL processes, and PII isolation boundaries. Lifecycle diagrams represent state machines and object state transitions with retry paths and terminal outcomes.
Archify includes a theme toggle that switches between dark and light modes with a single click, with the preference persisting across sessions. The export pipeline supports multiple formats: PNG, JPEG, and WebP are rendered natively at up to 4× source resolution without upsampling blur, while SVG exports are dual-theme self-contained files that automatically follow the reader's system color preference via CSS media queries. Users can copy PNG diagrams directly to the clipboard for pasting into Slack, Notion, or GitHub. The generated HTML files are completely self-contained with zero dependencies, making them easy to share.
The tool uses semantic technology labels that map component descriptions like aws.lambda, postgres, redis, github-actions, and openai to appropriate visual categories without requiring a full icon library. Diagrams support validation loops with JSON schema validation, layout checks, and HTML/SVG artifact verification. Iteration happens through chat: users can request changes like adding Redis, repositioning components, or changing colors, and the agent regenerates the diagram accordingly.
The project evolved from Cocoon-AI/architecture-diagram-generator v1.0, which was dark-only with HTML output. Version 2.0 introduced a themeable CSS-variable system and client-side export. Subsequent releases added copy-to-clipboard functionality, keyboard navigation, print stylesheets, native 4× rasterization, dual-theme SVG export, renderer-backed workflow and sequence modes, CJK-aware text measurement, and golden tests with CI. Version 2.7 hardened workflow diagrams with phase headers, groups, exception lanes, and route-crossing guards. Version 2.9 introduced a unified CLI and real-repository architecture examples. Version 2.10 added actionable validator hints, optional grid-based architecture placement with row/col positioning, and an inspect command for computed layout JSON.
The project is classified under topics including Anthropic, architecture-diagram, claude-skill, dark-mode, developer-tools, diagram-as-code, html-diagram, mermaid-alternative, SVG, and system-design. The repository is licensed under MIT and maintains a live project page at tt-a1i.github.io/archify with example diagrams demonstrating each diagram type and theme variation.
