GoJS 2.1 Released: read about all new features and changes here

New animation capabilities, including the ability to specify custom animations. See the intro page on animation.

We publish a react component, gojs-react to simplify React integration, and host a React sample using GoJS called gojs-react-basic. See the GoJS with React introduction page for more information.

We host an Angular sample using GoJS called gojs-angular-basic.

GoJS is a JavaScript and TypeScript library for building interactive diagrams and graphs. GoJS allows you to build all kinds of diagrams and graphs for your users, from simple flowcharts and org charts to highly-specific industrial diagrams, SCADA and BPMN diagrams, medical diagrams like genograms, and more. GoJS makes constructing JavaScript diagrams of complex nodes, links, and groups easy with customizable templates and layouts.

GoJS offers many advanced features for user interactivity such as drag-and-drop, copy-and-paste, in-place text editing, tooltips, context menus, automatic layouts, templates, data binding and models, transactional state and undo management, palettes, overviews, event handlers, commands, and an extensible tool system for custom operations.

We maintain hundreds of sample diagrams, detailing different examples of interactivity, templates, and user logic for you to start from.

流程图

流程图

A standard flowchart, showing different node templates and several data bindings. Each node has 3 or 4 port elements. Links are orthogonal and avoid nodes.
状态图

状态图

A state chart diagram that also shows dynamic creation of new nodes and links on a button press.
桑基图

桑基图

Sankey diagrams show the amount of flow between nodes by the width of the links.
Genogram

Genogram

A genogram or pedigree chart is an extended family tree diagram that show information about each person or each relationship.
组织结构图编辑器

组织结构图编辑器

An organizational chart that allows user editing and re-organizing of the hierarchy.
动态端口

动态端口

Add ports to a selected node by clicking buttons or by using a context menu. Draw links by dragging between ports. If you select a link you can relink or reshape it.
Production Process

Production Process

Partially describes the production process for converting natural gas and oil byproducts into their end products.
重新分组

重新分组

Allows the user to drag nodes, including groups, into and out of groups, both from the Palette as well as from within the Diagram.

GoJS is implemented in TypeScript and can be used as a JavaScript library or built into your project from TypeScript sources. GoJS normally runs completely in the browser, rendering to an HTML5 Canvas element or SVG without any server-side requirements. It can also run in headless or server environments, like Node. GoJS does not depend on any libraries or frameworks, and can work alongside Angular, React, within Electron, or with no framework at all.

Build custom modeling environments and domain-specific visual languages using the powerful features of GoJS. Provide both a system editor and a read-only status monitor using shared code and templates. Simultaneously show alternative visualizations of the same data in different diagrams. Implement drill-down using expansion of subtrees and subgraphs or a detailed view in another diagram.

Our thorough documentation introduces the basic concepts and demonstrates typical features that most apps want to offer. Nodes and links can be arbitrarily detailed according to the needs of the application. There are many properties that permit simple permissions and customizations, and some methods may be overridden for more complicated customizations.

Use GoJS with your favorite frameworks

We publish a react component, gojs-react to simplify React integration, and host a React sample using GoJS called gojs-react-basic. See the GoJS with React introduction page for more information.

We host an Angular sample using GoJS called gojs-angular-basic.

We have a sample on using Vue.js with GoJS.

探索

Run over 200 sample apps that demonstrate flowcharts, org charts, mind maps, UML diagrams, BPMN diagrams, graph editors, data visualization, custom tools and layouts, and much more.

查看交互性例子

学习

Get started with a step-by-step description of how to build a JavaScript diagram in HTML using GoJS and some model data.

GoJS 快速入门教程 观看视频教程

下载

Get a copy of the library and all of the samples, extensions, and documentation. Search the JavaScript code and modify the samples to start your app.

下载资源包 克隆 Github 仓库 通过 Npm 安装

技术文档

Read our introduction for a overview of GoJS concepts and features, including hundreds of live interactive examples embedded right in each page.

Read the Introduction Pages

Unlimited Evaluation

Evaluate the full library without any limitations. Register with us and get free support for a month to help build your app.

Register for Support Contact Us

API 文档

Read our comprehensive documentation for an in-depth reference of the properties and methods of all of the JavaScript classes.

查看 API 文档

详细的版本发布记录请参阅 更新日志

加入 GoJS 交流群
GoJS 交流群 (769862113)