baoyu-diagram

name	baoyu-diagram
description	Create clear, reproducible diagrams for architecture, flow, sequence, structure, state, and conceptual relationships. Use whenever the user asks for 架构图、流程图、关系图、状态图、decision tree、diagram or any visual representation of structure/logic/process. For public-account and non-technical audiences, default to a low-complexity editorial theme with Mermaid source plus SVG/PNG; use the legacy dark technical SVG style only when the user explicitly wants it.
metadata	{"version":"1.117.3"}

Diagram Generator

Create professional diagrams across multiple diagram types. Public-account diagrams default to a short semantic source (.mmd) rendered into SVG; unsupported or highly custom layouts may fall back to a hand-authored self-contained SVG.

Supported Diagram Types

Type	When to Use	Key Characteristics
Architecture	System components & relationships	Grouped boxes, connection arrows, region boundaries
Flowchart	Decision logic, process steps	Diamond decisions, rounded step boxes, directional flow
Sequence	Time-ordered interactions between actors	Vertical lifelines, horizontal messages, activation bars
Structural	Class diagrams, ER diagrams, org charts	Compartmented boxes, typed relationships (inheritance, composition)
Mind Map	Brainstorming, topic exploration	Central node, radiating branches, organic layout
Timeline	Chronological events	Horizontal/vertical axis, event markers, period spans
Illustrative	Conceptual explanations, comparisons	Free-form layout, icons, annotations, visual metaphors
State Machine	State transitions, lifecycle	Rounded state nodes, labeled transitions, start/end markers
Data Flow	Data transformation pipelines	Process bubbles, data stores, external entities

Mode Routing

simple-editorial — default for WeChat and general readers

Read references/editorial-simple.md before modeling. Core constraints:

• Start with one natural-language question.
• Select one relationship grammar: progression, flow, cycle, hierarchy, comparison, or matrix.
• Keep one abstraction level and one reading direction.
• Prefer 3–5 primary nodes; split above 6.
• Keep each Chinese node label at 10 characters or fewer; longer explanations belong in the caption.
• Use Mermaid source and the bundled renderer.
• Use clean geometry, ample whitespace, warm editorial background, dark ink, cobalt signal and optional orange human-decision accent.
• Preserve .mmd, .svg, and @2x.png.

technical-dark — explicit opt-in

Use the legacy design system below when the user explicitly requests a dark technical diagram, detailed infrastructure view, or the target publication already uses that system.

Legacy Technical-Dark Design System

Color Palette

Semantic colors for component categories:

Category	Fill (rgba)	Stroke	Use For
Primary	rgba(8, 51, 68, 0.4)	#22d3ee (cyan)	Frontend, user-facing, inputs
Secondary	rgba(6, 78, 59, 0.4)	#34d399 (emerald)	Backend, services, processing
Tertiary	rgba(76, 29, 149, 0.4)	#a78bfa (violet)	Database, storage, persistence
Accent	rgba(120, 53, 15, 0.3)	#fbbf24 (amber)	Cloud, infrastructure, regions
Alert	rgba(136, 19, 55, 0.4)	#fb7185 (rose)	Security, errors, warnings
Connector	rgba(251, 146, 60, 0.3)	#fb923c (orange)	Buses, queues, 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, current step

For flowcharts and sequence diagrams, assign colors by role (actor, decision, process) rather than by technology.

Typography

Use embedded SVG @font-face or system monospace fallback:

<style>
  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap');
  text { font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace; }
</style>

Font sizes by role:

• Title: 16px, weight 700
• Component name: 11-12px, weight 600
• Sublabel / description: 9px, weight 400, color #94a3b8
• Annotation / note: 8px, weight 400
• Tiny label (on arrows): 7-8px

Core Visual Elements

Background: #0f172a (slate-900) with subtle grid:

<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>
</defs>
<rect width="100%" height="100%" fill="#0f172a"/>
<rect width="100%" height="100%" fill="url(#grid)"/>

