gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
96 lines (80 loc) • 3.4 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GoJS in Node.js -- Northwoods Software</title>
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<script src="../release/go.js"></script>
<script src="goIntro.js"></script>
</head>
<body onload="goIntro()">
<div id="container" class="container-fluid">
<div id="content">
<h1>Using GoJS with Node.js</h1>
<p>
As of 2.0, GoJS can be used in DOM-less contexts like Node.js. However there are some considerations:
<ul>
<li>Since there is no Diagram DIV, you must instead set the <a>Diagram.viewSize</a> property.
This affects all the same values as the DIV size, like Diagram.position and layout results from layouts that are viewport-sized.</li>
<li>Cannot measure go.Pictures, you must set a <a>GraphObject.desiredSize</a> instead.</li>
<li>Cannot measure go.TextBlocks accurately, you should set a <a>GraphObject.desiredSize</a> instead.</li></li>
</ul>
</p>
<p>
For server-side operations that need to measure Pictures or TextBlocks, you should consider using a headless browser with Node.
<a href="serverSideImages.html">Click here for examples using Node with Puppeteer (headless Chrome)</a>.
</p>
<h2 id="NodeJSExample">Node.js example</h2>
<p>
If you saved the following JavaScript as <code>nodescript.js</code> and run it with node (<code>node nodescript.js</code>),
it will output Model JSON results in the console, which include the locations of laid-out Nodes. You can use Node.js
in this way to do server-side operations like large layouts, and then send the JSON to the client.
</p>
<pre class="lang-js">
// This example loads the GoJS library, creates a Diagram with a layout and prints the JSON results,
// Reference GoJS. This assumes its in the same directory as this script:
require('./go.js');
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram = $(go.Diagram, '', // No DIV
{
viewSize: new go.Size(400,400), // Set this property in DOM-less environments
layout: $(go.LayeredDigraphLayout),
'animationManager.isEnabled': false
});
// define a simple Node template
myDiagram.nodeTemplate =
$(go.Node, 'Auto',
new go.Binding('location', 'loc', go.Point.Parse).makeTwoWay(go.Point.Stringify),
$(go.Shape, 'RoundedRectangle', { strokeWidth: 0},
// Shape.fill is bound to Node.data.color
new go.Binding('fill', 'color')),
$(go.TextBlock,
{ margin: 8 }, // some room around the text
// TextBlock.text is bound to Node.data.key
new go.Binding('text', 'key'))
);
// After the layout, output results:
myDiagram.addDiagramListener('InitialLayoutCompleted', function() {
console.log(myDiagram.model.toJSON());
});
// load a model:
myDiagram.model = new go.GraphLinksModel(
[
{ key: 'Alpha', color: 'lightblue' },
{ key: 'Beta', color: 'orange' },
{ key: 'Gamma', color: 'lightgreen' },
{ key: 'Delta', color: 'pink' }
],
[
{ from: 'Alpha', to: 'Beta' },
{ from: 'Alpha', to: 'Gamma' },
{ from: 'Beta', to: 'Beta' },
{ from: 'Gamma', to: 'Delta' },
{ from: 'Delta', to: 'Alpha' }
]);
</pre>
</div>
</div>
</body>
</html>