drawio-mcp-server

Enable AI to create and edit diagrams in Draw.io via the MCP protocol.

MCPDesignOpen source

View source →

Type: MCP
Transport: stdio
Open source: Yes
GitHub Stars: ★ 1.3k
Source: mcp-github
Repository: github.com/lgazo/drawio-mcp-server

Overview

The Draw.io MCP server provides AI agents with diagramming capabilities, supporting creation, reading, updating, and deletion of diagram elements through MCP tools. This allows AI assistants to automatically generate architecture diagrams, flowcharts, and visual documentation. The service offers two usage modes: built-in editor (accessible directly in the browser) and browser extension (integrated with Draw.io in the browser). It supports multi-document and multi-page operations and enables importing/exporting diagrams in XML, SVG, or PNG formats.

Capabilities

▪Create and edit diagrams
▪Manage multiple documents and pages
▪Import/export diagrams
▪Embed Mermaid diagrams
▪Control edge geometry
▪Handle parent-child relationships

Use cases

Automated generation of architecture diagramsDrawing flowchartsCreating event-driven architecture diagramsGenerating CRUD API diagrams

Setup

Requires: Node.jsMCP客户端

npx -y drawio-mcp-server --editor

This information was compiled by AI from public sources and may contain inaccuracies — please refer to the source.

FAQ

How do I configure the MCP client?

Refer to the detailed configuration instructions in the README.

Is the browser extension supported?

Yes, the drawio-mcp-extension needs to be installed.

Related skills

material-3-skill

Material Design 3 skills, supporting over 30 components, design tokens, themes, and responsive layouts.

Agent Skillmaterial designui

xhs-visual-director-skill

Visual director for Xiaohongshu image and text planning, offering multi-page structure and visual solutions.

drawio-skill

Generate draw.io diagrams from natural language, supporting multiple presets and export formats.

ui-ux-pro-max-skill-cn

Professional-grade UI/UX design intelligence for AI coding assistants.

logo-generator-skill

Professional SVG logo generator with multiple design variants and presentation backgrounds.

claude-skill-aso-appstore-screenshots

Generate high-quality App Store screenshots to boost app download rates.