Baoyu Diagram
Skill Verified ActiveCreate 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.
To create professional, dark-themed SVG diagrams for technical and conceptual visualizations, easily embeddable and responsive.
Features
- Generates various diagram types (architecture, flowchart, sequence, etc.)
- Adheres to a strict SVG design system for consistent styling
- Provides detailed layout algorithms for each diagram type
- Outputs self-contained SVG files with embedded styles
- Includes a script to convert SVGs to @2x PNGs
Use Cases
- Visualizing system architecture and component relationships
- Mapping out process flows and decision logic
- Illustrating time-ordered interactions in sequence diagrams
- Creating mind maps and conceptual illustrations
Non-Goals
- Generating raster images directly (only SVG output, then PNG conversion)
- Interactive diagram editing
- Real-time collaboration on diagrams
Installation
First, add the marketplace
/plugin marketplace add jimliu/baoyu-skills/plugin install baoyu-skills@baoyu-skillsQuality Score
VerifiedSimilar Extensions
V3 Ddd Architecture
100Domain-Driven Design architecture for claude-flow v3. Implements modular, bounded context architecture with clean separation of concerns and microkernel pattern.
Pathfinder
100Map a codebase into feature-grouped flowcharts, identify duplicated concerns across features, and propose a unified architecture. Use when asked to "find the ideal path," unify duplicated systems, or audit architecture before a refactor. Emits a proposed unified flowchart plus per-system /make-plan prompts.
Create 2d Composition
95Compose 2D graphics programmatically using SVG generation, diagram layout algorithms, image compositing, and batch processing workflows. Use when generating diagrams, flowcharts, or infographics programmatically, creating reproducible scientific figures, automating production of badges or visual assets, building custom chart types not in standard libraries, or batch generating graphics with parameter variations.
Flowchart Creator
70Create HTML flowcharts and process diagrams with decision trees, color-coded stages, arrows, and swimlanes. Use when users request flowcharts, process diagrams, workflow visualizations, or decision trees.
Understand
100Analyze a codebase to produce an interactive knowledge graph for understanding architecture, components, and relationships
Cloud Architect
100Designs cloud architectures, creates migration plans, generates cost optimization recommendations, and produces disaster recovery strategies across AWS, Azure, and GCP. Use when designing cloud architectures, planning migrations, or optimizing multi-cloud deployments. Invoke for Well-Architected Framework, cost optimization, disaster recovery, landing zones, security architecture, serverless design.