SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsdiagram-generator

diagram-generator

General & other

View repository

Updated 10-16 06:48

About this skill

Diagram Generator

Generate professional dark-themed SVG architecture diagrams, flowcharts, sequence diagrams, etc. from natural language descriptions.

Overview

Automatically generate renderable SVG chart files based on user descriptions. Use the complete design system (semantic colors, typography specifications, spacing rules, component patterns), output a single self-contained SVG file, and support Chinese.

When to Use

  • User wants to create architecture diagrams, flowcharts, or sequence diagrams
  • User mentions diagram, flowchart, architecture, ER diagram, class diagram, org chart
  • User wants to visualize system design, data flow, or API call chains
  • User says "draw a diagram" / "draw an architecture diagram" / "draw diagram"
  • User inputs /diagram-generator
  • User wants to draw a mind map or brainstorming diagram
  • User wants to visualize a state machine or lifecycle
  • User wants to create a project timeline or milestone chart
  • User wants to diagram a data pipeline or ETL flow
  • User wants to document an event-driven architecture

When NOT to Use:

  • User only wants to view code structure (use AST analysis)
  • User wants UI prototypes/wireframes (use Figma, Sketch, or Adobe XD)
  • User wants to edit existing diagrams (provide the original file)
  • User wants to create interactive diagrams (consider D3.js or Mermaid)
  • User wants to generate diagrams from data (use charting libraries like Chart.js)

Core Pattern

Step 1: Determine the chart type

User description keywords Chart type Reference files
Architecture, components, deployment, system Architecture references/architecture.md
Process, steps, judgment, decision Flowchart references/flowchart.md
Call, request, response, interaction Sequence references/sequence.md
Class, inheritance, implementation, ER, relationship Structural references/structural.md
Thinking, brainstorming, topic Mind Map —
Timeline, history, scheduling Timeline —
State, lifecycle, transition State Machine —

Step 2: Collect information

# 如果是项目架构图，先扫描项目结构
ls -la
find . -name "*.ts" -o -name "*.go" -o -name "*.py" | head -20
cat package.json 2>/dev/null | python3 -c "import sys,json; d=json.load(sys.stdin); print(list(d.get('dependencies',{}).keys())[:10])" 2>/dev/null

Extract:

  • Project type and tech stack
  • Module/service division
  • Data flow
  • External dependencies

Step 3: Read reference files

Before starting to draw, read the reference file for the corresponding chart type:

# 确定 skill 目录路径
SKILL_DIR="<skill-install-path>/diagram-generator"

# 读取对应类型的参考文件
cat $SKILL_DIR/references/architecture.md   # 架构图
cat $SKILL_DIR/references/flowchart.md      # 流程图
cat $SKILL_DIR/references/sequence.md       # 时序图
cat $SKILL_DIR/references/structural.md     # 结构图

Step 4: Plan the layout

Before drawing, first list all components and calculate positions:

  1. List all components — name, type, category
  2. Determine groupings — which components belong to the same level/area
  3. Calculate positions — assign coordinates according to the reference file's layout algorithm
  4. Determine flow direction — LTR or TTB

Step 5: Generate SVG

⚠️ Critical order: write all content first, calculate viewBox last.

Execution steps:

  1. First write the <svg> tag, leave viewBox empty for now:<svg xmlns="..." viewBox="0 0 0 0">
  2. Write all content in layered order (background→boundaries→arrows→masks→components→text→legend→title)
  3. After everything is written, scan the coordinates of all elements and calculate the actual viewBox
  4. Go back and modify the <svg> tag's viewBox value

SVG layering order (from bottom to top):

  1. Background fill + grid
  2. Area/group boundaries (dashed) — boundaries are also elements and have their own x/y/width/height
  3. Connecting arrows and lines
  4. Opaque mask rectangles (at the same position as component boxes)
  5. Component boxes (semi-transparent fill + stroke)
  6. Text labels
  7. Legend — below all content
  8. Title block

Design system:

