flow-view

programmatic example

Nodes and edges are created via API. See code below.

The GHOST button set the ghost attribute to few items, it makes them semi transparent. The NORMAL button reset them.

Nodes and edges are created with the following code.

import { FlowView } from 'https://unpkg.com/flow-view';

const flowView = new FlowView({
  element: document.getElementById('element')
});

const node1 = flowView.newNode({
  text: 'Hello', ins:[{}, {}], outs: [{ id: 'output1' }], x: 100, y: 100
});
const node2 = flowView.newNode({
  text: 'World', ins:[{ id: 'input1' }, { id: 'ghost' }], x: 250, y: 400
});
const node3 = flowView.newNode({
  text: 'ciao', outs:[{ id: 'saluto' }], x: 400, y: 280
});
const edge1 = flowView.newEdge({
  from: [node1.id, 'output1'],
  to: [node2.id, 'input1']
});
const edge2 = flowView.newEdge({
  from: [node3.id, 'saluto'],
  to: [node2.id, 'ghost']
});