Must-Know Pros and Cons of JavaScript Diagram Editors

Nowadays, the ability to work quickly and efficiently with large amounts of data has become a priority for the business world. Companies of different sizes and industry sectors actively apply various data visualization tools such as charts and diagrams in their projects to present complex data to the public in an informative and visually compelling way. Such tools are commonly implemented by developers in websites or web apps with the help of various open-source or commercial JavaScript libraries complemented with numerous helpful features.

But the thing is that not so many JS diagramming libraries offer online diagram editing tools, or simply Diagram Editors. Diagram editors allow end-users to promptly create different types of diagrams from scratch and edit them on the fly without coding. It is extremely important for businesses that work with frequently changing data. In this article, we will consider the pros and cons of four diagram editors that come with JavaScript libraries, take a closer look at their functional capabilities, and see how they benefit web developers and end-users.

DHTMLX Live Diagram Editors

DHTMLX Diagram is a JavaScript diagramming library for presenting data in the form of well-structured and easily configurable diagrams. It has two live editors, which can be customized and embedded into web apps: Org Chart Editor and Diagram Editor.

The user interface of DHTMLX diagram editors looks modern and user-friendly. It includes the following sections: toolbar with buttons, grid area, left panel, and right panel.

DHTMLX Diagram editors enable end-users to create diagrams and org charts (or diagrams mixed with org charts) with the help of predefined shapes (30+ types of flowchart and org chart shapes) and fine-tune their appearance using side panels. 

If you need to create a diagram with other types of shapes, you need to add them to the editor via code. DHTMLX offers special HTML templates, which make it easy to create any shape even for beginners at JavaScript.

On the left panel, you can find all shapes, including custom ones, that can be simply dragged to the editor’s grid area, placed on the desired positions, and linked with each other via connectors.

In the grid area, it is possible to resize and rotate each selected shape as well as perform several editing operations on a particular shape via its toolbar. It is also possible to simultaneously perform basic operations (copy, paste, delete, etc.) on several shapes using the multiselection feature.

The right panel contains fields for setting such diagram parameters as shape arrangement, color, size, stroke, and text attributes. So you can change the necessary settings and give selected shapes of the diagram a new look. Web developers can also add new sidebar options for styling custom shapes - for example, a file uploader to add an image to a shape.

To make the whole process of the diagram building faster the Diagram Editor provides an auto-layout algorithm. This smart technology helps to instantly arrange any number of randomly placed shapes in a well-organized diagram by clicking on the “auto layout” button. 

The toolbar located at the top of the UI includes several buttons that help control the editing process. At any moment, it is possible to reset all introduced changes, make use of undo/redo feature, apply to zoom, or enable the preview mode. 

Developers can add other controls via the API. You can equip the editor with a search bar to find the required shape by specific criteria. The API also enables you to add a custom panel for shape previews and adapt previews depending on the scale while zooming.

After the editing completion, organizational charts and diagrams can be exported to the JSON, PDF or, PNG formats from the editor with one click. It is also possible to import files in the JSON format.

The library comes with detailed documentation, including a full description of both editors. You can make use of examples for different diagram types such as UML class diagram, network diagram, decision tree, or activity diagram implemented in the Diagram editor.

Pros: 

• Intuitive UI, 
• Flexible customization, 
• Comprehensive documentation and samples, 
• Rich API, 
• Pure JS, no thrid-party dependencies,
• Regular updates and official technical support, 
• Moderate price.

Cons: 

• Paid license,
• JavaScript knowledge required to install and fine-tune the editor.

yEd Live

yEd Live is a free web-based diagramming application for building, modifying, and automatically arranging diagrams of any complexity level. This editing tool is an online version of the yEd desktop program and runs on any devices supporting modern browsers. 

Designed by the German software company yWorks GmbH, yEd Live is powered by the company’s JavaScript diagramming library yFiles for HTML.

Now let us have a closer look at editing capabilities of yEd Live. If you have never worked with similar applications before, the user interface of this editor, and its toolbar, in particular, may seem confusing and a bit overstuffed with too many features. It will take some time to learn every aspect of this application for its effective use. 

The editor provides predefined shapes for flowcharts, network, BPMN and UML diagrams, as well as many others, sorted in corresponding palettes in the right-side panel. It is also possible to create private palettes and add there all needed shapes or import custom palettes. 

When it comes to styling a specific shape, the editor allows changing such attributes as shape size, color, stroke, and text in the Properties menu. Each shape can be complemented with a custom description and URL link, which will appear as a tooltip when hovering over the modified shape.

You won’t have to worry about how to position a large number of shapes to make your diagram visually appealing, as the built-in automatic layouts will do the job right based on the criteria that you set. There are numerous templates of layouts for different types of diagrams: hierarchical, organic, orthogonal, circular, tree, radial layout, etc.

Two extra windows are available on the left side of the main canvas help users to work with large diagrams. 

Using the upper toolbar, you can not only perform basic operations (copy, paste, delete, undo/redo, etc.) but also make use of some unusual features such as Toggle isometric projection that allows visually representing two-dimensional diagrams in 3D.

Other notable features of yEd Live include alignment helpers (grid and snaplines), GraphML support, automatic saving of your diagrams, and built-in search function.

After editing your diagrams can be exported to PDF, PNG, and SVG. Finished diagrams can also be saved and loaded from various cloud services (Dropbox, Google Drive, OneDrive), printed on paper, or even shared with others via GitHub gists. 

