archify

Generate validated architecture, workflow, sequence, dataflow, and lifecycle diagrams as standalone interactive HTML from JSON specifications.

Updated May 18, 2026
One-click install
npx skills add https://github.com/Joey-Tools/codex-private-workflows --skill archify-joey-tools
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: archify
Source: https://github.com/Joey-Tools/codex-private-workflows/tree/main/personal_codex/skills/archify
Command: npx skills add https://github.com/Joey-Tools/codex-private-workflows --skill archify-joey-tools

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Creating polished, accurate technical diagrams by hand is slow and error-prone, and generic diagram tools produce static images that are hard to validate, explore, or keep consistent with real code. Archify turns a small typed JSON specification into a self-contained, interactive HTML diagram with deterministic validation and delivery receipts. ## Core Features & Use Cases - Five typed diagram renderers: architecture, workflow, sequence, dataflow, and lifecycle, each with a strict JSON schema, automatic orthogonal routing, and showcase-quality composition checks. - Interactive standalone HTML output: inline SVG with dark/light themes, pan/zoom, search, focus, relationship tracing, optional trace animation, and PNG/JPEG/WebP/SVG/WebM export. - Validation and delivery pipeline: validate reports structured diagnostics, deliver freezes the specification, renders and checks the artifact, and reports SHA-256 receipts; visual-check collects bounded browser evidence. - Mermaid and repository input: accepts pasted Mermaid flowchart, sequenceDiagram, and stateDiagram as topology references, and can bind architecture diagrams to revision-pinned GitHub repository evidence. - Use Case: Ask for an architecture diagram of your deployment, paste a Mermaid flowchart of a CI/CD pipeline, or describe an agent tool-call workflow in plain language, and receive a validated, explorable HTML diagram. ## Quick Start Explicitly invoke $archify and describe the diagram you want, for example: "$archify create an architecture diagram of my web app with a frontend, API backend, Postgres database, and Redis cache."

Frequently Asked Questions about archify

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an architecture diagram from a JSON specification?

Author a JSON file following the architecture schema with components, boundaries, and connections, then run the archify CLI validate and deliver commands. The renderer produces a standalone interactive HTML file with inline SVG, themes, and export options.

Can I convert a Mermaid diagram into an interactive HTML diagram?

Yes. Paste a Mermaid flowchart, sequenceDiagram, or stateDiagram and it is read for topology and meaning, then re-authored as fresh Archify JSON. Flowcharts map to workflow or architecture, sequenceDiagram to sequence, and stateDiagram to lifecycle.

What diagram types does Archify support?

Archify supports five typed renderers: architecture for components and boundaries, workflow for processes and approval gates, sequence for API call chains, dataflow for pipelines and lineage, and lifecycle for state transitions.

Does Archify require npm install or network access to run?

No install is required inside the skill package. Validators are pre-generated and committed, so runtime validation has no npm or network dependency; only Node.js 18 or later is needed, verifiable with the doctor command.

Why does Archify validation fail with composition errors?

Showcase validation fails on issues like label-route collisions, ambiguous corridors, or edges crossing unrelated nodes. Fix only the diagnosed subject using the reported supportedFixes, such as adjusting a route or label position, then re-run validate.

When should I not use Archify for diagrams?

Do not use it when $archify was not explicitly invoked, since the skill has a strict invocation gate. It is also a poor fit when you need a quick raster sketch rather than a validated, explorable HTML artifact.