flow-view

is a visual editor for Dataflow programming

Installation | API | Graph schema | License

Installation

Using npm

With npm do

npm install flow-view

Using a CDN

Adding this to your HTML page

<link rel="stylesheet" href="https://unpkg.com/flow-view/dist/flow-view.min.css">
<script type="module">
  import { FlowViewCanvas } from 'https://unpkg.com/flow-view/dist/flow-view.min.js'

  // Your code here.
</script>

API

FlowViewCanvas constructor

Suppose your container is a div with id drawing. In your HTML, place a div where you want to mount flow-view canvas.

<style>
  #drawing { height: 400px; }
</style>

<div id="drawing"></div>

Create an empty canvas.

const container = document.getElementById('drawing')

const canvas = new FlowViewCanvas(container)

It is supposed to use a FlowViewCanvas graphically; nevertheless you can create nodes, links, inputs and outputs programmatically. For example:

const node1 = canvas.createNode({ x: 20, y: 50, text: 'Drag me' })
const node2 = canvas.createNode({ x: 100, y: 100, text: 'I am a node' })

const link = canvas.createLink()

const source1 = node1.createOutput()
const target1 = node2.createInput()

canvas.connect(source1).to(link)
canvas.connect(target1).to(link)

loadGraph

You can load a graph using the loadGraph method, like in the following example.

const graph = {
  nodes: [
    {
      id: 'a', x: 80, y: 100, text: 'Drag me',
      outs: [ { id: 'out1' }, { id: 'out2' }, { id: 'out3' } ]
    },
    {
      id: 'b', x: 180, y: 200, text: 'Click me',
      ins: [ { id: 'in1' }, { id: 'in2' } ],
      outs: [ { id: 'out4' } ]
    }
  ],
  links: [
    { id: 'c', from: 'out1', to: 'in1' }
  ]
}

canvas.loadGraph(graph)

getGraph

Get the canvas graph using the getGraph method which returns an object, you can then serialize into JSON.

const graph = canvas.getGraph()

console.log(JSON.stringify(graph))

Graph schema

This section defines flow-view JSON Schema using cson. It is parsed by markdown2code to generate flow-view schema.json file.

$schema: 'http://json-schema.org/schema#'
id: 'http://g14n.info/flow-view/schema.json'
properties:

A flow-view graph has links and nodes.

Nodes

A graph can have none, one or many nodes.

  nodes:
    type: 'array'
    items:

Every node must have a unique id.

      title: 'nodes'
      type: 'object'
      properties:
        id:
          type: 'string'

A node has a text.

        text:
          type: 'string'

A node has a position identified by x and y coordinates.

        x:
          type: 'number'
        y:
          type: 'number'

A node at the end is a block with inputs and outputs. Both ins and outs must have an id.

        ins:
          type: 'array'
          items:
            title: 'inputs'
            type: 'object'
            properties:
              id:
                type: 'string'
            required: [
              'id'
            ]
        outs:
          type: 'array'
          items:
            title: 'outputs'
            type: 'object'
            properties:
              id:
                type: 'string'
            required: [
              'id'
            ]

Properties ins and outs are not required. A node with ins not defined is a root, a node with outs not defined is a leaf.

      required: [
        'id'
        'text'
        'x'
        'y'
      ]

Links

A graph can have none, one or many links.

  links:
    type: 'array'
    items:

Every link must have a unique id.

      title: 'links'
      type: 'object'
      properties:
        id:
          type: 'string'

A link connects two nodes, in particular connects an output of a node to an input of another node.

It starts from a node output, where from holds the output id.

        from:
          type: 'string'

It goes to a node input, where to holds the input id.

        to:
          type: 'string'

All properties are required.

      required: [
        'id'
        'from'
        'to'
      ]

License

MIT