The ExSurface/JS lets you organize your objects to a surface. You can use the tool to generate organigrams, diagrams, graphs, flowcharts and so on. The ExSurface/JS is a HTML standalone-component, written in JavaScript, that uses no third-party libraries.

Surface
Arrange
Images
Links
Graph
Properties
Events
Your browser does not support the HTML5 canvas tag.
ALT creates element or link. CTRL + X Cut, CTRL + C Copy, CTRL + V Paste. CTRL + Z Undo, CTRL + Y Redo. Drag and drop an element over other to insert it as a child. Drag and drop a child element over another sibling, for 1 second, to exchange their positions. Delete deletes the selection. CTRL / SHIFT selects elements. ESC cancels drag and drop operation.
Your browser does not support the HTML5 canvas tag.
ALT creates element or link. CTRL / SHIFT selects elements. Delete deletes the selection. Click wheel + drag or CTRL + Click wheel + drag magnifies (a portion of) the control. Roll (+ SHIFT) the wheel to scroll.
Your browser does not support the HTML5 canvas tag.
Click wheel + drag or CTRL + Click wheel + drag magnifies (a portion of) the control. CTRL + Double-click fit the entire chart. CTRL + Z Undo, CTRL + Y Redo.
Your browser does not support the HTML5 canvas tag.
Move the mouse in-out of the control.
Your browser does not support the HTML5 canvas tag.
Click the (top-right arrow) to show the source-code. Click the (bottom-left arrow) to show the help. ✔ Check/uncheck options to include/exclude the property. Change the option's value according to the below description.
Your browser does not support the HTML5 canvas tag.
here goes the events
Click, drag, drop or roll the mouse-wheel to get for the control's events. CTRL + Z Undo, CTRL + Y Redo.