yFiles is a powerful programming library for visualizing any kind of diagram, graph, or network. Using yFiles you can display data from any kind of data source, and easily enable interactive creation, viewing, and editing of graphs. Automatic diagram layout and analysis algorithms help users understand even the most complex graph structures.

Visualization for Graphs, Diagrams, and Networks

yFiles provides rich visualizations for nodes, edges, labels, and ports along with styling options for selection and highlighting. In case the desired visualization is not covered by predefined ones, you can easily create completely custom visualizations.

Visualizations for Different Use Cases

The yFiles library and accompanying demos provide visualizations for many different use cases out of the box, such as:

Each of those implementations provides its own set of attributes for complete control over its looks.

Rich Built-in Edge Visualizations

yFiles provides several predefined edge visualizations that allow for further customization.

All edge styles support arrowheads on both ends, as well as strokes with settings for thickness, color, dashing and linecaps.

Predefined styles support drawing edges as an arc or polyline.

Furthermore, each style provides its own unique settings, like rounded corners or arc height.

View demo

Graph Animation

yFiles offers animations to smoothly transition one state of a graph into another, e.g. when layouts are calculated.

Data Binding

Visualizations can be tied to custom business data attached to graph items. For example, a node style for an employee in an organization chart can easily display the employee's name, position and other details directly from the associated data.

Customizable Decorations for Selection, Focus, and Highlight

yFiles provides decorations that are displayed when graph items are selected, focused, or highlighted. They can be disabled individually, or changed e.g. to a different color or replaced by something completely custom if needed.

View demo

Level-of-detail Visualization

Ease diagram comprehension by only showing what is recognizable at a specific zoom level. With level-of-detail rendering, unreadable or dispensable visualization can be hidden to clear space for the bigger picture.

Easily wrap existing styles in a fully controllable level-of-detail rendering and drastically improve diagram comprehension (and performance) even for large data models.

View demo

Sophisticated Label Rendering

Easily add text labels to nodes and edges that show additional information. Various placement options, like inside or outside of a node or on an edge near the source or target ensure that labels remain where they should, even if items are moved.

Labels are not limited to short text phrases, they can hold multi-line text as well as show icons.

yFiles offers extensive formatting options, e.g. font, line spacing, and decorations, as well as word wrapping and alignment.

Untangle Edge Crossings with Bridges

Crossing edges can make complex diagrams harder to read. Bridges make clear where those edges go.

yFiles offers several different bridging styles and crossing policies that define which line should bridge which other line.

View demo

Custom Visuals to Add Auxiliary Information to Graphs

Nodes, edges, ports, and labels are not the only thing on the canvas. It is possible to add arbitrary other visualizations, either in the background or on top of the other graph items. Adding custom backgrounds, brand logos, legends, rulers or even dynamic helpers like snap lines help make a yFiles-powered application stand out.

View demo

Z-Order of Diagram Elements

The drawing of diagram elements relative to each other can easily be changed. For example, changing edges to appear above nodes instead of below can be arranged simply by changing their order.

Custom Styles Tutorial

A step-by-step tutorial guides you through the creation of an entirely custom style.

The tutorial covers style creation for nodes, edges, ports and labels, and will also show you how to create custom decorators for built-in styles. It covers all major topics like hit testing, performance optimization, animation, business data integration and edge bridging support.

View demo

Diagram Features

All diagrams consist of nodes and edges, of course. yFiles adds a number of unique features that help working with them, especially when they're getting larger. Grouping and folding lets you collapse and expand parts of the diagram. Swimlanes visually group parts of a diagram into rows and columns. Filtering can temporarily hide elements that are not important in the current view. A variety of import and export features make it easy to get your data into and out of graphs.

Grouping and Folding

yFiles supports grouping of nodes into other nodes. Edges can still connect freely to any of them, including connections between a group and its children or between children of different groups.

Collapsing a group node hides the child elements of that group, they will be restored when the group is expanded again.

Custom actions are possible when groups are collapsed or expanded, such as running an incremental layout algorithm, or fetching data to create child nodes in the expanded group node.

View demo

Filtering

Increase readability of large and complex diagrams by hiding less important parts. This is a similar concept to folding above, but not tied to having explicit parent-child relationships between nodes.

Possible uses include exploring large diagrams without having to show the whole diagram at once, or incremental search and filtering capabilities to quickly focus on relevant elements.

Swimlanes and Tables

