stacks-technical-diagrams
A tool for creating professional, theme-aware technical diagrams directly from code documentation.
Install
mkdir -p .claude/skills/stacks-technical-diagrams && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/19121" && unzip -o skill.zip -d .claude/skills/stacks-technical-diagrams && rm skill.zipInstalls to .claude/skills/stacks-technical-diagrams
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Create polished, dependency-free architecture, workflow, sequence, data-flow, and lifecycle diagrams for Stacks applications as standalone HTML with inline SVG, dark/light themes, and PNG, JPEG, WebP, and SVG export. Use for system or cloud architecture, security boundaries, network topology, technical workflows, CI/CD, runbooks, API call sequences, request lifecycles, data pipelines, lineage, PII boundaries, state machines, status transitions, or converting Mermaid into a purpose-built diagram.Key capabilities
- →Create architecture diagrams for system components and cloud resources
- →Generate workflow diagrams for technical flows and CI/CD processes
- →Produce sequence diagrams for API call chains and request lifecycles
- →Develop dataflow diagrams for pipelines and ETL processes
- →Design lifecycle diagrams for state machines and status transitions
- →Export diagrams as standalone HTML with inline SVG and dark/light themes
How it works
The skill uses renderers for different diagram types to generate self-contained HTML files with inline SVG, a theme toggle, and an export menu. It processes JSON input to create the visual representation.
Inputs & outputs
When to use stacks-technical-diagrams
- →Documenting system architecture
- →Visualizing API call sequences
- →Mapping network topology
- →Creating CI/CD diagrams
About stacks-technical-diagrams
Builds standalone diagrams with dark/light theme support. It creates self-contained HTML files with exportable SVG/PNG assets for system architecture and workflows.
Create polished, dependency-free architecture, workflow, sequence, data-flow, and lifecycle diagrams for Stacks applications as standalone HTML with inline SVG, dark/light themes, and PNG, JPEG, WebP, and SVG export. Use for system or cloud architecture, security boundaries, network topology, techni
When not to use it
- →When the user wants to install packages or fetch runtime assets
- →When the user wants to render or parse Mermaid code mechanically
- →When Bun cannot run and a fallback to architecture mode is required
Limitations
- →Does not install packages or fetch runtime assets
- →Does not mechanically render or parse Mermaid code
- →Requires Bun to run the skill for full functionality
How it compares
This workflow generates dependency-free, self-contained HTML diagrams with built-in theming and export capabilities, unlike generic diagramming tools that may require external dependencies or produce less portable outputs.
Compared to similar skills
stacks-technical-diagrams side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| stacks-technical-diagrams (this skill) | 0 | 11d | Review | Intermediate |
| draw-io | 41 | 6mo | Review | Intermediate |
| mermaid-expert | 27 | 3mo | No flags | Beginner |
| excalidraw-diagram-generator | 18 | 1mo | Review | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by stacksjs
View all by stacksjs →You might also like
draw-io
davila7
draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.
mermaid-expert
sickn33
Create Mermaid diagrams for flowcharts, sequences, ERDs, and architectures. Masters syntax for all diagram types and styling. Use PROACTIVELY for visual documentation, system diagrams, or process flows.
excalidraw-diagram-generator
github
Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw.
scientific-schematics
davila7
Create publication-quality scientific diagrams using Nano Banana Pro AI with smart iterative refinement. Uses Gemini 3 Pro for quality review. Only regenerates if quality is below threshold for your document type. Specialized in neural network architectures, system diagrams, flowcharts, biological pathways, and complex scientific visualizations.
mermaid-diagrams
davila7
Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts, gantt charts, or any other diagram type. Triggers include requests to "diagram", "visualize", "model", "map out", "show the flow", or when explaining system architecture, database design, code structure, or user/application flows.
plantuml-ascii
github
Generate ASCII art diagrams using PlantUML text mode. Use when user asks to create ASCII diagrams, text-based diagrams, terminal-friendly diagrams, or mentions plantuml ascii, text diagram, ascii art diagram. Supports: Converting PlantUML diagrams to ASCII art, Creating sequence diagrams, class diagrams, flowcharts in ASCII format, Generating Unicode-enhanced ASCII art with -utxt flag