gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
108 lines (93 loc) • 3.89 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">
// nodescript.js
// This example loads the GoJS library, creates a Diagram with a layout and prints the JSON results.
// Load GoJS. This assumes using require and CommonJS:
const go = require("gojs");
const $ = go.GraphObject.make; // for conciseness in defining templates
const myDiagram =
$(go.Diagram, '', // No DOM, so there can be no DIV!
{
viewSize: new go.Size(400,400), // Set this property in DOM-less environments
layout: $(go.LayeredDigraphLayout)
});
myDiagram.nodeTemplate =
$(go.Node, 'Auto',
// specify the size of the node rather than measuring the size of the text
{ width: 80, height: 40 },
// automatically save the Node.location to the node's data object
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, 'RoundedRectangle', { strokeWidth: 0},
new go.Binding('fill', 'color')),
$(go.TextBlock,
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: 'Gamma', to: 'Delta' },
{ from: 'Delta', to: 'Alpha' }
]);
</pre>
<p>
Alternatively, if your code is saved as <code>nodescript.mjs</code> or your project is of <code>"type": "module"</code>,
you can use GoJS as an ES6 module:
</p>
<pre class="lang-js">
// nodescript.mjs
// This example loads the GoJS library, creates a Diagram with a layout and prints the JSON results.
// Load GoJS. This assumes using import and ES6 modules:
import * as go from "gojs/release/go.mjs";
const $ = go.GraphObject.make;
. . .
</pre>
</div>
</div>
</body>
</html>