draw.io Tools

A collection of web-based utilities for working with draw.io diagrams.

View the Tools →

Tools

Text & Encoding

• Text Tools - Compress, decompress, encode, and decode text using URL encoding, Base64, and deflate compression
• Base64 Images - Convert images to Base64 data URLs for embedding

Diagram Files

• MxFile Tools - Validate and repair draw.io diagram files
• Diagram Viewer - View diagrams from public URLs and generate embeddable links
• Image Merge - Stack multiple images vertically

Generation & Import

• AI Generate - Generate diagrams from natural language using AI (ChatGPT, Claude, Gemini)
• CSV Import - Convert CSV data into draw.io diagrams
• Custom Links - Create interactive diagram links with actions

Legacy Tools

• Navigator - Browser information viewer
• Tickets - Freshdesk tickets editor

Development

Prerequisites

• Node.js 18+
• npm

Getting Started

# Clone the repository
git clone https://github.com/jgraph/drawio-tools.git
cd drawio-tools

# Install dependencies
npm install

# Start development server
npm run dev

Build

# Build for production
npm run build

# Preview production build
npm run preview

Project Structure

drawio-tools/
├── src/                    # Source files
│   ├── index.html          # Landing page
│   ├── styles/             # CSS styles
│   ├── utils/              # Shared JavaScript utilities
│   └── tools/              # Individual tool pages
├── public/                 # Static assets
├── tools/                  # Legacy tools (original versions)
├── package.json            # npm configuration
├── vite.config.js          # Vite build configuration
└── CLAUDE.md               # Developer guide

Technology Stack

• Build Tool: Vite
• JavaScript: ES Modules
• CSS: CSS Custom Properties with automatic dark mode
• Compression: pako

License

Apache-2.0 License - see LICENSE for details.

Links

• draw.io
• draw.io on GitHub
• Report Issues