skills.rest
luyangliuable
luyangliuableCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

drawio

Generate Draw.io diagrams from natural language, images, or YAML specifications.

Updated Mar 23, 2026
Search Tags:#design system#flowchart#visualization#diagram generation#drawio#architecture diagram
One-click install
npx skills add https://github.com/luyangliuable/claude-setup --skill drawio-luyangliuable
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: drawio
Source: https://github.com/luyangliuable/claude-setup/tree/main/.agents/skills/drawio
Command: npx skills add https://github.com/luyangliuable/claude-setup --skill drawio-luyangliuable

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires npx, npm, and includes scripts (resource) components.

What problem does it solve?

This Skill turns plain-language ideas, screenshots, or structured specs into professional Draw.io diagrams, removing the friction of manual diagram authoring and repeated styling work.

Core Features & Use Cases

  • Natural-Language Diagram Creation: Build flowcharts, architecture diagrams, sequence diagrams, and academic visuals from simple prompts.
  • Replicate and Edit Workflows: Recreate existing images into editable diagrams and modify diagrams while preserving visual consistency.
  • Design System Styling: Apply theme tokens, semantic shapes, connector styles, and grid-aligned layouts for polished results.
  • Use Case: A product team can describe a login flow, an AWS architecture, or a paper figure and quickly generate a clean, shareable diagram with the right theme and structure.

Quick Start

Ask Claude to create a Draw.io diagram from your description, then refine it by requesting edits or a different theme if needed.

Frequently Asked Questions about drawio

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

FAQPage Schema
How do I generate a flowchart from natural language text?▼

You can generate flowcharts by providing plain-language descriptions, which the tool transforms into professional diagrams using semantic shape mapping, connector typing, and grid-aligned layouts. It processes your text prompt and outputs Draw.io XML for immediate export.

Can I recreate an editable architecture diagram from an existing image?▼

Yes, image replication workflows allow you to recreate existing screenshots into editable architecture diagrams. The tool analyzes the visual structure and generates a corresponding Draw.io diagram while preserving visual consistency for iterative editing.

Does this diagram generation tool require specific dependencies to run?▼

Yes, the diagram generation tool requires npx and npm dependencies to execute its internal scripts. You need these Node.js package management tools installed in your environment to process YAML specifications and generate diagram XML.

What is the best way to style a sequence diagram for a design system?▼

The best way to style sequence diagrams is by applying theme-aware styling and design system tokens. The tool automatically applies semantic shapes, connector styles, and grid-aligned layouts to ensure your diagram matches your visual theme.

How do I edit a diagram while keeping the original visual theme?▼

You can iteratively edit diagrams by requesting changes through natural language prompts. The tool preserves the existing visual consistency by reapplying the established theme tokens and connector styles during the modification process.

Can I use structured YAML specifications to create research figures?▼

Yes, you can create academic research figures from structured YAML specifications. The tool reads the structured data, applies theme-aware styling, and generates grid-aligned Draw.io XML suitable for academic publication visuals.

Related Skills

Explore More Design & Creative Skills→
myaiartist360-makermyaiartist360-maker

clawhub

Search and install agent skills from a public registry via npx.

Community
Basic
OpenElementsLabsOpenElementsLabs

drawio

Generate native .drawio files with embedded mxGraphModel XML.

Official
Intermediate
shekerkammashekerkamma

drawio

Embed editable draw.io diagrams inline in Markdown using viewer.js.

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

diagram-creator

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

Official
Intermediate