Category Fill (rgba) Stroke Purpose
Primary rgba(8, 51, 68, 0.4) #22d3ee (cyan) Frontend, user interface, input
Secondary rgba(6, 78, 59, 0.4) #34d399 (emerald) Backend, service, processing
Tertiary rgba(76, 29, 149, 0.4) #a78bfa (violet) Database, storage, persistence
Accent rgba(120, 53, 15, 0.3) #fbbf24 (amber) Cloud, infrastructure, region
Alert rgba(136, 19, 55, 0.4) #fb7185 (rose) Security, error, warning
Connector rgba(251, 146, 60, 0.3) #fb923c (orange) Bus, queue, middleware
Neutral rgba(30, 41, 59, 0.5) #94a3b8 (slate) External, generic, unknown
Highlight rgba(59, 130, 246, 0.3) #60a5fa (blue) Active state, focus

Typography specifications:

  • Title: 16px, weight 700
  • Component name: 11-12px, weight 600
  • Description/sub-label: 9px, weight 400, color #94a3b8
  • Annotation: 8px, weight 400
  • Arrow label: 7-8px

Chinese support: When the label contains Chinese, use font-family: 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', sans-serif' and increase the component box width.

Spacing rules:

  • Component box height: 50-70px (standard), 80-120px (large/complex)
  • Minimum spacing between components: 40px vertical, 30px horizontal
  • Arrow label distance from component edge: 10px
  • Area boundary inner padding: 20px (all components within the boundary must be fully contained inside)
  • Components within an area centered: Component groups within the same area must be horizontally centered. Calculation:start_x = region_x + (region_w - total_content_w) / 2
  • Area label position: Must be placed above the top of the boundary (y=boundary y-4) to avoid being covered by the opaque mask of component boxes
  • Legend position: at least 20px below the lowest element
  • Title block: 20px from the top-left corner
  • viewBox: all content + 30px padding on all sides

Overflow prevention (must be followed):

  1. First calculate all component positions, then draw the area boundaries — list each component's y+height, area boundary height = lowest component y+height + 20px inner padding
  2. viewBox determined last — after writing all SVG elements, scan the coordinates of all elements (including area boundaries), viewBox = all content + 30px padding on all sides. After calculating, go back and modify the <svg> tag
  3. Area boundaries are also elements — they have their own x/width/y/height and must be included in the viewBox calculation
  4. Checklist — after drawing, verify item by item:
    • Each area boundary fully contains all its child components
    • No element (including boundary boxes) exceeds the viewBox
    • Area labels are above the component box mask layer (label y < area boundary y)

Layout calculation method:

1. 列出所有组件的坐标（x, y, width, height）
2. 画区域边界（边界本身也是元素，有自己的坐标）
3. 画图例和标题
4. 扫描全部元素，找到最大 x+width 和最大 y+height
5. viewBox = "0 0 (max_x+60) (max_y+60)"（四周各 30px padding）

