archify

Generate validated interactive HTML diagrams from typed JSON specifications.

Updated May 24, 2026
One-click install
npx skills add https://github.com/MWest2020/skill-forge --skill archify-mwest2020
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: archify
Source: https://github.com/MWest2020/skill-forge/tree/main/skills/archify
Command: npx skills add https://github.com/MWest2020/skill-forge --skill archify-mwest2020

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires ajv, simple-icons, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Turning plain-language requirements or Mermaid sketches into polished, presentation-quality architecture and workflow diagrams normally requires manual drawing tools and repeated layout fixes. This Skill produces self-contained, explorable HTML diagrams with deterministic validation so the output is correct before handoff. ## Core Features & Use Cases - Five diagram types: architecture, workflow, sequence, dataflow, and lifecycle/state diagrams authored from a small typed JSON specification with schemas and examples. - Validated delivery pipeline: a validate command checks composition (crossings, corridors, label clearance, route rhythm) against a showcase quality profile, and deliver atomically commits the HTML with SHA-256 receipts. - Mermaid conversion: accepts pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input and re-authors it as native Archify JSON. - Use Case: Ask for a diagram of your microservices deployment with security boundaries; the Skill authors the JSON spec, validates it to 9/9 showcase checks, and delivers a standalone HTML file with dark/light themes, pan/zoom, search, and PNG/SVG/WebM export. ## Quick Start Ask the agent to create an architecture diagram of your system from a plain-language description or a pasted Mermaid diagram, and it will deliver a validated standalone HTML file.

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 text description?

Describe the system in plain language and the Skill authors a typed JSON specification using the architecture schema, then renders it to a standalone HTML file. It validates the candidate with the archify CLI and delivers the final artifact with a SHA-256 receipt.

How to convert a Mermaid diagram to interactive HTML?

Paste a Mermaid flowchart, sequenceDiagram, or stateDiagram and the Skill reads it for topology and meaning, then authors fresh Archify JSON rather than copying Mermaid styling. Flowcharts map to workflow or architecture, sequenceDiagram to sequence, and stateDiagram to lifecycle.

What diagram types does Archify support?

Archify supports five types: architecture for components and boundaries, workflow for processes and approvals, sequence for API call chains, dataflow for pipelines and lineage, and lifecycle for state transitions. A built-in guide command can pick the type from an ambiguous scenario.

Does Archify require installing dependencies?

No install is required inside the skill package; the bundled CLI runs directly with Node.js. You can verify the setup with the doctor command and generate a sample with the demo command.

Why does showcase validation fail on my diagram?

Showcase validation fails on composition errors such as edges crossing unrelated nodes, ambiguous shared corridors, label-to-route clearance violations, or route segments shorter than the rhythm minimums. Fix the diagnosed subject using the reported supportedFixes and rerun validate after each edit.

Can I export Archify diagrams to PNG or SVG?

Yes, the generated HTML viewer supports exporting to PNG, JPEG, WebP, SVG, and WebM directly from the artifact. The exported files embed brand marks and theme styling without any network fetches.