Architecture Diagram SOP
When to Use
- User wants to visualize system architecture, microservices, cloud infrastructure
- User asks for a data flow diagram, sequence diagram, or ERD
- User says "draw", "diagram", "visualize", "architecture chart", "system map"
Color Palette (Dark Theme)
| Node Type |
Fill |
Stroke |
Label Color |
| Service / API |
#1e3a5f |
#4a9eff |
#a8d4ff |
| Database |
#1a3d2b |
#4caf50 |
#a8e6b0 |
| Queue / Broker |
#3d2a00 |
#ff9800 |
#ffd180 |
| External / SaaS |
#2d1f3d |
#9c27b0 |
#ce93d8 |
| User / Client |
#2a2a2a |
#9e9e9e |
#e0e0e0 |
| Load Balancer |
#1f2d3d |
#00bcd4 |
#80deea |
Background: #0d0d1a
Arrow color: #555577
Font family: 'Inter', 'Segoe UI', sans-serif
SVG Structure Template
Produce a self-contained HTML file (or inline SVG) with this skeleton:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body { margin: 0; background: #0d0d1a; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
svg { font-family: 'Inter', 'Segoe UI', sans-serif; }
</style>
</head>
<body>
<svg width="900" height="600" viewBox="0 0 900 600" xmlns="http://www.w3.org/2000/svg">
<rect width="900" height="600" fill="#0d0d1a"/>
<!-- TITLE -->
<text x="450" y="36" text-anchor="middle" fill="#e0e0e0" font-size="18" font-weight="600">System Architecture</text>
<!-- NODES — use <g> groups for each node -->
<!-- SERVICE NODE TEMPLATE -->
<g transform="translate(100, 100)">
<rect width="140" height="54" rx="8" fill="#1e3a5f" stroke="#4a9eff" stroke-width="1.5"/>
<text x="70" y="22" text-anchor="middle" fill="#a8d4ff" font-size="11" font-weight="600">API Gateway</text>
<text x="70" y="40" text-anchor="middle" fill="#6699cc" font-size="10">Node.js · Port 8080</text>
</g>
<!-- ARROW TEMPLATE (straight) -->
<line x1="240" y1="127" x2="320" y2="127" stroke="#555577" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- ARROW TEMPLATE (curved) -->
<path d="M 240 200 C 280 200 280 260 320 260" fill="none" stroke="#555577" stroke-width="1.5" marker-end="url(#arrow)"/>
<!-- ARROW MARKER -->
<defs>
<marker id="arrow" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
<path d="M0,0 L0,6 L8,3 z" fill="#555577"/>
</marker>
</defs>
<!-- LEGEND (bottom-left) -->
<g transform="translate(20, 520)">
<rect width="10" height="10" rx="2" fill="#1e3a5f" stroke="#4a9eff" stroke-width="1"/>
<text x="16" y="9" fill="#888" font-size="9">Service</text>
<rect x="70" width="10" height="10" rx="2" fill="#1a3d2b" stroke="#4caf50" stroke-width="1"/>
<text x="86" y="9" fill="#888" font-size="9">Database</text>
<rect x="150" width="10" height="10" rx="2" fill="#3d2a00" stroke="#ff9800" stroke-width="1"/>
<text x="166" y="9" fill="#888" font-size="9">Queue</text>
<rect x="210" width="10" height="10" rx="2" fill="#2d1f3d" stroke="#9c27b0" stroke-width="1"/>
<text x="226" y="9" fill="#888" font-size="9">External</text>
</g>
</svg>
</body>
</html>
Worked Example — 3-Tier Web App
<!-- Client -->
<g transform="translate(60, 240)">
<rect width="120" height="54" rx="8" fill="#2a2a2a" stroke="#9e9e9e" stroke-width="1.5"/>
<text x="60" y="22" text-anchor="middle" fill="#e0e0e0" font-size="11" font-weight="600">Browser</text>
<text x="60" y="40" text-anchor="middle" fill="#888" font-size="10">React SPA</text>
</g>
<!-- Load Balancer -->
<g transform="translate(240, 240)">
<rect width="120" height="54" rx="8" fill="#1f2d3d" stroke="#00bcd4" stroke-width="1.5"/>
<text x="60" y="22" text-anchor="middle" fill="#80deea" font-size="11" font-weight="600">Load Balancer</text>
<text x="60" y="40" text-anchor="middle" fill="#4db6c4" font-size="10">nginx · SSL termination</text>
</g>
<!-- API Service -->
<g transform="translate(430, 180)">
<rect width="120" height="54" rx="8" fill="#1e3a5f" stroke="#4a9eff" stroke-width="1.5"/>
<text x="60" y="22" text-anchor="middle" fill="#a8d4ff" font-size="11" font-weight="600">API Service</text>
<text x="60" y="40" text-anchor="middle" fill="#6699cc" font-size="10">FastAPI · x3 replicas</text>
</g>
<!-- Database -->
<g transform="translate(620, 180)">
<rect width="120" height="54" rx="8" fill="#1a3d2b" stroke="#4caf50" stroke-width="1.5"/>
<text x="60" y="22" text-anchor="middle" fill="#a8e6b0" font-size="11" font-weight="600">PostgreSQL</text>
<text x="60" y="40" text-anchor="middle" fill="#5cb85c" font-size="10">Primary · RDS</text>
</g>
<!-- Queue -->
<g transform="translate(430, 310)">
<rect width="120" height="54" rx="8" fill="#3d2a00" stroke="#ff9800" stroke-width="1.5"/>
<text x="60" y="22" text-anchor="middle" fill="#ffd180" font-size="11" font-weight="600">Redis Queue</text>
<text x="60" y="40" text-anchor="middle" fill="#cc7a00" font-size="10">BullMQ · jobs</text>
</g>
Best Practices
Layout
- Left-to-right data flow is most readable
- Group related services with a subtle
<rect> background (fill opacity 0.05)
- Maintain ~80px vertical gap and ~60px horizontal gap between nodes
- Add a subtitle under the main title: deployment env (prod/staging) and date
Labels
- Line 1: Component name — bold, larger font (11–13px)
- Line 2: Tech stack / port / replica count — lighter, smaller font (9–10px)
- Arrow labels: use
<text> midpoint with small font (8–9px), fill #666688
Arrows
- Use straight
<line> for simple left→right flows
- Use
<path> with cubic bezier for non-orthogonal connections
- Bidirectional: add
marker-start and marker-end
- Label arrows when the relationship isn't obvious (e.g., "async", "REST", "gRPC")
Grouping with Zones
<!-- VPC / Cluster boundary -->
<rect x="220" y="60" width="500" height="320" rx="12"
fill="#ffffff" fill-opacity="0.02"
stroke="#333355" stroke-width="1" stroke-dasharray="6,4"/>
<text x="230" y="82" fill="#444466" font-size="10">AWS VPC · us-east-1</text>
Agent Instructions
- Ask clarifying questions if the architecture is ambiguous: "What services connect to what?"
- Infer node types from names: "Postgres" → database, "Kafka" → queue, "Stripe" → external
- Always output a complete, copy-pasteable HTML file — not a fragment
- Default canvas: 900×600 for medium complexity; scale up to 1200×800 for large systems
- After rendering, briefly describe the data flow in 2–3 sentences
- Offer to add missing components (caching, CDN, monitoring) if the design seems incomplete
1---2name: architecture-diagram3description: Generate dark-themed SVG architecture diagrams as self-contained HTML.4---56# Architecture Diagram SOP789## When to Use1011- User wants to visualize system architecture, microservices, cloud infrastructure12- User asks for a data flow diagram, sequence diagram, or ERD13- User says "draw", "diagram", "visualize", "architecture chart", "system map"1415---1617## Color Palette (Dark Theme)1819| Node Type | Fill | Stroke | Label Color |20|----------------|-----------|-----------|-------------|21| Service / API | `#1e3a5f` | `#4a9eff` | `#a8d4ff` |22| Database | `#1a3d2b` | `#4caf50` | `#a8e6b0` |23| Queue / Broker | `#3d2a00` | `#ff9800` | `#ffd180` |24| External / SaaS| `#2d1f3d` | `#9c27b0` | `#ce93d8` |25| User / Client | `#2a2a2a` | `#9e9e9e` | `#e0e0e0` |26| Load Balancer | `#1f2d3d` | `#00bcd4` | `#80deea` |2728Background: `#0d0d1a` 29Arrow color: `#555577` 30Font family: `'Inter', 'Segoe UI', sans-serif`3132---3334## SVG Structure Template3536Produce a **self-contained HTML file** (or inline SVG) with this skeleton:3738```html39<!DOCTYPE html>40<html>41<head>42 <meta charset="UTF-8">43 <style>44 body { margin: 0; background: #0d0d1a; display: flex; align-items: center; justify-content: center; min-height: 100vh; }45 svg { font-family: 'Inter', 'Segoe UI', sans-serif; }46 </style>47</head>48<body>49<svg width="900" height="600" viewBox="0 0 900 600" xmlns="http://www.w3.org/2000/svg">50 <rect width="900" height="600" fill="#0d0d1a"/>5152 <!-- TITLE -->53 <text x="450" y="36" text-anchor="middle" fill="#e0e0e0" font-size="18" font-weight="600">System Architecture</text>5455 <!-- NODES — use <g> groups for each node -->56 <!-- SERVICE NODE TEMPLATE -->57 <g transform="translate(100, 100)">58 <rect width="140" height="54" rx="8" fill="#1e3a5f" stroke="#4a9eff" stroke-width="1.5"/>59 <text x="70" y="22" text-anchor="middle" fill="#a8d4ff" font-size="11" font-weight="600">API Gateway</text>60 <text x="70" y="40" text-anchor="middle" fill="#6699cc" font-size="10">Node.js · Port 8080</text>61 </g>6263 <!-- ARROW TEMPLATE (straight) -->64 <line x1="240" y1="127" x2="320" y2="127" stroke="#555577" stroke-width="1.5" marker-end="url(#arrow)"/>6566 <!-- ARROW TEMPLATE (curved) -->67 <path d="M 240 200 C 280 200 280 260 320 260" fill="none" stroke="#555577" stroke-width="1.5" marker-end="url(#arrow)"/>6869 <!-- ARROW MARKER -->70 <defs>71 <marker id="arrow" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">72 <path d="M0,0 L0,6 L8,3 z" fill="#555577"/>73 </marker>74 </defs>7576 <!-- LEGEND (bottom-left) -->77 <g transform="translate(20, 520)">78 <rect width="10" height="10" rx="2" fill="#1e3a5f" stroke="#4a9eff" stroke-width="1"/>79 <text x="16" y="9" fill="#888" font-size="9">Service</text>80 <rect x="70" width="10" height="10" rx="2" fill="#1a3d2b" stroke="#4caf50" stroke-width="1"/>81 <text x="86" y="9" fill="#888" font-size="9">Database</text>82 <rect x="150" width="10" height="10" rx="2" fill="#3d2a00" stroke="#ff9800" stroke-width="1"/>83 <text x="166" y="9" fill="#888" font-size="9">Queue</text>84 <rect x="210" width="10" height="10" rx="2" fill="#2d1f3d" stroke="#9c27b0" stroke-width="1"/>85 <text x="226" y="9" fill="#888" font-size="9">External</text>86 </g>87</svg>88</body>89</html>90```9192---9394## Worked Example — 3-Tier Web App9596```svg97<!-- Client -->98<g transform="translate(60, 240)">99 <rect width="120" height="54" rx="8" fill="#2a2a2a" stroke="#9e9e9e" stroke-width="1.5"/>100 <text x="60" y="22" text-anchor="middle" fill="#e0e0e0" font-size="11" font-weight="600">Browser</text>101 <text x="60" y="40" text-anchor="middle" fill="#888" font-size="10">React SPA</text>102</g>103104<!-- Load Balancer -->105<g transform="translate(240, 240)">106 <rect width="120" height="54" rx="8" fill="#1f2d3d" stroke="#00bcd4" stroke-width="1.5"/>107 <text x="60" y="22" text-anchor="middle" fill="#80deea" font-size="11" font-weight="600">Load Balancer</text>108 <text x="60" y="40" text-anchor="middle" fill="#4db6c4" font-size="10">nginx · SSL termination</text>109</g>110111<!-- API Service -->112<g transform="translate(430, 180)">113 <rect width="120" height="54" rx="8" fill="#1e3a5f" stroke="#4a9eff" stroke-width="1.5"/>114 <text x="60" y="22" text-anchor="middle" fill="#a8d4ff" font-size="11" font-weight="600">API Service</text>115 <text x="60" y="40" text-anchor="middle" fill="#6699cc" font-size="10">FastAPI · x3 replicas</text>116</g>117118<!-- Database -->119<g transform="translate(620, 180)">120 <rect width="120" height="54" rx="8" fill="#1a3d2b" stroke="#4caf50" stroke-width="1.5"/>121 <text x="60" y="22" text-anchor="middle" fill="#a8e6b0" font-size="11" font-weight="600">PostgreSQL</text>122 <text x="60" y="40" text-anchor="middle" fill="#5cb85c" font-size="10">Primary · RDS</text>123</g>124125<!-- Queue -->126<g transform="translate(430, 310)">127 <rect width="120" height="54" rx="8" fill="#3d2a00" stroke="#ff9800" stroke-width="1.5"/>128 <text x="60" y="22" text-anchor="middle" fill="#ffd180" font-size="11" font-weight="600">Redis Queue</text>129 <text x="60" y="40" text-anchor="middle" fill="#cc7a00" font-size="10">BullMQ · jobs</text>130</g>131```132133---134135## Best Practices136137### Layout138- Left-to-right data flow is most readable139- Group related services with a subtle `<rect>` background (fill opacity 0.05)140- Maintain ~80px vertical gap and ~60px horizontal gap between nodes141- Add a subtitle under the main title: deployment env (prod/staging) and date142143### Labels144- Line 1: Component name — bold, larger font (11–13px)145- Line 2: Tech stack / port / replica count — lighter, smaller font (9–10px)146- Arrow labels: use `<text>` midpoint with small font (8–9px), fill `#666688`147148### Arrows149- Use straight `<line>` for simple left→right flows150- Use `<path>` with cubic bezier for non-orthogonal connections151- Bidirectional: add `marker-start` and `marker-end`152- Label arrows when the relationship isn't obvious (e.g., "async", "REST", "gRPC")153154### Grouping with Zones155```svg156<!-- VPC / Cluster boundary -->157<rect x="220" y="60" width="500" height="320" rx="12"158 fill="#ffffff" fill-opacity="0.02"159 stroke="#333355" stroke-width="1" stroke-dasharray="6,4"/>160<text x="230" y="82" fill="#444466" font-size="10">AWS VPC · us-east-1</text>161```162163---164165## Agent Instructions1661671. Ask clarifying questions if the architecture is ambiguous: "What services connect to what?"1682. Infer node types from names: "Postgres" → database, "Kafka" → queue, "Stripe" → external1693. Always output a complete, copy-pasteable HTML file — not a fragment1704. Default canvas: 900×600 for medium complexity; scale up to 1200×800 for large systems1715. After rendering, briefly describe the data flow in 2–3 sentences1726. Offer to add missing components (caching, CDN, monitoring) if the design seems incomplete
furkangonel