yEd live editor application cannot be customized to suit any specific requirements. You can only embed it in your web app as-is. The only way to get a customized tool with similar functional capabilities is to build it yourself from scratch with the help of the yFiles for HTML library. 

Pros:

• Free of charge,
• Numerous automatic layouts,
• Lots of predefined shapes and icons,
• Ability to save diagrams on the cloud.

Cons:

• Few support materials,

• Shipped only as-is, no way to customize,

• Rare updates.

Draw.io/Diagrams.net

Diagrams.net (formerly draw.io) is an open-source web diagramming tool for building, editing, and sharing various types of charts and diagrams free of charge. It uses the JS library mxGraph as the stack base.

In draw.io, it is possible to start building your diagram from scratch or use customizable templates. The template selection is decent. It is also possible to upload existing diagrams and continue working with them. 

For modern users, the UI of this application may seem a bit outdated, but it has a lot to offer in terms of functionality.

On the left panel, you can find shape libraries divided into different categories. They allow users to set the structure for different types of diagrams such as flowcharts, UML, BPMN diagrams, network diagrams, etc. In addition to a wide range of predefined shapes and icons, you can add your raster and SVG images, as well as create custom shapes or libraries. 

You can also utilize the search field to find the necessary visual elements much faster. To make your work with shapes more convenient, there is also the scratchpad in the left panel, where you can add frequently used shapes for easy access.

Shapes can be added to the canvas or replaced using the drag & drop functionality or just by double-clicking on necessary shapes and moving them around to build a new diagram, no matter whether you start from an empty page or a template. 

The process of connecting shapes with each other takes some effort to figure it out. You can draw connectors directly from shapes in two different ways: employing blue arrows (floating connection) or via fixed connection points that appear when hovering over a specific shape. Also, you can add necessary types of connectors from the left panel and edit them in the toolbar at the top. 

On the canvas, you can resize or rotate shapes, group several shapes to work with them simultaneously, and add text to shapes. 

The Format Panel on the right includes options for editing style. You can fill a shape with a color gradient, add a shadow, edit text content, and change the arrangement of shapes. 

The toolbar at the top of the application window also allows you to modify the appearance of shapes and connectors, insert various elements (shapes, templates, links, or even tables), put shapes to back or to front, etc. To facilitate the work with many shapes, it is possible to define the visibility settings to see and manipulate the shapes that you need at a given moment, while other shapes can be hidden.

If the composition of your diagram looks messy and it is too big to make it look better manually in a short time, then you can take advantage of the automatic layout feature. This tool can properly arrange your diagram taking into account all predefined conditions.

draw.io offers a variety of import file formats (Gliffy, VSDX, PNG (with XML), SVG, JPEG) that can be uploaded from various sources, including Google Drive, GitHub, DropBox, PC folder, etc. For instance, diagrams built with the help of other tools such as Gliffy or Visio can be imported into draw.io and modified as if they were native draw.io diagrams.  

Regarding the exporting capabilities, draw.io can save diagrams to XML, VSDX, PDF, SVG, HTML, PNG, and JPEG formats. Besides, it is possible to publish edited diagrams directly to a URL to share it with someone online. There is the possibility for real-time collaboration on building and editing diagrams with other users via the integration with Google Drive.

Pros:

• Free of charge, open-source (Apache 2.0),
• Many import and export formats,
• Lots of predefined shapes,
• Ability to import custom shapes from different sources,
• Plugin sets.

Cons:

• Limited customization of the editor,
• Outdated UI design,
• Ways to connect shapes may seem confusing,
• Unstructured documentation,
• No active support.

Rappid

The last solution that we are going to review is a diagramming framework named Rappid. Designed as a commercial extension to the open-source JointJS Core JavaScript library, Rappid builds on the strengths of this library and expands its functionality with extra UI widgets and other useful additions. 

To estimate Rappid’s capabilities we can examine the “kitchen sink” demo that demonstrates what can be achieved using Rappid.

The first thing that catches your eye after opening this demo diagramming editor is its colorful interface. It has three different skins (Modern, Dark, Material). 

The choice of ready-to-use shapes available in the left panel is modest, but it still allows creating standard flowcharts, BPMN and UML diagrams, org charts, etc. It is also possible to create custom shapes utilizing SVG. 

All available shapes can be added to the canvas via the drag & drop function that can be a bit inconvenient if you want to put in several shapes at once. You won’t have any difficulties in repositioning or rotating added shapes, resizing, or connecting them, as all these basic operations are quite straightforward. 

When creating or editing complex and data-intensive diagrams, you can take advantage of the Overview window (Navigator) in the lower right of the screen to navigate through numerous shapes and introduce necessary changes much faster. 

If you have doubts that your diagram looks nice, Rappid provides the auto-layout feature that will rearrange your diagram making it more pleasing to the eye.

End-users can adjust the style of shapes and connectors in diagrams by changing the fill and outline of shapes, font sizes, and decorations. Custom data can also be added to the shapes.

As for exporting options, edited diagrams can be saved to several formats such as JSON, PNG, JPEG, or SVG. 

Other features that can be embedded in the diagram editor using Rappid include the following: undo/redo, snaplines, validator, zoom & pan, print, and multi-selection. 

Pros:

• Three skins available,
• Convenient navigation,
• Plugin sets,
• Responsiveness,
• Regular updates and official tech support.

Cons:

• Paid license,
• Depends on jQuery, Lodash, and Backbone (MIT).