Flow

An action-driven traverser of directed graphs

What does Flow do?

Flow describes directed graphs - a collection of vertices and one-way edges. It allows you to traverse a described graph by following the edges, and to trigger actions for every vertex you encounter along the way.

How do I use it in my project?

To use flow in a Node context, use either of the following:

npm install --save flow-dag

yarn add flow-dag

How might I use it?

Here's an example that uses flows to sequentially change the background color of a webpage:

var Flow = require('flow-dag');

var ColorAction = Flow.Action.extend({
    start: function (color) {
        document.body.style.backgroundColor = color;
    },
});

var colorFlow = new Flow.Builder()
    .addVertex({ name: 'color1', next: 'color2' }, 'red')
    .addVertex({ name: 'color2', next: 'color3' }, 'blue')
    .addVertex({ name: 'color3' }, 'green')
    .addAction(new ColorAction())
    .whenFinished(function () {
        document.body.style.backgroundColor = gray;
        document.body.text = 'Done!';
    })
    .build();

colorFlow.start();

Test out an enhanced version of this example on CodePen.

What else can I do with it?

• Wrap a view library inside an Action, and you can drive your user interactions via flows. For example, see Marionette.Flow.

• Drive a storyline for a Role-playing Game by describing each story stage in vertices and edges.

• Build a map of interconnected rooms.

• Model and simulate a traffic network for a city.

Where's the Documentation?

Below are the Flow types that you must or should extend or consume to get value from the project:

• Action
• Builder
• Flow

Below are the Flow types that you can extend for custom solutions, but are not required for use:

• Edge
• Graph
• Vertex

Installing from scratch

If you haven't already, install Yarn.

To install Flow and its dependencies, run yarn.

To build the combined and minified distribution files, run yarn build.

To kick off the test suite, run yarn test.