Lutz Roeder’s HTML5 Samples Using The Canvas Element
The last sample is Netron, a library for editing graph elements and connections using HTML5 canvas. It allows the definition of specific graph elements and custom code can be added to change the appearance of these elements.
Each node has a custom set of connection points that can be connected by dragging the mouse. Double-click will activate an element so it’s content can be edited using an overlay input element. Netron includes and undo stack implementation that records all edits and allows reverting them.