drawio

Generate pixel-perfect diagrams from a stencil library using MXGraph XML.

38|3|Updated May 7, 2026
One-click install
npx skills add https://github.com/Chanw-research/claude-code-paper-writing --skill drawio-chanw-research
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: drawio
Source: https://github.com/Chanw-research/claude-code-paper-writing/tree/main/skills/figures/drawio
Command: npx skills add https://github.com/Chanw-research/claude-code-paper-writing --skill drawio-chanw-research

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create precise, pixel-perfect diagrams quickly using a comprehensive stencil library and the drawio XML format.

Core Features & Use Cases

  • Supports architecture diagrams, network topology, and other complex visuals requiring pixel-perfect layouts and vendor icons.
  • Enables deterministic diagram generation via structured instructions and MXGraph XML.
  • Facilitates sharing and exporting diagrams for documentation and collaboration.

Quick Start

Generate a diagram by applying the included drawio SKILL to compose a chart from the stencils folder.

Frequently Asked Questions about drawio

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

FAQPage Schema
How do I generate pixel-perfect architecture diagrams automatically?

To generate pixel-perfect architecture diagrams automatically, define structured instructions and leverage the MXGraph XML format to deterministically compose visuals from a large stencil library. This enforces deterministic diagram generation for precise layouts and vendor icons.

Can I create network topology diagrams using drawio XML?

Yes, you can create network topology diagrams using drawio XML by applying structured instructions to the MXGraph format. This approach enforces deterministic diagram generation, ensuring complex network visuals maintain accurate pixel-perfect layouts and vendor icons.

What is the best way to automate diagram generation for engineering documentation?

The best way to automate diagram generation for engineering documentation is to use MXGraph XML combined with a comprehensive stencil library. This method enforces deterministic diagram generation, producing complex, pixel-perfect visuals suitable for sharing and exporting.

Does deterministic diagram generation support UML-like diagrams and complex visuals?

Deterministic diagram generation fully supports UML-like diagrams and complex visuals by leveraging the MXGraph XML format and frontmatter metadata. This approach applies across engineering and research contexts, ensuring pixel-perfect layouts using an extensive stencil library.

How do I use stencils to compose a chart in drawio?

To use stencils to compose a chart in drawio, apply the structured instructions to map visual elements into the MXGraph XML format. This process leverages the 8900+ stencils assets and frontmatter metadata to enforce deterministic, pixel-perfect diagram generation.