Flowchart Demo [yFiles for HTML]

This demo provides a number of INodeStyles which are shaped as common flowchart symbols. To use those different styles, drag them from the palette to the main graph component.

Flowchart Layout

There is an adjusted HierarchicLayout which considers some flowchart specialities.

Incoming-edges are grouped if they are many and there are also some outgoing-edges.
The direction of edges that represent positive ('yes') or negative ('branches') can be selected in the toolbar.
Flatwise edges can be drawn entirely to one side or just attach at the side of a node.
Long paths in the graph are aligned.

Try out the different styles on the set of sample graphs by selecting the directions and press the layout-button.

Legal Disclosure | Privacy Policy | View on GitHub