JointJS+, professional diagramming library for interactive UIs

Essential Shapes

Essential shapes are all of the standard shapes you expect to meet when working with SVG, and some other unique standard shapes that JointJS provides.

Description

Does your diagram require some basic shapes like Rectangles or Circles? Or maybe you need a shape with a header, or embedded image. If that’s the case, essential shapes have you covered.

Easily customize the style and attributes of your shape to meet the theme of your application. If you are familiar with SVG attributes, this will be a very simple process in JointJS.

Examples

Essential shapes are featured throughout our applications, take a look at our demos page to see them in action.

Custom Shapes

Do you have a specific or complex shape in mind that is not provided in essential shapes? JointJS allows you to create custom shapes in order to make any diagram you can imagine.

Description

JointJS provides you with the ability to create any custom shape from scratch while also enabling users to extend existing shapes which means you can use any existing shape as the base for a custom one.

If you are already familiar with SVG, creating new shapes in JointJS is a very simple process. You can read about basic SVG elements and their attributes in our documentation, or the wide variety of information available online.

The important thing to remember is that by combining these basic shapes, you can create any 2D shape you need.

Examples

Like essential shapes, custom shapes can be found throughout our applications. See some examples in the following demos:

• Container
• Sequence
• Marey
• Chatbot
• Kitchen Sink
• Database
• Mind Map
• And many more!

Want to learn how to create custom elements or shapes? Check out the following tutorials: https://resources.jointjs.com/tutorial/custom-elements
https://resources.jointjs.com/tutorial/ts-shape.

HTML Shapes

HTML excels at interactive elements. Using HTML elements in JointJS diagrams has never been easier thanks to the SVG foreignObject element.

Description

In order to create basic interactive elements like buttons and inputs, developers often want to reach for HTML as their tool of choice. Creating SVG shapes that contain HTML is a straightforward process in JointJS. Place whatever HTML you need inside foreignObject, and you are good to go.

Taking advantage of foreignObject in JointJS allows for even more innovative and interesting UIs (User Interfaces) within your diagrams.

Examples

• ‍ROI Calculator
• Microsoft Adaptive Cards

Need some help getting started? Check out our foreignObject tutorial.

Featured Shapes

JointJS+ also provides some additional shapes for users. BPMN (Business Process Model and Notation) and VSM (Value Stream Mapping) are some of the business specific shapes available for visual modeling. Some more complex shapes with advanced functionality such as table-like shapes are also available for users.

Description

If your application needs to visualize some enterprise process workflows, you may be able to take advantage of our BPMN or VSM shapes. Based on open standards for graphical flowcharts, it’s quite easy to incorporate these shapes into your JointJS diagrams.

Need some more complex functionality, but don’t have time to create some custom shapes? You can utilize some of the table-like shapes for your data visualization. If you need elements with scrollable content, our featured shapes can help you accomplish this too.

All of our featured shapes are added to diagrams in the same manner as essential or custom shapes, and they are easily customizable with the SVG attributes you are familiar with.

Examples

You can view our BPMN shapes in the following demos:

• BPMN Editor
• Visio - BPMN Import, BPMN Export, Orgchart Import, Flowchart Import

Table-like shapes are used in the following demos:

• Database
• Data Mapping
  

Take a look at our VSM documentation here: https://resources.jointjs.com/docs/rappid/v3.6/shapes.vsm.html.

Routers, Connectors & Anchors

Determine link behavior in JointJS with built-in or custom routers, connectors and anchors. 

Description

Routers transform link vertices in route points that the link should travel through. JointJS provides various built-in routers, all of which provide a different style in your applications.

Connectors accept route points, and generate SVG path commands so that the link can be rendered. If for example, you need rounded corners on the route, that’s where connectors come into play.

Anchors are the points in a reference element where a link wants to have its endpoint. Possible values could be left, right, top or bottom, etc.

Examples

These features can be found in most of our demos, some example are:

• Smart Routing
• Links
• Petri Nets

Element & Link Tools

Element and Link tools provide control panels to manipulate shapes.

Description

JointJS provides a lot of built-in tools for manipulating shapes, and it’s also possible to create your own element and link tools. Buttons, Connect tools, or Remove icons are all examples of common tools you may require for your application.

