Skill detail
drawio
Creates, edits, and exports draw.io diagrams via a YAML-first offline workflow covering architecture, network topologies, flowcharts, UML/ER, and Mermaid/CSV conversion.
Inspect before use
Read the source instructions and check the requirements before you install this skill.
SKILL.md
The saved excerpt is a snapshot from when this skill was listed. The external source remains the complete and most current version.
---
name: drawio
version: "2.8.0"
description: "Create, edit, replicate, import, and export draw.io diagrams with an offline YAML-first workflow: architecture, network topologies, flowcharts, UML/ER, org charts, Mermaid/CSV conversion, existing .drawio bundles, style presets, themes, and non-publication formula diagrams. For publication figures (paper, thesis, IEEE, camera-ready) use drawio-academic-skills instead."
license: MIT
homepage: https://github.com/bahayonghang/drawio-skills
compatibility: "Node 20+ for the YAML/CLI workflow. draw.io Desktop produces the default 300dpi PNG (plus PDF/JPG or embedded .drawio.svg); without it, image exports fall back to a standalone SVG. No MCP server is required for offline authoring; the optional live-refinement backend needs a browser/MCP provider."
platforms: [macos, linux, windows]
metadata:
category: visual-design
tags:
- diagram
- drawio
- architecture
- flowchart
- network-topology
- uml
- mermaid
- csv
- design-system
- math
argument-hint: [diagram-description-or-instruction]
allowed-tools: Read, Write, Bash, AskUserQuestion
---
# Draw.io Base Skill
Create, edit, validate, replicate, import, and export draw.io diagrams through a YAML-first offline workflow. It is the single maintained base for sibling overlays and owns the local CLI, schemas, references, themes, palettes, examples, style presets, and export helpers.
## Scope
Use this base skill for general draw.io work: software/system architecture; network topologies and infrastructure maps; flowcharts, swimlanes, process maps, and org charts; UML class/sequence/state/ER; Mermaid and CSV conversion; structured redraw and non-academic replication; formula-bearing technical diagrams; `.drawio` import, sidecar export, and local validation.
For paper, thesis, IEEE, journal, manuscript, or publication-ready figure requests, route to the sibling `drawio-academic-skills` overlay; the base does not apply academic publication gates. Without the overlay, render the local YAML bundle but report that overlay policy was not applied.
## Runtime Stack
Use the lightest path that satisfies the request:
- **Offline Authoring Path (default)** — the YAML spec generates the final `.drawio` plus the default delivered image, a **300dpi PNG** via draw.io Desktop (standalone SVG fallback).
- **Desktop-Enhanced Export** — 300dpi PNG default, plus PDF/JPG or embedded `.drawio.svg` on explicit request.
- **Live Refinement Backend (optional)** — browser refinement provider only; the offline bundle remains canonical. Provisioned by the tracked `.mcp.json` (pinned `@next-ai-drawio/[email protected]`, fetched over the network by `npx`; see `references/docs/mcp-tools.md`); offline authoring never reads it.
- **Direct XML Exception** — tiny one-off or raw mxGraph handoff when exact XML control is the real requirement.
The optional MCP/live backend is a refinement provider only. Never required for normal authoring, editing, import, replication, or export.
## Task Routing
Choose the route first, then load only that route's references. All paths below live under `references/`; the reusable YAML example catalog is `references/examples/README.md`.
- `create` — new diagram from text, YAML, Mermaid, CSV, or a concise spec → `workflows/create.md`, `docs/design-system/README.md`, `docs/design-system/specification.md`
- `config-import` — declared Terraform, Kubernetes, Compose, SQL DDL, OpenAPI, GitHub Actions, or GitLab CI architecture → `docs/config-importers.md`, `docs/canonical-graph-projection.md`
- `live-drift` — compare explicit Terraform state/plan JSON, Docker inspect JSON, or Kubernetes live JSON against a declared projection without capture → `docs/live-snapshots-drift.md`, `docs/canonical-graph-projection.md`, `workflows/visual-review.md`
- `code-import` — Python module/class, JavaScript/TypeScript ESM, Go package, or Rust module relationships from a local project directory → `docs/code-importers.md`, `dRead the full source on GitHub (opens external page)