AI-powered diagram and visual content generation skill. 14 diagram types, 8 visual styles, 100+ content style combinations. Works with Claude.ai, Claude Code, Hermes Agent, or any LLM with a skill/prompt system.
- Open claude.ai (Pro/Max/Team/Enterprise)
- Go to Settings → Skills → Install from GitHub
- Enter:
SonicBotMan/blueprinter - Paste the
skill/directory as a custom skill - Ask Claude: "Draw a RAG pipeline architecture diagram in Blueprint style"
- Copy the
skill/directory into your skills folder:cp -r skill/ ~/.claude/skills/blueprinter/ # Claude Code cp -r skill/ ~/.hermes/skills/blueprinter/ # Hermes Agent
- Start a conversation and use:
Draw a microservices architecture in Dark Terminal style Create a sequence diagram for user authentication Generate a UML class diagram for an e-commerce system
- Read
skill/SKILL.md— it's a self-contained prompt specification - Paste relevant sections (diagram type rules + style guide) into any LLM
- No code, no dependencies — just instructions
| # | Type | Category | Key Shapes |
|---|---|---|---|
| 1 | Architecture | System | Rects, hexagons, layer groups |
| 2 | Data Flow | System | Labeled arrows, wide data paths |
| 3 | Flowchart | General | Diamonds (decision), rounded rects |
| 4 | Agent Architecture | AI/ML | LLM rects, memory cylinders, tool icons |
| 5 | Memory Architecture | AI/ML | Storage tiers, read/write paths |
| 6 | Sequence | UML | Lifelines, activation boxes, message arrows |
| 7 | Comparison | General | Grid cells, checkmarks, color fills |
| 8 | Timeline | General | Time axis, duration bars, milestones |
| 9 | Mind Map | General | Radial layout, curved branches |
| 10 | Class | UML | 3-compartment boxes, inheritance arrows |
| 11 | Use Case | UML | Actors, ellipses, system boundary |
| 12 | State Machine | UML | Rounded rects, initial/final states |
| 13 | ER Diagram | UML | Entity boxes, relationship diamonds |
| 14 | Network Topology | Infrastructure | Device icons, subnet zones |
Common patterns are auto-detected and rendered with canonical layouts:
- RAG Pipeline — Query → Embed → VectorSearch → Retrieve → Augment → LLM → Response
- Agentic RAG — Agent loop with Tool use between Query and LLM
- Multi-Agent — Orchestrator → SubAgents → Aggregator → Output
- Tool Call Flow — LLM → Tool Selector → Execution → Result Parser → LLM
| # | Style | Vibe | Best For |
|---|---|---|---|
| 1 | Flat Icon | Clean white, Apple docs | General tech, architecture |
| 2 | Dark Terminal | Neon-on-dark, hacker | CLI tools, dev infra |
| 3 | Blueprint | Engineering grid, cyan-on-navy | System specs, network |
| 4 | Notion Clean | Minimal, doc-friendly | Wikis, docs, GitHub |
| 5 | Glassmorphism | Frosted glass on dark | Product sites, keynotes |
| 6 | Claude Official | Warm cream, Anthropic | AI/ML papers, agents |
| 7 | OpenAI Official | Ultra-minimal white | Research diagrams |
| 8 | Cocoon Dark | Semantic color on dark | Cloud, microservices |
Same topology (User → Agent → LLM + Memory) rendered in all 8 styles. Each SVG is self-contained — view source to study the style system.
Beyond SVG diagrams, the skill includes a rich HTML/CSS content library with 100+ visual style combinations:
| Category | Styles | Layouts |
|---|---|---|
| XHS Cards | 12 presets × 3 palettes | Social media, knowledge cards |
| Infographics | 19 art styles × 20 layouts | Data viz, comparisons, funnels |
| Slide Decks | 16 presets × 4 dimensions | Presentations, tutorials |
| Comics | 6 art styles × 7 tones × 7 layouts | Educational comics, stories |
Powered by baoyu-skills by JimLiu.
Semantic shapes ensure visual clarity — every component type has a distinct shape:
| Component | Shape | Use Case |
|---|---|---|
| User/Actor | Circle + body | Human actors |
| LLM/Model | Rounded rectangle | AI models |
| Agent/Service | Hexagon | AI agents, microservices |
| Database | Cylinder | PostgreSQL, Vector DB |
| Memory | Stacked cylinder | Redis, Memcached |
| Tool/Function | Rectangle | APIs, functions |
| Decision | Diamond | Branching logic |
| External System | Dashed box / Cloud | Third-party services |
SVG Diagram → cairosvg (Python) → PNG
HTML Card → Playwright (Node) → PNG
No external dependencies required. cairosvg handles SVG→PNG for all diagram types.
AI-generated diagrams tend to look generic. Blueprinter enforces rules to avoid common pitfalls:
- NO uniform grid layout — group by semantics, vary sizes
- NO all-rounded-rectangles — use shape vocabulary for meaning
- NO single-color connections — solid=sync, dashed=async, thick=data
- NO excessive gradients/shadows — flat design, 1px borders
- NO centered-everything — left-align titles, monospace for data
- NO emoji overload — icons only on key nodes
blueprinter/
├── skill/
│ ├── SKILL.md # Main skill definition (prompt)
│ ├── references/
│ │ ├── svg-styles/
│ │ │ ├── diagram-types-and-rules.md # 14 types + vocabulary
│ │ │ ├── svg-generation-strategy.md # 4-phase generation pipeline
│ │ │ ├── icons.md # 50+ SVG icon definitions
│ │ │ ├── svg-layout-best-practices.md # Spacing, alignment rules
│ │ │ ├── style-1-flat-icon.md # ... through style-8
│ │ │ └── style-8-cocoon-dark.md
│ │ ├── baoyu-styles/ # Extended content library
│ │ │ ├── xhs-images/ # 12 XHS card presets
│ │ │ ├── infographic/ # 20 layouts × 19 styles
│ │ │ ├── slide-deck/ # 16 slide presets
│ │ │ ├── comic/ # 6 art styles × 7 layouts
│ │ │ └── markdown-to-html/ # 4 themes × 13 color presets
│ │ └── excalidraw-coleam00/ # Excalidraw JSON export support
│ ├── assets/samples/ # Example output images
│ └── scripts/
│ ├── svg/
│ │ ├── validate-svg.sh # XML validation
│ │ └── generate-diagram.sh # SVG→PNG conversion
│ └── xhs-screenshot.js # HTML card screenshot
├── examples/
│ └── images/ # Showcase images
├── README.md
└── LICENSE
- Classify — Route user intent to one of 14 diagram types via decision tree
- Inventory — List all nodes, labels, connections, and groupings
- Coordinate — Calculate grid positions, ensure no overlap, apply style spacing rules
- Self-Check — 14-item validation: XML validity, viewBox bounds, style compliance, arrow coverage
For complex diagrams (10+ nodes), use Incremental Build:
Skeleton → Groups → Edges → Nodes → Labels → Polish
- Cocoon-AI/architecture-diagram-generator — Dark-theme architecture diagrams with semantic colors
- markdown-viewer/skills — Skill documentation patterns (Quick Start, Critical Rules, Anti-AI taste rules)
- baoyu-skills — Extended visual content library (XHS, infographics, slides, comics)
MIT