A tool is a view which renders a certain type of control panel above the Element view it’s attached to. Make sure to check out our documentation to see all the available tools for users, and the different options each tool can take.

Luckily, JointJS provides a lot of useful tools right out of the box, so you can save some time and focus your development efforts elsewhere.

Examples

These features can be found in most of our demos, some examples are:

• Curves
• Sequence
• Links

Events

JointJS provides users with a rich set of events that can enable user interaction. 

Description

Events can be triggered on the JointJS paper, or individual elements and links. This provides a lot of reactivity within JointJS diagrams which allows you to run the code of your choice depending on a particular action.

As user interaction is at the core of modern applications, JointJS certainly has you covered in that regard. JointJS provides a wide variety of events to work with. If you need to react to user interaction like a mouse click, or determine a state change in your diagram model, JointJS makes it easy to provide custom functionality to users in these moments.

Examples

Events are obviously very common in JointJS, but you will find some particular examples in the following demos:

• Curves
• Sequence
• Marey
• Mind Map

Highlighters

JointJS allows you to provide additional visual emphasis to your elements and links via highlighters. 

Description

Highlighters can really make certain features of your diagrams stand out if necessary. JointJS comes with some built-in highlighters, but you can also create your own custom highlighters to create any effect you would like.

Highlighters can be used along with user interaction such as a click event to provide some really nice functionality for your JointJS applications.

Examples

Highlighters can be found in the following demos:

• Diagram Index
• Sequence
• Curves

Default Layouts

JointJS provides a wrapper for a 3rd party layout library which helps to lay out directed graphs. JointJS also makes it very easy to lay out the position of ports and their labels on JointJS elements.

Description

JointJS provides a wrapper to call the layout directly on JointJS graphs to take advantage of automatic layouts without having to worry about element positions slowing you down. Make sure to take a look at our documentation to include all the dependencies you need for working with directed graphs.

If your diagram has elements that use ports, JointJS also provides predefined and custom layouts for positioning ports. This enables the user to adjust and keep track of port positions in a simple manner. JointJS also provides the ability to lay out port labels automatically.

Examples

Automatic layout of directed graphs can be found in the following demos:

• Fault Tree Analysis
• Directed Graph Layout
• Kitchen Sink
• Layout
• Tokens
  

Take a look some Port Layout demos in our documentation: https://resources.jointjs.com/docs/jointjs/v3.6/joint.html#layout.Port.

Additional Layouts

JointJS+ provides users with the ability to automatically lay out graphs and elements in a multitude of ways. Additional layouts that are available to users in JointJS+ are Grid, Stack, Force Directed, and Tree layouts.

Description

Take advantage of automatic layouts without having to worry about element positions slowing down your development. Achieve a multitude of complex layouts for your graphs and elements with ease.Grid and Tree layouts are probably more common, but combining those with Stack and Force Directed layouts, JointJS+ really opens up a lot of possibilities for how your applications will function and appear visually.These layouts really shine with large and small diagrams, or diagrams imported from data sources. Make sure to take a look at our documentation to make yourself familiar with all of the options you can take advantage of with each layout.

Examples

TreeLayout can be found in the following demos:

• Mind Map
• Orgchart
• Tree Stencil

StackLayout can be observed in:

• Team Order
• Kanban
• Yamazumi 3D
  

GridLayout can be found in:

• BPMN Editor
• Dynamic Stencil
• Planogram

You can take a look at the ForceDirected layout here:

• Shortest Path Finder (Dijkstra)

Fast Graph Traversal

JointJS provides fast algorithms for graph traversal.

Description

BFS (Breadth-first search) and DFS (Depth-first search) are two such examples that are available to users of JointJS. Are you working with directed graphs or tree-like graphs? If the answer is yes, you can certainly utilize this functionality to traverse your graph.

Depending on your data model, your elements might have ancestors, successors or neighbors. JointJS provides a simple API for working with such models which make it a powerful and efficient tool for working with graphs of this nature. 

Examples

• Container
• Mix Bus
• Fault Tree Analysis (FTA)
• AST Visualizer
• Collapsible
• Mind Map

Custom Properties

Custom properties in JointJS allow users to hook their own data to any element, link or diagram.

Description

If you are familiar with SVG attributes, you know that these often contribute to the visual aspect of shapes. While presentation attributes provide us with great functionality, occasionally we might want to create our own attributes to help us work with our shape. This is where custom properties come in useful.

