AIO Canvas

AI-Powered Diagram Creation Tool - Production Deployment

English | 中文 | 日本語

AIO Canvas - Production-Ready AI-Powered draw.io Wrapper

AI-Powered Diagram Creation Tool with Web & Desktop Deployment

AIO Canvas is a production-ready AI-powered wrapper around draw.io that enhances the popular diagramming tool with natural language capabilities, working seamlessly as both a web application and a desktop application with persistent features.

---

Production Deployment 🚀

Live Instance

https://draw.nulled.ai - Production Status ✅

• Platform: Docker containers with Caddy reverse proxy
• Backend: Next.js 16 with API routes
• SSL: Let's Encrypt auto-renewing certificates
• DNS: draw.nulled.ai → 209.38.58.83
• Status: Fully operational with AI diagram generation

---

Desktop Application 💻

Current Features

• Full Offline Functionality: Complete draw.io capability without internet
• Cross-Platform Support: Windows, macOS, and Linux
• Native Performance: System integration with file dialogs and notifications
• AI Integration: Local AI model support (Ollama compatible)

Upcoming Desktop Persistence (Phase 2)

• Auto-Save: Automatic diagram saving to local SQLite database
• History Management: Version control with restore capabilities
• Recent Files: Quick access to recently opened diagrams
• API Key Storage: Encrypted API key management via Electron's safeStorage

---

Table of Contents

• Features
• MCP Server (Preview)
• Getting Started
  • Installation
  • Development
• Deployment
• Multi-Provider Support
• How It Works
• Architecture

Table of Contents

• Features
• MCP Server (Preview)
• Getting Started
  • Installation
  • Development
• Deployment
• Multi-Provider Support
• How It Works
• Architecture

Features

🎯 Core Capabilities

• draw.io Integration: Seamlessly wraps draw.io (https://github.com/jgraph/drawio) with AI-powered enhancements
• Offline Desktop App: Full offline functionality through Electron desktop version (https://github.com/jgraph/drawio-desktop)
• Natural Language Commands: Create and manipulate diagrams using simple text prompts
• Multi-Platform Support: Works as web application (Vercel/Cloudflare) and standalone desktop app

🤖 AI-Powered Features

• LLM-Powered Diagram Creation: Leverage Large Language Models to create and manipulate draw.io diagrams directly through natural language commands
• Image-Based Diagram Replication: Upload existing diagrams or images and have the AI replicate and enhance them automatically
• PDF & Text File Upload: Upload PDF documents and text files to extract content and generate diagrams from existing documents
• AI Reasoning Display: View the AI's thinking process for supported models (OpenAI o1/o3, Gemini, Claude, etc.)
• Diagram History: Comprehensive version control that tracks all changes, allowing you to view and restore previous versions
• Interactive Chat Interface: Communicate with AI to refine your diagrams in real-time
• Cloud Architecture Diagram Support: Specialized support for generating cloud architecture diagrams (AWS, GCP, Azure)
• Animated Connectors: Create dynamic and animated connectors between diagram elements

🖥️ Desktop Persistence Features (Phase 2) - ✅ IMPLEMENTED

• ✅ Local Database: SQLite for persistent diagram storage
• ✅ Auto-Save: Automatic diagram saving every 30 seconds (useAutoSave hook)
• ✅ History Management: Version control with restore capabilities (useDiagramHistory hook)
• ✅ Recent Files: Quick access to recently opened diagrams (useRecentFiles hook)
• ✅ Configuration Storage: Persisted settings and API keys (useAPIKeys hook)
• ✅ Offline Mode: Full functionality without internet connection

Phase 2 Complete: All persistence features implemented and integrated with diagram context.

Phase 3 Complete: UI Components (diagram history dialog, recent files menu, auto-save restore dialog) - ✅ Fully implemented and integrated

🔒 Security Features

• API Key Encryption: Secure storage using Electron's safeStorage
• Local Data Storage: All data stored locally in your environment
• No Telemetry: No data transmission to external servers
• Privacy First: User data never leaves your machine

MCP Server (Preview)

Preview Feature: This feature is experimental and may not be stable.

Use AIO Canvas with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol).

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@canvas-a-i-o/mcp-server@latest"]
    }
  }
}

Claude Code CLI

