skills.rest
virahitvin8
virahitvin8COMMUNITY
Explore all skills by this author →
GitHub

baoyu-diagram

Generate dark-themed SVG diagrams and convert them to PNG images.

2|Updated May 30, 2026
Search Tags:#architecture#flowchart#visualization#svg#sequence diagram#diagram#png conversion
One-click install
npx skills add https://github.com/virahitvin8/crafty-gis --skill baoyu-diagram-virahitvin8
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: baoyu-diagram
Source: https://github.com/virahitvin8/crafty-gis/tree/main/GIT_STAR/assignment-generator/antigravity-skills-main/antigravity-skills-main/skills/baoyu-diagram
Command: npx skills add https://github.com/virahitvin8/crafty-gis --skill baoyu-diagram-virahitvin8

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires sharp, and includes scripts (resource) and references (resource) components.

What problem does it solve? Creating consistent, professional-looking technical diagrams by hand is slow and error-prone, especially when you need architecture diagrams, flowcharts, or sequence diagrams with a unified visual style. ## Core Features & Use Cases - Nine Diagram Types: Supports architecture, flowchart, sequence, structural (class/ER/org chart), mind map, timeline, state machine, data flow, and illustrative diagrams, each with dedicated layout guidance. - Built-in Design System: Provides a semantic color palette, typography rules, spacing constraints, and reusable SVG component patterns (boxes, diamonds, cylinders, region boundaries) for consistent dark-themed output. - SVG to PNG Conversion: Includes a Bun/TypeScript script that converts the generated SVG into a @2x PNG using sharp. - Use Case: Ask for a system architecture diagram of your microservices stack, and receive a standalone styled SVG file plus a high-resolution PNG ready for documentation or presentations. ## Quick Start Draw an architecture diagram showing my web client, API gateway, three backend services, and a PostgreSQL database.

Frequently Asked Questions about baoyu-diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate an architecture diagram as an SVG file?▼

Describe your system components and their relationships, and the skill produces a standalone SVG file with grouped boxes, connection arrows, and region boundaries. It follows a layered layout algorithm with left-to-right or top-to-bottom flow.

What diagram types can this SVG diagram generator create?▼

It supports nine types: architecture, flowchart, sequence, structural (class, ER, org chart), mind map, timeline, state machine, data flow, and illustrative diagrams. Each type has dedicated layout guidance in reference files.

How do I convert an SVG diagram to PNG?▼

Run the included main.ts script with Bun, passing the SVG path. It uses the sharp library to render a @2x PNG by default, and you can adjust scale with the -s flag or set a custom output path with -o.

Does the diagram output support Chinese text labels?▼

Yes. When labels contain Chinese characters, the font stack switches to include Noto Sans SC and PingFang SC, and box widths should be increased since CJK characters are wider than Latin characters.

Why do arrows show through semi-transparent boxes in my SVG?▼

Semi-transparent component fills reveal arrows drawn underneath. The skill solves this with an opaque masking rectangle filled with the background color placed between the arrows layer and the styled component layer.

Related Skills

Explore More Design & Creative Skills→
zzafergokzzafergok
1

c4-architecture

Generate C4 model diagrams and documentation in Mermaid syntax from codebase analysis.

Community
Intermediate
emdashcodesemdashcodes
13

mermaid-diagram-to-image

Convert Mermaid diagrams into PNG, SVG, or PDF images using mermaid-cli.

Community
Intermediate
AzureAzure
267

azure-resource-visualizer

Analyze Azure resource groups and generate labeled Mermaid architecture diagrams.

Official
Advanced
xpert-aixpert-ai
8

index

Convert Mermaid drafts into editable draw.io diagrams with version tracking.

Official
Intermediate