Gojs

JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
Alternatives To Gojs
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Flow15,95270a day ago259September 14, 202283mitTypeScript
Highly customizable library for building an interactive node-based UI, workflow editor, flow chart or static diagram
Gojs6,87511083a month ago243September 12, 2022otherHTML
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
Wireflow3,265
6 months ago27mitJavaScript
Wireflow - user flow chart real-time collaborative tool
React Flow Chart1,2878126 months ago14June 28, 2020100mitTypeScript
🌊 A flexible, stateless, declarative flow chart library for react.
Awesome Canvas610
6 months agomit
Canvas资源库大全中文版。An awesome Canvas packages and resources.
Vue Super Flow4971a year ago20July 21, 20212mitVue
Flow chart component based on Vue。vue flowchart
Jquery.flowchart366
63 years ago2May 14, 201677otherJavaScript
JQuery plugin that allows you to draw a flow chart.
Flowy Vue36015 months ago12July 08, 202037mitVue
Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.
Angularjs Flowchart267
2 years ago1March 31, 2016mitJavaScript
An example/template WebUI control for visualizing and editing flow charts
Ng Flowchart86
2 months ago32March 24, 20225apache-2.0TypeScript
A lightweight Angular Library for building drag and drop flow charts. Chart behavior and steps are customizable. Data can be exported or uploaded in json format.
Alternatives To Gojs
Select To Compare


Alternative Project Comparisons
Readme

GoJS, a JavaScript Library for HTML Diagrams

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

npm open issues last commit downloads Twitter Follow

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

Popular Chart Projects
Popular Flowchart Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Javascript
Typescript
Html
Graph
Visualization
Layout
Chart
Canvas
Data Visualization
Diagram
Flowchart
Es6 Modules