# Baoyu Diagram

Create professional, dark-themed SVG diagrams of any type, architecture diagrams...

- Repository: https://github.com/guanyang/open-agent-hub (985 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add guanyang/open-agent-hub --skill baoyu-diagram -g -a claude-code -y`
Codex: `npx skills add guanyang/open-agent-hub --skill baoyu-diagram -g -a codex -y`
Cursor: `npx skills add guanyang/open-agent-hub --skill baoyu-diagram -g -a cursor -y`
Gemini CLI: `npx skills add guanyang/open-agent-hub --skill baoyu-diagram -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add guanyang/open-agent-hub`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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:

The rest: https://github.com/guanyang/open-agent-hub/blob/HEAD/skills/baoyu-diagram/SKILL.md