skills.rest
miyake-san
miyake-sanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

archify

Generate validated architecture, workflow, sequence, dataflow, and lifecycle diagrams as standalone HTML with inline SVG.

Updated Aug 28, 2026
Search Tags:#html#mermaid#visualization#svg#sequence diagram#dataflow#architecture diagram
One-click install
npx skills add https://github.com/miyake-san/sogo-agent-platform --skill archify-miyake-san
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: archify
Source: https://github.com/miyake-san/sogo-agent-platform/tree/main/skills/experimental/archify
Command: npx skills add https://github.com/miyake-san/sogo-agent-platform --skill archify-miyake-san

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Creating clear, professional technical diagrams usually requires manual layout work in drawing tools, and the results are hard to validate, theme, or export consistently. This Skill turns plain-language requirements, repository evidence, or pasted Mermaid code into polished, self-contained HTML diagrams with deterministic validation. ## Core Features & Use Cases - Five typed diagram renderers: architecture, workflow, sequence, dataflow, and lifecycle modes driven by typed JSON schemas with deterministic layout and overlap validation. - Mermaid conversion: Reads pasted Mermaid flowchart, sequenceDiagram, and stateDiagram code for structure and re-lays it out from scratch in the matching mode. - Rich interactive output: Dark/light themes, pan/zoom, semantic navigation, story chapters, route probes, and export to PNG/JPEG/WebP/SVG/WebM plus a 1200×630 Share Card. - Use Case: Ask for a diagram of your microservices architecture; the Skill inspects repository evidence, writes a typed JSON spec, validates it with node bin/archify.mjs validate, and delivers a single HTML file you can open or share. ## Quick Start Ask the assistant 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 from plain text?▼

Describe your system in plain language and the Skill selects the architecture renderer, writes a typed JSON spec, validates it with `node bin/archify.mjs validate`, and delivers a standalone HTML file with inline SVG. No drawing tool or package installation is required.

Can I convert Mermaid diagrams to interactive HTML?▼

Yes. Paste Mermaid flowchart, sequenceDiagram, or stateDiagram code and the Skill reads it for structure, then re-lays it out in the matching archify mode. Styling is dropped; only topology and meaning are preserved.

What diagram types does archify support?▼

Five renderer modes: architecture for components and infrastructure, workflow for processes and CI/CD, sequence for API call chains, dataflow for pipelines and lineage, and lifecycle for state machines. A built-in guide command recommends a mode from your scenario.

Does archify require Node.js or other dependencies?▼

Node.js is needed to run the bundled renderers and validators via `node bin/archify.mjs`, but no npm packages are installed. Without shell access, a hand-placed SVG fallback into the HTML template still works.

Why does diagram validation fail with label overlap errors?▼

The renderers fail fast on node overlap, label collisions, and edges crossing unrelated nodes. Each failure returns a structured diagnostic with a rule code, measured evidence, and supported fixes such as `labelAt` or `labelDy` adjustments.

What export formats does the generated diagram support?▼

The HTML export menu produces PNG, JPEG, WebP, a dual-theme SVG, WebM recordings of trace animations, and a 1200×630 Share Card PNG for README or social previews. Canonical exports always remain static regardless of viewer state.

Related Skills

Explore More Software Engineering Skills→
brandonburrusbrandonburrus

diagrams-as-code

Convert architecture descriptions into visual diagrams using Python code.

Community
Intermediate
yuyuxinliyuyuxinli
1

wechat-infographic

Convert HTML and CSS infographics into WeChat-ready PNGs and inline HTML.

Official
Advanced
shalevaminshalevamin

security-ownership-map

Analyze git repositories to map security ownership and compute bus factor.

Community
Advanced
aaron-vazaaron-vaz
1

mermaid-diagram-creator

Generate Mermaid diagrams as ASCII art or standalone HTML files.

Community
Intermediate