baoyu-diagram
Baoyu Diagram generates standalone SVG diagrams with a dark design system and semantic color palette. It supports architecture diagrams, flowcharts, sequence diagrams, mind maps, timelines, and other technical visualizations, each with purpose-built layout rules and component patterns.
Baoyu Diagram creates professional SVG diagrams for system architecture and technical visualization.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-04
Baoyu Diagram creates professional SVG diagrams for system architecture and technical visualization. Baoyu Diagram generates standalone SVG diagrams with a dark design system and semantic color palette. It supports architecture diagrams, flowcharts, sequence diagrams, mind maps, timelines, and other technical visualizations, each with purpose-built layout rules and component patterns.
Use it when
- Yes, baoyu-diagram supports flowchart creation with decision logic and process flow visualization.
- Baoyu Diagram employs a dark design system with a semantic color palette.
Verify before relying
Read SKILL.md below before installing (6 files). Open directory: indexed for reading, not audited.
Install
JimLiu/baoyu-skills/baoyu-diagram · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What types of diagrams can baoyu-diagram create?
Baoyu Diagram generates standalone SVG diagrams including system architecture diagrams, flowcharts, sequence diagrams, mind maps, timelines, state machine diagrams, and other technical visualizations. Each diagram type uses purpose-built layout rules and component patterns optimized for professional technical documentation.
Can I draw me a flowchart with baoyu-diagram?
Yes, baoyu-diagram supports flowchart creation with decision logic and process flow visualization. The tool generates professional SVG flowcharts with semantic color coding and dark design system styling suitable for technical documentation and system documentation.
What design system does baoyu-diagram use?
Baoyu Diagram employs a dark design system with a semantic color palette. All generated SVG diagrams feature consistent styling and professional appearance, making them suitable for technical presentations, documentation, and architecture visualization across different contexts.
Does baoyu-diagram support sequence diagrams for API interactions?
Yes, baoyu-diagram can generate sequence diagrams showing actor interactions over time, including API call sequences. The tool visualizes component relationships and data flow between system parts, making it ideal for documenting complex system interactions and communication patterns.
What is the license for baoyu-diagram?
Baoyu Diagram is released under the MIT license, allowing free use, modification, and distribution in both open-source and commercial projects.
Can baoyu-diagram create ER and class diagrams?
Baoyu Diagram supports creating entity relationship diagrams, class diagrams, and other structural visualizations. The tool specializes in generating professional SVG diagrams with semantic color palettes and dark theme styling for comprehensive technical visualization needs.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
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, |
(truncated - see the full file via the links below)
File tree — 6 files
skills/baoyu-diagram/SKILL.md
skills/baoyu-diagram/references/architecture.md
skills/baoyu-diagram/references/flowchart.md
skills/baoyu-diagram/references/sequence.md
skills/baoyu-diagram/references/structural.md
skills/baoyu-diagram/scripts/main.ts
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create professional SVG diagrams for system architecture and technical visualization”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Fireworks Tech Graph turns descriptions of systems and engineering concepts into polished technical diagrams—architecture charts, data flows, sequence diagrams, C4 models, and more—then exports them as SVG, PNG, interactive HTML, or animated GIF. The skill validates geometry and syntax automatically, supports multiple diagram styles, and works offline.
Build charts and process diagrams that match OpenAI's design system, complete with their typeface and color palette. The skill provides a zero-dependency renderer for bar charts and hand-assembled flow diagram primitives, both emitted as standalone HTML/SVG suitable for blogs, research pages, and decks.
Flow Diagram generates a single self-contained HTML file that visualizes system architectures and request/response flows with a 2-pane layout: an interactive diagram on the left with zoom, pan, and fit-to-view controls, and an explainer sidebar on the right. Click any flow to highlight it with traveling dots along arrows, dim everything else, and reveal its details. Two-way arrows (solid outbound, dashed return) carry numbered step badges colored by semantic meaning—red for auth, purple for scheduled tasks, amber for data pipelines.
Svg Diagram creates polished structural diagrams—flowcharts, architecture charts, sequence diagrams, hierarchies, and more—by outputting HTML blocks containing SVG. The skill renders output directly in a sandboxed iframe, offering more refined aesthetics and flexible layout control than comparable tools.
Technical Diagram Skill renders system architectures, workflows, sequences, data pipelines, and state machines as self-contained HTML files with dark/light theming, native export to PNG/JPEG/WebP, and dual-theme SVG output. Choose from five diagram types—architecture, workflow, sequence, dataflow, and lifecycle—each with a JSON schema and renderer, or hand-place SVG when command execution is unavailable.
Architecture Diagram creates publication-ready system topology visualizations in standalone HTML format. Describe your infrastructure, cloud setup, or network design in plain language, and the skill generates a dark-themed SVG diagram with semantic color coding for different component types.
More skills Architecture Diagram (unlicensed) · anthropic-style-diagram (MIT) · Hackmd (unlicensed) · Galaxy Workflow Viz (unlicensed) · flowchart-creator (Apache-2.0) · concept-diagrams (MIT) · diagram-design (MIT) · Diagram Design (NOASSERTION)