Simple javascript library for drawing own component diagram/circuit/graph (with input output nodes) and their connections

Question

I got a task to make a simple HTML web app in Javascript (Angular) for visitors to able to make their own design of component diagram (circuit, graph) and connections between these components. So i am looking for some (simple) Javascript library to achieve that rather than to write everything from the scratch.

It is like electrical circuit designing but quite more simple because I don't need any simulation of the electrical current or electronical behaviour of the components. so rather be simple library which can draw pretty objects and connections.

The components will be actually a few predefined devices which have defined number of input and output nodes. So user can place any number of components (devices) on the canvas and can connect output from one component to input of another component on the canvas and vice versa. The connection is just direct line between 2 nodes (1 input and 1 output) and every node can have max 1 connection. But some business logic can be written in code by me.

The customization of components is needed because I will have predefined components where input/output ports should have exact position (but can live without that).

Also connection (wires) between nodes (input/output ports) could not be just simple line direct connection but try not to cross other lines - be smart or at least be able to edit its direction.

I have found 2 promising libraries so far:

1. GoJS https://gojs.net/latest/samples/dynamicPorts.html
   https://gojs.net/latest/samples/dataFlow.html
   examples look like something what i could use

   • + pros good documentation
   • + pros good customization
   • - cons licensed commercial use
   • - cons quite robust library

2. SimcirJS https://kazuhikoarase.github.io/simcirjs/

   • + pros tiny library
   • + pros free commercial use
   • - cons small documentation
   • - cons bad customization

Do you know some other Javascript libraries to achieve this goal? Tiny and easy to use and well documented libraries are very welcomed.

Answer 1

if someone is interedsted, i have finally found and chose mxGraph https://github.com/jgraph/mxgraph.

it is:

• pros well documented
• pros free license
• pros good customized

library for my purposes