架构图绘制
暗色主题 SVG 架构图/云架构/基础设施图表
架构说明 Diagram Skill
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, or other scientific subjects
Physical objects (vehicles, hardware, anatomy, cross-sections)
Floor plans, narrative journeys, educational / textbook-style visuals
Hand-drawn whiteboard sketches (consider excalidraw)
Animated explainers (consider an animation skill)
If a more specialized skill is available for the subject, prefer that. If none fits, this skill can also serve as a general SVG diagram fallback — the output will just carry the dark tech aesthetic described below.
Based on Cocoon AI's architecture-diagram-generator (MIT).
工作流程
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 (e.g. ~/architecture-diagram.html)
User opens in any browser — works offline, no dependencies
Output Location
Save diagrams to a user-specified path, or default to the current working directory:
./[project-name]-architecture.html
Preview
After saving, suggest the user open it:
# macOS
open ./my-architecture.html
# Linux
xdg-open ./my-architecture.html
Design System & Visual Language
Color Palette (Semantic Mapping)
Use specific rgba fills and hex strokes to categorize components:
| Component Type | Fill (rgba) | Stroke (Hex) |
| **Frontend** | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan-400) |
| **Backend** | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald-400) |
| **Database** | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet-400) |
| **AWS/Cloud** | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber-400) |
| **Security** | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose-400) |
| **Message Bus** | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange-400) |
| **External** | `rgba(30, 41, 59, 0.5)` | `#94a3b8` (slate-400) |
Typography & Background
Font: JetBrains Mono (Monospace), loaded from Google Fonts
Sizes: 12px (Names), 9px (Sublabels), 8px (Annotations), 7px (Tiny labels)
Background: Slate-950 (#020617) with a subtle 40px grid pattern
Technical Implementation Details
Component Rendering
Components are rounded rectangles (rx="6") with 1.5px strokes. To prevent arrows from showing through semi-transparent fills, use a double-rect masking technique:
Draw an opaque background rect (#0f172a)
Draw the semi-transparent styled rect on top
Connection Rules
Z-Order: Draw arrows *early* in the SVG (after the grid) so they render behind component boxes
Arrowheads: Defined via SVG markers
Security Flows: Use dashed lines in rose color (#fb7185)
Boundaries:
*Security Groups:* Dashed (4,4), rose color
*Regions:* Large dashed (8,4), amber color, rx="12"
Spacing & Layout Logic
Standard Height: 60px (Services); 80-120px (Large components)
Vertical Gap: Minimum 40px between components
Message Buses: Must be placed *in the gap* between services, not overlapping them
Legend Placement: CRITICAL. Must be placed outside all boundary boxes. Calculate the lowest Y-coordinate of all boundaries and place the legend at least 20px below it.
Document Structure
The generated HTML file follows a four-part layout:
Header: Title with a pulsing dot indicator and subtitle
Main SVG: The diagram contained within a rounded border card
Summary Cards: A grid of three cards below the diagram for high-level details
Footer: Minimal metadata
Info Card Pattern
Output Requirements
Single File: One self-contained .html file
No External Dependencies: All CSS and SVG must be inline (except Google Fonts)
No JavaScript: Use pure CSS for any animations (like pulsing dots)
Compatibility: Must render correctly in any modern web browser
Template Reference
Load the full HTML template for the exact structure, CSS, and SVG component examples:
skill_view(name="architecture-diagram", file_path="templates/template.html")
The template contains working examples of every component type (frontend, backend, database, cloud, security), arrow styles (standard, dashed, curved), security groups, region boundaries, and the legend — use it as your structural reference when generating diagrams.
