architecture-diagram

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

1. User describes their system architecture (components, connections, technologies)
2. Generate the HTML file following the design system below
3. Save with write_file to a .html file
4. 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