Features

yFiles is a powerful programming library for visualizing any kind of diagram, graph, or network. Using yFiles you can display data from many diverse data sources., 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.

Explore yFiles Features with Interactive Playgrounds

Throughout this page, you will find various interactive Playgrounds that allow you to test and experience the extensive feature set of yFiles right here on the page. Whenever you see the Playground symbol, you can click and try out the examples directly. This hands-on approach helps you understand the capabilities and potential of yFiles in an engaging and practical way.

Enjoy exploring!

Evaluation
Try yFiles for free

Want to explore yFiles before diving into the full evaluation?
Check out the yFiles Playground.

What to expect on this page

Visualization for a Graph, Diagram, and Network

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

A Business Process Model and Notation (BPMN) diagram used to represent the steps in a business process. It typically includes flow objects such as events, activities, and gateways, connected by arrows indicating the sequence of operations.An organizational chart displaying the structure of an organization. It shows the relationships and ranks of different positions and departments within the company, often using a tree structure.A diagram used in fraud detection to highlight suspicious activities or transactions. It may include nodes representing entities and edges indicating relationships or transactions, often with markers to highlight anomalies.An isometric diagram that represents three dimensional objects in two dimensions. It uses a form of axonometric projection where the three coordinate axes appear equally foreshortened and the angle between any two of them is 120 degrees.A network diagram illustrating the interconnections between different nodes in a network. This can be used to represent computer networks, social networks, or other systems with interconnected components.A Sankey diagram where the width of the arrows is proportional to the flow quantity they represent. It's used to visualize the flow of resources, energy, or information between processes.A table visualization that organizes data into rows and columns. It’s useful for displaying structured information in a clear and accessible format.A mind map that represents ideas and concepts branching out from a central concept. It’s used for brainstorming, organizing thoughts, and visually representing hierarchical information.Visualizations-analysis for determining structural traits, pathfinding, clustering, centrality measures, and graph traversals

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 implementation has its own set of attributes, allowing complete control over its appearance.

Image depicting various edge visualizations with arrows, thickness settings, and arc styles.

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.

In addition, each style has its own unique settings, like rounded corners or arc height.

View demo

Graph Animation

yFiles also provides animations to smoothly transition a graph from one state to another, such as when layouts are recalculated.

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.

yFiles allows you to customize decorations for graph items when selected, focused, or highlighted. Change colors, disable them, or create custom designs

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

Improve diagram comprehension by displaying only recognizable elements at specific zoom levels. Level-of-detail rendering hides unreadable or unnecessary visuals, making room for a clearer overall 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

Advanced label rendering with multi-line text, icon display, and various formatting options in yFiles.

Sophisticated Label Rendering

Easily add text labels to nodes and edges to display additional information. Various placement options, such as inside or outside a node or on an edge near the source or target, ensure labels stay correctly positioned, even when items are moved.

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

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

Reduce edge crossings with Bridges: yFiles provides various bridging styles and crossing policies to clarify the paths of intersecting edges in complex diagrams, ensuring clearer visual comprehension.

Untangle Edge Crossings with Bridges

Crossing edges can make complex diagrams harder to read. Bridges clarify the paths taken by those edges.

yFiles provides multiple bridging styles and crossing policies that determine how lines should bridge or cross each other.

View demo

yFiles supports adding custom backgrounds, logos, legends, rulers, and dynamic helpers like snap lines to the canvas, enriching the visual and functional aspects of your application.

Custom Visuals to Add Auxiliary Information to Graphs

The canvas isn't limited to nodes, edges, ports, and labels alone. You can add arbitrary visualizations either in the background or on top of 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.

Step-by-step tutorials for customizing styles for nodes, edges, labels, and ports.

Style Implementation Tutorials

These step-by-step tutorials guide you through the implementation of custom styles for nodes, edges, labels, and ports.

In addition to the primary visualization, each tutorial covers related 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.

A BPMN diagram with swimlanes and tables, organizing activities by roles

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

Diagram creation from CSV, JSON, XML, and databases, with GraphML support for styles and advanced yFiles features.

Data Input and Output

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.

View demo

Image Export

yFiles enables you to export diagrams to popular image and graphic formats, as well as print them. Note that not all formats are supported by every variant of yFiles.

