Flowchart with editable nodes and connections

We are looking a Javascript / HTML programmer to participate in the development of an application controlling scientific hardware. The application follows a client-server model, and has a modular structure. Client side is written in Javascript / jQueryUI, and works in user's browser. It communicates with server side via HTTP requests. Application also has installable plugins that contain Javascript, HTML, and graphic files extending user interface. Currently, we need to code a MS Visio-like flowchart (scheme) displaying hardware configuration and installed devices - please see attached a screenshot displaying what we already have. We did not find any available libraries that would be nice looking and convenient to use, so we wrote what we have in jCanvas. It is possible to add and delete devices. Devices have ports (one or more), and ports of devices may be interconnected. Each type of device is a plugin with a separate js file and graphics. The devices and connections may have editable properties. The entire configuration with parameters can be loaded and saved using XML/json. What to do: - write code for the QUICK tracing of connections between the devices. Connections should consist of vertical and horizontal lines. Connections should avoid collisions with devices and unnecessary crosses. Devices should be movable, without overlaps, preferably tracing connections during move. - add interface for adding and deleting devices and adding and deleting connections - make visually appealing interface for editing properties and giving commands to devices (now coded as windows) - scheme editing and device operation should also work on mobile platforms