Back to Details

architecture-diagram

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Architecture Diagram Skill

架构图生成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.
生成专业的深色主题技术架构图，输出为包含内嵌SVG图形的独立HTML文件。无需外部工具、API密钥或渲染库——只需生成HTML文件并在浏览器中打开即可。

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).
最适合用于：
  • 软件系统架构（前端/后端/数据库层）
  • 云基础设施（VPC、区域、子网、托管服务）
  • 微服务/服务网格拓扑
  • 数据库+API映射、部署图
  • 任何符合深色网格背景风格的技术基础设施主题内容
以下场景建议优先选择其他工具：
  • 物理、化学、数学、生物或其他科学主题
  • 物理实体（车辆、硬件、解剖结构、剖面图）
  • 平面图、叙事流程、教育/教科书风格的可视化内容
  • 手绘白板草图（可考虑使用
    excalidraw
    ）
  • 动画讲解（可考虑使用动画类Skill）
如果有针对该主题的更专业Skill，请优先使用。若没有合适的，本Skill也可作为通用SVG图表的备选方案——输出内容将带有下文描述的深色科技风格。
基于Cocoon AI的architecture-diagram-generator（MIT许可证）开发。

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 (e.g. 
    ~/architecture-diagram.html
    )
  4. User opens in any browser — works offline, no dependencies
  1. 用户描述其系统架构（组件、连接关系、技术栈）
  2. 按照以下设计系统生成HTML文件
  3. 使用
    write_file
    保存为
    .html
    文件（例如
    ~/architecture-diagram.html
    ）
  4. 用户在任意浏览器中打开——支持离线使用，无依赖项

Output Location

输出位置

Save diagrams to a user-specified path, or default to the current working directory:
./[project-name]-architecture.html
将图表保存到用户指定路径，或默认保存到当前工作目录：
./[project-name]-architecture.html

Preview

预览建议

After saving, suggest the user open it:
bash
undefined
保存完成后，建议用户执行以下命令打开文件：
bash
undefined

macOS

macOS

open ./my-architecture.html
open ./my-architecture.html

Linux

Linux

xdg-open ./my-architecture.html
undefined
xdg-open ./my-architecture.html
undefined

Design System & Visual Language

设计系统与视觉语言

Color Palette (Semantic Mapping)

调色板（语义映射）

Use specific 
rgba
fills and hex strokes to categorize components:
Component TypeFill (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)
使用特定的
rgba
填充色和十六进制描边色对组件进行分类：
组件类型填充色（rgba）描边色（十六进制）
前端
rgba(8, 51, 68, 0.4)
#22d3ee
（cyan-400）
后端
rgba(6, 78, 59, 0.4)
#34d399
（emerald-400）
数据库
rgba(76, 29, 149, 0.4)
#a78bfa
（violet-400）
AWS/云服务
rgba(120, 53, 15, 0.3)
#fbbf24
（amber-400）
安全组件
rgba(136, 19, 55, 0.4)
#fb7185
（rose-400）
消息总线
rgba(251, 146, 60, 0.3)
#fb923c
（orange-400）
外部组件
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
svg
<!-- Background Grid Pattern -->
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</pattern>
  • 字体： JetBrains Mono（等宽字体），从Google Fonts加载
  • 字号： 12px（名称）、9px（子标签）、8px（注释）、7px（小标签）
  • 背景： Slate-950（
    #020617
    ），带有细微的40px网格图案
svg
<!-- Background Grid Pattern -->
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</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:
  1. Draw an opaque background rect (
    #0f172a
    )
  2. Draw the semi-transparent styled rect on top
组件为圆角矩形（
rx="6"
），描边宽度1.5px。为防止箭头穿透半透明填充色，使用双层矩形遮罩技术：
  1. 绘制不透明背景矩形（
    #0f172a
    ）
  2. 在上方绘制半透明样式矩形

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"
  • 层级顺序： 在SVG中尽早绘制箭头（在网格之后），使其渲染在组件框后方
  • 箭头头部： 通过SVG标记定义
  • 安全流： 使用玫瑰色（
    #fb7185
    ）虚线
  • 边界：
    • 安全组： 虚线（
      4,4
      ），玫瑰色
    • 区域： 大虚线（
      8,4
      ），琥珀色，
      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.
  • 标准高度： 60px（服务组件）；80-120px（大型组件）
  • 垂直间距： 组件间最小间距40px
  • 消息总线： 必须放置在服务之间的空隙中，不得与服务重叠
  • 图例位置： 至关重要。必须放置在所有边界框之外。计算所有边界的最低Y坐标，将图例放置在其下方至少20px处。

Document Structure

文档结构

The generated HTML file follows a four-part layout:
  1. Header: Title with a pulsing dot indicator and subtitle
  2. Main SVG: The diagram contained within a rounded border card
  3. Summary Cards: A grid of three cards below the diagram for high-level details
  4. Footer: Minimal metadata
生成的HTML文件遵循四部分布局：
  1. 头部： 带有脉冲点指示器的标题和副标题
  2. 主SVG： 包含在圆角边框卡片内的图表
  3. 摘要卡片： 图表下方的三张卡片网格，用于展示高层级细节
  4. 页脚： 极简元数据

Info Card Pattern

信息卡片模板

html
<div class="card">
  <div class="card-header">
    <div class="card-dot cyan"></div>
    <h3>Title</h3>
  </div>
  <ul>
    <li>• Item one</li>
    <li>• Item two</li>
  </ul>
</div>
html
<div class="card">
  <div class="card-header">
    <div class="card-dot cyan"></div>
    <h3>Title</h3>
  </div>
  <ul>
    <li>• Item one</li>
    <li>• Item two</li>
  </ul>
</div>

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
  • 单文件： 一个自包含的
    .html
    文件
  • 无外部依赖： 所有CSS和SVG必须内嵌（Google Fonts除外）
  • 无JavaScript： 使用纯CSS实现任何动画效果（如脉冲点）
  • 兼容性： 必须在任何现代网页浏览器中正确渲染

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.
加载完整HTML模板以获取精确的结构、CSS和SVG组件示例：
skill_view(name="architecture-diagram", file_path="templates/template.html")
该模板包含所有组件类型（前端、后端、数据库、云服务、安全组件）、箭头样式（标准、虚线、曲线）、安全组、区域边界和图例的可用示例——生成图表时请将其作为结构参考。