| name | data-chart |
| description | Generate professional dark-themed SVG architecture diagrams, cloud infrastructure diagrams, and data visualizations as standalone HTML files. Use when user asks to create system architecture diagrams, infrastructure maps, or data charts. |
| version | 1.0.0 |
| author | deskwand (adapted from Hermes Agent architecture-diagram, based on Cocoon AI) |
| license | MIT |
| metadata | {"source":"adapted from Hermes Agent architecture-diagram (Cocoon AI, MIT)","tags":["Architecture","Diagrams","SVG","HTML","Visualization","Charts","Cloud"]} |
| allowed-tools | read,write,shell |
Architecture Diagram & Chart Generator
Generate professional dark-themed diagrams as standalone HTML files with inline SVG. No external tools, no API keys — just write HTML and open in browser.
When to use
Best for:
- System architecture diagrams (frontend/backend/database layers)
- Cloud infrastructure (VPC, regions, services)
- Microservice topology, deployment diagrams
- Data flow charts and pipeline diagrams
For data charts (bar, line, pie): output vega-lite code blocks directly in the response — see Vega-Lite Charting section below.
Architecture Diagrams
Workflow
- User describes their system architecture
- Generate HTML file following the design system below
- Save to
.html file
- User opens in any browser — works offline
Design System
| Component Type | Fill (rgba) | Stroke (Hex) |
|---|
| Frontend | rgba(8, 51, 68, 0.4) | #22d3ee (cyan) |
| Backend | rgba(6, 78, 59, 0.4) | #34d399 (emerald) |
| Database | rgba(76, 29, 149, 0.4) | #a78bfa (violet) |
| Cloud/AWS | rgba(120, 53, 15, 0.3) | #fbbf24 (amber) |
| Security | rgba(136, 19, 55, 0.4) | #fb7185 (rose) |
| Message Bus | rgba(251, 146, 60, 0.3) | #fb923c (orange) |
- Background: Slate-950 (
#020617) with 40px grid
- Font: JetBrains Mono, 12px names / 9px sublabels
- Components: Rounded rectangles (
rx="6"), 1.5px strokes
- Arrows: Draw behind components; dashed for security flows
See templates/template.html for the full HTML template with working examples.
Vega-Lite Charting
For charts (bar, line, pie, scatter), output vega-lite code blocks:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": { "values": [...] },
"mark": "bar",
"encoding": {
"x": { "field": "category", "type": "nominal" },
"y": { "field": "value", "type": "quantitative" }
}
}
Chart Type Decision
| Data shape | Chart type |
|---|
| Categories vs values | Bar (vertical) or Bar (horizontal for long labels) |
| Time series | Line or Area |
| Part-to-whole | Pie / Donut (≤6 segments) or Stacked Bar |
| Correlation | Scatter / Bubble |
| Distribution | Histogram / Box Plot |
Output Requirements
- Architecture diagrams: Single
.html file, all CSS/SVG inline
- Charts:
vega-lite code block in response
- No external dependencies (except Google Fonts for diagrams)
