Important: Draw.io Skill is a YAML-first, offline-first base workflow.
$ npx -y skills add bahayonghang/drawio-skills --agent claude-code
Important: Draw.io Skill is a YAML-first, offline-first base workflow. The default path is local generation through
YAML/CLI -> .drawio + sidecars, optionally enhanced by draw.io Desktop for PNG/PDF/JPG and embedded SVG export. The next-ai-draw-io MCP server (@next-ai-drawio/mcp-server) is optional live refinement for the base skill only, not a hard dependency.Recommendation for Diagram Replication: For replicating draw.io diagrams, using the
devbranch of drawio-scientific-illustrator produces significantly better results than using this skills package.
English | 中文文档 | Documentation
Draw.io Skill is a YAML-first draw.io authoring system for engineering diagrams, network diagrams, structured redraws, Mermaid/CSV conversion, and imported .drawio files. Publication-facing work is handled by an Academic Overlay that depends on the sibling base skill instead of copying its runtime.
skills/drawio: Draw.io Base Skill. Owns shared execution primitives: the CLI, schemas, general references, themes (including academic/academic-color), general examples, style presets, Desktop export helpers, diagrams.net URL fallback, and optional live refinement backend.skills/drawio-academic-skills: Academic Overlay. Owns academic policy and academic-specific assets: publication overlay docs (academic-figure-playbook.md, academic-export-checklist.md), paper/pipeline examples, README, and evals. It requires sibling ../drawio for execution and never requires MCP/live backend.Boundary rule: themes and shared execution primitives live in the base; academic policy, academic docs, and paper examples live in the overlay. A standalone academic package can be generated later by a packaging workflow, but the repository model is base plus overlay.
.drawio, .spec.yaml, and .arch.json aligned for repeatable local editing..drawio.svg when available.create, edit, and replicate.tech-blue, academic, academic-color, nature, dark, arch-dark, high-contrast. arch-dark carries the architecture design language adapted from architecture-diagram-generator (MIT, Cocoon AI).architecture, roadmap, or workflow before layout and export.lobe.* / ai.* AI/LLM logos, brand.redis, and a curated lucide.* set for common semantic roles without runtime network access. SysML (mxgraph.sysml.*) and BPMN (mxgraph.bpmn.*) base names are searchable too.router, switch, firewall, server, load_balancer, subnet, internet, ap) and automatic link labels from interface/IP/VLAN/bandwidth metadata.mermaid, explain, relabel, restyle, heatmap, or script-free html.assets and place them with node.image. Paths are relative to --asset-root (default cwd). SVG and multi-page assets are out of v1..drawio into a YAML-first bundle with --input-format drawio --export-spec (add --all-pages for multi-page bundles; add --extract-assets for foreign embedded rasters).Use this order unless the request explicitly needs a browser session:
.drawio locally and keep sidecars in sync.Academic overlay uses the first two paths only. It does not create, require, or route through .mcp.json, MCP, or live backend.
To replicate draw.io diagrams with superior fidelity, install drawio-scientific-illustrator (dev branch) at the project level (which works better for replication than this skills package):
Claude (Project Level):
git clone -b dev https://github.com/bahayonghang/drawio-scientific-illustrator.git .claude/skills/drawio-scientific-illustrator
Codex (Project Level):
git clone -b dev https://github.com/bahayonghang/drawio-scientific-illustrator.git .codex/skills/drawio-scientific-illustrator
npx skills add bahayonghang/drawio-skills
Restart your client after installation so it reloads the skills.
skills/drawio into your client's skill directory.skills/drawio-academic-skills next to drawio so the overlay can resolve sibling ../drawio.Common locations:
~/Library/Application Support/Claude/skills/~/.config/Claude/skills/%APPDATA%\Claude\skills\~/.codex/skills/%USERPROFILE%\.codex\skills\Normal create/edit/export work does not require MCP. Configure @next-ai-drawio/mcp-server only when you want base-skill browser refinement.
Academic overlay does not need this setup.
macOS / Linux:
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["--yes", "@next-ai-drawio/mcp-server@latest"]
}
}
}
Windows:
{
"mcpServers": {
"drawio": {
"type": "stdio",
"command": "cmd",
"args": ["/c", "npx", "--yes", "@next-ai-drawio/mcp-server@latest"]
}
}
}
config.tomlmacOS / Linux:
[mcp_servers.drawio]
command = "npx"
args = ["--yes", "@next-ai-drawio/mcp-server@latest"]
Windows:
[mcp_servers.drawio]
type = "stdio"
command = "cmd"
args = ["/c", "npx", "--yes", "@next-ai-drawio/mcp-server@latest"]
Create a new diagram:
/drawio create a horizontal tech-blue login flow with 6 nodes
Create a network topology with structured metadata:
/drawio create a tech-blue network topology with a firewall, core switch, two app servers, and a private database subnet. Label interfaces and VLANs on the links.
Create a publication figure with the overlay:
/drawio-academic-skills create an IEEE-style workflow figure for a manuscript. Deliver .drawio + .spec.yaml + .arch.json + .svg.
Import an existing .drawio file into the offline bundle:
node skills/drawio/scripts/cli.js existing.drawio --input-format drawio --export-spec --write-sidecars
Render and validate a bundle:
node skills/drawio/scripts/cli.js input.yaml output.drawio --validate --write-sidecars
node skills/drawio/scripts/cli.js input.yaml output.svg --validate --write-sidecars
Use mixed provider, Lobe, brand, and Lucide icons:
nodes:
- id: lambda
label: AWS Lambda
icon: aws.lambda
- id: openai
label: OpenAI document understanding
icon: lobe.openai
- id: claude
label: Claude reasoning
icon: ai.anthropic
- id: redis
label: Redis cache
icon: brand.redis
- id: cache
label: Cache fallback
icon: lucide.database-zap
- id: ops
label: Server operations
icon: lucide.server-cog
Common lobe.* / ai.* icons such as OpenAI, Claude, and Gemini are embedded
as normalized SVGs for reliable offline rendering. Unsupported Lobe names fail
shape validation instead of creating remote image links. brand.* is for the
bundled non-AI brand fallbacks; the curated lucide.* set is embedded as data
URI SVGs and should not be treated as official brand logos. Supported examples
include lucide.alarm-clock, lucide.server-cog, and lucide.workflow.
Lobe and Lucide attribution files ship under skills/drawio/assets/licenses/.
Academic overlay still uses the sibling base CLI:
node skills/drawio/scripts/cli.js skills/drawio-academic-skills/references/examples/system-architecture-paper.yaml academic-system.svg --validate --write-sidecars --strict-warnings
Use draw.io Desktop when you need raster or PDF export:
node skills/drawio/scripts/cli.js input.yaml output.pdf --validate --use-desktop
node skills/drawio/scripts/cli.js input.yaml output.png --validate --use-desktop
Generate a diagrams.net URL fallback from a .drawio file:
node skills/drawio/scripts/runtime/diagrams-net-url.js output.drawio
When the diagram will continue evolving, keep these files together:
<name>.drawio<name>.spec.yaml<name>.arch.jsonAcademic overlay adds standalone SVG as part of the default publication bundle:
<name>.svgPNG/PDF/JPG are Desktop-enhanced optional outputs and should be reported as unavailable if draw.io Desktop is missing.
The current network-topology workflow supports:
router, switch, firewall, server, load_balancer, subnet, internet, and apsrcInterface, dstInterface, ip, vlan, bandwidth, and linkTypehierarchical, star, and meshicon fields or network.vendor + network.deviceRepresentative specs ship in skills/drawio/references/examples/.
Render one directly:
node skills/drawio/scripts/cli.js skills/drawio/references/examples/vendor-device-mapping.yaml output.drawio --validate --write-sidecars
View @bahayonghang’s profileThis collection of skills grew out of my day-to-day paper-writing workflow and has been iteratively refined over time. It may still have shortcomings or rough edges; if needed, please fork it and adapt it yourself.
@bahayonghangdrawio-skills is a Claude Code plugin with 2 hand-picked skills, indexed on Flowy in the Image Generation category. Install it with the command on its page. It includes drawio-academic-skills, drawio. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it