GoJS Integration with Modern Web Frameworks: React, Angular, and More
GoJS for HTML5 Canvas 2.1.8: A JavaScript Library for Interactive Diagrams
Do you want to create stunning diagrams for the web in JavaScript and TypeScript? Do you want to build apps with flowcharts, org charts, BPMN, UML, modeling, and other visual graph types? Do you want to have full control over the appearance and behavior of your diagrams? If you answered yes to any of these questions, then you should check out GoJS, a JavaScript library for HTML5 Canvas diagrams.
GoJS for HTML5 Canvas 2.1.8
What is GoJS?
GoJS is a JavaScript library that allows you to create and manipulate diagrams, charts, and graphs on the web. It is rendered with an HTML Canvas element (with export to SVG or image formats). It can run in a web browser, or server side in Node or Puppeteer. It supports interactivity, data-binding, layouts, and many node and link concepts.
Features and Benefits of GoJS
Some of the features and benefits of GoJS are:
It is flexible and customizable. You can define your own node and link templates, data models, layouts, tools, events, permissions, context menus, tooltips, etc.
It is powerful and efficient. You can handle large graphs with hundreds or thousands of nodes and links. You can also optimize performance by using virtualization, caching, or custom rendering.
It is easy to use and learn. You can get started with GoJS by following the tutorial or browsing the samples. You can also find comprehensive documentation and support on the official website.
It is compatible and integrable. You can use GoJS with any modern web framework, such as React or Angular. You can also export or import your diagrams to various formats, such as JSON, SVG, PNG, JPEG, etc.
How to Get Started with GoJS
If you are interested in using GoJS for your web projects, you will need to follow some simple steps to get started. Here is a brief overview of what you need to do:
Download GoJS from the official website or use a CDN link to load it in your HTML page.
Create a element in your HTML page with an explicit size and an id attribute.
In your JavaScript code, create a new go.Diagram object and pass the id of the element as the first argument.
Create a new go.Model object and populate it with an array of JavaScript objects that represent the nodes and links of your diagram. Each object should have a key property that uniquely identifies it.
Assign the model to the diagram by setting the myDiagram.model property.
That's it! You have created a basic diagram with GoJS. You can now interact with it by panning, zooming, selecting, moving, or editing the nodes and links. You can also save or load the diagram data as JSON by using the myDiagram.model.toJson() and myDiagram.model.fromJson() methods.
If you want to learn more about GoJS, you can follow the tutorial or browse the samples on the official website. You can also find comprehensive documentation and support on the website. GoJS is a powerful and flexible library that allows you to create any kind of diagram you can imagine. Whether you need flowcharts, org charts, state charts, sankey diagrams, genogram diagrams, or anything else, GoJS can help you achieve your goals. How to Use GoJS for Different Kinds of Diagrams
One of the great things about GoJS is that it can handle any kind of diagram you need. Whether you want to create flowcharts, state charts, sankey diagrams, genogram diagrams, org charts, or any other type of graph, GoJS can help you do it. In this section, we will show you some examples of how to use GoJS for different kinds of diagrams.
Flowcharts
A flowchart is a type of diagram that shows the steps or processes involved in a system or activity. It uses symbols and arrows to represent the flow of information or actions. Flowcharts are useful for visualizing complex logic, algorithms, or workflows.
To create a flowchart with GoJS, you can use the Flowchart sample as a starting point. This sample shows how to use node and link templates to define the appearance and behavior of the flowchart symbols and connectors. It also shows how to use data binding to populate the diagram from an array of JavaScript objects. You can customize the sample by changing the node and link templates, adding or removing nodes and links, or modifying the layout options.
Here is an example of a flowchart created with GoJS:
State Charts
A state chart is a type of diagram that shows the states and transitions of a system or entity. It uses circles and arrows to represent the states and events that cause them to change. State charts are useful for modeling dynamic systems, such as user interfaces, games, or protocols.
To create a state chart with GoJS, you can use the State Chart sample as a starting point. This sample shows how to use node and link templates to define the appearance and behavior of the state and transition symbols. It also shows how to use data binding to populate the diagram from an array of JavaScript objects. You can customize the sample by changing the node and link templates, adding or removing nodes and links, or modifying the layout options.
Here is an example of a state chart created with GoJS:
Sankey Diagrams
A sankey diagram is a type of diagram that shows the flow of energy, material, or information between different nodes. It uses thick and thin arrows to represent the magnitude and direction of the flow. Sankey diagrams are useful for visualizing resource consumption, production, or distribution.
To create a sankey diagram with GoJS, you can use the Sankey sample as a starting point. This sample shows how to use node and link templates to define the appearance and behavior of the sankey nodes and links. It also shows how to use data binding to populate the diagram from an array of JavaScript objects. You can customize the sample by changing the node and link templates, adding or removing nodes and links, or modifying the layout options.
Here is an example of a sankey diagram created with GoJS:
Genogram Diagrams
A genogram diagram is a type of diagram that shows the family relationships and medical history of a person or group. It uses symbols and lines to represent the gender, status, and connections of the family members. Genogram diagrams are useful for tracing ancestry, identifying patterns, or assessing risks.
To create a genogram diagram with GoJS, you can use the Genogram sample as a starting point. This sample shows how to use node and link templates to define the appearance and behavior of the genogram symbols and connectors. It also shows how to use data binding to populate the diagram from an array of JavaScript objects. You can customize the sample by changing the node and link templates, adding or removing nodes and links, or modifying the layout options.
Here is an example of a genogram diagram created with GoJS:
Org Charts
An org chart is a type of diagram that shows the structure and hierarchy of an organization or group. It uses boxes and lines to represent the roles, responsibilities, and relationships of the members. Org charts are useful for visualizing the chain of command, the span of control, or the communication channels.
To create an org chart with GoJS, you can use the Org Chart sample as a starting point. This sample shows how to use node and link templates to define the appearance and behavior of the org chart symbols and connectors. It also shows how to use data binding to populate the diagram from an array of JavaScript objects. You can customize the sample by changing the node and link templates, adding or removing nodes and links, or modifying the layout options.
Here is an example of an org chart created with GoJS:
Dynamic Ports
A dynamic port is a type of diagram that shows the connections between nodes that have variable numbers and positions of ports. It uses circles and lines to represent the ports and links. Dynamic ports are useful for modeling systems that have flexible or complex wiring, such as electrical circuits, network topologies, or data flows.
To create a dynamic port diagram with GoJS, you can use the Dynamic Ports sample as a starting point. This sample shows how to use node and link templates to define the appearance and behavior of the dynamic port symbols and connectors. It also shows how to use data binding to populate the diagram from an array of JavaScript objects. You can customize the sample by changing the node and link templates, adding or removing nodes and links, or modifying the layout options.
Here is an example of a dynamic port diagram created with GoJS:
Industrial Processes
An industrial process is a type of diagram that shows the steps and operations involved in a manufacturing or production system. It uses symbols and lines to represent the inputs, outputs, and transformations of the materials or products. Industrial processes are useful for visualizing the flow of resources, the efficiency of the system, or the quality of the output.
To create an industrial process diagram with GoJS, you can use the Industrial Process sample as a starting point. This sample shows how to use node and link templates to define the appearance and behavior of the industrial process symbols and connectors. It also shows how to use data binding to populate the diagram from an array of JavaScript objects. You can customize the sample by changing the node and link templates, adding or removing nodes and links, or modifying the layout options.
Here is an example of an industrial process diagram created with GoJS:
Dynamic Grouping
A dynamic grouping is a type of diagram that shows the grouping and ungrouping of nodes based on user interaction or data changes. It uses rectangles and lines to represent the groups and members. Dynamic grouping is useful for organizing complex or hierarchical data, such as categories, tags, or clusters.
To create a dynamic grouping diagram with GoJS, you can use the Dynamic Grouping sample as a starting point. This sample shows how to use node and link templates to define the appearance and behavior of the group and member symbols. It also shows how to use data binding to populate the diagram from an array of JavaScript objects. You can customize the sample by changing the node and link templates, adding or removing nodes and links, or modifying the layout options.
Here is an example of a dynamic grouping diagram created with GoJS:
How to Customize and Extend GoJS Functionality
Another great thing about GoJS is that it allows you to customize and extend its functionality to suit your specific needs. Whether you want to change the appearance, behavior, or data of your diagrams, GoJS provides you with various options and tools to do so. In this section, we will show you some examples of how to customize and extend GoJS functionality.
Automatic Layouts
One of the ways to customize GoJS functionality is to use automatic layouts. Automatic layouts are algorithms that arrange the nodes and links of your diagram in a certain way, such as tree, force-directed, grid, circular, etc. Automatic layouts can help you save time and effort by organizing your diagram for you. You can also adjust the layout parameters to fine-tune the results.
To use automatic layouts with GoJS, you can set the myDiagram.layout property to an instance of a go.Layout subclass, such as go.TreeLayout, go.ForceDirectedLayout, go.GridLayout, etc. You can also set the layout properties, such as alignment, spacing, direction, etc. You can also use different layouts for different parts of your diagram by using groups or subgraphs.
Here is an example of a diagram with an automatic tree layout:
Node and Link Templates
Another way to customize GoJS functionality is to use node and link templates. Node and link templates are definitions of the appearance and behavior of the nodes and links of your diagram. You can use node and link templates to create custom shapes, colors, styles, text, icons, images, buttons, etc. You can also use node and link templates to create custom events, actions, tools, permissions, etc.
To use node and link templates with GoJS, you can create a new go.Node or go.Link object and add various go.GraphObject elements to it, such as go.Shape, go.TextBlock, go.Picture, go.Panel, etc. You can also set the properties of the elements, such as fill, stroke, font, margin, alignment, etc. You can also add event listeners or bindings to the elements. You can then assign the node or link template to the myDiagram.nodeTemplate or myDiagram.linkTemplate property.
Here is an example of a diagram with custom node and link templates:
Data Binding
A third way to customize GoJS functionality is to use data binding. Data binding is a mechanism that connects the properties of the nodes and links of your diagram to the properties of the data objects that represent them. Data binding can help you simplify and automate the creation and update of your diagram. You can also use data binding to create dynamic or conditional effects.
To use data binding with GoJS, you can create an array of JavaScript objects that represent the nodes and links of your diagram. Each object should have a key property that uniquely identifies it. You can also add other properties that store the information or attributes of the node or link, such as color, text, image, etc. You can then create a new go.Model object and assign it to the myDiagram.model property. You can also use different subclasses of go.Model, such as go.GraphLinksModel or go.TreeModel, depending on the type of your diagram.
Then, in your node and link templates, you can use the go.Binding class to bind the properties of the elements to the properties of the data objects. For example, you can bind the fill property of a go.Shape element to the color property of a data object by using new go.Binding("fill", "color"). You can also use converters or expressions to modify or calculate the values of the bindings.
Here is an example of a diagram with data binding:
Undo & Redo
A fourth way to customize GoJS functionality is to use undo and redo. Undo and redo are features that allow you to revert or repeat the changes made to your diagram. Undo and redo can help you correct mistakes, experiment with different options, or track the history of your diagram. You can also use undo and redo to implement custom commands or actions.
To use undo and redo with GoJS, you can set the myDiagram.undoManager.isEnabled property to true. This will enable the built-in undo and redo functionality for your diagram. You can then use the myDiagram.undoManager.undo() and myDiagram.undoManager.redo() methods to undo or redo the changes made to your diagram. You can also use the myDiagram.commandHandler.undo() and myDiagram.commandHandler.redo() methods to invoke undo or redo from keyboard shortcuts or buttons.
You can also customize the undo and redo functionality by using transactions. Transactions are groups of changes that are treated as a single unit for undo and redo purposes. You can start a transaction by using the myDiagram.startTransaction(name) method, where name is a string that describes the transaction. You can then make any changes to your diagram within the transaction scope. You can end a transaction by using the myDiagram.commitTransaction(name) method, where name is the same string that you used to start the transaction.
Here is an example of a diagram with undo and redo:
Keyboard Shortcuts
A fifth way to customize GoJS functionality is to use keyboard shortcuts. Keyboard shortcuts are combinations of keys that trigger certain commands or actions for your diagram. Keyboard shortcuts can help you improve the usability and accessibility of your diagram. You can also use keyboard shortcuts to implement custom commands or actions.
To use keyboard shortcuts with GoJS, you can set the myDiagram.commandHandler.doKeyDown and myDiagram.commandHandler.doKeyUp methods to handle the key events for your diagram. You can then use the e.event.code property to get the code of the pressed key, and use the e.commandHandler.canExecuteCommand and e.commandHandler.executeCommand methods to check and execute the corresponding command. You can also use the e.event.preventDefault and e.event.stopPropagation methods to prevent the default or propagation of the key event.
You can also customize the keyboard shortcuts by using commands. Commands are strings that represent predefined or custom actions for your diagram. You can use the myDiagram.commandHandler.bindings property to create a new go.CommandBinding object and bind a command to a key combination. You can also use the myDiagram.commandHandler.standardCommands property to get or set the standard commands for your diagram.
Here is an example of a diagram with keyboard shortcuts:
Subgraphs
A sixth way to customize GoJS functionality is to use subgraphs. Subgraphs are groups of nodes and links that can be collapsed or expanded as a single unit. Subgraphs can help you simplify and organize your diagram by hiding or showing the details of certain parts. You can also use subgraphs to create custom events, actions, tools, permissions, etc.
To use subgraphs with GoJS, you can create a new go.Group object and add various go.GraphObject elements to it, such as go.Shape, go.TextBlock, go.Placeholder, etc. You can also set the properties of the elements, such as fill, stroke, font, margin, alignment, etc. You can also add event listeners or bindings to the elements. You can then assign the group template to the myDiagram.groupTemplate property.
Then, in your data model, you can add a property that indicates whether a node belongs to a group or not. For example, you can add a group property that stores the key of the group node. You can also add a property that indicates whether a group is collapsed or expanded. For example, you can add an isGroupExpanded property that stores a boolean value.
Here is an