### Minimal GoJS Diagram Setup Source: https://github.com/northwoodssoftware/gojs/blob/master/README.md Demonstrates the basic HTML structure required to host a GoJS diagram and the minimal JavaScript code to initialize a diagram, define a simple node template, and load model data. Requires the GoJS library to be loaded. ```HTML
``` ```JavaScript const myDiagram = new go.Diagram('myDiagramDiv', { // create a Diagram for the HTML Div element 'undoManager.isEnabled': true // enable undo & redo }); // define a simple Node template // the Shape will automatically surround the TextBlock myDiagram.nodeTemplate = new go.Node('Auto') .add( // add a Shape and a TextBlock to this "Auto" Panel new go.Shape('RoundedRectangle', { strokeWidth: 0, fill: 'white' }) // no border; default fill is white .bind('fill', 'color'), // Shape.fill is bound to Node.data.color new go.TextBlock({ margin: 8, font: 'bold 14px sans-serif', stroke: '#333' }) // some room around the text .bind('text', 'key') // TextBlock.text is bound to Node.data.key ); // but use the default Link template, by not setting Diagram.linkTemplate // create the model data that will be represented by Nodes and Links myDiagram.model = new go.GraphLinksModel( [ { key: 'Alpha', color: 'lightblue' }, { key: 'Beta', color: 'orange' }, ``` -------------------------------- ### Installing GoJS Library via npm Source: https://github.com/northwoodssoftware/gojs/blob/master/README.md Command to install the core GoJS library package using the Node Package Manager (npm). This provides the necessary files to use GoJS in a project. ```Shell $ npm install gojs ``` -------------------------------- ### Creating GoJS Project Kit via npm Source: https://github.com/northwoodssoftware/gojs/blob/master/README.md Command to create a new project kit containing GoJS samples, extensions, and documentation using npm. This is useful for exploring the full GoJS ecosystem. ```Shell $ npm create gojs-kit@latest ``` -------------------------------- ### Defining GoJS Model Data - JavaScript Source: https://github.com/northwoodssoftware/gojs/blob/master/README.md This JavaScript code defines the node data array and the link data array for a GoJS diagram model. It represents a simple graph structure with five nodes and five links, including a self-loop. ```javascript { 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' }, ] ); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.