SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsspace-architecture-diagram

space-architecture-diagram

General & other

View repository

Updated 10-16 07:23

About this skill

Architecture Diagram Generation Skill

Create professional technical architecture diagrams, output as standalone HTML files containing inline SVG graphics and CSS styles.

Trigger Conditions

Proactively use this skill when the user mentions any of the following scenarios:

  • "Draw an architecture diagram" / "Generate an architecture diagram" / "Draw a diagram"
  • "System architecture" / "Deployment architecture" / "Technical architecture"
  • "Draw a flowchart" / "Component relationship diagram" / "Topology diagram"
  • "infrastructure diagram" / "architecture diagram"
  • The user pastes code and asks for an architecture analysis
  • The user describes system components and their relationships

Workflow

Step 1: Gather Information

If the user has not provided a complete architecture description, proactively ask for the following information:

  • What are the main components/services in the system?
  • What are the connection relationships and data flows between components?
  • What technology stacks and cloud services are used?
  • Are there boundaries such as security groups and network partitions?

If the user provides a codebase or project files, analyze them yourself to extract architecture information.

Step 2: Generate the Architecture Diagram

Based on the collected information, use this skill's design specifications and templates to generate an HTML file.

Step 3: Output the Result

Output a complete .html file that can be opened directly in a browser.

Design System

Theme System

The architecture diagram supports Dark and Light themes, switchable with one click via the toggle button on the right side of the header. The user's choice is saved to localStorage and automatically restored the next time it is opened.

Implementation method: CSS custom properties + data-theme attribute switching. SVG elements adapt to the theme via CSS classes (text-primary、text-secondary、mask-bg、grid-line、arrowhead-color).

Key principles:

  • Component stroke colors (cyan/green/purple/amber/rose/orange) remain unchanged in both themes to ensure visual consistency
  • Only switch base colors such as background, text, grid, and borders
  • Use CSS transition to implement smooth switching animations

Dark Theme (Default)

Blends Cursor's warm dark background + Claude's warm white text. Warm, not cold—say goodbye to cold blue slate.

Element Color
Page background #141413 (warm near-black)
Card background rgba(20, 20, 19, 0.5)
Overlay background #1a1a18 (warm dark)
Border rgba(38, 37, 30, 0.2) (oklab warm border)
Primary text #faf9f5 (Ivory warm white)
Secondary text #b0aea5 (warm silver)
Grid lines rgba(38, 37, 30, 0.12)
Arrowhead rgba(38, 37, 30, 0.45)

Light Theme

Blends Claude parchment #f5f4ed + Airtable deep navy text.

Element Color
Page background #f5f4ed (parchment)
Card background rgba(250, 249, 245, 0.85)
Overlay background #faf9f5 (Ivory)
Border #f0eee6 (warm cream)
Primary text #141413 (warm near-black)
Secondary text #5e5d59 (olive gray)
Grid lines #f0eee6 (warm cream)
Arrowhead #87867f (lime)

Component color scheme

Use semantic colors by component type:

Component type Fill color (rgba) Stroke color Typical use
Frontend rgba(20, 50, 62, 0.4) #22d3ee (cyan) Client applications, UI, browser
Backend rgba(18, 72, 55, 0.4) #34d399 (emerald green) Servers, APIs, microservices
Database rgba(72, 30, 100, 0.4) #a78bfa (purple) Databases, storage, cache
Cloud services rgba(110, 50, 18, 0.35) #fbbf24 (amber) AWS/Alibaba Cloud/Tencent Cloud services
Security components rgba(130, 25, 50, 0.4) #fb7185 (rose red) Authentication, security groups, encryption
Message queue rgba(251, 146, 60, 0.3) #fb923c (orange) Kafka, RabbitMQ, event bus
External/general rgba(38, 37, 30, 0.35) #94a3b8 (slate gray) External systems, third-party services
AI/intelligent rgba(80, 30, 120, 0.4) #c084fc (bright purple) AI services, LLM, models

Font specification

All text uses the JetBrains Mono monospace font (technical style):

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">

Typography specification (referencing Cursor's compact spacing + Claude's loose line height):

  • Title:letter-spacing: -0.02em, line-height: 1.6
  • Subtitle:letter-spacing: 0.04em
  • Font sizes: 12px component names, 9px sublabels, 8px annotation text, 7px tiny labels

Visual elements

Background: dark mode #141413 (warm near-black) / light mode #f5f4ed (parchment), with a subtle grid texture:

<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
  <path d="M 40 0 L 0 0 0 40" fill="none" class="grid-line" stroke-width="0.5"/>
</pattern>

Component boxes: rounded rectangles (rx="8"), 1.5px stroke, semi-transparent fill.

Shadow system (Claude ring shadow + Cursor ambient):

  • Dark mode:rgba(0,0,0,0.14) 0px 4px 16px, rgba(38,37,30,0.1) 0px 0px 0px 1px
  • Light mode:rgba(0,0,0,0.05) 0px 4px 24px, rgba(38,37,30,0.08) 0px 0px 0px 1px

Corner radius system:

  • Component boxes:8px(Cursor standard)
  • Cards/chart containers:12px(Airtable buttons / Claude comfortable corner radius)
  • Label badges:6px(Webflow compact)

Security groups: dashed stroke (stroke-dasharray="4,4"), transparent fill, rose red.

Region boundaries: large dashed stroke (stroke-dasharray="8,4"), amber,rx="12"。

Arrows: Use SVG marker to define the arrowhead:

<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" class="arrowhead-color" />
</marker>

