Archify

Install

npx skills add tt-a1i/archify -g

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.

Example request

Analyze this repository and use archify to draw a runtime architecture diagram: 8-12 core components, the main request path and external dependencies

Limitations

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.

Security check

• Runs Node.js scripts and writes diagram files
• May read repository code and occasionally fetch a version manifest

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.

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.

Related