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 conte
npx skills add JimLiu/baoyu-skills --skill baoyu-diagram --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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** | D
- Supported Diagram Types
- Design System
- Color Palette
- Typography
- Core Visual Elements
- SVG Structure & Layering
- Spacing Rules
- Component Patterns
- Type-Specific Layout Guidance
- Architecture Diagrams
- Flowcharts
- Sequence Diagrams
- Structural Diagrams
- Mind Maps
What does the baoyu-diagram skill do?
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 conte
How do I install it?
Run `npx skills add JimLiu/baoyu-skills --skill baoyu-diagram --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From JimLiu/baoyu-skills, a repository with 24,562 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.