Architecture Diagram
Overview
Generate professional, dark-themed technical architecture diagrams as
standalone HTML files with inline SVG graphics. No external tools, no API keys,
no rendering libraries — just write the HTML file and open it in a browser.
Scope
Best suited for:
- Software system architecture (frontend / backend / database layers)
- Cloud infrastructure (VPC, regions, subnets, managed services)
- Microservice / service-mesh topology
- Database + API map, deployment diagrams
- Anything with a tech-infra subject that fits a dark, grid-backed aesthetic
Look elsewhere first for:
- Physics, chemistry, math, biology → use
concept-diagrams
- Floor plans, educational visuals → use
concept-diagrams
- Hand-drawn sketches → use excalidraw
Workflow
- User describes their system architecture (components, connections,
technologies)
- Generate the HTML file following the design system below
- Save with
write_file to a .html file
- User opens in any browser — works offline, no dependencies
write_file("architecture.html", "<full HTML with inline SVG + CSS>")
Output Location
# Default to current working directory
./[project-name]-architecture.html
Design System
Aesthetic
- Dark background: deep navy or black (#0a0a1a, #111)
- Grid pattern: subtle dot or line grid in background
- Neon accents: luminous colors for different component types
- Monospace labels: for technical authenticity
- Rounded corners: on boxes (rx=6)
- Glow effects: subtle box-shadow on key components
Color Palette
:root {
--bg: #0a0a1a;
--grid: #1a1a2e;
/* Component types */
--c-frontend: #00D9FF; /* cyan */
--c-backend: #50C878; /* green */
--c-database: #F5A623; /* orange */
--c-external: #C4A7E7; /* purple */
--c-queue: #FF6B6B; /* red */
--c-cache: #FFD700; /* gold */
--text: #E0E0E0;
--text-dim: #888;
--border: #333;
}
SVG Template
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Architecture Diagram</title>
<style>
body {
margin: 0; padding: 40px;
background: var(--bg);
background-image: radial-gradient(circle, var(--grid) 1px, transparent 1px);
background-size: 30px 30px;
}
svg { display: block; margin: 0 auto; }
.component {
stroke-width: 2; rx: 6; ry: 6;
fill-opacity: 0.1;
}
.label {
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 13px; fill: var(--text);
}
.label-type {
font-size: 10px; fill: var(--text-dim);
text-transform: uppercase; letter-spacing: 1px;
}
.connection {
stroke: var(--text-dim); stroke-width: 1.5;
fill: none; stroke-dasharray: 4 2;
marker-end: url(#arrow);
}
</style>
</head>
<body>
<svg width="1000" height="700" viewBox="0 0 1000 700">
<defs>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="var(--text-dim)"/>
</marker>
</defs>
<!-- Frontend Layer -->
<rect class="component" x="50" y="50" width="200" height="80"
stroke="var(--c-frontend)" fill="var(--c-frontend)"/>
<text class="label" x="150" y="85" text-anchor="middle">Web App</text>
<text class="label-type" x="150" y="105" text-anchor="middle">Frontend</text>
<!-- Backend Layer -->
<rect class="component" x="400" y="50" width="200" height="80"
stroke="var(--c-backend)" fill="var(--c-backend)"/>
<text class="label" x="500" y="85" text-anchor="middle">API Server</text>
<text class="label-type" x="500" y="105" text-anchor="middle">Backend</text>
<!-- Database Layer -->
<rect class="component" x="750" y="50" width="200" height="80"
stroke="var(--c-database)" fill="var(--c-database)"/>
<text class="label" x="850" y="85" text-anchor="middle">PostgreSQL</text>
<text class="label-type" x="850" y="105" text-anchor="middle">Database</text>
<!-- Connections -->
<path class="connection" d="M 250 90 L 400 90"/>
<path class="connection" d="M 600 90 L 750 90"/>
</svg>
</body>
</html>
Diagram Patterns
Layered Architecture
- Frontend (top) → Backend (middle) → Database (bottom)
- Horizontal layers with vertical connections
Microservice Topology
- Central API gateway + surrounding services
- Bidirectional connections for sync, one-way for async
Cloud Infrastructure
- VPC as a large container box
- Subnets as inner boxes
- Managed services as icons (S3, Lambda, RDS)
Data Flow
- Left-to-right flow
- Different line styles for sync (solid) vs async (dashed)
Pitfalls
- Too many components: keep to 5-10 boxes max. More = unreadable.
Split into multiple diagrams if needed.
- Crossing lines: route connections to minimize crossings. Use right-angle
paths.
- No legend: if using color-coded component types, include a legend.
- Font sizing: labels must be readable. 13px minimum for component names.
1---2name: architecture-diagram3description: Dark-themed SVG architecture/cloud/infra diagrams as HTML.4license: MIT5---67# Architecture Diagram89## Overview1011Generate professional, dark-themed technical architecture diagrams as12standalone HTML files with inline SVG graphics. No external tools, no API keys,13no rendering libraries — just write the HTML file and open it in a browser.1415## Scope1617**Best suited for:**18- Software system architecture (frontend / backend / database layers)19- Cloud infrastructure (VPC, regions, subnets, managed services)20- Microservice / service-mesh topology21- Database + API map, deployment diagrams22- Anything with a tech-infra subject that fits a dark, grid-backed aesthetic2324**Look elsewhere first for:**25- Physics, chemistry, math, biology → use `concept-diagrams`26- Floor plans, educational visuals → use `concept-diagrams`27- Hand-drawn sketches → use excalidraw2829## Workflow30311. User describes their system architecture (components, connections,32 technologies)332. Generate the HTML file following the design system below343. Save with `write_file` to a `.html` file354. User opens in any browser — works offline, no dependencies3637```38write_file("architecture.html", "<full HTML with inline SVG + CSS>")39```4041### Output Location4243```bash44# Default to current working directory45./[project-name]-architecture.html46```4748## Design System4950### Aesthetic51- **Dark background**: deep navy or black (#0a0a1a, #111)52- **Grid pattern**: subtle dot or line grid in background53- **Neon accents**: luminous colors for different component types54- **Monospace labels**: for technical authenticity55- **Rounded corners**: on boxes (rx=6)56- **Glow effects**: subtle box-shadow on key components5758### Color Palette5960```css61:root {62 --bg: #0a0a1a;63 --grid: #1a1a2e;6465 /* Component types */66 --c-frontend: #00D9FF; /* cyan */67 --c-backend: #50C878; /* green */68 --c-database: #F5A623; /* orange */69 --c-external: #C4A7E7; /* purple */70 --c-queue: #FF6B6B; /* red */71 --c-cache: #FFD700; /* gold */7273 --text: #E0E0E0;74 --text-dim: #888;75 --border: #333;76}77```7879### SVG Template8081```html82<!DOCTYPE html>83<html>84<head>85<meta charset="utf-8">86<title>Architecture Diagram</title>87<style>88 body {89 margin: 0; padding: 40px;90 background: var(--bg);91 background-image: radial-gradient(circle, var(--grid) 1px, transparent 1px);92 background-size: 30px 30px;93 }94 svg { display: block; margin: 0 auto; }95 .component {96 stroke-width: 2; rx: 6; ry: 6;97 fill-opacity: 0.1;98 }99 .label {100 font-family: 'SF Mono', 'Fira Code', monospace;101 font-size: 13px; fill: var(--text);102 }103 .label-type {104 font-size: 10px; fill: var(--text-dim);105 text-transform: uppercase; letter-spacing: 1px;106 }107 .connection {108 stroke: var(--text-dim); stroke-width: 1.5;109 fill: none; stroke-dasharray: 4 2;110 marker-end: url(#arrow);111 }112</style>113</head>114<body>115<svg width="1000" height="700" viewBox="0 0 1000 700">116 <defs>117 <marker id="arrow" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">118 <path d="M0,0 L8,3 L0,6 Z" fill="var(--text-dim)"/>119 </marker>120 </defs>121122 <!-- Frontend Layer -->123 <rect class="component" x="50" y="50" width="200" height="80"124 stroke="var(--c-frontend)" fill="var(--c-frontend)"/>125 <text class="label" x="150" y="85" text-anchor="middle">Web App</text>126 <text class="label-type" x="150" y="105" text-anchor="middle">Frontend</text>127128 <!-- Backend Layer -->129 <rect class="component" x="400" y="50" width="200" height="80"130 stroke="var(--c-backend)" fill="var(--c-backend)"/>131 <text class="label" x="500" y="85" text-anchor="middle">API Server</text>132 <text class="label-type" x="500" y="105" text-anchor="middle">Backend</text>133134 <!-- Database Layer -->135 <rect class="component" x="750" y="50" width="200" height="80"136 stroke="var(--c-database)" fill="var(--c-database)"/>137 <text class="label" x="850" y="85" text-anchor="middle">PostgreSQL</text>138 <text class="label-type" x="850" y="105" text-anchor="middle">Database</text>139140 <!-- Connections -->141 <path class="connection" d="M 250 90 L 400 90"/>142 <path class="connection" d="M 600 90 L 750 90"/>143</svg>144</body>145</html>146```147148## Diagram Patterns149150### Layered Architecture151- Frontend (top) → Backend (middle) → Database (bottom)152- Horizontal layers with vertical connections153154### Microservice Topology155- Central API gateway + surrounding services156- Bidirectional connections for sync, one-way for async157158### Cloud Infrastructure159- VPC as a large container box160- Subnets as inner boxes161- Managed services as icons (S3, Lambda, RDS)162163### Data Flow164- Left-to-right flow165- Different line styles for sync (solid) vs async (dashed)166167## Pitfalls168169- **Too many components**: keep to 5-10 boxes max. More = unreadable.170 Split into multiple diagrams if needed.171- **Crossing lines**: route connections to minimize crossings. Use right-angle172 paths.173- **No legend**: if using color-coded component types, include a legend.174- **Font sizing**: labels must be readable. 13px minimum for component names.
HezaoHezao