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.
Curious to explore yFiles before you dive into the full evaluation?
Check out the yFiles Playground.
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.
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.
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.
yFiles offers animations to smoothly transition one state of a graph into another, e.g. when layouts are calculated.
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.
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.
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.
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.
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.
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.
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.
These step-by-step tutorials guide you through the implementation of custom styles for nodes, edges, labels, and ports.
Besides the actual visualization, each tutorial covers related topics like hit testing, performance optimization, animation, business data integration and edge bridging support.
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.
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.
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.
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.
Easily and quickly build diagrams from any structured data source like CSV, JSON, XML, databases, and others.
Loading and saving diagrams using the standard graph exchange format GraphML is natively supported, including the information for styles, grouping, folding, and all the other yFiles features.
yFiles allows you to export the diagrams to common image and graphics formats, and to print them out. Note that not all formats are supported by every variant of yFiles.
Export diagrams to common bitmap image formats such as PNG, JPEG, BMP, and GIF.
Create vector graphics such as PDF, SVG, EMF, and XPS from yFiles diagrams.
Export graphs to the VSDX format with the VSDX Export for yFiles for HTML add-on. VSDX is a file format for diagrams used by Microsoft Visio®.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
Configure the layout algorithms so they meet your requirements. All algorithms come with ample configuration possibilities that satisfy even sophisticated layout demands.
Calculate a new layout and apply its results with an animation. Morph diagrams in an animated fashion between different layouts easily.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Compute the transitive closure and reduction to receive direct reachability information for directed acyclic graphs.
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.
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.
Our team is happy to advise you – no strings attached. Let's talk about your project and find the perfect solution for your needs!
E-mail: hello@yworks.com
