Flowchart control GoJS JavaScript library for HTML charts

GoJS is a powerful, fast and lightweight flowchart control that can help you create flowcharts in JavaScript and HTML5 Canvas programs, and greatly simplify your JavaScript / Canvas programs.

Huidu downloads the latest version of GoJS

Getting started with GoJS

GoJS is a flexible library that can be used to create many different types of interactive graphs, including data visualization, drawing tools, and graph editors. There are sample flowcharts, organization charts, business process BPMN, swim lanes, timetables, state diagrams, Kanban, network, mind maps, Sankey, genealogy and genealogy diagrams, fishbone diagrams, floor plans, UML, decision trees, PERT Graphs, Gantt charts, and hundreds of people. GoJS includes many built-in layouts, including tree layouts, force-oriented, radial and hierarchical directed graph layouts, and many custom layout examples.

GoJS uses HTML Canvas element rendering (exported to SVG or image format). GoJS can be run in a web browser or on the server side of Node or Puppeteer. GoJS Diagrams are supported by models and are usually saved and loaded via JSON.

Learn more about GoJS on gojs.net.
This repository contains libraries and sources for all examples, extensions, and documentation. You can use the GitHub repository to quickly search all sources.

sample

Construct the diagram by creating one or more templates (with required attribute data binding) and adding model data.
<script src="go.js"></script>

<script id="code">
function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates

var myDiagram =
  $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
    { // enable undo & redo
      "undoManager.isEnabled": true
    });

// define a simple Node template
myDiagram.nodeTemplate =
  $(go.Node, "Auto",  // the Shape will go around the TextBlock
    $(go.Shape, "RoundedRectangle",
      { strokeWidth: 0, fill: "white" },  // default fill is white
      // 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"))
  );

// 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" },
  { 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" }
]);

}
</script> The
above diagram and model code create the following diagram. Users can now click on nodes or links to select them, copy and paste them, drag them, delete them, use mouse or finger to scroll, pan and zoom.

Support
Northwood Software provides GoJS with one-month free developer-to-developer support to help you start your project.

Read and search the official GoJS forum to find any topics related to your question.

For any non-technical questions about GoJS, such as sales or licensing questions, please visit Northwoods Software's contact form.

If you want to buy a genuine GoJS license, or for more product information, please click [Consult online customer service]