@mpecheux/rune v0.1.3

Rune

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

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.

Install the lib

First get the package:

# using yarn
yarn add @mpecheux/rune

# or npm
npm install @mpecheux/rune

Then, add it to your Vue app:

import Vue from 'vue';
import RuneGraph from '@mpecheux/rune';

Vue.use(RuneGraph);

Displaying a basic graph

To create a graph with Rune, you need to:

• define your data: an array of nodes and an array of edges
• instantiate the RuneGraph component

Data should be of the following form:

{
  nodes: [
    { id: 'node-0', type: 'basic/input-number' },
    { id: 'node-1', type: 'basic/output' }
  ],
  edges: [
    { source: 'node-0', target: 'node-1' }
  ]
}

To create the corresponding graph, simply use the RuneGraph Vue component (it is automatically imported in the Vue.use(...) step):

<template>
  <rune-graph :data="graphData" />
</template>

<script>
export default {
  data() {
    return {
      graphData: {
        nodes: [
          { id: 'node-0', type: 'basic/input-number' },
          { id: 'node-1', type: 'basic/output' }
        ],
        edges: [ { source: 'node-0', target: 'node-1' } ]
      }
    };
  }
}
</script>

And you're done!

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