流程图和状态机

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 (eg 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

最后使用dagre-d3可以完成我需要的一切。

Answer 2

You can also give a chance to mxGraph

An example of mxGraph is draw.io