AGENTCONN

// Skill profile

Archify

Claude Code Intermediate Coding Open Source

tt-a1i/archify is an agent skill that generates polished, interactive technical diagrams directly from a codebase or system description. It supports five diagram types — architecture (components, services, boundaries), workflow (CI/CD, approvals, runbooks), sequence (API calls, auth, async traces), data-flow (pipelines, lineage, consumers), and lifecycle (states, retries, terminal outcomes). The generation pipeline follows a validate-preview-deliver cycle: agents produce typed JSON from descriptions, built-in validators check structural correctness with specific repair suggestions on failure, an optional desktop preview mode watches and hot-reloads verified revisions, and candidates must pass all checks before replacing targets. Output is self-contained HTML with theme switching (dark/light), multiple visual presets (Signal Flow, Blueprint, Classic), interactive features (focus nodes, trace routes, compare roles, guided stories), and export to PNG, SVG, WebM, and share cards. Install via npx skills add tt-a1i/archify -g. 19.2K GitHub stars, 1,317 forks, MIT-licensed.

Input / Output

Accepts

codebase system-description text-prompt

Produces

html-diagram png svg webm

Overview

Archify is an agent skill that transforms codebases and system descriptions into interactive, shareable technical diagrams — directly in chat. Instead of manually drawing architecture diagrams in Excalidraw or fighting with Mermaid syntax, you describe what you want and the agent generates a self-contained HTML file with motion, interactivity, and crisp export options. The skill supports five diagram types covering the most common visualization needs in software engineering: architecture maps, workflow diagrams, sequence diagrams, data-flow visualizations, and lifecycle state machines.

Key Capabilities

Typed JSON pipeline with validation: Archify does not generate diagrams by dumping SVG. Agents produce typed JSON source from descriptions, which passes through built-in validators that check structural correctness — sources must exist, connections must resolve, and layouts must be valid. When validation fails, the error identifies the specific repair needed rather than returning a generic failure. This makes the output reproducible and verifiable rather than hope-based.

Interactive output: Generated diagrams are not static images. The self-contained HTML files support focusing individual nodes to highlight their connections, tracing routes through the system, comparing roles side-by-side, and playing guided stories that walk through the diagram step by step. Three visual presets (Signal Flow, Blueprint, Classic) and dark/light theme switching let you match the diagram to your documentation style.

Multi-format export: Diagrams export to PNG for documentation, SVG for scalable embedding, WebM for animated walkthroughs, and share cards for social media. All exports maintain the visual quality of the interactive version.

Desktop preview mode: An optional preview mode watches a single source file and hot-reloads verified revisions, letting you iterate on complex diagrams without regenerating from scratch each time.

Use Cases

Software architects use Archify to generate system maps from codebase analysis — point the agent at a repository and get an architecture diagram that reflects the actual code structure. DevOps engineers use the workflow diagram type to visualize CI/CD pipelines, approval chains, and runbook procedures. API developers use sequence diagrams to document authentication flows, cache fallback patterns, and async traces. Data engineers use data-flow diagrams to map pipeline lineage and consumer relationships.

Considerations

Archify requires an agent that supports skills installation — Claude Code, Cursor, Codex CLI, opencode, or Raven. The typed JSON intermediate format means diagrams are reproducible and diffable, but the generation step depends on the underlying model’s ability to understand system descriptions accurately. Complex systems with many components may require iterative refinement. At 19.2K stars, Archify is well-established with active development and community contributions.

Who It’s For

Developers and architects who need technical diagrams that accurately reflect their systems and stay up to date as code evolves. Teams that want interactive, shareable system maps rather than static Mermaid or draw.io files. Anyone who has spent too long manually updating architecture diagrams after a refactor.

Tags

#diagrams #architecture #visualization #system-design #interactive #mermaid-alternative #code-visualization

Compatible Agents

AI agents that work well with Archify.

Similar Skills