Get started with gojs CDN

http://gojs.net/latest/doc/license.html licensed

GOJS is a library for building interactive diagrams and models in the browser.

Tags:
  • diagram
  • chart
  • tree
  • flowchart
  • orgchart
  • uml
  • bpmn
  • graphics
  • editor
  • inspector
  • drawing
  • canvas
  • shape
  • svg
  • hierarchy
  • node
  • link
  • group
  • vertex
  • edge
  • connection
  • port
  • label
  • arrowhead
  • family-tree
  • decision-tree
  • mindmap
  • tournament
  • treeview
  • pipe-tree
  • genogram
  • ivr-tree
  • parse-tree
  • concept-map
  • euler
  • visualization
  • entity-relationship
  • er-diagram
  • friend-wheel
  • radial
  • graph-distances
  • graph-paths
  • sankey
  • pert
  • gantt
  • timeline
  • monitor
  • layer
  • swimlane
  • spreadsheet
  • virtualization
  • flow
  • process
  • state
  • sequential-function
  • grafcet
  • sequence
  • circuit
  • record
  • field
  • table
  • dataflow
  • data-flow
  • planogram
  • seating
  • pipes
  • overview
  • palette
  • comment
  • layout
  • grid-layout
  • tree-layout
  • force-directed
  • layered
  • hierarchical
  • circular
  • fishbone
  • ishikawa
  • parallel
  • serpentine
  • treemap
  • tree-map
  • freehand
  • polygon
  • polyline
  • bezier
  • panel
  • view
  • model
  • databinding
  • data-binding
  • binding
  • transaction
  • coordinates
  • subgraph
  • selection
  • highlight
  • tooltip
  • context-menu
  • tool
  • command
  • validation
  • button
  • template
  • legend
  • grid
  • printing

Stable version

Copied!

How to start using gojs CDN


// Include GoJS library
const go = window.go;

go.GraphObject.defineProperty('locationOnViewPort', {
  get: function() {
    return this.location;
  },
  set: function(value) {
    this.location = value;
    this.position = value;
  }
});

// Create a new Diagram
const $ = go.GraphObject.make;
const myDiagram = $(go.Diagram, "myDiagramDiv", {
  initialContentAlignment: go.Spot.Center,
  layout: $(go.TreeLayout, { angle: 90 })
});

// Define a Node template
const nodeTemplate = $(
  go.Node,
  "Auto",
  { locationOnViewPort: { row: 0, column: 0 } },
  $(go.Shape, "Rectangle", { fill: "#F8F8F8" }),
  $(go.TextBlock, { margin: 8 }, "{$data.key}")
);

// Define a Link template
const linkTemplate = $(go.Link, {
  routing: go.Link.Orthogonal,
  toEndSegmentLength: 4
});

// Register the templates
myDiagram.model.setDataDefinition("Node", { key: "" });
myDiagram.model.setDataDefinition("Link", {});
myDiagram.model.setTypeData("Node", nodeTemplate.createInstance());
myDiagram.model.setTypeData("Link", linkTemplate.createInstance());

// Create some sample data
const treeData = $(go.Tree, { key: "root" },
  $(go.Node, { key: "A" },
    $(go.Node, { key: "B" }),
    $(go.Node, { key: "C" })
  ),
  $(go.Node, { key: "D" })
);

// Set the data for the Diagram
myDiagram.model = treeData;
myDiagram.addDiagramListener("LayoutComplete", function() {
  myDiagram.currentSelection = null;
});

// Add the Diagram to the DOM
myDiagram.render();
Copied!
Copied!
Copied!
Copied!

All versions

