skills.rest
akiojin
akiojinCOMMUNITY
Explore all skills by this author →
Website𝕏@akiojinGitHub

drawio

Create and edit draw.io diagrams as XML with shapes, connectors, and PNG export.

8|1|Updated Oct 30, 2025
One-click install
npx skills add https://github.com/akiojin/llm-router --skill drawio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: drawio
Source: https://github.com/akiojin/llm-router/tree/main/.claude/skills/drawio
Command: npx skills add https://github.com/akiojin/llm-router --skill drawio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create and edit draw.io diagrams in XML format to visualize flows, architectures, and sequences without leaving the context.

Core Features & Use Cases

  • Generate XML-based diagrams with mxfile/mxGraphModel structures
  • Define shapes (Rectangle, Rounded Rectangle, Ellipse, Diamond, Text) and connectors
  • Provide styling guidance (fonts, colors) and PNG export notes
  • Practical examples for flowcharts, architectures, and process diagrams

Quick Start

Create a basic diagram XML using the provided template in templates/basic.drawio and customize shapes and connectors.

Frequently Asked Questions about drawio

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

FAQPage Schema
How do I create draw.io diagrams programmatically in XML format?▼

Generate draw.io diagrams as XML by defining mxfile and mxGraphModel structures with mxCell elements for shapes, connectors, and styling. The Skill handles XML creation for flowcharts, architecture diagrams, and sequence diagrams with support for rectangles, rounded rectangles, ellipses, diamonds, text labels, and connector styling.

Can I export draw.io diagrams to PNG from generated XML?▼

Yes, draw.io XML diagrams can be exported to PNG using the draw.io CLI. The Skill provides guidance on PNG export functionality after creating and styling your mxfile structure with shapes and connectors.

What shapes and styling options does draw.io XML support?▼

Draw.io XML supports rectangles, rounded rectangles, ellipses, diamonds, and text shapes with customizable styling including fonts (Noto Sans JP), colors, connectors, and edge styling to create professional diagrams within valid mxGraphModel structures.

How do I add connectors and text labels to draw.io XML diagrams?▼

Define connectors as mxCell edges linking shape cells and add text labels through mxCell elements with text content and styling properties. The Skill manages connector routing, edge styling, and font settings for clear diagram communication.

What's the difference between using draw.io XML versus the GUI editor?▼

Draw.io XML generation lets you create diagrams programmatically without leaving your development context, enabling automation, templating, and integration into workflows. The GUI editor provides interactive editing; XML is better for automated generation and version control.

Do I need programming experience to generate draw.io diagrams with XML?▼

Basic XML structure understanding and familiarity with the mxfile format help, but the Skill provides templates and examples for flowcharts and architecture diagrams to get started. No advanced programming required to customize shapes and connectors.

Related Skills

ssiumhassiumha
9

drawio

Generate non-compressed draw.io mxfile XML diagrams from user prompts.

Community
Advanced
SwimmingLiuSwimmingLiu
1

drawio

Generate editable draw.io diagrams and export them to PNG, SVG, or PDF.

Community
Intermediate
akiojinakiojin
8

drawio

Create and edit draw.io diagrams as XML with shapes, connectors, and PNG export.

Community
Intermediate
walterfanwalterfan
1

Diagram Render Skill

Render PlantUML, Mermaid, and Graphviz code blocks into PNG or SVG images.

Community
Intermediate