archify

Solid

Create professional architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as standalone HTML files with SVG graphics, a built-in dark/light theme toggle, and one-click export to PNG / JPEG / WebP / SVG. Accepts plain-language descriptions or pasted Mermaid code (flowchart, sequenceDiagram, stateDiagram) and lays the diagram out from scratch in archify style. Use when the user asks for system architecture diagrams, infrastructure diagrams, cloud architecture visualizations, security diagrams, network topology, technical workflows, approval flows, runbooks, CI/CD flows, process diagrams, API call sequences, request lifecycles, data pipelines, ETL/ELT maps, PII boundaries, data lineage, state machines, lifecycle diagrams, status transitions, or asks to convert/beautify a Mermaid diagram.

Data & Documents 4 stars 1 forks Updated 1 weeks ago MIT

Install

View on GitHub

Quality Score: 78/100

Stars 20%
23
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# Archify Skill Create professional technical diagrams as self-contained HTML files with inline SVG, a theme toggle, and a built-in image/SVG export menu. Every diagram ships with a **dark/light theme toggle** (persists in `localStorage`, respects `prefers-color-scheme`), an **export menu** (copy PNG to clipboard; download PNG/JPEG/WebP rasterized natively at up to 4× resolution; download a **dual-theme SVG** that follows the embedding host's `prefers-color-scheme` — ideal for GitHub READMEs), and a **CSS-variable color system** that keeps both themes consistent. ## Setup No dependency installation is required. The distributed skill includes standalone validators compiled from all five JSON Schemas, so schema and layout validation work immediately after installation. The generated HTML and the renderer runtime are both dependency-free. Run `node bin/archify.mjs doctor` to verify an installation. Run `node bin/archify.mjs demo [output-directory]` to generate a ready-to-open example before creating the first custom diagram. If you have no shell access at all (e.g. the skill was added as project knowledge), fall back to architecture mode for every request: hand-place SVG into `assets/template.html` following the Design System below, and run the self-review checklist before delivering. ## Choosing a Diagram Type | Type | Use for | How | |------|---------|-----| | `architecture` | System components, cloud resources, services, security boundaries, infrastructure | `renderer...

Details

Author
cskwork
Repository
cskwork/supergoal-skill
Created
1 months ago
Last Updated
1 weeks ago
Language
JavaScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Data & Documents Featured

archify

Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, semantic navigation, optional trace motion, an optional 1200×630 Share Card PNG, 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, approval or CI/CD flows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid. Prefer typed JSON IR renderers and deterministic validation; deliver static output by default, enable motion only when requested, and use optional post-commit opening only for an interactive local handoff.

7,419 Updated today
tt-a1i
AI & Automation Solid

architecture-diagram

Dark-themed SVG architecture/cloud/infra diagrams as HTML.

11 Updated 5 days ago
kevinnft
AI & Automation Listed

archify

Create professional architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML files with SVG graphics, progressive MAP/READ/FULL Reading Depth, selective counted inline legends that enter a Semantic Lens with selection-triggered direction signals, directly operable and shareable stable relationships, exact-edge one-shot Relationship Preview pulses, pre-click Intent Trace path previews, two-endpoint Route Probe analysis, searchable semantic nodes, focus with Semantic Passport context, a live Semantic Radar overview, a Named Chapter Rail with pre-commit Chapter Delta Preview, Shared Anchor Handoff, a directly inspectable Story Beat Navigator with Story Follow Camera, factual Story Director Strip, and one-step Story Horizon, stable Shareable Story Moment links, a reader-controlled Live/Still Motion Governor, Presentation Stage, dependency-free pan/zoom, dark/light themes, optional motion styling, and one-click export to PNG / JPEG / WebP / SVG / WebM. Accepts plain-l

0 Updated today
pedroberaldo87