drawio-skill

Generate draw.io XML diagrams from natural language and export to PNG, SVG, PDF, or JPG.

Updated Aug 28, 2026
One-click install
npx skills add https://github.com/miyake-san/sogo-agent-platform --skill drawio-skill-miyake-san
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: drawio-skill
Source: https://github.com/miyake-san/sogo-agent-platform/tree/main/skills/experimental/drawio-skill
Command: npx skills add https://github.com/miyake-san/sogo-agent-platform --skill drawio-skill-miyake-san

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve? Creating professional diagrams manually in draw.io is slow, and asking an LLM directly produces inconsistent layouts with overlapping shapes and crossing edges. This Skill turns natural language descriptions into well-structured .drawio files with enforced layout rules, then exports them locally via the draw.io desktop CLI. ## Core Features & Use Cases - 6 diagram type presets: ERD, UML Class, Sequence, Architecture, ML/Deep Learning, and Flowchart, each with predefined shapes, styles, and layout conventions. - Self-check and iterative refinement: reads the exported PNG with a vision model, auto-fixes 6 issue types (overlaps, clipped labels, stacked edges), then supports a 5-round targeted-edit review loop. - Production layout rules: grid-aligned coordinates, complexity-scaled spacing, routing corridors, a 7-color semantic palette, and animated connectors for data-flow diagrams. - Use Case: Describe a microservices e-commerce architecture with API Gateway, Kafka, and per-service databases, and receive an exported PNG plus an editable .drawio source file. ## Quick Start Ask the agent to create a microservices architecture diagram with an API gateway, auth and order services, Kafka, and separate databases, exported as a PNG.

Frequently Asked Questions about drawio-skill

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

FAQPage Schema
How do I generate a draw.io diagram from a text description?

Describe the diagram in natural language, including the type (architecture, ERD, UML, sequence, flowchart, or ML model) and its components. The skill writes a .drawio XML file and exports it to PNG using the draw.io desktop CLI, then iterates on your feedback.

What diagram types does this draw.io skill support?

It provides 6 presets: ERD, UML Class, Sequence, Architecture, ML/Deep Learning, and Flowchart. Each preset defines shapes, styles, colors, and layout conventions, including tensor shape annotations for neural network diagrams.

Does this skill work without the draw.io desktop app installed?

Partially. Without the desktop CLI it generates the .drawio XML and, if python3 is available, a diagrams.net URL for browser viewing and editing. PNG, SVG, PDF, and JPG export requires the draw.io desktop app.

Why does draw.io export fail on a Linux server?

Headless Linux servers lack a display, which the draw.io CLI needs for export. Install xvfb and prefix commands with xvfb-run -a, for example xvfb-run -a drawio -x -f png -o out.png input.drawio.

Which AI platforms support this drawio skill?

It works with Claude Code, Opencode, OpenClaw/ClawHub, Hermes Agent, and OpenAI Codex, using the standard SKILL.md format plus an agents/openai.yaml sidecar for Codex. Installation is a single git clone into each platform's skills directory.

What are the limitations of LLM-generated draw.io diagrams?

The self-check step requires a vision-capable model, otherwise it is skipped. Cloud icons cover only basic AWS resources, and after 5 review iterations the skill recommends manual fine-tuning in the draw.io desktop app.