shiganluo/skill/diagramming

Name: diagramming
Author: shiganluo

Claude Code and agent skill by shiganluo/skill

Trust tier 3

community

Source check pending

Checking that the SKILL.md file is still in the repository.

Create diagrams: architecture SVGs, hand-drawn Excalidraw, infographics, flowcharts.

Install

npx vskill@latest install shiganluo/skill/diagramming

SKILL.md

Diagramming

Create visual diagrams, charts, and infographics. Three subskills cover different diagram types and output formats.

Choosing the Right Approach

Need	Subskill	Output format
Architecture / infrastructure diagrams (cloud, microservices, system design)	`skill_view(name="architecture-diagram")`	Dark-themed standalone HTML with inline SVG
Hand-drawn style diagrams (flowcharts, sequence diagrams, concept maps)	`skill_view(name="excalidraw")`	`.excalidraw` JSON (opens at excalidraw.com)
Infographics (visual summaries, data stories, information graphics)	`skill_view(name="baoyu-infographic")`	Generated image via AI (21 layouts × 21 styles)

Quick Decision Flow

User wants a diagram of...
├── Software system / cloud infra / microservices → architecture-diagram
├── Flowchart / sequence / concept map / whiteboard style → excalidraw
├── Visual summary / infographic / data story → baoyu-infographic
└── Interactive generative art → see p5js skill instead

Format Comparison

Aspect	architecture-diagram	excalidraw	baoyu-infographic
Style	Dark, tech, grid-backed	Hand-drawn, whiteboard	21 styles (handmade, cyberpunk, chalkboard, etc.)
Output	Self-contained HTML	.excalidraw JSON	PNG image
Editable	Edit HTML source	Open in excalidraw.com	Re-generate with different params
Best for	System architecture	General diagrams	Visual summaries of content
No dependencies	✅	✅	Requires image generation tool

Common Principles

Label everything — unlabeled boxes and arrows are useless
Consistent visual language — same colors/styles for same types of components
Appropriate density — not too sparse (wasted space), not too dense (unreadable)
Legend when needed — explain color coding, line styles, abbreviations
Hierarchy through visual weight — primary elements bold, secondary muted

Security

Security scanPassed, 100 of 100Pattern checks on the skill's files.
Model reviewPassed

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingcreative/diagramming/SKILL.md

Popularity

7-day trend score: 5

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/shiganluo/skill/diagramming/badge)](https://verified-skill.com/skills/shiganluo/skill/diagramming)

Something wrong with this skill or its page? Tell us.