Maybe we want a boolean to represent a state, a number for our threshold value, or just provide some attributes which represent our specific problem, all of these could be possible use cases for a custom property.

To work with presentation attributes, we usually use the attr() method. However, when working with custom properties, we recommend working with prop() and set(). These methods will help you store custom data on the model, while at the same time also providing a nice separation between custom and presentation attributes if needed. 

Examples

• Container
• Tasks
• Database
• Data Mapping
• Mind Map

View & Model architecture

Using JointJS, you gain a strong underlying graph data model that comes with a rich API for programmatic graph manipulation.

Description

Its MVC (more MV) architecture separates graph, element and link models from their rendering, which makes it easy to plug JointJS into your backend application. JointJS is not trying to reinvent the wheel for technologies that are commonly used by web developers; things that you learn with JointJS will be useful to you elsewhere

A diagram in JointJS is represented by a Graph model to which you add models of cells - either Elements or Links. To present the diagram, attach it to a Paper view. In JointJS, you manipulate models, not views. The paper generates ElementViews and LinkViews for you from the data provided by the graph models. 

Examples

This architecture is at the heart of JointJS, that means you can take a look at any of our demos to see it in action.

Undo / Redo

Travel the history of your graph as much as you need with the CommandManager component in JointJS+.

Description

The CommandManager component keeps track of graph changes and allows you to travel the history of those changes back and forth. There is no limitation to the number of levels one can undo/redo. 

CommandManager listens to graph changes, and when any cell's attribute is changed it stores the difference. It stores every change made to the graph's cells into an undoStack, and every reverted change into a redoStack. It allows you to revert the changes stored in those stacks.

Undo / Redo is commonplace in modern applications, and users have come to expect it in modern interfaces. As JointJS+ takes care of the details, you can provide this to your users with the CommandManger component in JointJS+. 

Examples

• Chatbot
• Data Mapping
• Kanban
• Kitchen Sink
• Mind Map

Validation

Make sure actions and commands don’t lead to invalid diagram states with the Validator component.

Description

The Validator component runs a set of callbacks to determine if a command is valid. This is useful for checking if a certain action in your application leads to an invalid state of the diagram (from your application specific perspective). 

With the Validator, it’s not only possible to cancel the command, but you can give your users a hint that the action is not allowed. Validation works in conjunction with undo / redo functionality in JointJS+, so make sure to take a look at our documentation for the recommended setup.

With high quality Validation available to your users, you can be confident they are not experiencing any unexpected behaviour, and also provide them with some intuitive help to show them how to use your application.

Examples

• Planogram

Geometry & Vectorizer Libraries

JointJS comes with two libraries that can also be used as standalone libraries in other applications.

Description

Geometry is a lightweight library built-in to JointJS. This library implements many useful geometric operations that you can take advantage of in any applications you create.

Vectorizer is a little SVG helper library. Like Geometry, it can be used even without JointJS. It is a very helpful library, making life easier when dealing with SVG. You can think of it as a very lightweight jQuery for SVG.

Examples

The Geometry & Vectorizer libraries are at the heart of JointJS, so you will find them in all of our demos either under the hood, or occasionally front and center.

Dagre & Graphlib Libraries

JointJS integrates with 3rd party libraries that make it easy to lay out directed graphs and work with data structures.

Description

Dagre is a JavaScript library that makes it easy to lay out directed graphs on the client-side. Dagre requires only very basic information to lay out graphs, such as the dimensions of nodes.

Graphlib is a JavaScript library that provides data structures for undirected and directed multi-graphs. In addition to a core graph API, it also comes with implementations for many common graph algorithms.

Examples

Integration with Dagre and Graphlib can be found in the following demos:

• Container
• Directed Graph Layout
• Fault Tree Analysis

JavaScript Frameworks

JointJS is just a JavaScript library at the end of the day. That means it integrates with all of your favourite frontend frameworks.

Description

Are you working with modern JavaScript frameworks? JointJS has you covered. Check out some of our demos where we integrate JointJS into different frameworks, or take a look at our tutorials for how to get up and running with JointJS, and the framework of your choice.

If you are working with component libraries for your particular framework, these can also be utilized when working with JointJS. Check out our Diagram Index and Tabs demos which use some common component libraries within different JavaScript frameworks.

