is a visual editor for Dataflow programming
With npm do
npm install flow-view
Using a CDN
Adding this to your HTML page
Suppose your container is a div with id
In your HTML, place a div where you want to mount flow-view canvas.
Create an empty canvas.
const container = documentconst canvas = container
It is supposed to use a
FlowViewCanvas graphically; nevertheless you can create nodes, links, inputs and outputs programmatically.
const node1 = canvasconst node2 = canvasconst link = canvasconst source1 = node1const target1 = node2canvascanvas
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
Get the canvas graph using the
getGraph method which returns an object, you can then serialize into JSON.
const graph = canvasconsole
$schema: '#'id: ''properties:
A graph can have none, one or many nodes.
Every node must have a unique id.
title: 'nodes'type: 'object'properties:id:type: 'string'
A node has a text.
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.
A graph can have none, one or many links.
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.
It goes to a node input, where to holds the input id.
All properties are required.