Fabric.js or Draw2D?
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:
- A "snap to grid" fiddle
- A "connectors" fiddle
- angular-fabric
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.