Rune

Rune is a lightweight Javascript lib for drawing graphs and flows. The full documentation is available at https://MinaPecheux.gitlab.io/rune-core/.

It is based on the Litegraph.js JS library: it relies on the same core mechanisms but extends it to provide additional features and in particular more styling/CSS customization!

It also contains an easy-to-use ready-made Vue component to display your graph with just some nodes and edges data.

$3

If you are in a plain HTML/Javascript context and are not using any frontend framework (such as VueJS or ReactJS), you can still display your graph easily in a canvas. Simply use the CDN script (or download it and use it locally): you will then have access to a global Rune object that contains the entire library.

You should also import or download the CSS stylesheet.

Here is a basic Rune example:

- first, create your index.html file:

``html










`

- and then add in the Javascript script.js:

`js
window.onload = () => {
// instantiate the graph in the html canvas
const graph = new Rune.Graph();
const canvas = new Rune.Canvas("#graph", graph);

// define the nodes and edges data
const data = {
nodes: [
{ id: "node-0", type: "basic/input-number" },
{ id: "node-1", type: "basic/output" }
],
edges: [
{ source: "node-0", target: "node-1" }
]
};

graph.populateFromNodesAndEdges(data);

let layout = Rune.layouts.getDagreLayout(data);
layout = Rune.layouts.centerLayout(layout, 600, 400);
Rune.layouts.applyLayout(graph.getNodes(), layout);
};
`

$3

You can use one of the provided frontend wrappers to easily draw your graph in your app:

- for VueJS: Rune Vue is a basic Vue plugin wrapped around this lib

Contribute

- To setup the project, run:

`
yarn install
`

- Then, to compile and enable hot-reloading (for development):

`
yarn serve
`

- To lint and fix the files, use:

`
yarn lint
``