How do I install the Drawio skill?

Run npx skillmds@latest add sordi-ai/drawio in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Drawio skill do?

Apply when creating or reviewing architecture diagrams, Mermaid diagrams, or draw.io files. It is listed under Coding & Dev Tools on SkillMD.

Is Drawio safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Drawio?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Drawio free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published Drawio?

sordi-ai (@sordi-ai) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Drawio by sordi-ai — Agent Skill

Name: Drawio
Author: sordi-ai

File contents

Sub-Skill: Diagrams (draw.io / Mermaid)

Purpose: Ensure diagrams are version-controlled as source, rendered consistently, and kept in sync with the system they describe.

Rules

Source Control

Commit source, not just exports. Always commit diagram source files (.drawio, .mmd, .puml) alongside or instead of rendered image exports. Reference: ERR-2026-027
No binary-only diagrams. Never commit only a PNG or SVG export without the editable source; reviewers cannot diff or modify a raster image.
One source file per diagram. Use a single canonical source file per diagram; avoid duplicating the same diagram in multiple formats.

Format Selection

Prefer diagram-as-code. Prefer Mermaid or PlantUML over draw.io XML when the diagram fits a supported diagram type; text diffs are reviewable.
Match diagram type to content. Use sequenceDiagram for request flows, flowchart for decision logic, C4Context/C4Container for architecture, erDiagram for data models.
Set layout direction explicitly. Always declare layout direction (LR, TD) in Mermaid flowcharts; never rely on the default, which varies by renderer.

Rendering Pipeline

Document the render command. Always include the render command or CI step in the repo README or Makefile so any contributor can regenerate exports.
Regenerate exports in CI. Ensure CI regenerates diagram exports from source and fails if the committed export differs from the generated one.
Pin renderer version. Always pin the Mermaid CLI or draw.io CLI version in CI to prevent silent rendering changes across upgrades.

Quality & Consistency

Use consistent node naming. Always use the same label for the same system component across all diagrams in the repo; divergent names cause confusion.
Add alt text to exported images. Always add descriptive alt text to diagram images embedded in documentation for accessibility.
Review diagrams in PRs. Before merging, verify that any diagram change accurately reflects the system change described in the PR.

---name: drawiodescription: Apply when creating or reviewing architecture diagrams, Mermaid diagrams, or draw.io files.license: MIT---# Sub-Skill: Diagrams (draw.io / Mermaid)**Purpose:** Ensure diagrams are version-controlled as source, rendered consistently, and kept in sync with the system they describe.---## Rules### Source Control1. **Commit source, not just exports.** Always commit diagram source files (`.drawio`, `.mmd`, `.puml`) alongside or instead of rendered image exports. Reference: ERR-2026-0272. **No binary-only diagrams.** Never commit only a PNG or SVG export without the editable source; reviewers cannot diff or modify a raster image.3. **One source file per diagram.** Use a single canonical source file per diagram; avoid duplicating the same diagram in multiple formats.### Format Selection4. **Prefer diagram-as-code.** Prefer Mermaid or PlantUML over draw.io XML when the diagram fits a supported diagram type; text diffs are reviewable.5. **Match diagram type to content.** Use `sequenceDiagram` for request flows, `flowchart` for decision logic, `C4Context`/`C4Container` for architecture, `erDiagram` for data models.6. **Set layout direction explicitly.** Always declare layout direction (`LR`, `TD`) in Mermaid flowcharts; never rely on the default, which varies by renderer.### Rendering Pipeline7. **Document the render command.** Always include the render command or CI step in the repo README or Makefile so any contributor can regenerate exports.8. **Regenerate exports in CI.** Ensure CI regenerates diagram exports from source and fails if the committed export differs from the generated one.9. **Pin renderer version.** Always pin the Mermaid CLI or draw.io CLI version in CI to prevent silent rendering changes across upgrades.### Quality & Consistency10. **Use consistent node naming.** Always use the same label for the same system component across all diagrams in the repo; divergent names cause confusion.11. **Add alt text to exported images.** Always add descriptive alt text to diagram images embedded in documentation for accessibility.12. **Review diagrams in PRs.** Before merging, verify that any diagram change accurately reflects the system change described in the PR.---## See also- `skills/svg-check/SKILL.md`- `skills/error-log/SKILL.md`

Frequently asked questions

Drawio