Agent skill · design visual · jimliu
baoyu-diagram
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.
Why this skill is useful
Provides specific SVG generation techniques and design standards for various diagram types that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-07-04. 24,677 stars on the source repository.
What this skill does
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, pr …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jimliu/baoyu-diagram