Connected blocks is a small application to draw graphs.
It can be used to make simple UML class diagrams, basic state diagrams or some mind mapping graphs. The interface is minimalist, most actions are done through contextual menus or keyboard shortcuts.
Blocks
Content of blocks is simply interpreted as html with innerHTML. It allows using all the features of html "for free".
When block are deleted the related links are removed as well.
Links
Arrows can be defined for both ends of the links.
The color and the dash can be modified
The shape of the links is defined by the relative position of the blocks.
Blocks Layout
When multiple blocks are selected, the align buttons appear. Alignment can be adjusted based on the selection box.
Images Import
Images can be imported by drag and drop from the file system.
Import and Export
A document can be exported as a JSON file. Images are contained in the file as data URI
The application also have feature that are expected from edition tools.
Undo/Redo: most actions are stored in an undo stack. The user can undo/redo them using ctrl-z and ctrl-y (or ctrl-shift-z).
Copy-paste: Blocks can be duplicated using Ctrl-c to copy and Ctrl-p to paste them.
The links between copied blocks are copied as well.