skills.rest
bahayonghang
bahayonghangCOMMUNITY
Explore all skills by this author →
GitHub

drawio

Create, edit, and export draw.io diagrams through an offline YAML-first CLI workflow.

284|17|Updated Dec 26, 2025
Search Tags:#architecture#mermaid#yaml#flowchart#diagram#network-topology#drawio
One-click install
npx skills add https://github.com/bahayonghang/drawio-skills --skill drawio-bahayonghang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: drawio
Source: https://github.com/bahayonghang/drawio-skills/tree/main/skills/drawio
Command: npx skills add https://github.com/bahayonghang/drawio-skills --skill drawio-bahayonghang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires js-yaml, elkjs, @next-ai-drawio/mcp-server, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Creating and maintaining draw.io diagrams by hand is slow and hard to reproduce. This Skill turns natural language, YAML, Mermaid, CSV, config files, or existing .drawio files into validated, editable diagram bundles with repeatable local rendering and export. ## Core Features & Use Cases - YAML-first diagram authoring: Normalize text, Mermaid, CSV, Terraform, Kubernetes, SQL, OpenAPI, CI workflows, or code imports into a canonical YAML spec, then render .drawio plus sidecars with validation. - Themes, palettes, and style presets: Apply 7 built-in themes, 15 metadata-backed palettes with colorblind/grayscale safety checks, and reusable style presets. - Desktop-aware export: Produce 300dpi PNG, PDF, JPG, or embedded SVG via draw.io Desktop, with automatic standalone SVG fallback when Desktop is unavailable. - Use Case: Ask for an AWS VPC topology with labeled subnets; the Skill generates the YAML spec, validates edge routing and layout, and delivers an editable .drawio file plus a 300dpi PNG. ## Quick Start Ask the assistant to create a network topology diagram with a firewall, core switch, and two servers using the drawio skill and export it as a PNG.

Frequently Asked Questions about drawio

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

FAQPage Schema
How do I create a draw.io diagram from text or YAML?▼

Write or generate a YAML spec describing nodes, edges, theme, and layout, then run the CLI with node scripts/cli.js input.yaml output.drawio --validate. The same command exports PNG, SVG, PDF, or JPG depending on the output file extension.

How do I convert Mermaid or CSV to a draw.io diagram?▼

Pass the file with --input-format mermaid or --input-format csv to the CLI. The input is normalized into the canonical YAML spec first, then rendered and validated like any other diagram.

Does this skill require an MCP server or internet access?▼

No. The YAML/CLI workflow is fully offline, including the shape and AI icon catalogs. The next-ai MCP server is an optional live browser refinement provider only and is never required for authoring, editing, import, or export.

What happens if draw.io Desktop is not installed for PNG export?▼

The CLI falls back to a standalone SVG with a stderr warning and still delivers the .drawio file. PNG, PDF, and JPG exports require draw.io Desktop, which can be located via PATH or the DRAWIO_CMD environment variable.

Can I import and edit an existing .drawio file?▼

Yes. Run the CLI with --input-format drawio --export-spec --write-sidecars to generate an editable .spec.yaml and .arch.json bundle, edit the YAML, then regenerate the diagram. Multi-page files are supported with --all-pages.

When should I use the academic overlay instead of this base skill?▼

Use the drawio-academic-skills overlay for paper, thesis, IEEE, or publication-ready figures, since it adds venue, caption, and publication gates. The base skill handles general engineering and non-publication diagrams only.

Related Skills

Explore More Design & Creative Skills→
praxstackpraxstack
1

concept-cartographer

Convert structured notes into Mermaid diagrams for concept maps and process flows.

Community
Intermediate
githubgithub
38.5k

drawio

Generate draw.io diagrams as .drawio files and export them to PNG, SVG, or PDF.

Official
Intermediate
nxZhainxZhai

paper-illustration

Generate academic architecture and concept diagrams styled for CVPR/ICLR/NeurIPS via Codex and Gemini workflows.

Community
Advanced
afonsoftafonsoft

drawio-architecture

Generate and edit draw.io architecture diagrams via MCP tools or native XML authoring.

Community
Advanced