Easily create flowcharts and automatically arrange the elements in a meaningful way
A flowchart is a diagram that visualizes a process or workflow. A good flowchart helps to identify the different elements of a process and understanding the relationships between the various steps. They are an essential tool for improving processes.
From a developer’s perspective, there are several tasks to solve when creating flowchart applications. As described in the following sections, the yFiles for HTML diagramming library provides solutions for all challenges of flowchart visualization.
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 60-day, 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.
Download the trial version of yFiles for HTML for your target platform at the yWorks Customer Center.
Navigate to the source directory of the Flowchart Editor Sample Application.
Explore the sample application’s features and
adjust its source code to match your requirements or
copy the source code of the features you like to your project.