BTreeHugger's Beat

SVG Diagramming

Despite the growing popularity of browser-based office applications, there is one that has always been missing: a simple diagramming tool. Existing Flash solutions have their limitations, so as part of my graduate thesis work I have created an SVG-based HTML5 diagramming widget.

Available for testing here, it is a work-in-progress that is already fairly capable, including basic Visio-style diagramming with copy-and-paste, zooming and panning, automatic backups with HTML5 local storage, undo/redo, loading and saving to local files, and a few other features such as a basic automatic layout feature.

With it's modular design, adding symbol sets is dynamic and fairly simple. Because it is entirely serverless, it is also vevery easy to deploy and keep up-to-date: it is designed to be inherently mashable.


Due to the project's goals of minimal dependencies and footprint, many bugs and quirks in modern SVG-capable browsers needed to be carefully mitigated in order to have the application behave consistenly across browsers. Advanced HTML5 features are optional, and user-interaction was made as open-ended as possible so that touchscreens could function (although this code is incomplete).

The quirks and limitations of SVG proved to be the largest initial obstacle, and afterward the major problems were with designing a robust cross-browser API and ensuring that embedding and extending the code would be relatively straightforward. The desire to maintain a minimal and clean design later became the primary challenge, as this project coincides with the actual work of my graduate thesis.


By leveraging pure SVG and HTML5 offline concepts, the app is already usable as an offline diagram editor even in this early phase, capable of exporting SVG images with embedded GraphML descriptions that can be re-loaded and edited at a later time. With minor tweaks it should be possible to update this format to permit the images themselves to contain the actual minified application.

The application already works with Firefox, Opera and Webkit browsers, with Internet Explorer 9 and iPhone/mobile support in the works.