Bitmap Image Export

Bitmap Images

Export diagrams to common bitmap image formats such as PNG, JPEG, BMP, and GIF.

View demo

Vector Graphics Export

PDF and Vector Graphics

Create vector graphics such as PDF, SVG, EMF, and XPS from yFiles diagrams.

View PDF export demo

View SVG export demo

Vector Graphics Export

VSDX

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®.

View demo

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 you can set up a complete diagram editor for creating and editing graphs, with just a single line of code. Of course, everything about the interaction can be extensively customized to your requirements, and if the built-in gestures don't suffice, it's easy to add custom interactions.

Simply try graphEditorInputMode

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 perfectly. For instance, you can change whether or how those gestures are invoked, and you can also limit the zoom level or viewable area.

View demo

Interactive Diagram Creation

yFiles includes an interaction mode designed for intuitive and customizable diagram creation, adaptable to various specific domains.

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 showing an image 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 process is highly customizable, allowing for the addition of custom business rules to determine which items can be selected and under what conditions.

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 into 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 other nodes 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. The grid size and which elements 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

Explore the interactive features of yFiles, such as Snapping, with the yFiles Playground

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 guarantee 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.

Enable dynamic context menus on individual diagram items in yFiles, allowing customized actions for each item within the diagram.

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 supporting 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

Incorporate dynamic tooltips into diagram items in yFiles, revealing contextual information upon hovering over each specific item, based on dynamically generated business data.

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.

yFiles enables edges to connect directly to other edges, ensuring connection points adjust automatically with modifications.

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 directly supported by the yFiles diagram model, ensuring that connection points adjust accordingly when edges are modified or moved.

View demo

yFiles Playground: User Interaction

This sandbox allows you to interact with a dynamically generated graph using yFiles. You can create and modify nodes and edges, and observe how the graph layout automatically updates. Toggle features such as automatic layout and snapping to see how they affect the organization and alignment of your diagram. Experiment with different interactions to understand the powerful capabilities of yFiles for creating and managing complex graph structures effortlessly.

graphComponent.fitGraphBounds() // Create a random graph with 20 nodes and 19 edges playground.createRandomGraph(graphComponent.graph, 20, 19); // Create a new GraphEditorInputMode with snap and orthogonal edge editing contexts const graphEditorInputMode = new GraphEditorInputMode({ snapContext: new GraphSnapContext(), orthogonalEdgeEditingContext: new OrthogonalEdgeEditingContext(), }); // Set the input mode for the graph component graphComponent.inputMode = graphEditorInputMode; // #region Configure automatic re-arrangement after interactive editing // Add listeners to apply layout on various user interactions graphEditorInputMode.addDeletedSelectionListener(applyLayout); graphEditorInputMode.createEdgeInputMode.addEdgeCreatedListener(applyLayout); graphEditorInputMode.handleInputMode.addDragFinishedListener(applyLayout); graphEditorInputMode.moveInputMode.addDragFinishedListener(applyLayout); // Function to apply the layout function applyLayout( sender?: | HandleInputMode | MoveInputMode | GraphEditorInputMode | CreateEdgeInputMode, ) { const graphEditorInputMode = graphComponent.inputMode as GraphEditorInputMode; const hierarchic = new HierarchicLayout(); hierarchic.orthogonalRouting = graphEditorInputMode.orthogonalEdgeEditingContext.enabled; // Use orthogonal routing if enabled const layoutData = new HierarchicLayoutData(); if (sender && "affectedItems" in sender) { layoutData.incrementalHints.incrementalLayeringNodes = sender.affectedItems.ofType(INode.$class); // Apply incremental layout if there are affected items hierarchic.layoutMode = "incremental"; } // Apply the layout with a morphing animation graphComponent.morphLayout({ layout: hierarchic, morphDuration: ".5s", portAdjustmentPolicy: "always", }); } // #endregion // Apply layout initially await applyLayout(); /* Snap line styles */ .yfiles-snap-line { stroke: #ff00d8; stroke-width: 0.175%; stroke-dasharray: none; }

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 through the selected layout algorithm or 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 customized to fit a specific domain and use case.