Arrowhead marker (standard):

<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>

Arrowhead marker (colored) — create per-color as needed:

<marker id="arrow-cyan" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polygon points="0 0, 10 3.5, 0 7" fill="#22d3ee"/>
</marker>

Open arrowhead (for async/return messages):

<marker id="arrow-open" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
  <polyline points="0 0, 10 3.5, 0 7" fill="none" stroke="#64748b" stroke-width="1.5"/>
</marker>

SVG Structure & Layering

Draw elements in this order to get correct z-ordering (SVG paints back-to-front):

1. Background fill + grid pattern
2. Region/group boundaries (dashed outlines)
3. Connection arrows and lines
4. Opaque masking rects (same position as component boxes, fill="#0f172a")
5. Component boxes (semi-transparent fill + stroke)
6. Text labels
7. Legend (bottom-right or bottom area, outside all boundaries)
8. Title block (top-left)

The opaque masking rect trick is essential — semi-transparent component fills will show arrows underneath without it:

<!-- Mask layer: opaque background to hide arrows -->
<rect x="100" y="100" width="160" height="60" rx="6" fill="#0f172a"/>
<!-- Visual layer: styled component -->
<rect x="100" y="100" width="160" height="60" rx="6" fill="rgba(8,51,68,0.4)" stroke="#22d3ee" stroke-width="1.5"/>
<text x="180" y="125" fill="white" font-size="11" font-weight="600" text-anchor="middle">API Gateway</text>
<text x="180" y="141" fill="#94a3b8" font-size="9" text-anchor=>Kong / Nginx

Spacing Rules

These prevent overlapping — follow them strictly:

• Component box height: 50-70px (standard), 80-120px (large/complex)
• Minimum gap between components: 40px vertical, 30px horizontal
• Arrow label clearance: 10px from any box edge
• Region boundary padding: 20px inside edges around contained components
• Legend placement: At least 20px below the lowest diagram element
• Title block: 20px from top-left, outside diagram content area
• viewBox: Always extend to fit all content + 30px padding on all sides

Component Patterns

Standard box (service/process):

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

Decision diamond (flowchart):

<g transform="translate(CX, CY)">
  <polygon points="0,-35 50,0 0,35 -50,0" fill="#0f172a"/>
  <polygon points="0,-35 50,0 0,35 -50,0" fill="rgba(120,53,15,0.3)" stroke="#fbbf24" stroke-width="1.5"/>
  <text y="4" fill="white" font-size="10" font-weight="600" text-anchor="middle">Condition?</text>
</g>

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" = = =/>
  
  
  
  PostgreSQL

Region 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">AWS us-east-1</text>

Security group:

<rect x="X" y="Y" width="W" height="H" rx="8" fill="none" stroke="#fb7185" stroke-width="1" stroke-dasharray="4,4"/>
<text x="X+10" y="Y+14" fill="#fb7185" font-size="8" font-weight="500">VPC / Security Group</text>

Type-Specific Layout Guidance

Determine this SKILL.md file's directory path as {baseDir}. Read the reference file for the specific diagram type before starting layout. Reference files are located at {baseDir}/references/ and contain detailed layout algorithms and examples.

Architecture Diagrams

→ Read {baseDir}/references/architecture.md

Key points: left-to-right or top-to-bottom data flow. Group related services in region boundaries. Use buses/connectors between layers. Place databases at the bottom or right.

Flowcharts

→ Read {baseDir}/references/flowchart.md

Key points: top-to-bottom primary flow. Diamonds for decisions with Yes/No labels on exit arrows. Rounded rectangles for start/end. Use the Highlight color for the happy path.

Sequence Diagrams

→ Read {baseDir}/references/sequence.md

Key points: actors as boxes at top, vertical dashed lifelines, horizontal arrows for messages (solid=sync, dashed=return). Time flows downward. Activation bars show processing. Number messages if complex.