Diagram types like BPMN use swimlanes to visually associate activities to a role. yFiles supports swimlanes and general tabular structures in which diagram items can be placed. They are supported by automatic layouts as well.

View demo

Input and Output

yFiles natively supports loading and saving diagrams using the standard diagram exchange format GraphML. All yFiles features like styles, grouping and folding are supported.

You are not limited to GraphML – you can easily and quickly build diagrams from any structured data source like CSV, JSON, XML, databases, and others.

Besides loading and saving diagrams, yFiles lets you print a diagram, or export it to various raster or vector image formats. The built-in export mechanism can be extended with third-party libraries to export the diagram into other formats, like PDF.

User Interaction

Apart from displaying diagrams, yFiles also offers versatile interaction possibilities. With convenient default interaction modes, allowing the user to navigate through a diagram via panning and zooming, or setting up a complete diagram editor that allows for creation and editing of graphs works with just a single line of code. Of course, everything about the interaction can be extensively customized to the user's requirements, and if the built-in gestures don't suffice, it's easy to add custom interactions.

Navigation

Zooming, panning, and scrolling are built-in features and work just as well with touch as with a mouse. All of those features can be customized to fit your application. For instance, you can change whether or how those gestures are invoked, and can also limit the zoom level or viewable area.

View demo

Interactive Diagram Creation

yFiles ships with an interaction mode that enables easy and intuitive diagram creations. These interactions are highly customizable and can be tailored to any specific domain.

For instance, edge creation can be restricted to only connect compatible entities. Label editing can be disabled for items that should not be labeled. Keep the aspect ratio when resizing certain nodes (e.g. those that show an image which should not be distorted) or group items together the customization possibilities are almost limitless.

All those features work with touch as well as with a mouse, customizable keyboard shortcuts also exist for many common operations.

View demo

Item Selection

Select items with a single click or use marquee (rubber-band) selection to select multiple items with a single gesture. Selected items can be manipulated and moved as one.

The selection itself is also highly customizable and custom business rules whether or what items can be selected, can easily be added.

Full Support for Keyboard, Mouse, and Touch

yFiles provides fine-grained events for everything related to interaction. This includes low-level events like key presses and mouse movements, but also high-level events for example when an edge creation gesture starts or ends or when items are selected.

Listen to any event and trigger custom actions either as a lightweight way to customize the experience or to keep the diagram in sync with an underlying business model.

View demo

Drag and Drop

Create drag and drop palettes from which users can drop new elements into the diagram. Dropping diagram items is fully supported by yFiles; the only thing needed is a palette with the desired items.

Dropping a node onto a group node will also automatically create the new node as a child of the group. Snap lines during the gesture that help align the new items are supported as well.

View demo

Snapping

Manually aligning nodes and edges can be cumbersome and time-consuming and even then it won't be pixel-perfect. Snapping shows visual guides during gestures near other elements to ease alignment. Ensuring that a node has the same height as other nodes in the diagram is just as easy as aligning a node in the exact center of two others or creating edges that are orthogonal.

Another type of snapping is snapping to a grid, which helps align nodes and edges in a regular grid. Grid size and what should snap to the grid can be customized.

If all that is not enough, then custom snapping options can be added as well, for instance to implement guidelines.

View demo

Orthogonal Edge Editing

While snapping helps to create edges with only 90° bends, that property is lost when moving the nodes at either end, and snapping also doesn't ensure that an edge is always orthogonal. Orthogonal edge editing ensures that no matter how the diagram is edited, edges that are orthogonal will stay that way.

Edge segments can also be moved without disrupting their orientation.

View demo

Undo and Redo

yFiles offers comprehensive support for undoing and redoing diagram modifications. Everything that can be changed in a diagram can also be undone.

Modifications can be single changes, like adding a node or composite changes where many items change at once, e.g. moving multiple items.

There is no limit to how many operations can be undone, except available memory.

Context Menu

yFiles supports context menus on arbitrary diagram items that can be dynamically populated. That way every item can have a context menu specific to that item.

View demo

Clipboard

A clipboard is available out of the box that supports all common clipboard operations, like cut, copy, paste and duplicate. The clipboard can also handle a number of advanced scenarios, such as copying a label to a different item or copying edges between copied nodes automatically.

All aspects of the clipboard can be customized and it's even possible to add custom actions when certain items are copied or pasted.

View demo

Tooltips

Easily add tooltips to diagram items that show when hovering the mouse pointer over the respective item. Tooltips can be generated dynamically based on business data tied to an item and don't have to be static.