We have applications and tutorials that cover React, Angular, Vue and Svelte. 

Examples

• Kitchen Sink
• Chatbot
• Diagram Index
• Tabs

Take a look at our framework tutorials here: https://resources.jointjs.com/tutorial.

JSON

JointJS provides a simple API to import diagram representations, and prepare those representations for export. Data serialization with JSON objects is made easy with JointJS.

Description

In JointJS, data serialization is done through two import/export functions on the Graph class. The first function graph.toJSON() converts the whole graph into a JSON object, and the second function, graph.fromJSON() overwrites the current graph contents with converted contents of a provided JSON object.

The functions preserve all cells that have been added to the graph. Additionally, note that custom properties saved on the graph are preserved as well. You can use this to store additional state information.

Examples

• Marey
• Puzzle
• BPMN Editor
• Chatbot
• Kitchen Sink

Image

Do you need to export your diagrams in image formats? JointJS+ allows users to export diagrams in useful formats like JPEG or PNG.

Description

JointJS+ provides a simple API for exporting diagrams as JPEG or PNG raster formats on the client-side.
Make sure to take advantage of some of the options that are available to users too, configuring values like width and height of output images is a very simple process.

Worried about image size? It’s also possible to configure the quality of output images, and choose a level of compression which suits your application and user needs.

Examples

• Chatbot
• Kitchen Sink

SVG

Do you need to export your diagrams as SVG? JointJS+ enables users to easily export as SVG via some useful methods.

Description

JointJS+ provides a simple API for exporting diagrams as SVG on the client-side. The method toSVG() converts the content of the diagram to an SVG string, and allows you to perform some action on that string.

The method openAsSVG() opens a new browser window with an SVG representation of the diagram content.

Examples

• Data Mapping
• Kitchen Sink
• AST Visualizer

Canvas

JointJS+ provides diagram export as a 2D HTMLCanvas for users.

Description

Utilizing a simple API, JointJS+ makes it easy to export diagrams as a 2D HTMLCanvas on the client-side. The method toCanvas() converts the content of the diagram to a canvas, and allows you to perform some action upon it.

Examples

Currently, we don’t have a Canvas example in some of our demos, but it is used in a similar manner to other exports in JointJS+ such as image or SVG.

Visio

JointJS+ makes it easy to work with Microsoft Visio. Import and export Visio archives easily with a simple API.

Description

Do you need to work with data representations like Visio? As Visio allows you to visualize complex ideas easily, making JointJS compatible with Visio archives was certainly a priority for us. As a result, it’s now a seamless experience to work with Visio in JointJS+.

It’s easy to convert Visio shapes to JointJS cells, as well as exporting a JointJS Paper as a VSDX archive.

Examples

• Visio - BPMN Import, BPMN Export, Orgchart Import, Flowchart Import

Print

JointJS+ can prepare a diagram for printing and initiates printing using the browser print wizard.

Description

Even in modern times, printing is still a requirement for business and institutions. If a process needs to be visualized, and the resulting diagram printed, then JointJS+ has you covered.

JointJS+ gives you this functionality with a simple API and many options that you’ve come to expect when configuring and preparing pages for printing.

Examples

• BPMN Editor
• Chatbot
• Kitchen Sink

Property Editor and Viewer

JointJS+ enables users to configure properties for diagram models and shapes via the Inspector component.

Description

The Inspector creates an editor and viewer of cell model properties. It creates a two-way data-binding between the cell model and a generated HTML form with input fields. These input fields can be defined in a declarative fashion using a plain JavaScript object. 

Not only can visual attributes be configured for editing in the inspector, but also custom data that will be set on the cell model! This all makes the inspector an extremely flexible and useful widget for use in applications.

As two-way data-binding dependent on user input is at the heart of many frontend applications, you will have no difficulty achieving this with the Inspector in JointJS+.

Examples

• BPMN Editor
• Chatbot
• Database
• Data Mapping
• Kitchen Sink

Element Palette

Organizing your shapes in JointJS+ is made easy with the Stencil component. Drag & drop your shapes onto diagrams providing a rich experience for users.

Description

The Stencil implements a palette of JointJS elements while providing the structure and organization that modern applications need. As the stencil was designed with users in mind, it also allows you to drag & drop your shapes onto diagrams in an intuitive manner.

