Archify skill
A skill that draws validated architecture, workflow, sequence and data-flow diagrams as one interactive HTML file
- 91,202 ★ on the repository
- Last commit
- Apache-2.0
Extended access
Why this level
- Runs Node.js scripts and writes diagram files
- May read repository code and occasionally fetch a version manifest
Install
- Works in
Manual install
npx skills add tt-a1i/archify -gGlobal install into detected agents.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Runs Node.js scripts and writes diagram files
- May read repository code and occasionally fetch a version manifest
This is third-party code. Review the repository files before installing.
What it does
The agent describes the system as typed JSON, and the Archify Node.js renderer validates it and builds a self-contained HTML file with SVG. Five types are supported: architecture, workflow, sequence, data flow and state lifecycle, and Mermaid input is accepted. The validator checks layout, edge routes and labels and returns a machine-readable repair hint on failure. The output file lets you search nodes, trace paths, play guided stories, switch themes and export PNG, SVG, WebM and a share card. A compare mode shows the delta between two architecture versions for review.
Who it is for. For developers, architects and technical writers who need a clean system diagram straight from an agent chat.
Good fit when
- You need to show a repository's architecture to a new teammate
- You need an API call or data pipeline diagram for documentation
- You want to compare architecture before and after a PR
Not a fit when
- You need a free-form drawing editor with manual dragging
- The agent environment has no Node.js
Example request
Analyze this repository and use archify to draw a runtime architecture diagram: 8-12 core components, the main request path and external dependenciesLimitations
The full validated workflow needs Node.js. The skill does no WYSIWYG editing, no general auto-layout and no hosting. Every few days it may fetch a version manifest for an update reminder; turn this off with ARCHIFY_UPDATE_CHECK_DISABLED=1.
How to disable. Delete the archify folder from the agent's skills directory, for example ~/.claude/skills/archify.
FAQ
Do I need a repository?
No, a diagram can be built from a plain description. A repository is needed only when the diagram must reflect real code.
Can I try it without installing?
Yes, the README suggests npx skills use tt-a1i/archify@archify --agent codex.
Discussion
No questions or reviews yet.
Related
SkillsA skill that draws a system architecture diagram as one HTML file with SVG plus copy, PNG and PDF export
A skill that draws editorial diagrams as standalone HTML and SVG files: architecture, flowcharts, ER, funnels and about forty more types
A skill that draws 45 types of animated diagrams from a short JSON spec and saves them as HTML, SVG, PNG, GIF and MP4
A skill drawing animated architecture and process diagrams in a hand-drawn style: dark neon and light paper. The README is in Chinese
A set of 14 skills that teach the agent to build diagrams and visualizations right inside Markdown: UML, cloud and network schemes, charts, maps and cards
Draw.io Skill
Draw.io Skill for Claude & Codex
Skills for draw.io diagrams: architecture, networks, flowcharts, import from Terraform and code, offline generation from YAML and PNG and SVG export
README in short
The README shows generated diagram examples, the diagram types and what to include in a prompt for each. Installation uses npx skills add, with specific commands for Cursor, Codex and OpenCode and a ZIP for Claude.ai and Raven. It documents the generate, validate, preview, deliver loop and the archify.mjs CLI commands: doctor, guide, validate, deliver, compare. MIT licensed.
README badge
Original SKILL.md
--- name: archify description: Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid. license: MIT metadata: version: "2.17" author: tt-a1i based_on: Cocoon-AI/architecture-diagram-generator (MIT, v1.0) --- # Archify Create a self-contained, interactive HTML diagram from a small typed JSON specification. Static output is the default; enable motion only when the user asks for a demo or presentation. ## Fast authoring path Use this bounded path for ordinary generation. Do not read the optional Viewer Runtime reference unless the user asks about those features. 1. Choose `architecture`, `workflow`, `sequence`, `dataflow`, or `lifecycle` from the question.