Structural Diagrams

→ Read {baseDir}/references/structural.md

Key points: compartmented boxes (name / attributes / methods for class diagrams). Relationship lines: solid with filled diamond=composition, solid with empty diamond=aggregation, dashed arrow=dependency, solid triangle=inheritance.

Mind Maps

Free-form radiating layout from a central concept. Use organic curves (<path> with cubic beziers) for branches. Vary branch colors using the palette. Larger font for central node, decreasing as you go outward.

Timelines

Horizontal or vertical axis line. Event markers as circles or diamonds on the axis. Description text offset to alternating sides to avoid overlap. Use color to categorize event types.

State Machines

Rounded-rect states with double-border for composite states. Filled circle for initial state, bullseye for final state. Curved arrows for self-transitions. Label all transitions with event [guard] / action format.

Output Rules

1. simple-editorial: output .mmd, .svg, and @2x.png; technical-dark: output a self-contained .svg and @2x.png
2. Set viewBox to fit all content with 30px padding; do NOT set fixed width/height attributes (let the SVG scale responsively)
3. Include xmlns="http://www.w3.org/2000/svg" on the root <svg> element
4. Put all <style>, <defs>, markers, and patterns at the top of the SVG
5. Use text-anchor="middle" for centered labels; ensure text doesn't overflow boxes
6. Chinese text support: When labels contain Chinese characters, use font-family: 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', sans-serif' and increase box widths — CJK characters are wider
7. Save location: If the input is a file, save to {inputFileDir}/diagram/. Otherwise save to {projectDir}/diagram/{topic-slug}/. Create the directory if it doesn't exist

Script

Determine this SKILL.md file's directory path as {baseDir}. Script path: {baseDir}/scripts/main.ts.

Resolve ${BUN_X} runtime: if bun installed → bun; if npx available → npx -y bun; else suggest installing bun.

SVG → @2x PNG

After saving the SVG, convert it to a @2x PNG:

${BUN_X} {baseDir}/scripts/main.ts <svg-path> [options]

Options:

• -s, --scale <n> — Scale factor (default: 2)
• -o, --output <path> — Custom output path (default: <input>@2x.png)
• --json — JSON output

Mermaid → editorial SVG

Install declared dependencies once in {baseDir}/scripts/:

${BUN_X} install

Then render:

${BUN_X} {baseDir}/scripts/render-mermaid.ts <mmd-path> --output <svg-path> --theme editorial --json

The .mmd file is the semantic source. Do not edit the generated SVG by hand unless the renderer cannot express a required relationship.

Process

1. Identify the audience, natural-language question, diagram type, and mode
2. For simple-editorial, read references/editorial-simple.md; for technical-dark, read the relevant type reference
3. Delete components that do not answer the question; choose one abstraction level and flow direction
4. simple-editorial: save Mermaid source, render SVG, then convert to @2x PNG
5. technical-dark or unsupported layout: write SVG following the legacy layering rules, then convert to @2x PNG
6. Verify no overlaps, no clipped labels, no crossing main-path connectors, and mobile readability
7. Present the semantic source (when present), SVG, and PNG

运行依赖

• Mermaid 渲染脚本需要 bun，没有 Bun 时使用 npx -y bun；检查方式依次为 bun --version、npx --version。
• 当前宿主若有原生 Mermaid/浏览器渲染能力可以直接使用。所有渲染路径都不可用时仍保存可复查的 .mmd 语义源，并明确 SVG/PNG 尚未生成。

完成标准

• 完成本 Skill 正文中 Mode、Output、Handoff 或最终交付步骤声明的全部适用产物，不因它处在较大任务中而缩减。
• 执行正文已有的检查清单、视觉检查、平台兼容检查或事实检查；不适用项说明理由，失败项先在本 Skill 内返工。
• 返回用户可直接使用或交给下一个完整 Skill 的独立产物，并明确仍需用户授权的外部写入。