archify

Generate validated interactive HTML diagrams from typed JSON specifications.

2|Updated Jul 18, 2026
One-click install
npx skills add https://github.com/Arasz/ai-badger --skill archify-arasz
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: archify
Source: https://github.com/Arasz/ai-badger/tree/main/features/common/skills/archify
Command: npx skills add https://github.com/Arasz/ai-badger --skill archify-arasz

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Turning architecture, workflow, sequence, data-flow, and lifecycle descriptions into polished, committed diagram deliverables normally requires manual drawing tools or fragile Mermaid styling. Archify converts a small typed JSON specification into a self-contained interactive HTML diagram with deterministic validation and delivery receipts. ## Core Features & Use Cases - Five typed renderers: architecture, workflow, sequence, dataflow, and lifecycle diagrams, each with its own JSON schema, examples, and composition checks. - Validation and delivery pipeline: validate runs schema plus composition checks (showcase profile requires 9 artifact checks), and deliver freezes the specification, renders it, and reports SHA-256 receipts. - Visual verification: visual-check measures containment at desktop viewport sizes and captures light/dark screenshots as review evidence. - Use Case: Ask for a diagram of your microservices deployment; the skill authors an architecture JSON, validates it at showcase quality, and delivers a standalone HTML file with pan/zoom, search, and theme switching. ## Quick Start Ask the agent to create an architecture diagram of your system as a standalone HTML file using the archify skill.

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 as HTML from JSON?

Author a JSON file following the architecture schema with components, boundaries, and connections, then run node bin/archify.mjs deliver architecture spec.json output.html. The deliver command validates, renders, and commits the HTML with a SHA-256 receipt.

What diagram types does Archify support?

Archify supports five renderers: architecture for components and cloud boundaries, workflow for processes and CI/CD, sequence for API call chains, dataflow for pipelines and lineage, and lifecycle for state transitions. Diagram kinds outside these five should use Mermaid or prose instead.

When should I use Mermaid instead of Archify?

Use Mermaid when Node.js 18+ or the skill is unavailable, when the diagram must render inline in committed Markdown, or when the user explicitly asks for Mermaid source or plain text. Archify is the default for committed standalone HTML deliverables.

Does Archify require npm install or network access?

No install is required inside the skill package; validators are pre-generated and committed, so runtime validation has no npm or network dependency. Verify the environment with node bin/archify.mjs doctor.

Why does Archify validation fail with only 4 artifact checks?

A receipt with 4 artifact checks is basic validation, not showcase acceptance. A showcase pass requires all 9 artifact checks with 0 composition errors and 0 warnings; set meta.quality_profile to showcase or pass --quality showcase.

Can Archify diagrams include brand logos like Kafka or Vue?

Yes, nodes accept an optional brand field with a canonical built-in ID from the bundled catalogue of 107 marks, or a digest-pinned object from archify brands capture for a user-supplied URL. Render and validate never perform unpinned network captures.