skills.rest
rinbarpen
rinbarpenCOMMUNITY
Explore all skills by this author →
GitHub

drawio

Generate interactive draw.io diagrams from natural-language descriptions with live browser preview.

2|Updated Jan 18, 2026
Search Tags:#automation#architecture#flowchart#sequence#diagram#drawio#live-preview
One-click install
npx skills add https://github.com/rinbarpen/vibe-coding --skill drawio-rinbarpen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: drawio
Source: https://github.com/rinbarpen/vibe-coding/tree/main/skills/chinese-patent/drawio
Command: npx skills add https://github.com/rinbarpen/vibe-coding --skill drawio-rinbarpen

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill enables Claude Code to generate, edit, and manage draw.io diagrams from natural language, delivering interactive diagrams with real-time browser previews.

Core Features & Use Cases

  • Real-time Preview: Diagrams render in your browser as you describe them.
  • Version History & Export: Maintain diagram history and export as .drawio for easy sharing and editing.
  • Diagram Types & Cloud Icons: Create flowcharts, architecture diagrams, sequence diagrams, and cloud infrastructure visuals using official AWS, GCP, and Azure icons.
  • Structured Extraction: Use A–H format prompts to deterministically generate draw.io XML ready for import.

Quick Start

Start by asking Claude to generate a diagram, e.g., "Create an AWS-based serverless architecture diagram," which will open a browser with the draw.io editor and create the initial diagram.

Frequently Asked Questions about drawio

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

FAQPage Schema
How do I generate a draw.io diagram from natural language?▼

Generating draw.io diagrams from natural language involves describing your architecture or flowchart, which triggers structured A–H extraction to produce XML and renders an interactive browser preview.

Can I create AWS, GCP, and Azure architecture diagrams with official cloud icons?▼

Yes, you can create cloud infrastructure visuals using official AWS, GCP, and Azure icons by describing your architecture, which generates the diagram with the correct official cloud provider icons.

How do I preview and edit flowcharts in real-time?▼

Real-time flowchart preview opens a browser-based draw.io editor that renders diagrams as you describe them and maintains version history for ongoing edits.

Does draw.io diagram generation support math typesetting in labels?▼

Yes, draw.io diagram generation supports math typesetting in labels, allowing mathematical notation directly within sequence and architecture diagrams.

Do I need an MCP server to automate draw.io diagram creation?▼

Yes, you need the embedded MCP server for deterministic diagram generation, which ensures natural language input reliably converts into structured draw.io XML.

How do I export draw.io diagrams for sharing and editing?▼

You can export diagrams as .drawio files for easy sharing and editing, while the skill maintains diagram history to manage versions throughout the creation process.

Related Skills

Explore More Design & Creative Skills→
compozycompozy
2.5k

drawio

Generate native draw.io diagrams as editable .drawio files from natural language prompts.

Official
Advanced
cc01cccc01cc
4

drawio

Generate draw.io diagrams as native .drawio files with optional PNG, SVG, or PDF exports.

Community
Basic
GitnappGitnapp

architecture-diagram

Generate self-contained HTML and SVG architecture diagrams for software systems.

Community
Intermediate
claude-office-skillsclaude-office-skills
368

diagram-creator

Generate flowcharts, sequence diagrams, and architecture diagrams from Mermaid and PlantUML text.

Official
Intermediate