Basic SVG template:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 WIDTH HEIGHT">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap');
    text { font-family: 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', monospace; }
  </style>
  <defs>
    <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>
    <marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="#64748b"/>
    </marker>
  </defs>
  <!-- Layer 1: Background -->
  <rect width="100%" height="100%" fill="#0f172a"/>
  <rect width="100%" height="100%" fill="url(#grid)"/>
  <!-- Layer 2-7: Diagram content -->
  ...
  <!-- Layer 8: Title -->
  <text x="30" y="35" fill="white" font-size="16" font-weight="700">Diagram Title</text>
</svg>

Standard component box:

<!-- Mask layer -->
<rect x="X" y="Y" width="160" height="60" rx="6" fill="#0f172a"/>
<!-- Visual layer -->
<rect x="X" y="Y" width="160" height="60" rx="6" fill="FILL_COLOR" stroke="STROKE_COLOR" stroke-width="1.5"/>
<!-- Name -->
<text x="CX" y="Y+24" fill="white" font-size="11" font-weight="600" text-anchor="middle">Component Name</text>
<!-- Description -->
<text x="CX" y="Y+40" fill="#94a3b8" font-size="9" text-anchor="middle">description</text>

Database cylinder:

<g transform="translate(X, Y)">
  <rect x="0" y="10" width="120" height="50" rx="2" fill="#0f172a"/>
  <ellipse cx="60" cy="10" rx="60" ry="12" fill="#0f172a"/>
  <ellipse cx="60" cy="60" rx="60" ry="12" fill="#0f172a"/>
  <rect x="0" y="10" width="120" height="50" fill="rgba(76,29,149,0.4)"/>
  <ellipse cx="60" cy="10" rx="60" ry="12" fill="rgba(76,29,149,0.4)" stroke="#a78bfa" stroke-width="1.5"/>
  <ellipse cx="60" cy="60" rx="60" ry="12" fill="rgba(76,29,149,0.4)" stroke="#a78bfa" stroke-width="1.5"/>
  <line x1="0" y1="10" x2="0" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
  <line x1="120" y1="10" x2="120" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
  <text x="60" y="40" fill="white" font-size="11" font-weight="600" text-anchor="middle">PostgreSQL</text>
</g>

Area boundary:

<rect x="X" y="Y" width="W" height="H" rx="12" fill="none" stroke="#fbbf24" stroke-width="1" stroke-dasharray="8,4"/>
<text x="X+12" y="Y+16" fill="#fbbf24" font-size="9" font-weight="600">Region Name</text>

XML escaping rules (important):

SVG is in XML format, the following characters must be escaped:

Character Escape Usage scenario
& &amp; "A & B" in label text
< &lt; Comparison symbol
> &gt; Comparison symbol
" &quot; Double quotes in attribute values

<style> The tag must be wrapped in CDATA:

<style><![CDATA[
  @import url('https://fonts.googleapis.com/css2?family=...');
  text { font-family: 'JetBrains Mono', monospace; }
]]></style>

Step 6: QA quality check

After generation is complete, read references/qa-checklist.md and check item by item:

# 读取 QA 检查清单
cat $SKILL_DIR/references/qa-checklist.md

Checks that must pass:

  • Visual consistency (unified colors, sizes, spacing)
  • Layout rationality (no overlap, clear flow)
  • SVG specification (viewBox, escaping, layer order)
  • Boundary handling (areas contain child components)

Step 7: Save file

  • Save as .svg file
  • If the input is a file, save to {inputFileDir}/diagram/
  • Otherwise save to {projectDir}/diagram/{topic-slug}/
  • Create directory (if it does not exist)

Quick Reference

/diagram-generator                         # 交互式询问图表类型
/diagram-generator 架构图                   # 生成架构图
/diagram-generator 流程图                   # 生成流程图
/diagram-generator 时序图                   # 生成时序图
Tip Description Default value
类型 Chart type (architecture/flowchart/sequence/structural/mindmap/timeline/state) Auto-detect
方向 Layout direction (ltr/ttb) Auto-select

Common Mistakes

Error Correct approach Reason
Skip the reference file and draw directly First read the reference file for the corresponding type Layout algorithms and component patterns are in the reference file
Do not use mask layers Add an opaque mask before each component box Semi-transparent components will reveal the arrows underneath
Do not use layering Strictly draw in the order of 8 layers SVG renders in drawing order; incorrect order causes occlusion
Do not add region boundaries Use dashed boxes to group related components Readers cannot understand the organizational relationships of components
Do not widen for Chinese CJK characters are wider than Latin characters Component box width needs to be increased to accommodate Chinese
viewBox is too small Reserve 30px padding Content may exceed the expected boundary
Inconsistent component spacing Uniformly use the spacing rules from the reference file Messy spacing affects the professional look
Arrow label positions are arbitrary Place labels slightly above the middle of the arrow Obscuring the arrow or detaching from the arrow causes confusion
Components within a region are not centered Calculate start_x = region_x + (region_w - total_w) / 2 Not centered looks asymmetrical
Forgetting XML escaping & must be escaped as &amp; etc. SVG is XML; failing to escape causes rendering failure
viewBox does not include region boundaries Region boundaries are also elements and must be included in the calculation Boundaries exceed viewBox and are clipped