days to give it a try before you buy! Download now. The best deals on licenses are coming soon Download now. The best deals on licenses are coming soon
Back
Download
En
Choose language
En
Ru Kr
En
En
Ru Kr
Download
Complex widgets
Data widgets
Visualization widgets
Control widgets
Navigation widgets
Windows and popups
Layouts

Javascript Diagram Library

JavaScript Diagram is a ready-made library for creating any kind of diagrams with the ability to automatically place tree-like data, as well as organize data with cyclic dependencies. In Diagram, you can define the shape of blocks and their style, and set up links between them.

Download JS Diagram Buy
diagram
1 2 3 4

1. Block layout

  • automatic placement according to the specified links
  • flexible configuration of the automatic placement algorithm
  • placement at the specified coordinates

2. Block styling

  • using CSS
  • using the style properties of blocks

3. Selecting the shape of the blocks

  • in the shape of a rectangle by default
  • choosing from a range of built-in SVG shapes: diamond, triangle, trapezoid, etc.
  • ability to provide your SVG as a shape

4. Setting up links between blocks

  • styling relationships through CSS and style properties
  • different types of arrows for links
  • drawing at the specified coordinates

Advantages of Webix JavaScript Diagram

Integration with jQuery, AngularJS, Vue.js, React and third party libraries.

Meets Section 508

Support of all modern browsers

Quick styling with CSS

Ready for Touch Devices

Quick and smooth navigation

Advanced JS Diagram features for your JavaScript web apps

features-1

  • The ability to set the automatic width or height of the blocks.

features-2

  • The ability to select the shape of the diagram blocks from the suggested list, as well as add your own shape.

features-3

  • Ability to style blocks (background colors, rotation, text style, and alignment, etc.).

features-4

  • The ability to set different types of links, stylize lines, and draw them according to strictly defined coordinates.

features-5

  • Ability to create blocks for tree diagrams.

features-6

  • Ability to perform all CRUD operations (create, read, update, delete) with data elements.

features-7

  • Ability to filter the data of the diagram blocks.

features-8

  • The ability to edit blocks, resize, restyle and customize links, rotate blocks through the interface, pull lines and change their paths, create curving links, add labels, set arbitrary shapes to blocks.

JavaScript Diagram Gallery live demo

Open Fullscreen Demo

Webix Diagram Library licensing

Code samples

JS Diagram code examples

Examples of integrating JS Diagram into any web apps
Documentation

JS Diagram documentation

Detailed documentation on the usage and customization of the Webix JS Diagram
Guide

JS Diagramt User Guide

Learn the user guide to know the features of the widget and how to use them properly

Related Articles

5 Best Data Visualization Tools by Webix

5 Best Data Visualization Tools by Webix
Comparing capabilities of Diagram and Organogram

Comparing capabilities of Diagram and Organogram
Webix 10.3: Typing Mode for Bot-generated Responses in Chat, Data Facets in Report Manager, Standalone Lines in Diagram

Webix 10.3: Typing Mode for Bot-generated Responses in Chat, Data Facets in Report Manager, Standalone Lines in Diagram
Webix 9.4: Multilevel Pie charts, labels and curved links for Diagram, printing several sheets at once for SpreadSheet

Webix 9.4: Multilevel Pie charts, labels and curved links for Diagram, printing several sheets at once for SpreadSheet

Create rich user interfaces with Diagram JS widget

Download Free Trial
© 2013-2025
All product and company names herein may be trademarks of their respective owners.
Rating 4.8
based on reviews of 47 customers