Do I need to install Draw.io Desktop to use this skill?

No, you can use the hosted endpoint or the community server with its built-in web editor to manage diagrams without installing the desktop application.

Does this support Mermaid.js syntax?

Yes, the official @drawio/mcp server supports Mermaid.js as an input format for generating diagrams.

Can Claude edit existing diagrams or only create new ones?

Claude can edit existing diagrams by reading the structure and using specific MCP tools to update shapes, labels, and connections programmatically.

What is 'Vibe Diagramming'?

Vibe Diagramming refers to an iterative, conversational workflow where you describe changes to an AI, which then modifies specific diagram elements in real-time.

Are the exported SVGs editable later?

Yes, if exported with the --embed-diagram flag, the SVGs contain the original diagram data for full round-trip editing in draw.io.

Draw.io Diagramming for Claude

Name: Draw.io Diagramming for Claude
Author: markus41

bymarkus41

•

Design Tools

Integrates draw.io with Claude to programmatically create, edit, and manage professional diagrams directly within your AI development workflow.

This skill connects Claude to the draw.io ecosystem using the Model Context Protocol (MCP), enabling AI-driven diagramming and visual documentation. It supports both the official jgraph server for hosted rendering and the community-built server for granular CRUD operations on shapes, edges, and layers. Whether you are generating architecture diagrams from code analysis or performing iterative 'vibe diagramming' with a built-in web editor, this integration bridges the gap between natural language descriptions and professional-grade visual assets across CLI, desktop, and web environments.

Key Features

01Interactive inline rendering of diagrams directly within Claude and AI chat interfaces

0211 GitHub stars

03Flexible deployment options including hosted endpoints and local CLI-based servers

04Built-in web-based editor for real-time manual refinements alongside AI generation

05Programmatic diagram creation and CRUD operations for shapes, edges, and layers

06Multi-format export capabilities including editable SVG, PNG, PDF, and native .drawio files

Use Cases

01Automatically generating system architecture diagrams from source code analysis

02Maintaining documentation-as-code by syncing visual assets with repository changes

03Iterative visual brainstorming and flow-charting using natural language instructions

Key Features

01Interactive inline rendering of diagrams directly within Claude and AI chat interfaces

0211 GitHub stars

03Flexible deployment options including hosted endpoints and local CLI-based servers

04Built-in web-based editor for real-time manual refinements alongside AI generation

05Programmatic diagram creation and CRUD operations for shapes, edges, and layers

06Multi-format export capabilities including editable SVG, PNG, PDF, and native .drawio files

Use Cases

01Automatically generating system architecture diagrams from source code analysis

02Maintaining documentation-as-code by syncing visual assets with repository changes

03Iterative visual brainstorming and flow-charting using natural language instructions