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 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, or process. Also trigger when the user says "画个图" "draw an architecture diagram," "diagram," "flowchart," "sequence diagram," "draw me a...," or uploads content and asks to visualize it. The 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, time 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 (pink) | 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 the system’s 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:
