Visualizing Flowcharts with JavaScript

A suitable solution provides either a ready-to-use set of flowchart icons or an easy way to create the required symbols programmatically.

yFiles for HTML offers a highly customizable framework for creating all kinds of diagram symbols - including flowchart symbols. Additionally, yFiles comes with source code for visualizing most standard flowchart symbols. These example implementations can be used “as is” or serve as the basis for further customizations.

Typical customizations include adapted colors to tailor it towards a specific corporate identity or adding/removing elements.

While there are many use cases for creating flowcharts automatically from sets of business data, it is also a common requirement to support interactive editing.

yFiles for HTML supports interactive editing out-of-the-box with many reasonable gestures for creating, editing, and deleting symbols and relations. Above and beyond, it is possible to customize and extend yFiles’ user interaction framework.

Built-in support for alignment guidelines, orthogonal edge creation, and undo/redo support enables users to create well-structured flowcharts with ease.

Since flowcharts are meant to highlight the workflow of a process, algorithms used to arrange flowcharts need to enforce this aspect.

Hierarchical graph drawings (also called layered or Sugiyama-style graph drawings) are the obvious choice for arranging flowcharts.

Alongside many different automatic arrangement algorithms, yFiles comes with a sophisticated hierarchical layout. Although the default implementation already yields astonishing results, it can be further customized to fit the flowchart use case perfectly.

Typical flowchart specific requirements are consistent branch directions for positive or negative decisions, edge grouping or overall node, and edge spacing. yFiles' built-in hierarchical arrangement algorithm can easily be extended to support specific requirements like these.

Especially for use cases that support interactive editing, it is necessary to provide a way to load and save the user’s work.

In yFiles for HTML, loading and saving flowchart diagrams is possible through leveraging the GraphML file format. While using GraphML is a very convenient way of solving the serialization requirement, it is also possible to implement support for other file formats or to target alternative storage facilities such as databases.

With yFiles, flowcharts can be realized on all supported platforms. yFiles for HTML comes with a Flowchart Editor Sample Application. This example provides several sample flowcharts and allows you to edit and play around with them.

The source code of the Flowchart Editor Sample Application is available on the yWorks GitHub repository and part of the yFiles for HTML package.

Test the yFiles for HTML diagramming library with a fully functional trial package. To implement your own Flowchart application, start with the Flowchart Editor Sample Application that is part of the yFiles package. It’s not only a showcase application but also provides best-practice source code that you can re-use in your project. yFiles makes it easy to customize all aspects of this application, for example, restrict user interaction or load the flowchart diagrams from your data source. Features like the flowchart node visualizations and the specialized automatic layout are separate components that work in any yFiles-based project.