SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsarchitecture-diagram-zh

architecture-diagram-zh

Design & creation

View repository

Updated 10-16 08: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 pasted code and asked for an architecture analysis
  • The user described 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 connections and data flows between components?
  • What tech stack and cloud services are used?
  • Are there boundaries such as security groups or 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 the HTML file.

Step 3: Output the Result

Output a complete, directly browser-openable .html file.

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 through 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 base colors such as background, text, grid, and borders are switched
  • Use CSS transition to achieve 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)
Arrow head rgba(38, 37, 30, 0.45)

Light Theme

Blends Claude parchment #f5f4ed + Airtable deep navy blue 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 queues 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 specifications

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 specifications (referencing Cursor's compact spacing + Claude's relaxed line height):

  • Heading:letter-spacing: -0.02em, line-height: 1.6
  • Subheading:letter-spacing: 0.04em
  • Font sizes: 12px component names, 9px sublabels, 8px annotation text, 7px extra-small 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 fully 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 connecting 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): placed 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
  • Expand 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 row

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 hard-coded 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, and 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

  • Use Chinese for all component labels, annotations, and card content
  • Keep technical proper nouns in English (such as PostgreSQL, Kubernetes, OAuth 2.0)
  • In mixed typography, there is no space between Chinese characters, and a space is added between Chinese and English

Text Width

  • The width of Chinese characters is about 2 times that 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 explains the system type and key features

Information Cards

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

Use the 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 define 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 registry 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 pipeline architecture

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