skills.rest
bahayonghang
bahayonghangCOMMUNITY
Explore all skills by this author →
GitHub

drawio

Convert natural language prompts and YAML specs into Draw.io XML.

16|1|Updated Jan 2, 2026
Search Tags:#automation#workflow#design-system#diagram#drawio#semantic-types#typed-connectors
One-click install
npx skills add https://github.com/bahayonghang/my-claude-code-settings --skill drawio-bahayonghang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: drawio
Source: https://github.com/bahayonghang/my-claude-code-settings/tree/main/skills/drawio
Command: npx skills add https://github.com/bahayonghang/my-claude-code-settings --skill drawio-bahayonghang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @next-ai-drawio/mcp-server, and includes scripts (resource) components.

What problem does it solve?

The Draw.io skill automates diagram generation by applying a unified Design System to create consistent, multi-domain diagrams with real-time browser previews.

Core Features & Use Cases

  • Design-system aware diagram generation with semantic nodes and typed connectors
  • Workflow support: prompt-based, YAML-spec driven, and TUI-driven diagram creation
  • Real-time browser preview via MCP server for immediate validation
  • Use Case: convert a natural-language prompt into a ready-to-edit architecture diagram

Quick Start

  • Start the interactive TUI: python3 install_tui.py
  • Or install and run all skills: python3 install.py install-all
  • Launch the diagram editor in your browser and begin diagram creation

Frequently Asked Questions about drawio

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

FAQPage Schema
How do I generate Draw.io diagrams from natural language prompts?▼

This skill converts natural language prompts and YAML specifications into Draw.io XML using a design-system-driven schema. It supports multiple workflows, including prompt-to-diagram, structured YAML specs, and a TUI-based creation flow with real-time previews.

How does semantic typing and 8px grid alignment work for Draw.io diagrams?▼

Semantic typing and 8px grid alignment are applied through a unified Design System that standardizes multi-domain diagrams. This ensures theme-aware styling and consistent visual structure across all generated Draw.io XML outputs.

Can I use YAML specifications to create Draw.io architecture diagrams?▼

Yes, you can use structured YAML specifications to drive diagram creation alongside natural language prompts. The YAML specs are processed to generate Draw.io-compatible XML with typed connectors and semantic nodes.

Does the Draw.io diagram generator support real-time browser previews?▼

Yes, the tool provides real-time browser previews via an MCP server for immediate validation. This allows you to view and validate your diagram generation in the browser as you create it through the TUI-driven workflow.

Do I need the MCP server dependency to run the TUI-based diagram creation flow?▼

Yes, the @next-ai-drawio/mcp-server dependency is required to enable the real-time browser preview functionality. You can start the interactive TUI by running python3 install_tui.py after setting up the environment.

What is the best way to maintain consistent styling across multiple Draw.io diagrams?▼

The best way to maintain consistency is using a design-system-driven schema that applies theme-aware styling and semantic typing. This unified Design System ensures all multi-domain diagrams adhere to the same visual standards and typed connectors.

Related Skills

Explore More Design & Creative Skills→
dgethingsdgethings

drawio-diagram

Generate native .drawio files and optional PNG/SVG/PDF exports with embedded XML from discovery data or templates.

Community
Advanced
d-o-hubd-o-hub
4

drawio

Create draw.io architecture diagrams with inline mermaid previews and .drawio XML output.

Community
Intermediate
edteedte
11

mydrawio

Create and validate Draw.io diagrams as .drawio or .xml files.

Community
Intermediate
Avihai-HAvihai-H

drawio

Generate Azure architecture diagrams in .drawio format via Draw.io MCP server.

Community
Advanced