Sandbox
@Menghuan1918/drawio2go

DrawIO editor with AI and MCP support

DrawIO2Go is a DrawIO editor that adds AI-assisted diagram creation, canvas context selection, and version management. It can run as a web app or as an Electron desktop app, and it exposes an MCP service for connecting canvas content to other applications.

231 stars39 forksTypeScriptUpdated 8mo ago
Who it's for

Builders who want to edit diagrams with an agent and share canvas context with other tools.

What it delivers

You can build and revise diagrams with AI help instead of switching between a diagram editor and your agent.

What it does

AI-powered diagram editing

Lets you generate and modify DrawIO diagrams with LLM assistance, including style and knowledge settings.

Canvas context capture

Can pass selected canvas elements into the conversation so the agent sees the part you mean.

Version management

Supports manual versions and AI-created versions, plus comparison and rollback between versions.

MCP service

Starts an MCP service for canvas content version management so other apps can connect to it.

Multi-page editing

Supports editing multiple DrawIO pages and limiting changes to the page you want.

Custom DrawIO canvas

Lets you change the default theme and point the editor at a self-hosted DrawIO URL.

How to get it

  1. 1Then run the following commands
    # Clone the repository
    git clone https://github.com/your-username/drawio2go.git
    cd drawio2go
    
    # Install dependencies
    npm install
  2. 2Web Mode (Browser)
    npm run dev

README

DrawIO2Go

AI-Powered, Human-AI Collaboration

Electron Nextjs React Windows MacOS Linux

简体中文 | English

Deploy with Vercel


A modern DrawIO editor application dedicated to building better human-AI collaborative modeling tools with AI assistance. User-centered, enhancing human-machine efficiency, exploring how to best complement each other with AI. Provides out-of-the-box applications (Windows/Linux/Mac OS) or deployment as a web page.

https://github.com/user-attachments/assets/40fe5c3b-0f37-4fbf-b6ac-60b8734f2d14

NEW: Canvas Enhancement

After inserting images, it will automatically check if connection lines overlap with elements, avoiding AI connection errors


NEW: LLM Enhancement

Specify drawing style/colors and even add DrawIO element knowledge*


NEW: Custom DrawIO Canvas

Fully customize DrawIO canvas, modify default appearance theme / switch to self-hosted URL

MCP

Version Management

Manually create versions / AI automatically creates versions

Version Control

AI-Powered Modification

XPath-based precise deletion, modification, and query tool, effective and token-saving**

Demo

MCP Service

Start an MCP service with canvas content version management to connect with other applications

MCP

Multi-Page Editing

Supports multi-page drawio editing, let AI only edit the parts you want to modify

pages

Version Comparison

Easily compare / rollback differences between different modified versions

Comparison Page

Canvas Context

No longer need to describe "the few xxx on the far right", simply drag-select with the mouse, the conversation will automatically parse canvas elements into context***

Context

* Support specifying default theme/colors/knowledge and adding custom knowledge in settings
** Currently LLM API supports Openai/Deepseek/Anthropic/Gemini formats
*** Limited by Web API restrictions, mouse selection perception is not available on the web. But Web still has basic compressed canvas content context injection functionality

Here are some actual demos and their prompts:

DeepSeek-Chat Modern Style*

Draw a detailed standard Agent flowchart, including MCP/Multi-Agent concepts, in English


DeepSeek-Chat Academic Style*

Draw a detailed standard Agent flowchart, including MCP/Multi-Agent concepts, in English


DeepSeek-Chat Minimalist Style*

Draw a detailed standard Agent flowchart, including MCP/Multi-Agent concepts, in English


* Using official API, default color configuration, deepseek-chat v3.2, non-thinking, temperature 0.3

U-net Architecture Diagram

glm-4.6 - Draw a U-net network

unet

Image to DrawIO

claude-sonnet-4.5 - Pass in an image generated by gemini-3-pro-image and ask it to replicate

image

UML Architecture Diagram

glm-4.7 - Draw a classic front-end and back-end web application UML architecture diagram

UML

Pure Element Drawing

gemini-3-pro-preview - Draw a laptop

Demo

Quick Start

Using Electron APP

Go to Releases to download and install the latest version

Deploy as Web Application

Requirements:

  • Node.js 22.x or higher
  • npm

Then run the following commands

# Clone the repository
git clone https://github.com/your-username/drawio2go.git
cd drawio2go

# Install dependencies
npm install

Web Mode (Browser):

npm run dev

Open http://localhost:3000 in your browser

[!IMPORTANT] Please note that multi-user web deployment is not yet adapted (although theoretically there should be no issues, it has not been tested)

Known Issues

  • In web version, conversations may not be cancellable
  • Some specific errors from drawio tools cannot be captured currently
  • Conversation saving currently has some issues, may cause historical conversation loading exceptions
  • Some UI display issues exist

Upcoming Features

  • Support for passing selected elements from canvas to AI in Electron
  • Multi-page drawio support
  • Full image/file conversation support
  • Support for custom DrawIO widget URL
  • Direct export to png/svg
  • Add more LLM API support
  • Support for exporting projects to files
  • Vision render review
  • Support headless mode

Project Structure

drawio2go/
├── app/                    # Next.js App Router
│   ├── components/         # React components
│   │   ├── chat/          # AI chat module
│   │   ├── settings/      # Settings panels
│   │   ├── version/       # Version management
│   │   └── toast/         # Notification system
│   ├── lib/               # Utilities & services
│   │   └── storage/       # Unified storage layer
│   ├── hooks/             # React hooks
│   ├── i18n/              # Internationalization
│   ├── api/               # API routes
│   └── styles/            # CSS modules
├── electron/              # Electron main process
└── server.js              # Next.js custom HTTP server

Development Guide

Common Commands

npm run dev          # Start development server
npm run build        # Build for production
npm run lint         # Run ESLint + TypeScript check + complexity check
npm run test         # Run tests
npm run format       # Format code with Prettier

Production Build

# Build Next.js application
npm run build

# Build Electron installer (outputs to dist/)
npm run electron:build

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting a PR.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

This project is licensed under the MIT License

Acknowledgments

Files in the repo

Repository payload24 top-level entries
  • .claude
  • .github
  • .vscode
  • app
  • electron
  • public
  • scripts
  • types
  • .gitignore
  • .prettierignore
  • AGENTS.md
  • eslint.config.mjs
  • LICENSE
  • next-env.d.ts
  • next.config.mjs
  • package-lock.json
  • package.json
  • postcss.config.mjs
  • README_zh-CN.md
  • README.md
  • server.js
  • tsconfig.json
  • vercel.json
  • vitest.config.ts

Discussion (0)

Ask about usage, or say what you built with it

Sign in to join the discussion.

No comments yet. Be the first to say what this is good for.

More other

🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.

95k
HKUDS/
Vibe-Trading

"Vibe-Trading: Your Personal Trading Agent"

33k

Your Personal AI Assistant; easy to install, deploy on your own machine or on the cloud; supports multiple chat apps with easily extensible capabilities.

35k

Open-source Claude Design alternative. One-click import your Claude Code / Codex API key. Prompt → prototype / slides / PDF. Multi-model (Claude, GPT, Gemini, Kimi, GLM, Ollama). BYOK, local-first, MIT.

7.9k