GoJS, a JavaScript Library for HTML Diagrams

JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

Description

Read more about GoJS at gojs.net

This repository contains both the library and the sources for all samples, extensions, and documentation.

You can use the GitHub repository to quickly search through all of the sources.

Programming language: HTML

License: GNU General Public License v3.0 or later

Tags: Data Visualization     Timeline     Validation     SVG     Node     Flow     Radial     Circular     Grid     Tooltip     Template     Table     Visualization     Graph     Chart     Highlight     Comment     Editor     Parallel     Sequence     Context-menu     Data Flow     Model     Selection     Graphics     Canvas     Tool     Layout     Bezier     View     Spreadsheet     Data Binding     Tree     state     Monitor     Connection     Binding     Link     Palette     Sankey     Treemap     Printing     Diagram     Flowchart     Orgchart     Uml     Bpmn     Inspector     Drawing     Shape     Hierarchy     Group     Vertex     Edge     Port     Label     Arrowhead     Family-tree     Decision-tree     Mindmap     Tournament     Treeview     Pipe-tree     Genogram     Ivr-tree     Parse-tree     Concept-map     Euler     Entity-relationship     Er-diagram     Friend-wheel     Graph-distances     Graph-paths     Pert     Gantt     Layer     Swimlane     Virtualization     Process     Sequential-function     Grafcet     Circuit     Record     Field     Dataflow     Planogram     Seating     Pipes     Overview     Grid-layout     Tree-layout     Force-directed     Layered     Hierarchical     Fishbone     Ishikawa     Serpentine     Tree-map     Freehand     Polygon     Polyline     Panel     Databinding     Transaction     Coordinates     Subgraph     Command     Button     Legend    

Latest version: v2.1.31

README

GoJS, a JavaScript Library for HTML Diagrams

GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs.

See GoJS Samples

Get Started with GoJS

GoJS is a flexible library that can be used to create a number of different kinds of interactive diagrams, including data visualizations, drawing tools, and graph editors. There are samples for flowchart, org chart, business process BPMN, swimlanes, timelines, state charts, kanban, network, mindmap, sankey, family trees and genogram charts, fishbone diagrams, floor plans, UML, decision trees, pert charts, Gantt, and hundreds more. GoJS includes a number of built in layouts including tree layout, force directed, radial, and layered digraph layout, and a number of custom layout examples.

GoJS is rendered with an HTML Canvas element (with export to SVG or image formats). GoJS can run in a web browser, or server side in Node or Puppeteer. GoJS Diagrams are backed by Models, with saving and loading typically via JSON.

Read more about GoJS at gojs.net

This repository contains both the library and the sources for all samples, extensions, and documentation. You can use the GitHub repository to quickly search through all of the sources.

Minimal Sample

Graphs are constructed by creating one or more templates, with desired properties data-bound, and adding model data.

<div id="myDiagramDiv" style="width:400px; height:150px;"></div>

<script src="https://unpkg.com/gojs"></script>

<script>
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
myDiagram.nodeTemplate =
  new go.Node("Auto")  // the Shape will automatically surround the TextBlock
    // add a Shape and a TextBlock to this "Auto" Panel
    .add(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
    .add(new go.TextBlock({ margin: 8, 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" },
    { 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 creates the following graph. The user can now click on nodes or links to select them, copy-and-paste them, drag them, delete them, scroll, pan, and zoom, with a mouse or with fingers.

Click the image to see the interactive GoJS Diagram

Support

Northwoods Software offers a month of free developer-to-developer support for GoJS to help you get started on your project.

Read and search the official GoJS forum for any topics related to your questions.

Posting in the forum is the fastest and most effective way of obtaining support for any GoJS related inquiries. Please register for support at Northwoods Software's registration form before posting in the forum.

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

License

The GoJS software license.

Copyright (c) Northwoods Software Corporation