Edges Connecting to Other Edges

Usually edges in graphs only connect nodes to other nodes. However, yFiles also supports connecting edges to other edges. This is supported directly by the yFiles diagram model and enables that the connection point on the other edge will change appropriately if the other edge is modified or moved.

View demo

Automatic Graph Layout

yFiles features efficient and highly customizable algorithms for automatic layouts. The different layout styles are responsible for determining the locations of all diagram elements based on different optimization criteria. A variety of layout styles are included: Hierarchic, organic (force-directed), tree, orthogonal, circular, radial and series-parallel. Diagram element labels can often be placed directly by the selected layout algorithm or by a specific labeling algorithm that's independent of the layout algorithm. All layout algorithms can be applied to a diagram in an animated fashion. Almost all aspects of each layout algorithm can be changed to fit to a specific domain and use case.

Hierarchic Layout

The hierarchic layout style arranges nodes in layers so the majority of edges point in the main layout direction. This layout highlights dependencies and relationships between nodes within a diagram. Therefore it works well for workflow visualization, process visualization, call-graph visualization, entity-relationship diagrams, biochemical pathways, network management and swimlane diagrams.

View demo

Organic Layout

The organic layout style uses a force-directed approach to distribute nodes in a natural way. The layout uncovers clusters and symmetries in the diagram. It works well for large networks in bioinformatics, enterprise networking, social network graphs, mesh visualization or system management.

View demo

Tree Layout

yFiles supports different layout styles for diagrams that have a tree structure. This can be either an organic-looking style that organizes the tree in a star structure around the root node. Or a highly flexible layout style that arranges a tree in layers.

The layouts are able to reveal possible hierarchic relations within the diagram. They're applied for the visualization of relational data, dataflow analysis, software engineering, bioinformatics and business administration.

View demo

Orthogonal Layout

The algorithm produces a compact, layout with orthogonal edges and no inherent direction. The results provide a clear representation of complex networks. Orthogonal drawings are used in software engineering, database scheme representation, system management, knowledge representation, VLSI circuits and floor planning applications.

View demo

Circular Layout

Nodes are arranged in circle and star structures to emphasize group and tree structures in a diagram. Circular layouts are used in many areas, such as social networking, network management, WWW visualization, e-commerce and telecommunications.

View demo

Radial Layout

The radial layout style arranges nodes in concentric circles. Each child node is placed on a larger circle than its parent node. This layout style is well suited for diagrams with many parent-child relationships if the graph grows, the circles grow larger as well. It can be applied to visualize social networks, data clustering and in bioinformatics.

View demo

Series-parallel Layout

This layout style arranges certain diagrams into serial and parallel substructures. The compact layout highlights the main direction within directed diagrams. It works well for visualizing electrical circuits, call trees or flowcharts.

View demo

Family Tree Layout

This is a specialized layout style for family trees. It can be used to show family relations and emphasize generations in genealogical data.

Edge Routing Algorithms

Edge routing algorithms are responsible for computing suitable paths for edges while not moving nodes at all. In general, the goal is to find the best routes for edges so they do not cross any nodes, if possible. yFiles supports different routing styles such as orthogonal or polyline, orthogonal bus-like and organic.

Orthogonal and Polyline Edge Routing

The algorithm calculates new paths for some or all edges in an existing layout. These paths consist of horizontal and vertical segments with as few crossings and bends as possible. The routing is suitable for electric circuit design, floor planning and navigation maps.

View demo

Bus Routing

The algorithm bundles edges in very dense diagrams into buses. The paths are calculated so they share as many parts as possible. The result clears up the diagram and makes it easier to follow the edges.

View demo

Organic Edge Routing

This force-directed algorithm routes edges curved around fixed nodes. It can be applied as a post-processing for layout algorithms that produce straight-line edges where edges cross nodes.

Common Layout Features

While each of the layout algorithms mentioned above is extensively configurable in its own right, there are a number of common features between many or even all of them. You can calculate a layout for diagrams which contain group nodes or swimlanes, or specify that edges may only enter or exit on a specific side of the node. Incremental layout ensures that insertion or removal of elements do not destroy the user's mental map of the diagram by changing it as little as possible to incorporate the edits.

Incremental Layout

Keep the mental map of a diagram when inserting new nodes and edges. Certain layout algorithms provide an incremental mode which keeps most of the existing layout the same and inserts other nodes appropriately into this pre-existing layout.

View demo

Partial Layout

