The Graph-Browser is the visualization tool for Structr applications.

Thanks to the usage of the sigma.js and linkurious.js framework it comes with many modules and can be used in any webapplication.

Adding the Graph-Browser to a Webpage

To use the Graph-Browser, the files graph-browser.js (or graph-browser.min.js), sigms.min.js and plugins.min.js of linkurious.js have to be included into your webpage.


The Graph-Browser has to be instantiated with an configuration object.

Field Purpose
graphContainer The html container where the Graph-Browser should be displayed
sigmaSettings Optional you can specify your own settings for sigms.js
moduleSettings The settings for the used modules
var graphSettings = {
    graphContainer: 'graph-container',
    moduleSettings: {}  

var graphBrowser = new GraphBrowser(graphSettings);

Adding nodes and edges

After the instantiation nodes can be added with the function graphBrowser.addNode(node);

Accordingly edges can be added with graphBrowser.addEdge(edge);

After nodes and edges were added to the Graph-Browser for the first time start() has to be called. When elements are added afterwards the function dataChanged() will trigger an update of the Graph-Browsers view.

Using the modules

Each module of the Graph-Browser can be used by defining its settings when starting the browser. The module will then add its own function calls to the Graph-Browser object.


About this article
Last change 2016-09-01
Topics ExperimentalOverviewStructr 2.0