Grafovatko is a graph visualization software — from a graph specification (a list of nodes and edges) renders a beautiful SVG diagram.
From pre-built package (master branch only):
grafovatko.min.js
in your web page.G
object to access Grafovatko library (i.e. let gv = new G.GraphView()
).From source:
make dist
dist/grafovatko.min.js
to your projectgrafovatko.min.js
in your web page.G
object to access Grafovatko library (i.e. let gv = new G.GraphView()
).Put an <svg>
element into an HTML document:
<!doctype html>
<meta charset=utf-8>
<title>Example</title>
<svg></svg>
Create GGraphView, initialize it with a dataset:
let graph_data = {
nodes: [
{ id: 'a', x: 50, y: 50, shape: 'circle' },
{ id: 'b', x: 150, y: 50, shape: 'circle' }
],
edges: [
{ id: 'e', start: 'a', end: 'b' }
]
};
let gv = new G.GraphView('svg#svg1', graph_data);
Or create GGraphView and then create graph:
let gv = new G.GraphView('svg#svg2');
let g = gv.graph;
let a = g.addNode('a', { x: 50, y: 50, shape: 'circle' });
let b = g.addNode('b', { x: 150, y: 50, shape: 'circle' });
let e = g.addEdge('e', {}, a, 'b');
Both examples will produce a little a → b
diagram:
Simply specify layout name and its options and drop node coordinates:
let graph_data = {
nodes: [
{ id: 'a', shape: 'circle' },
{ id: 'b', shape: 'circle' }
],
edges: [
{ id: 'e', start: 'a', end: 'b' }
],
graph: {
layout: 'dagre'
},
layout: {
rankdir: 'LR'
}
};
let gv = new G.GraphView('svg#svg3', graph_data);
Or:
let gv = new G.GraphView('svg#svg4');
let g = gv.graph;
g.setLayout('dagre', { rankdir: 'LR' });
let a = g.addNode('a', { shape: 'circle' });
let b = g.addNode('b', { shape: 'circle' });
let e = g.addEdge('e', {}, a, 'b');
The result is … as expected:
The most of the code is published under Apache 2.0 license. See LICENSE file for details.