1.5.17 1.5.18 1.5.19 1.5.20 1.5.21 1.5.22 1.5.23 1.6.0 1.6.1 1.6.10 1.6.11 1.6.12 1.6.13 1.6.14 1.6.15 1.6.16 1.6.17 1.6.18 1.6.19 1.6.2 1.6.20 1.6.21 1.6.22 1.6.23 1.6.24 1.6.3 1.6.4 1.6.5 1.6.6 1.6.7 1.6.8 1.6.9 1.7.0 1.7.1 1.7.10 1.7.11 1.7.12 1.7.13 1.7.14 1.7.15 1.7.16 1.7.17 1.7.18 1.7.19 1.7.2 1.7.20 1.7.21 1.7.22 1.7.23 1.7.24 1.7.25 1.7.26 1.7.27 1.7.28 1.7.29 1.7.3 1.7.4 1.7.5 1.7.6 1.7.7 1.7.8 1.7.9 1.8.0 1.8.1 1.8.10 1.8.11 1.8.12 1.8.13 1.8.14 1.8.15 1.8.16 1.8.17 1.8.18 1.8.19 1.8.2 1.8.20 1.8.21 1.8.22 1.8.23 1.8.24 1.8.25 1.8.26 1.8.27 1.8.28 1.8.29 1.8.3 1.8.30 1.8.31 1.8.32 1.8.33 1.8.34 1.8.35 1.8.36 1.8.37 1.8.38 1.8.4 1.8.5 1.8.6 1.8.7 1.8.8 1.8.9 2.0.0 2.0.0-beta10 2.0.0-beta11 2.0.0-beta12 2.0.0-beta5 2.0.0-beta6 2.0.0-beta7 2.0.0-beta8 2.0.0-beta9 2.0.1 2.0.10 2.0.11 2.0.12 2.0.13 2.0.14 2.0.15 2.0.16 2.0.17 2.0.18 2.0.2 2.0.3 2.0.4 2.0.5 2.0.6 2.0.7 2.0.8 2.0.9 2.1.0 2.1.0-alpha1 2.1.0-alpha2 2.1.0-alpha3 2.1.0-alpha4 2.1.0-beta1 2.1.0-beta2 2.1.10 2.1.11 2.1.12 2.1.13 2.1.14 2.1.15 2.1.16 2.1.17 2.1.18 2.1.19 2.1.2 2.1.20 2.1.21 2.1.22 2.1.23 2.1.24 2.1.25 2.1.26 2.1.27 2.1.28 2.1.29 2.1.30 2.1.31 2.1.32 2.1.33 2.1.34 2.1.35 2.1.36 2.1.37 2.1.38 2.1.39 2.1.40 2.1.41 2.1.42 2.1.43 2.1.44 2.1.45 2.1.46 2.1.47 2.1.48 2.1.49 2.1.50 2.1.51 2.1.52 2.1.53 2.1.54 2.1.55 2.1.56 2.1.6 2.1.7 2.1.8 2.1.9 2.2.0 2.2.0-a1 2.2.0-a2 2.2.0-a3 2.2.0-a4 2.2.0-a5 2.2.0-b1 2.2.0-b2 2.2.0-b3 2.2.0-b4 2.2.0-b5 2.2.0-b6 2.2.0-b7 2.2.0-b8 2.2.1 2.2.10 2.2.11 2.2.12 2.2.13 2.2.14 2.2.15 2.2.16 2.2.17 2.2.18 2.2.19 2.2.2 2.2.20 2.2.21 2.2.22 2.2.23 2.2.3 2.2.4 2.2.5 2.2.6 2.2.7 2.2.8 2.2.9 2.3.0 2.3.0-b1 2.3.0-b2 2.3.1 2.3.10 2.3.11 2.3.12 2.3.13 2.3.14 2.3.15 2.3.16 2.3.17 2.3.18 2.3.2 2.3.3 2.3.4 2.3.5 2.3.6 2.3.7 2.3.8 2.3.9 3.0.0 3.0.0-a5 3.0.0-a6 3.0.0-b1 3.0.0-b2 3.0.0-b3 3.0.0-b4 3.0.0-b5 3.0.0-b6 3.0.0-b7 3.0.1 3.0.10 3.0.11 3.0.12 3.0.13 3.0.14 *** 3.0.15 3.0.2 3.0.3 3.0.4 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9