BD

baoyu diagram

baoyu
May 6, 2026

Turn plain-language ideas into professional and beautiful SVG diagrams for architecture, flow, sequence, and structure, then export to PNGs in one workflow.

Introduction

baoyu-diagram is a developer-facing visualization skill built to generate professional SVG diagrams. It supports architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, state machines, and data flow diagrams, while requiring each result to be a single complete .svg file that can also be exported as PNG.

The diagrams generated by baoyu-diagram come with built-in styling, typography, and a full set of visual rules, which removes much of the manual cleanup that usually follows AI-generated diagrams. It is especially useful when you need to explain system structure or process relationships and want the result to be ready for docs, websites, or internal knowledge bases.

Unlike many prompts that only try to place nodes on a canvas, this skill defines color, typography, layering, spacing, connectors, and export behavior up front. That usually makes the output more stable and much closer to a deliverable asset.

Philosophy

Treat structural correctness and visual delivery quality as part of the same job. Instead of only drawing relationships, the skill uses a shared design system to produce high-quality SVG output. It identifies the diagram type first, reads the matching reference rules, and then renders a single SVG plus PNG export with controlled layout and styling to reduce randomness and rework.

Setup and Usage

There are several ways to install a skill:

  • Method 1: In OpenClaw or Hermes Agent, ask the agent to install the baoyu-diagram skill directly.
  • Method 2: Visit skillhub, install the store, and then install the skill.
  • Method 3: Visit Skills.sh, search for baoyu-diagram, and use the command provided there.
  • Method 4: Visit Clawhub, download the skill package, and place it in your local skills directory.

Skill Workflow Analysis

This skill covers a wide range of diagram types:

  • architecture diagrams for systems, boundaries, regions, and dependencies
  • flowcharts for steps, decisions, and execution paths
  • sequence diagrams for time-ordered interactions between participants
  • structural diagrams for class diagrams, ER diagrams, and org-style relationships
  • mind maps, timelines, state machines, and data flow diagrams for concept organization and process communication

Beyond the diagram types themselves, it also includes a detailed design system:

  • a consistent dark background and semantic color palette
  • typography rules for titles, component names, annotations, and arrow labels
  • fixed conventions for layering order, masking rectangles, and arrow markers
  • sizing, padding, label spacing, and viewBox rules

Phase 1: Identify the Diagram Type

  • It first determines whether the request should be treated as architecture, flowchart, sequence, structural, or another supported type
  • Different diagram types follow different layout logic instead of sharing a single generic template

Phase 2: Read the Matching Reference

  • For architecture, flowchart, sequence, and structural diagrams, it reads the dedicated guide under references/
  • Those files add type-specific rules for flow direction, spacing, frames, connectors, and relationships

Phase 3: Plan the Layout

  • It lists the components, actors, groups, and connections before drawing
  • It then chooses a primary direction such as left-to-right, top-to-bottom, or time-downward
  • Positions are assigned with explicit spacing rules so that labels and shapes do not collapse into each other

Phase 4: Generate SVG and Export PNG

  • The output must be a single self-contained .svg file
  • <style>, <defs>, fonts, patterns, and markers live at the top of the document
  • When labels contain Chinese text, it switches to a broader font stack and increases container width to avoid cramped rendering
  • After the SVG is saved, the bundled script can convert it into an @2x PNG

That workflow is useful because it inserts a real layout-planning step between understanding the request and beautifying the result, which usually makes the output more stable than raw SVG prompting. On the other hand, if you only need a rough sketch, do not care about visual consistency, or cannot easily support SVG plus PNG conversion in your environment, this may not be the lightest option.

Skill Design Evaluation

Back to Developer Skills List