During consulting engagements, I usually get to draw a lot of diagrams and lately I have been thinking about building a (domain specific) 2D diagram editor.

At this point, I have the following requirements:

  • support for basic geometrical shapes
  • support for text (with the ability to manipulate its size, alignment, font family, and other properties)
  • support for "snap to grid"
  • support for "connectors"
  • the ability to group objects together and manipulate them at the same time
  • the ability to serialise to JSON (or SVG)
  • an Open Source License

Note: By domain specific, I mean "Logical Security Zone Model" diagrams (e.g., nodes and flows, where a zone is defined as a grouping of assets that share common security requirements).

I've done some research into HTML5 diagramming libraries and identified two possible candidates:

Fabric.js

Fabric.js has a good Demos page, and a very good Introduction to Fabric.js tutorial.

I also found:

At this point, it looks like it meets most of my requirements :)

Draw2D

Draw2D has out-of-the-box support for ports and connectors and a snap to grid edit policy.

At this point, it looks like it meets most of my requirements :)

What's Next

In the next post, I'll describe the steps I followed to setup my environment and to create the scaffolding for a new AngularJS application.