The Stencil itself provides a lot of customization, do you need certain groups in the element palette, or a rich search experience?  Achieving the structure your application needs is certainly possible with a multitude of options available.

As your application users will expect an intuitive UI and engaging user experience, the Stencil will add all of this to your applications.

Examples

• BPMN Editor
• Chatbot
• Tree Stencil
• Dynamic Stencil
• Kitchen Sink

Inline Text Editing

The ability to edit rich text is made easy in JointJS+ with a powerful Text Editor component.

Description

The Text Editor is a powerful (rich-text) inline text editor that can be used on any SVG text element. Among its many features are rich-text editing of SVG text, caret & selections, double-click to select words, and keyboard navigation native to the underlying OS.

Providing the text editing experience your users need is important, so make sure to consult our Text Editor documentation to make yourself familiar with the API, and the many options provided for configuring the functionality required for your application.

Nowadays users expect immediate feedback, and providing them with inline text editing certainly achieves that. If you are familiar with other modern applications that provide text editing, you will be right at home with the Text Editor in JointJS+.

Examples

• Rich Text Editor 
• Mind Map
• Question Answer Dialog Generator (QAD)

Zoom & Scroll

Use the PaperScroller component with its scroll and zoom functionality to make finding your way around diagrams easy.

Description

Navigating modern applications can sometimes be difficult. As the PaperScroller component provides a nice API with a lot of configuration for zoom and scroll, it enables seamless navigation around your diagrams.

The PaperScroller wraps the paper element and implements scrolling, panning, centering and auto-resizing of the paper content. The PaperScroller creates a window to the paper area. This way, the actual paper can be large but the user will only see the PaperScroller area which they can scroll & pan.

Remove the headaches and development time needed in order to decide how users move around diagrams with the PaperScroller component in JointJS+.

Examples

• Chatbot
• Data Mapping
• Database
• Kitchen Sink
• Mind Map

Minimap

Display a smaller secondary view of your diagram as a minimap which utilizes the Navigator component in JointJS+.

Description

The Navigator component is a UI widget that displays a smaller view of a larger diagram. It's a quick way for users to navigate diagrams with a pannable and resizable rectangle.

The Navigator is used in conjunction with the PaperScroller component, and requires it as a parameter when creating a navigator instance. Make sure to check out our Navigator documentation to make yourself familiar with the API and configuration options.

Additional ways to navigate applications are always appreciated by users, and you can provide this possibility with the minimap available in JointJS+.

Examples

• Kitchen Sink

Copy & Paste

If you need some copy to clipboard functionality, JointJS+ allows users to copy & paste JointJS cells.

Description

In modern applications, users interact with interfaces in many ways. Copying content to a clipboard is one of the many actions that people come to expect when using the web.

Luckily, JointJS+ takes care of implementing this functionality for you, and allows users to copy & paste JointJS cells with ease. The JointJS+ clipboard also allows you to store cells in local storage, or even copy cells from one paper to another depending on your application setup.

The clipboard is probably the best when used in combination with the Selection plugin in JointJS. We suggest looking at the documentation for the Selection plugin for further details on using selections.

Examples

• Kitchen Sink

Keyboard

Create keyboard shortcuts in your JointJS+ applications.

Description

The Keyboard plugin allows users to create keyboard shortcuts in JointJS+ applications. It allows you to bind custom handlers (functions) to arbitrary keyboard events (e.g a single keystroke, key combination).

If you need to limit what DOM elements consume certain events, JointJS+ allows you to filter those elements providing you with a lot of flexibility when it comes to keyboard shortcuts.

There aren’t limits to the amount of shortcuts one can create, so you can really enable your users to save time when navigating or performing actions via the keyboard in your applications. 

Examples

• BPMN Editor
• Chatbot
• Kitchen Sink

Selection

JointJS+ allows you to select a group of elements as a collection, and also display a control panel above a selected element.

Description

Using the Selection plugin makes it easy to store selected cells in a collection. It will implement the selection, move the selection in one go, and manipulate the selection in terms of selecting/deselecting individual elements.

The Halo component creates a control panel above an element with various tools. This gives the user control while placing tools directly over the selected element itself.