Partial Layout provides a generic approach to keep parts of a diagram fixed while calculating a layout only for some items, and integrating them into the diagram. It is even possible to use a different layout style for those parts.

View demo

Easy Adjustment of Layout Algorithms

Configure the layout algorithms so they meet your requirements. All algorithms come with ample configuration possibilities that satisfy even sophisticated layout demands.

View demo

Animated Layout Changes

Calculate a new layout and apply its results with an animation. Morph diagrams in an animated fashion between different layouts easily.

Layout Time Restriction

Restrict the time for layout calculation. Layout algorithms can be stopped after a certain amount of time. They may finish with a valid layout of probably lower quality or abort without a result.

Restricted Port Locations

Restrict the direction or even the exact location in which each edge is allowed to connect to a node. Such restrictions can also be easily combine to specify a set of valid port locations that can be chosen by the layout algorithm.

Edge Groups

Edges that connect to the same source or target node can be bundled into an edge group. Edge groups share the first or last few segments which reduces visual clutter and makes it easier to follow the paths of edges.

Bundled Edges

In some diagrams there can be many edges, especially in closely-packed structures. Edge bundling results in organic-looking edge paths where edges with similar routes are pulled closer together. This approach is commonly used in bioinformatics, social network analysis, telecommunications and fraud detection.

View demo

Label Placement

Most layout algorithms can consider labels at nodes and edges. They will reserve space for the labels to place them near the labeled element without overlaps. If that approach is not possible, a generic labeling algorithm can be used. Similar to edge routing, which only changes edge paths without modifying anything else, labels are then placed according to provided settings in a separate step without changing node locations or edge paths.

View demo

Grouped Graphs

When the diagram contains group nodes, then those should not overlap and their contents should be placed closely together so that they still appear visually grouped. Most layout algorithms support placing group nodes according to those criteria. It is even possible to use different layout styles for the contents of each group.

Tables and Swimlanes

Sometimes processes are best visualized in tables or swimlanes. Especially the Hierarchic Layout supports the assignment of nodes to a grid-like structure. Node orders are constrained and complicated edge paths through the rows and columns are avoided.

Efficient Graph Analysis Algorithms

yFiles allows you not only to create, edit, display, and arrange graphs. There are also a number of analysis algorithms to determine common structural traits (such as connectivity, cycles, whether a graph is a tree and many more), pathfinding and reachability, clustering and centrality measures, graph traversals and many more.

Graph Characteristics

Check graphs for common traits, like determining whether a graph is cyclic or acyclic, connected, planar, or bipartite. You can also find out whether a graph has a tree or series-parallel structure and many more.

View demo

Finding Paths

yFiles offers a variety of algorithms to find paths in graphs, whether it's the shortest path, paths between any two nodes or chains within directed or undirected graphs. Pathfinding problems often occur in geographical applications, such as finding routes on a map.

View demo

Centrality Measures

Centrality measures show the importance of each node within a graph. This can then be used for instance to align nodes differently, or mark their importance via their size or color. Centrality can be applied in social network analysis, e.g. to find the most influential persons or other kinds of networks, e.g. to find key infrastructure nodes on the internet.

View demo

Connectivity and Reachability

yFiles includes algorithms to find connected components in a graph or determine whether a node is reachable from another via an edge path. Such algorithms can be applied in network analysis.

View demo

Clustering

Discover structures in a graph where certain nodes form a close relationship by applying clustering algorithms. This can be an interesting measure in social network graphs and other domains.

View demo

Transitive Closure and Transitive Reduction

Compute the transitive closure and reduction to receive direct reachability information for directed acyclic graphs.

View demo

Spanning Trees

yFiles allows you to easily calculate a subgraph with the smallest set of edges needed to reach all nodes while also minimizing costs. These trees are used in the design of computer networks, telecommunication networks, and electrical grids.

View demo

Cycles

Find edges that belong to cycles in directed and undirected graphs.

View demo

Network Flows

Solve classic network flow problems like maximum flow, minimum cost and maximum flow/minimum cut in networks in which edges have certain capacities and a flow moves via edges from source to sink nodes. Flow algorithms can be applied to many problems that involve networks, such as water supply, electricity, internet, or shipping, to improve efficiency of the network.

View demo

Contact yWorks

If you have any questions about us or our products, just send us a note:
Thank you!
Your message has been sent to contact@yworks.com
We are sorry,
Your request could not be sent to contact@yworks.com. Please reload the page and try again.
If the problem persists, please report the error to contact@yworks.com