skills.rest
miyake-san
miyake-sanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

drawio

Generate, edit, and export draw.io diagrams from YAML specifications with themed design systems.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Creating professional diagrams manually in draw.io is slow and hard to reproduce, especially for academic papers and engineering documentation that demand consistent styling, formula typesetting, and editable source files. This Skill turns text descriptions, Mermaid, CSV, or existing .drawio files into validated, theme-consistent diagrams through a deterministic YAML-first workflow. ## Core Features & Use Cases - YAML-first diagram generation: Author diagrams as YAML specs and render them to .drawio, SVG, PNG, PDF, or JPG via a CLI, with canonical .spec.yaml and .arch.json sidecars for offline editing. - Academic and engineering profiles: Built-in academic-paper and engineering-review profiles enforce figure typing (architecture, roadmap, workflow), grayscale-safe palettes, IEEE-style themes, and edge-quality validation. - Replication and import: Recreate uploaded images or import existing .drawio files (including compressed ones) into editable YAML bundles while preserving source color palettes. - Use Case: A researcher needs an IEEE-style campus network figure for a paper. They describe the layers, and the Skill produces a grayscale-safe .drawio bundle plus SVG with meta.figureType set to architecture, ready for journal submission. ## Quick Start Ask the agent to create a horizontal tech-blue login flowchart with Start, Login Form, Validate, Success, and Error nodes using the drawio skill.

Frequently Asked Questions about drawio

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

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

Describe the diagram type, nodes, and connections, and the Skill generates a YAML spec, validates it, and renders it to .drawio or SVG using the CLI. Simple requests with explicit type, theme, and layout use a fast path that skips consultation.

How do I convert Mermaid or CSV to drawio format?▼

Pass the Mermaid or CSV content as input and the Skill normalizes it into the canonical YAML spec before rendering. The CLI also accepts --input-format mermaid or csv directly for scripted conversions.

Does the drawio skill work offline without a browser or MCP server?▼

Yes, offline generation of .drawio files, standalone SVG, and YAML sidecars works entirely locally with Node.js. The optional MCP backend is only needed for live browser-based editing, and draw.io Desktop is only required for PNG, PDF, or JPG export.

Can I include LaTeX formulas in draw.io diagram labels?▼

Yes, the Skill supports LaTeX, AsciiMath, and MathJax in node labels using official delimiters: $$...$$ for block formulas, \(...\) for inline math, and backticks for AsciiMath. It does not support $...$ or \[...\] delimiters.

How do I edit an existing .drawio file without a live session?▼

Import the .drawio file into a YAML bundle with the CLI using --input-format drawio --export-spec --write-sidecars, edit the .spec.yaml, then re-render. Compressed .drawio files are decoded automatically during import.

Why is my standalone SVG export lower quality than expected?▼

Standalone SVG export renders edges as straight lines between node centers and is preview-quality only. For publication-grade SVG with orthogonal routing, export via draw.io Desktop using --use-desktop or refine the .drawio file manually.

Related Skills

Explore More Design & Creative Skills→
HaykTarkhanyanHaykTarkhanyan

markdown-mermaid-writing

Embed Mermaid diagrams in Markdown for version-controlled technical documentation.

Community
Advanced
arih04xarih04x
6

office-figure

Generate editable research figures for Word, PowerPoint, and LaTeX from draw.io or TikZ sources.

Community
Advanced
product-on-purposeproduct-on-purpose
640

utility-mermaid-diagrams

Create syntactically valid mermaid diagrams for product documents across 15 diagram types.

Official
Intermediate
obispobrunoobispobruno
1

drawio

Generate draw.io diagrams from Mermaid or XML and export to PNG, SVG, PDF, or browser URLs.

Community
Advanced