2

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

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

Finite 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,

James Wood
  • 17,286
  • 4
  • 46
  • 89
  • 1
    [dagre-d3](https://github.com/cpettitt/dagre-d3/wiki) perhaps? – Mark Jun 14 '15 at 15:36
  • Not sure why this is receiving close votes. This isn't a recommendation or list question. It's a specific question about the specific capabilities of specific frameworks, for which there will be yes/no answers. – James Wood Jun 15 '15 at 06:41
  • I have rephrased the question, and removed some extraneous detail. Hopefully I will avoid the 5th close vote! – James Wood Jun 15 '15 at 06:55
  • 1
    d3 allows you to draw anything you like, so in that sense it's bound to be suitable. You'd have to do much of the work yourself though via bespoke code. – Robert Longson Jun 15 '15 at 07:20
  • 2
    flowchart.js maybe http://adrai.github.io/flowchart.js/? – Monie corleone Jun 15 '15 at 11:45

2 Answers2

6

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

James Wood
  • 17,286
  • 4
  • 46
  • 89
  • I'm very impressed by this library. The only thing that disappointments me is the bundles size. All of lodash is included unfortunately. And v4 of D3 is being used yet all of that lib is imported. Wish only the needed modules were pulled in. – flyer Jul 30 '19 at 14:01
0

You can also give a chance to mxGraph

An example of mxGraph is draw.io

Anil Agrawal
  • 2,748
  • 1
  • 24
  • 31