Discover the yFiles Layout Algorithms

Hierarchic Layout

The hierarchic layout style arranges nodes in layers so that most edges point in the main layout direction. This layout effectively highlights dependencies and relationships between nodes within a diagram. Consequently, it is well-suited 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. This 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 used to visualize 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. This enables a clear representation of complex networks. Orthogonal drawings are used in software engineering, database schema 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 to create a family tree. It can be used to show family relations and emphasize generations in genealogical data.

View demo

yFiles Playground: Automatic Graph Layouts

Automatic graph layouts make organizing your diagrams effortless. Try out different layout algorithms like hierarchic, orthogonal, or radial to see how they automatically arrange nodes and edges for optimal clarity and aesthetics.

graphComponent.fitGraphBounds() // Current layout let currentLayout; // Create a random graph with 90 nodes and 89 edges and generate current layout function generateNewGraph() { graphComponent.graph.clear(); playground.createRandomGraph(graphComponent.graph, 90, 89); currentLayout(); } // Function to apply a orthogonal layout to the graph function applyOrthogonalLayout() { currentLayout = applyOrthogonalLayout; const orthogonal = new OrthogonalLayout(); orthogonal.layoutOrientation = "left-to-right"; // Set the orientation of the layout graphComponent.morphLayout(orthogonal, ".5s"); // Apply the layout with a transition duration of 0.5 seconds } // Function to apply a radial layout to the graph function applyRadialLayout() { currentLayout = applyRadialLayout; const radial = new RadialLayout(); radial.edgeBundling.bundlingStrength = 1; // Set the edge bundling strength to maximum graphComponent.morphLayout(radial, ".5s"); // Apply the layout with a transition duration of 0.5 seconds } // Add a button to the toolbar to apply the radial layout playground.addToolbarButton("Radial", applyRadialLayout); // Add a button to the toolbar to apply the orthogonal layout playground.addToolbarButton("Orthogonal", applyOrthogonalLayout); // Add a button to the toolbar to generate a new graph playground.addToolbarButton("Generate a new graph", generateNewGraph); // Create a random graph with 90 nodes and 89 edges and generate radial layout initially playground.createRandomGraph(graphComponent.graph, 90, 89); await applyRadialLayout();

Edge Routing Algorithms

Edge routing algorithms compute suitable paths for edges without moving the 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.

View demo

Common Layout Features

Each of the layout algorithms mentioned above is highly configurable individually, but they also share several common features. They can calculate layouts for diagrams containing group nodes or swimlanes and allow for edges to be restricted to enter or exit on specific sides of a node. Incremental layout preserves the user's mental map of the diagram by minimizing changes when elements are added or removed, ensuring the diagram remains as consistent as possible.

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 offers a flexible method to maintain specific parts of a diagram in place while recalculating the layout for selected items and integrating them into the overall diagram. It also allows for applying different layout styles to these fixed parts.

View demo

Easy Adjustment of Layout Algorithms

Configure the layout algorithms to meet your specific requirements. Each algorithm offers extensive configuration options to accommodate even the most complex layout needs.

View demo

Animated Layout Changes

Calculate a new layout and apply the results with animation. Easily transition between different layouts by animating the changes in the diagram.

Layout Time Restriction

Restrict the time for layout calculation. Layout algorithms can be stopped after a certain amount of time. They may either complete with a valid but potentially lower-quality layout or abort without producing 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 combined 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, this 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 accommodate labels on nodes and edges, reserving space to place them near their corresponding elements without causing 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 the 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. The Hierarchic Layout, especially, 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 much more), pathfinding and reachability, clustering and centrality measures, graph traversals and many others.

yFiles enables creation, editing, and arrangement of graphs, and includes analysis algorithms for connectivity, cycles, pathfinding, clustering, centrality, and graph traversals.

Graph Characteristics

Check graphs for common traits, like determining whether a graph is cyclic or acyclic, connected, planar, or bipartite. You can also determine if a graph exhibits a tree or series-parallel structure, among other analyses.

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 many 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 the efficiency of the network.

View demo

Why, how, what? —
Just ask the diagramming experts!

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

The data you enter will only be used to contact you regarding your request.
Learn more in our privacy policy.