DrawIO2Go

AI-Powered, Human-AI Collaboration

简体中文 | English

---

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.

Custom.Recording.2025-12-24.14-28-53.1.mp4

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
Version Management Manually create versions / AI automatically creates versions	AI-Powered Modification XPath-based precise deletion, modification, and query tool, effective and token-saving**	MCP Service Start an MCP service with canvas content version management to connect with other applications
Multi-Page Editing Supports multi-page drawio editing, let AI only edit the parts you want to modify	Version Comparison Easily compare / rollback differences between different modified versions	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***

_{* 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	Image to DrawIO claude-sonnet-4.5 - Pass in an image generated by gemini-3-pro-image and ask it to replicate
UML Architecture Diagram glm-4.7 - Draw a classic front-end and back-end web application UML architecture diagram	Pure Element Drawing gemini-3-pro-preview - Draw a laptop

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

• next-ai-draw-io - Inspiration source, excellent DrawIO AI generation implementation
• DrawIO - Diagram editing engine
• HeroUI - UI component library
• Vercel AI SDK - AI integration framework