Baoyu diagram
/SKILLCreate professional, dark-themed SVG diagrams of any type - architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, illustrative/conceptual diagrams, and
--- 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 skills 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 <style> @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&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: `svg <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):** `svg <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:** `svg <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):** `svg <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 (bo
