Draw2D now npm ready

No news for a long time….
I decided to make draw2d fit for ES6 and the developer tools like npm and yarn. It makes more sense to get rid of my old build process with bower, grunt and even ant. Additional the new draw2D ist full compatible (right now) to the old one. The old bower repo "draw2d" is dropped and not supported anymore.
Just install it with "npm install draw2d —save" to get them into your project. Samples are migrated and part of the package. Documentation is a big gap but the old one is still valid.

Bildschirmfoto 2018-08-10 um 10.33.15

Pull requests are welcome

The new repo is a branch of this source code. At this point it is compatible to the original draw2d lib but breaking changes can happen. (e.g. IE support will be dropped)

Draw2D touch version 6.1.66 released

+ add example for flyout menu for figures. Shown when shape is selected (example/../.policy_selectionmenu)
+ change inheritance for SelectionFeedbackPolicy. Adding new base class SelectionPolicy.
+ remove duplicates events if a shape is deleted. "unselect" is fired even if the elements isn't selected
+ fix broken SingleSelection strategie. Drag&Drop of an port of an selected shape isn'T possible.
+ add missing attribute "NAME"
+ fix missing function reference in canvg.js file
+ build minified version "core" of draw2d
+ add new line to the JS comment template for correct JS minifierer bug
+ add label to connection to show more decorations in JSON loading
+ fix broken JSON for state diagram
+ consider the visible flag during shape creation
+ uninstall EditPolicy in the figure by name
+ fire en change event if the user set some "userData" by path annotation instead of update the complete userData object. partial changes should fire the event too
+ force an userData object if the "attire" method is called as getter with a userData JSON path

Draw2D touch version 6.1.52 released

+ fixing zoom in/out by working with SVG resize instead of viewBox resize, Better scroll behaviour
+ add missing getter for stroke pattern for the line
+ fix wrong delete order of shape and connection. Delete connections first
+ adjust the beeline for the label selection and make them different for figure and/or Line as parent shape
+ working on percentageLineLocator for labels
+ remove orphan shapes if the user ends of the connection create.
+ new event "unselect" for the figure
+ fixing broken method chaining
+ a lot of minor bug fixes.

New Demo Application with NodeJS backend

Understand the connections in your data.


Understanding what your users are doing doesn’t have to be a complicated setup process. Once you install the Sankey NodeJS server, you can pick and choose which actions to track in your app.
Have you ever wanted to know if people used the comment feature or tapped that button in your app? Just point and click to choose the interactions you want to measure. Now you can spend more time learning how to make your app better.

Uses cases:

  • Phone registration failures over specific period

  • Tracking transaction payment processing platform

  • Tracking a renewal or new signup transaction

  • E-Commerce: typical user session, anomalous checkout transactions, catching drop off in checkout

  • Tracking users on-boarding process

  • Attribution modeling - Determining the origin of a user action

Learn something surprising about your users

Github: https://github.com/freegroup/draw2d_js.app.sankey_report

Draw2D touch version 6.1.43 released

+ fixing orphan flash animation if the ClickConnectionCreatePolicy is used.
+ fixing broken interactive router. Not possible to set vertices via API
+ fix broken segment drag&drop in interactive router
+ enable the figure to uninstall editPolicy by string instead of pure class instance reference.
+ fire event if the userData has changed via API call
+ force "userData" root object if any child object is modified via "attr" method call
+ remove deprecated method for IE8 support
+ fix tooltip position problem during zoomIn/zoomOut
+ fix broken dash pattern for lines
+ fix wrong delete order of connections and figures in one DeleteCommand operation

Draw2D touch version 6.1.42 released

+ new event canvas.on("unselect",...) to track the selection handling cleaner
+ provide getter for color of the Line in the attr method
+ patch wrong event handling in state diagram example
+ avoid override of already set values for line-cap in PolyLine
+ check that a canvas is available before access the shape element to avoid exception during complex delete operation
+ provide factory method that inherit JSON reader can patch the figure creation process
+ adapt class name to provide a valid CSS name for styling via less/css
+ add shiftKey/ctrlKey to the dragging method of the policy
+ add flag to ignore children movement for a raft
+ disable snapToGrid if more than on element is selected
+ provide headless canvas for browser less JSON data read/write
+ remove duplicate event notifications if a connection is deleted
+ implement SmartDraggableLocator
+ provide mouse move, mounter, mouse leave events for the canvas as well.

Draw2D touch version 6.1.36 released

+ provide valid name for CSS styling of the orthogonal resize handle

Draw2D touch version 6.1.34 released

+ don't translate aboard shapes of a RAFT if the user pressed the SHIFT key during drag&drop operation.

Draw2D touch version 6.1.32 released

+ translate connections as well if a Raft object moves connected shapes

Draw2D with Node.js backend

Binding the front- and back-end together with node.js and socket.io.


It is just about 40 lines of server side code to connect draw2d with node.js and load/save JSON files or have access to the RaspberryPI GIO ports. Just checkkout the sample application on GitHub: https://github.com/freegroup/draw2d_js.app.brainbox or install this application with npm if you have already installed node.js

bash: npm install -g brainbox

you can now start the server with brainbox. This works well even on you RaspberryPi. You have full access to your GPIO pins fro the circuit simulator in your browser!

New feature in Draw2D 6.1.27 - SmartDraggable decoration


With the release of 6.1.27 a new implementation of an draw2d.layout.locator.Locator is part of Draw2d. You can now add smart draggable decorations to any kind of shapes. This feature is seen in several desktop apps and is now part of Draw2D as well.


Digital Training Studio

Teach logic gates + digital circuits effectively - done with Draw2D
show case available on Github


  • Design circuits quickly and easily with a modern and intuitive user interface with drag-and-drop, copy/paste, zoom & more

  • Take control of debugging by pausing the simulation and watching the signal propagate as you advance step-by-step.

  • Don't worry about multiple platforms on student computers. DigitalTrainingStudio runs within Draw2D

Draw2D touch version 6.1.5 released

Designing shapes across different zoom levels

Figures have optimal legibility ranges—just like typefaces. Meaning a shape designed for 32 pixels will often be illegible at 50% and appear chunky at 300%. That’s why Iconic is being designed at three sizes for desktop applications.


You can now design your own shapes in Draw2D optimized for different zoom level. Either you use different SVG code or you can implement it as draw2d.StackFigure. Below you see a vey simple example how the figure behaves during zoomIn / zoomOut.


New feature Draggable decoration


With the release of 6.0.0 a new implementation of an draw2d.layout.locator.Locator is part of Draw2d. You can now add draggable decorations to any kind of shapes. This feature is seen in several desktop apps and is now part of Draw2D as well.