Allowing users to select elements as a group, and control an element as they wish is an integral part of any diagramming application. JointJS+ provides you with the right tools to make sure this functionality is available to users.

Examples

• BPMN Editor
• Dynamic Stencil
• Kitchen Sink
• Tree Graphs

Popups & Menus

Provide some extra contextual information to your users via a Popup, ContextToolbar or other modal style components in JointJS+.

Description

When users interact with complex information, they need all the help they can get. Utilizing popups and menus to provide some additional information can really go a long way in helping users understand diagrams and visualizations.

A popup can quickly display some information over a target element while also keeping track of the popup that is open. This means you don’t have to worry about closing a popup before opening another one. A ContextToolbar could display a set of buttons that enable some user-interaction.

If you need to display some additional information, a dialog with a question, or even a lightbox, JointJS+ provides many options for modal style components.

Examples

• Shortest Path Finder (Dijkstra)
• Data Mapping
• Kitchen Sink

Toolbar

Enrich your JointJS+ application functionality with easy to reach tools via the Toolbar component.

Description

Allowing users to access various tools when working with diagrams increases the interactivity the application provides while also enabling some useful functionality. Typical actions a user may need at hand could be undo / redo, zoom, or export, just to name a few.

With the JointJS+ Toolbar, it is possible to streamline all of this functionality into one Toolbar, and place it in an easily accessible position for users. The Toolbar will act as a container for your tools. 

Examples

• BPMN Editor
• Chatbot
• Data Mapping
• Kanban
• Kitchen Sink

Tooltips

Display positioned messages or technical information anywhere in your diagram UI via the Tooltip component.

Description

When users interact with complex information, they need all the help they can get. Utilizing tooltips to provide some additional information can really go a long way in helping users understand diagrams and visualizations.

Tooltips allow you to position your messages, and one Tooltip instance will manage multiple tooltips. Make sure to check out our documentation for the many configuration options available when utilizing toolips.

With a simple API to manually control behaviour of the tooltip, the Tooltip can become a powerful tool in JointJS+ applications.

Examples

• BPMN Editor
• Chatbot
• Kitchen Sink
• Tokens

Path & Transformation

Easily edit and transform SVG paths with multiple JointJS+ plugins such as PathEditor or FreeTransform.

Description

Being able to edit a path of an element quickly is an important tool for many diagram applications. Not only does it provide interactivity, but it also allows users to achieve the shapes they want in a quick and efficient manner. Simply manipulating shapes with the PathEditor or FreeTransform gives immediate results.

FreeTransform provides a control panel above an element, it provides functionality like resizing and rotation. The PathEditor allows users to edit path elements via a path overlay. You can interact with segments, anchor points and curve control points. Lasty, the PathDrawer enables users to actually draw path elements.

Examples

• BPMN Editor
• Data Mapping
• Kitchen Sink
• Vector Editor

Drag & Drop

Provide Drag & Drop functionality to users working with complex layouts via the TreeLayoutView and StackLayoutView plugins.

Description

Drag & Drop is one of the many types of interaction users have come to expect from modern applications. While JointJS+ provides drag & drop via components like the Stencil, it also provides Drag & Drop functionality in complex layouts like a Tree or Stack.

TreeLayoutView and StackLayoutView are views which implement common actions that are associated with their respective type. The TreeLayoutView allows common tree manipulation while the StackLayoutView allows you to move elements between stacks.

If you simply want to take advantage of dragging and dropping elements onto a JointJS paper, the Stencil plugin is for you. If however, you need drag & drop functionality in a complex layout, you can definitely take advantage of the TreeLayoutView and StackLayoutView available in JointJS+.

Examples

• Kanban
• Mind Map
• Team Order
• Yamazumi 3D

Snaplines & Measurement

Give users some extra precision with guidelines for element alignment, or a set of shapes for displaying dimensions of objects, the distances between them, and their relative angles.

Description

Modern applications, especially those that provide some kind of positional editing, often provide guidelines when users are moving content around. An application created with JointJS+ is no different, the Snaplines component is great for helping users align elements.

The measurement shapes essentially provide some extra tools for displaying dynamic mathematical information such as dimensions, distances or angles. 

If your users need some extra precision within their diagrams, Snaplines or measurement shapes are certainly features that could come in useful.

Examples

• Angles
• Distances
• Kitchen Sink
• Vector Editor