--- name: baoyu-diagram description: Create professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, illustrative/conceptual diagrams, and more. Use this skill whenever the user asks for any kind of technical or conceptual diagram, visualization of a system, process flow, data flow, component relationship, network topology, decision tree, org chart, state machine, or any visual representation of structure/logic/process. Also trigger when the user says "画个图" "画一个架构图" "diagram" "flowchart" "sequence diagram" "draw me a ..." or uploads content and asks to visualize it. Output is always a standalone .svg file. version: 1.117.3 --- # Diagram Generator Create professional SVG diagrams across multiple diagram types. All output is a single self-contained `.svg` file with embedded styles and fonts. ## 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 | ## 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: ```svg ``` 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: ```svg ``` **Arrowhead marker (standard):** ```svg ``` **Arrowhead marker (colored) — create per-color as needed:** ```svg ``` **Open arrowhead (for async/return messages):** ```svg ``` ### 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: ```svg API Gateway 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):** ```svg Name description ``` **Decision diamond (flowchart):** ```svg Condition? ``` **Database cylinder:** ```svg PostgreSQL ``` **Region boundary:** ```svg AWS us-east-1 ``` **Security group:** ```svg VPC / Security Group ``` ## 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 (`` 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. Output a **single `.svg` file** — no external dependencies except the Google Fonts import 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 `

Baoyu Diagram

Description

Latest Changes

Install Baoyu Diagram with One Click