Flow Charts and State Machines

Question

Specifically I am looking at the JavaScript libraries; JavaScript InfoVis Toolkit, and D3 to draw flow charts and state machines.

Both of these offer plenty of ways to visualize data. However none of the examples seem to meet the requirements below (especially for flow chart).

To be clear I mean these.

Flow chart

(Sourced from: http://philosophy.hku.hk/think/strategy/chart.php)

• Have branches with a single start and end point.
• Labels on nodes and branches.
• Have a logical flow layout (e.g. not nodes randomly positioned).
• Shapes aren't really important.

State Machine

(Sourced from: http://www.oracle.com/technetwork/systems/fsm-156381.html)

• Labels on nodes and branches.
• Shapes aren't really important.

Would either of these libraries be able to meet my requirements?

Are my requirements even an appropriate use of those libraries?

Cheers,

Answer 1

In the end went with dagre-d3 which is able to do everything I needed.

Answer 2

You can also give a chance to mxGraph

An example of mxGraph is draw.io