drawio

Generate .drawio diagram files and embed them in MkDocs documentation.

6|2|Updated Apr 5, 2026
One-click install
npx skills add https://github.com/i-standard1/yamasaki --skill drawio-i-standard1
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: drawio
Source: https://github.com/i-standard1/yamasaki/tree/main/.claude/skills/drawio
Command: npx skills add https://github.com/i-standard1/yamasaki --skill drawio-i-standard1

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Diagram-heavy documentation often requires manual diagram creation and embedding; this skill provides a streamlined way to generate and embed draw.io diagrams for MkDocs.

Core Features & Use Cases

  • Generate .drawio diagram files for architecture, network, ER, sequence, and class diagrams when diagrams are requested.
  • Embed diagrams in MkDocs docs using the mkdocs-drawio plugin, ensuring proper rendering.
  • Use for complex visuals where Mermaid falls short, improving documentation clarity and consistency.

Quick Start

Generate a draw.io diagram file and embed it into the MkDocs documentation.

Frequently Asked Questions about drawio

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

FAQPage Schema
How do I embed draw.io diagrams in MkDocs documentation?

To embed draw.io diagrams in MkDocs, you generate valid .drawio XML files and use the mkdocs-drawio plugin to ensure proper rendering within your documentation pages.

When should I use draw.io diagrams instead of Mermaid for documentation?

Use draw.io diagrams instead of Mermaid for documentation when you need complex visuals like detailed architecture, network, ER, sequence, or class diagrams that Mermaid falls short on.

Can I automate the creation of .drawio XML files for architecture diagrams?

Yes, you can automate the creation of .drawio XML files for architecture diagrams by generating valid XML content that follows specific naming and embedding conventions for MkDocs integration.

What is the best way to add complex network and ER diagrams to MkDocs?

The best way to add complex network and ER diagrams to MkDocs is by generating .drawio files and embedding them via the mkdocs-drawio plugin, which handles rich visuals smoothly.

Does the mkdocs-drawio plugin support sequence and class diagrams?

Yes, the mkdocs-drawio plugin supports sequence and class diagrams by rendering valid .drawio XML files, allowing you to embed rich visual structures directly into your documentation.