claude mcp add drawio -- npx @canvas-a-i-o/mcp-server@latest

Then ask Claude to create diagrams:

"Create a flowchart showing user authentication with login, MFA, and session management"

See the MCP Server README for VS Code, Cursor, and other client configurations.

Getting Started

Installation

1. Clone the repository:

git clone https://github.com/PhenixStar/canvas-A-I-O.git
cd canvas-A-I-O
npm install
cp env.example .env.local

2. Configure environment variables in .env.local:

See the Provider Configuration Guide for detailed setup instructions for each provider.

Development

Run the development server:

npm run dev

Open http://localhost:6002 in your browser.

Bring Your Own API Key: Configure your provider and API key via the Settings icon in the chat panel. Keys are stored locally in your browser.

Platform Support

🌐 Web Application (Online)

• Hosted on Vercel or Cloudflare
• Real-time AI collaboration
• Browser-based draw.io functionality
• Cross-platform access

💻 Desktop Application (Offline)

• Electron-based desktop app
• Full offline functionality
• Native performance and integration
• Windows, macOS, and Linux support

Available Scripts

Command	Description
npm run dev	Start development server on port 6002
npm run build	Build for production
npm run start	Start production server on port 6001
npm run lint	Run Biome linter
npm run format	Format code with Biome
npm run electron:dev	Start Electron desktop app in development
npm run dist	Build desktop distributions

Deployment

🌐 Production Instance

Live Deployment: https://draw.nulled.ai

• Platform: Docker containers with Caddy reverse proxy
• SSL: Let's Encrypt (auto-renewing)
• Features: Full AI diagram generation capabilities
• Status: Production-ready

Production Deployment Guide

Go to Production Deployment Guide

Vercel

Deploy using Vercel:

1. Import your repository
2. Configure environment variables in the Vercel dashboard (same as .env.local)
3. Deploy

Cloudflare Workers

Go to Cloudflare Deploy Guide

Docker

Go to Docker Guide

Offline Deployment

Go to Offline Deployment Guide

Multi-Provider Support

• AWS Bedrock
• OpenAI
• Anthropic
• Google AI
• Google Vertex AI
• Azure OpenAI
• Ollama
• OpenRouter
• DeepSeek
• SiliconFlow
• ModelScope
• SGLang
• Vercel AI Gateway

All providers except AWS Bedrock and OpenRouter support custom endpoints.

Detailed Provider Configuration Guide

Server-Side Multi-Model Configuration

Administrators can configure multiple server-side models available to all users without requiring personal API keys. Configure via:

• AI_MODELS_CONFIG environment variable (JSON string)
• ai-models.json file

Model Requirements: This task requires strong model capabilities for generating long-form text with strict formatting constraints (draw.io XML). Recommended models:

• Claude Sonnet 4.5
• GPT-4.1 / GPT-5.1
• Gemini 2.5 Pro
• DeepSeek V3 / R1

Note: The claude series has been trained on draw.io diagrams with cloud architecture logos (AWS, Azure, GCP). Best choice for cloud architecture diagrams.

How It Works

Technology Stack

• Next.js: Frontend framework and routing
• Vercel AI SDK (ai + @ai-sdk/*): Streaming AI responses and multi-provider support
• react-drawio: Diagram representation and manipulation
• Electron: Desktop application wrapper
• Radix UI: Component primitives

Data Flow

Diagrams are represented as XML that can be rendered in draw.io. The AI processes natural language commands and generates or modifies this XML accordingly.

User Input → AI Provider → XML Generation → react-drawio Rendering → Display

Architecture

canvas-A-I-O/
├── app/                    # Next.js app router (web application)
├── components/             # React components
├── electron/               # Electron desktop app (offline wrapper)
├── lib/                    # Utility functions
├── hooks/                  # React hooks
├── packages/
│   ├── mcp-server/        # MCP server implementation
│   └── claude-plugin/     # Claude plugin
└── docs/                  # Documentation

Draw.io Integration Architecture

AIO Canvas acts as an intelligent wrapper around draw.io, extending its capabilities with:

• AI-powered diagram generation and modification
• Natural language interface to draw.io XML
• Enhanced export and import capabilities
• Integration with multiple AI providers

FAQ

See FAQ for common issues and solutions.

License

Apache License 2.0