Arrow hierarchy (Z-order): Connection arrows should be drawn earlier in the SVG (after the background grid) so that they render beneath the component boxes. SVG elements are drawn in document order.

Transparent fill overlay technique: Component boxes use semi-transparent fills, and arrows behind them will show through. To completely cover the arrows, draw an opaque background rectangle before the semi-transparent styled rectangle. Use class="mask-bg" to adapt to the theme:

<!-- 不透明背景遮盖箭头（自动适配主题） -->
<rect x="X" y="Y" width="W" height="H" rx="6" class="mask-bg"/>
<!-- 半透明样式组件叠加在上面 -->
<rect x="X" y="Y" width="W" height="H" rx="6" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1.5"/>

Authentication/Security flows: Rose-red dashed line (#fb7185）。

Message queues/Event buses: Small connection elements between components, orange (#fb923c stroke,rgba(251, 146, 60, 0.3) fill):

<rect x="X" y="Y" width="120" height="20" rx="4" fill="rgba(251, 146, 60, 0.3)" stroke="#fb923c" stroke-width="1"/>
<text x="CENTER_X" y="Y+14" fill="#fb923c" font-size="7" text-anchor="middle">Kafka / RabbitMQ</text>

Spacing rules

Key: When vertically stacking components, ensure correct spacing to avoid overlap:

  • Standard component height: services 60px, larger components 80-120px
  • Minimum vertical spacing between components: 40px
  • Inline connectors (message queues): place in the gaps between components, do not overlap

Example layout:

组件 A: y=70,  height=60  → 结束于 y=130
间隙:    y=130 到 y=170   → 40px 间隙，消息队列放 y=140 (20px 高)
组件 B: y=170, height=60  → 结束于 y=230

Legend placement

Key: The legend must be placed outside all bounding boxes (region boundaries, cluster boundaries, security groups).

  • Calculate where all boundaries end (y coordinate + height)
  • Place the legend at least 20px below the lowest boundary
  • Extend the SVG viewBox height if needed

Page layout structure

  1. Header - Project title (with pulsing indicator light animation), subtitle
  2. Main SVG architecture diagram - Contained in a rounded-border card
  3. Information summary cards - A grid of 3 cards below the diagram, showing key architecture details
  4. Footer - Minimal metadata line

Component box template

<!-- 带主题适配的完整组件方框 -->
<rect x="X" y="Y" width="W" height="H" rx="6" class="mask-bg"/>
<rect x="X" y="Y" width="W" height="H" rx="6" fill="FILL_COLOR" stroke="STROKE_COLOR" stroke-width="1.5"/>
<text x="CENTER_X" y="Y+20" class="text-primary" font-size="11" font-weight="600" text-anchor="middle">组件名称</text>
<text x="CENTER_X" y="Y+36" class="text-secondary" font-size="9" text-anchor="middle">技术说明</text>

Key: Use CSS classes instead of hardcoded color values to support theme switching:

  • class="mask-bg" - Opaque mask background (dark: #1a1a18, light: #faf9f5）
  • class="text-primary" - Primary text (dark: #faf9f5, light: #141413）
  • class="text-secondary" - Secondary text (dark: #b0aea5, light: #5e5d59）
  • class="grid-line" - Grid line stroke
  • class="arrowhead-color" - Arrowhead fill
  • Component stroke colors and colored labels (such as fill="#22d3ee"）do not use classes, remain unchanged in both themes

Information summary card template

<div class="card">
  <div class="card-header">
    <div class="card-dot COLOR"></div>
    <h3>卡片标题</h3>
  </div>
  <ul>
    <li>- 要点一</li>
    <li>- 要点二</li>
  </ul>
</div>

Chinese adaptation rules

Text typography

  • All component labels, annotations, and card content use Chinese
  • Technical proper nouns remain in English (such as PostgreSQL, Kubernetes, OAuth 2.0)
  • In mixed typography, there are no spaces between Chinese characters, and spaces are added between Chinese and English

Text width

  • Chinese characters are about 2 times the width of English, so component box widths need to be increased accordingly
  • Recommended width for standard Chinese label components: 140-180px (110-140px for English)
  • Use text-anchor="middle" center alignment

Diagram title

  • Header title format: "[Project Name] System Architecture" or "[Project Name] Deployment Architecture"
  • The subtitle briefly describes the system type and key features

Information cards

  • The three cards respectively show:
    1. Technology stack overview (core technology choices)
    2. Key design decisions (architecture characteristics)
    3. Security and operations highlights (security, monitoring, etc.)

Use template

Copy and customize the assets/template.html template. Key customization points:

  1. Update the <title> and header text
  2. Adjust the SVG viewBox dimensions as needed (default:1000 x 680）
  3. Add/remove/reposition component boxes
  4. Draw connection arrows between components
  5. Update the three summary cards
  6. Update the footer metadata

Output requirements

Always generate a standalone .html file containing:

  • Inline CSS (no external stylesheets except Google Fonts)
  • CSS custom properties defining dual themes (dark/light)
  • Inline SVG (no external images), SVG text uses CSS classes to adapt to themes
  • A small amount of JavaScript for theme switching and localStorage persistence
  • Include a sun/moon icon toggle button on the right side of the header
  • The file can be opened directly in any modern browser

Common architecture type references

Web application architecture

Frontend framework + backend API + database + cache + authentication

Microservices architecture

API gateway + multiple microservices + message queue + service registration and discovery + distributed database

Cloud-native architecture

CDN + load balancing + container orchestration + cloud database + object storage + monitoring

Serverless architecture

API gateway + function computing + cloud database + object storage + message queue

Data flow architecture

Data source + data collection + stream processing + data warehouse + visualization