skills.rest
stacksjs
stacksjsOFFICIAL
Explore all skills by this author →
Website𝕏@stacksjsGitHub

stacks-technical-diagrams

Generate architecture, workflow, sequence, dataflow, and lifecycle diagrams as self-contained HTML with inline SVG.

625|19|Updated Apr 26, 2022
Search Tags:#HTML#svg#Bun#diagram#Documentation#Visualization#ARCHITECTURE
One-click install
npx skills add https://github.com/stacksjs/stacks --skill stacks-technical-diagrams
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stacks-technical-diagrams
Source: https://github.com/stacksjs/stacks/tree/main/storage/framework/defaults/ai/skills/stacks-technical-diagrams
Command: npx skills add https://github.com/stacksjs/stacks --skill stacks-technical-diagrams

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Creating consistent, professional technical diagrams for Stacks applications usually requires external diagramming tools or manual SVG work. This Skill renders five types of technical diagrams from JSON definitions into standalone HTML files with dark/light themes and built-in export options, without installing any packages.

Core Features & Use Cases

  • Five Diagram Modes: Render architecture, workflow, sequence, dataflow, and lifecycle diagrams from validated JSON schemas using Bun-based renderers.
  • Self-Contained Output: Every diagram is a single HTML file with inline SVG, a dark/light theme toggle, and export to PNG, JPEG, WebP, and dual-theme SVG.
  • Validation and Layout Checks: Schema validation plus geometry checks catch overlaps, label collisions, and malformed SVG before delivery.
  • Use Case: Ask for a diagram of your Stacks request lifecycle, and the Skill inspects routes, actions, and models, then produces a themed HTML diagram in docs/diagrams/ ready to open in a browser or embed in a README.

Quick Start

Use the stacks-technical-diagrams skill to create an architecture diagram of this Stacks application's request flow from browser to database.

Frequently Asked Questions about stacks-technical-diagrams

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

FAQPage Schema
How do I create an architecture diagram for a Stacks application?▼

Write a JSON file with components, boundaries, and connections following the architecture schema, then run the technical-diagrams CLI render command with Bun. The output is a self-contained HTML file with inline SVG, theme toggle, and export menu.

What diagram types does this skill support?▼

It supports five types: architecture for system components and cloud resources, workflow for processes and CI/CD, sequence for API call chains, dataflow for pipelines and lineage, and lifecycle for state machines and status transitions.

Can I convert Mermaid diagrams into these HTML diagrams?▼

Yes, paste Mermaid code and the skill reads it for structure, then lays out a matching diagram from scratch. Flowcharts map to workflow or architecture, sequenceDiagram maps to sequence, and stateDiagram maps to lifecycle.

Does the diagram renderer require npm packages or network access?▼

No, the skill is dependency-free by contract. It uses Bun's built-in modules, checked-in standalone schema validators, and system font fallbacks, so generated HTML renders offline in any modern browser.

Why does diagram validation fail with overlap or label errors?▼

The renderers fail fast on node overlap, label collisions, out-of-range columns, and too-short edges. Error messages name the JSON path and suggest fixes like adjusted coordinates or labelDy offsets, which you apply to the JSON and re-render.

What export formats are available for generated diagrams?▼

Each HTML diagram includes an export menu supporting copy PNG to clipboard, download PNG, JPEG, and WebP at up to 4x resolution, and a dual-theme SVG download that follows the host's prefers-color-scheme setting.

Related Skills

Explore More Software Engineering Skills→
n0ann0an
103

diagram

Generate ASCII diagrams from plain-text descriptions of system architecture.

Community
Intermediate
466852675466852675

fireworks-tech-graph

Generate validated SVG technical diagrams and export PNG images.

Community
Advanced
JuanMS20JuanMS20
1

zoom-out

Map relevant modules and callers for code sections using a domain glossary.

Community
Basic
roycolumbia-coderoycolumbia-code

mermaid

Create and edit Mermaid diagrams via a command-line interface.

Community
Intermediate