DrawIO Secondary Development: A Comprehensive Technical Guide

This article provides a comprehensive guide to DrawIO secondary development, covering everything from basic usage to advanced customization techniques. DrawIO is a powerful web-based diagramming tool that supports various chart types including flowcharts, UML diagrams, mind maps, and more, with multiple storage options such as browser cache, local folders, and remote storage like GitHub.

The article addresses why one might want to perform secondary development on DrawIO: teams need more than just a drawing tool—they require an integrated management platform; business requirements may demand integrating charts with existing systems; and self-deployment provides better control and security.

Key technical details covered include: setting up development environment with Java and Ant; cloning the official source code; configuring local development mode using the dev=1 URL parameter; building production versions using Ant; and deployment options including GitHub Pages, Vercel, Nginx, and Node Server.

The core technical section demonstrates how to get current canvas content using getCurrentFile() , construct file downloads to local storage, and load saved diagrams back to the canvas using loadFile() . The article also presents three architecture patterns: single static site mode, dual-system mode, and a special single-system mode using Next.js with Rewrites for bridging subsystems.

For developers interested in practical implementation, the author provides a scaffold called simple-drawio-starter on GitHub to help get started quickly with DrawIO secondary development.