A powerful and versatile React component to visualize process mining diagrams in React applications.

yFiles React process mining component

Process mining is a technique that involves extracting insights from event logs to understand and improve business processes. By analyzing event data, process mining techniques reveal the actual flow of processes, identify bottlenecks, deviations, and opportunities for improvement.

Within the dataset, each event is defined by several key properties: an identifier (ID) serves as a unique reference for efficient data management and analysis; the activity name specifies the task or action performed; a timestamp indicates the event’s start time, enabling chronological sequencing and time-based analysis; the duration reflects the event’s span; and a cost factor aiding in cost analysis and resource allocation strategies.

Process Mining Diagram

The open-source web application framework, React, continues to stand out as a top choice for web developers. However, building a visualizer or editor for process mining diagrams in a React application can be challenging.

Developers can use various component frameworks that simplify the creation of modern web applications. Leveraging React’s component-based approach makes the tailoring to specific use cases much easier. In a web application that uses React, think of components as building blocks for different parts of the webpage.

yFiles for HTML offers a highly adaptable React component to extract interactive process mining diagrams from event-logs and load them into your React applications.

What is yFiles exactly? Well, yFiles for HTML is a commercial programming library explicitly designed for graph, network, and diagram visualization.

Note that the word "graph" here refers to the mathematical graph with nodes and edges, rather than a function graph or bar charts.

react orgchart graph definition 1
react orgchart graph definition 2
react orgchart graph definition 3

yFiles' built-in user input handling makes the graph visualization highly interactive with keyboard, mouse, or touch gestures.

Because of the flexible styling options, the graph visualization can be tailored to any domain. Have a look at the various use cases yFiles can cater to. Keep in mind though that the yFiles SDK can be perfectly fitted to virtually any use case.

And its sophisticated layout algorithms let you easily create clear, stunning, and at the same time highly complex graph visualizations.

yFiles sophisticated layout algorithms

How to optimize any business processes using the yFiles React process mining component?

The yFiles React component for process mining has all the features and capabilities to significantly optimize process mining.

Read on to discover how this component can help you to easily create intricate process mining React apps.

In essence, it gives you a visual overview of your data, with temporal progression and customization options, instantly. Thus, making it very easy for you to have a direct global overview or focus on a specific timestamp.

Quickly switch to any point in time and see what’s happening there. Giving you immediate visibility into your business processes. This feature will undoubtedly help you make the right choices for your process optimization.

A process mining chart created by the yFiles React Process Mining Component

How to integrate the yFiles React process mining component into your React app?

In a React-based web application, an event log is commonly supplied to the process mining component as props to facilitate its rendering.

Now, when we say "an event log is passed to the component," it means that the information about the occurred events is given to this process mining diagram.

This information helps the component create and show the diagram on the webpage, displaying the process mining visually. More precisely, the process mining component derives a graph structure implied by the log. This structure consists of process steps, which emerge when an activity is linked to at least one event, and transitions inferred from consecutive events associated with two steps, representing movement from one process step to another.

Although yFiles for HTML can be directly attached to an asynchronous data provider, you can also supply data objects, such as JSON, which contain information. This data is then used to generate a diagram.

Integrating a sophisticated process mining component in a React application is as easy as this:

react process mining starting script

Discover the yFiles React process mining component through the yFiles Playground, an optimal platform for getting acquainted with the component and its functionalities.

How to visualize process events?

In process mining, the diagram displayed is derived from an event log, with each extracted process step offering insights into individual activities within the process. Often, a gauge is included to signify the current workload at each process step.

react process mining styles

The yFiles React process mining component empowers extensive customization in visualizing items by leveraging custom React components tailored to render items according to precise requirements.

The following code snippet exemplifies how this customization can be seamlessly integrated into your web application.

react process mining custom item

Furthermore, the yFiles React process mining component incorporates a rendering functionality, allowing users to tailor transition visualizations. This feature gives you effortless command over parameters like stroke, bend smoothing, thickness, and arrow styles for a more personalized representation.

react process mining transition styles

How to add a heatmap to your React process mining app?

The heatmap feature provides an excellent method for highlighting sections of the process mining diagram and examining the workload intensity at each process step and transition in real-time. Through color-coded activity levels, ranging from 'cool blue' for minimal activity to 'fiery red' for high workload, users gain instant insight into bottleneck areas, underutilized steps, and potential process optimization opportunities. With this tool, businesses can effortlessly pinpoint inefficiencies and streamline operations to enhance productivity and performance.

Thus, root cause analysis and continuous improvement within organizational processes becomes much easier and more fun with the yFiles Process Mining component for React Apps.

Heat mapping][width=100%

How to visualize transition events?

Transition events, occurring between two events sharing the same case ID, are represented as small circles positioned along a transition path within the process mining diagram. These circles serve as visual cues, providing valuable insights into the utilization and efficiency of these transitions, effectively encapsulating their degree of utilization within the process flow.

Furthermore, the customization options for these circles extend to their color and size, allowing for tailored representation based on your preferences. For instance, you have the flexibility to unify events with the same case ID using identical colors and sizes. This customization feature simplifies the tracking of specific cases across the entire process, enhancing your ability to analyze and understand process dynamics effectively. Leaving you with complete transparency and visibility into your business processes.

Transition Events][width=80%

Animation or how to capture time in process mining?

Animating time data, which consists of events characterized by timestamps and durations, offers a dynamic visualization of temporal processes. This animation breathes life into each event, highlighting its specific timestamp and duration, thus enabling viewers to observe the chronological progression of activities. This animated depiction, offers insights into the pace and rhythm of the process, fostering a deeper understanding of its temporal dynamics.

By leveraging animation, viewers can gain a nuanced understanding of time-dependent phenomena, facilitating more profound analysis and comprehension. This visual tool serves as a powerful means for exploring and interpreting the intricate temporal aspects of the process. Enabling a thorough analysis of business processes from end-to-end.

How to instantly get contextual data for any element? Get tooltips!

Tooltips provide an easy-to-use solution for displaying data on any zoom level and for any element in the graph. This way you can have additional context or details relevant to the specific element being hovered over. Naturally, enhancing user experience and conveying information effectively. As with all the other visualization items, it is also quite simple to provide custom tooltip renderers.

Tooltip][width=100%

Search functionality

It is easy to search for any data in the visible items using the built-in search feature. Matching items are instantly highlighted, and when hitting a configurable key, can be brought into the viewport.

Search][width=100%

Context menu with relevant commands

The yFiles React process mining component comes with a list of options that appear when you interact with an object, by clicking on it. Providing you with relevant commands based on the current context, allowing you to perform actions quickly.

Context menu

Build-in components: more advanced functionality!

The yFiles React process mining component offers supplementary components for integration with the process mining diagram, enriching interaction. These components, added as children of the process mining component, encompass the Overview, providing a simplified view of the entire graph and the current viewport, and the Controls, featuring a toolbar with buttons to adjust the viewport.

Graph overview][width=100%

Selection and highlighting

The yFiles React process mining component features events that notify users when an item is either focused, selected or hovered over. This functionality provides the flexibility to respond to these state changes, allowing for the dynamic updating of external information panels, among other possibilities. Note that to optimize performance, it might be necessary to cache these functions.

Image export and printing

Last but not least, it is possible to export the visualized flow to various image formats or print it through the browser’s printing functionality.

The yFiles React process mining component: examples and source code

The yFiles React process mining component comes with several example applications showcasing how to integrate and customize the component within a React application. You can find the source code of these applications on the yWorks GitHub repository.

To integrate the yFiles React process mining component in your React application, follow these steps:

  1. Download the trial version of yFiles for HTML at the yWorks Customer Center.

  2. Install the process mining component via npm: npm install @yworks/react-yfiles-process-mining

  3. The process mining module has certain peer dependencies that must be installed within your project. Since it is a React module, react and react-dom dependencies are needed.

  4. Before using the component, copy the trial license of yFiles for HTML into your project.

  5. Add the component in your application.

  6. For more information on how to use the component, refer to the accompanied documentation.

Explore the seamless integration of the yFiles React process mining component into your React application! The following concise code snippet will give you an impression of how easy it is to integrate this powerful yFiles component:

react process mining getting started

FAQ

What is process mining?

Process mining is a data-driven technique used to analyze event logs from various systems to understand, visualize, and improve business processes. By extracting insights from event data, process mining reveals the actual flow of processes, identifies bottlenecks, deviations, and opportunities for improvement.

How does process mining work?

Process mining works by analyzing event logs, containing data about each step or activity in a process, including timestamps, durations, and outcomes. Using specialized algorithms, process mining software transforms this raw data into visual representations of process flows, enabling stakeholders to identify patterns, inefficiencies, and areas for improvement.

What are the benefits of process mining?

Process mining offers several benefits, including:

  • Enhanced process transparency and visibility

  • Identification of bottlenecks and inefficiencies

  • Improved compliance and governance

  • Data-driven decision-making

  • Continuous process improvement

  • Automation opportunities

  • Increased operational efficiency and effectiveness

How does the yFiles React process mining component differ from other process mining tools?

The yFiles React process mining component stands out for its seamless integration with React applications and its powerful graph visualization capabilities. Unlike standalone process mining tools, it leverages the yFiles SDK, a commercial programming library explicitly designed for graph, network, and diagram visualization. This integration enables developers to create highly customizable and interactive process mining diagrams within their React applications, offering unparalleled flexibility and functionality.

What makes the yFiles React process mining component suitable for complex process mining tasks?

The yFiles React process mining component excels in handling complex process mining tasks due to its sophisticated layout algorithms, advanced user input handling, and extensive customization options. Its built-in user input handling makes graph visualization highly interactive, while its flexible style options allow for tailored representation of process flows to suit any domain. Additionally, its layout algorithms enable the creation of clear, stunning, and complex graph visualizations, making it ideal for analyzing intricate process flows and identifying optimization opportunities.

Can the yFiles React process mining component handle large-scale event logs?

Yes, the yFiles React process mining component is capable of handling large-scale event logs with ease. Leveraging the power of the yFiles SDK, it provides efficient data processing and visualization capabilities, enabling smooth rendering and analysis of event logs containing thousands or even millions of data points. Its scalable architecture ensures optimal performance, even when dealing with extensive event data, making it suitable for enterprise-level process mining tasks.

How does the yFiles React process mining component support customization and extensibility?

The yFiles React process mining component offers extensive customization and extensibility options, allowing developers to tailor the visualization and functionality to their specific requirements. With its built-in components and styling options, users can customize every aspect of the process mining diagrams, from node and edge styles to tooltips and user interactions. Furthermore, developers can extend the component’s functionality by integrating additional yFiles features or building custom components, ensuring flexibility and adaptability to diverse use cases and workflows.

How can I integrate the yFiles React Process Mining Component into my React application?

To integrate the component, download the trial version of yFiles for HTML, install the yFiles React Process Mining Component via npm, ensure necessary dependencies, and add the component to your application. Refer to the documentation for detailed steps.

What role does the yFiles React process mining component play in enhancing decision-making?

The yFiles React process mining component empowers decision-makers with actionable insights derived from process data analysis. By visualizing process flows, identifying patterns, and detecting inefficiencies, it enables informed decision-making, leading to better resource allocation, improved performance, and strategic business outcomes.

Benefits: The yFiles advantage

The yFiles React process mining component revolutionizes process mining, offering seamless integration and unparalleled functionality. This component provides:

  • Workflow analysis: Dive deep into your business processes with sophisticated visualization features.

  • Enhanced efficiency: Streamline operations and boost productivity through transparent workflows.

  • Real-time visibility: Gain instant visibility into business operations, enabling timely decision-making and real-time optimization.

  • Business innovation: Foster innovation by unlocking actionable insights and driving continuous improvement initiatives.

  • Root cause analysis: Identify root causes of inefficiencies and bottlenecks, facilitating targeted improvements.

  • Continuous improvement: Drive continuous improvement initiatives by uncovering opportunities for optimization and innovation.

  • Operational insights: Gain valuable operational insights through process discovery, event logs analysis, and visualization.

The transformative benefits of the yFiles React process mining component will propel your business towards operational excellence and innovation.

Want to Learn More? - Contact Us - Try yFiles for Free

Overview of process mining solutions in different industries

  • Financial services: Process mining in financial services enhances operational efficiency, regulatory compliance, and customer satisfaction by analyzing transactional data, detecting fraud, optimizing loan approval processes, and improving risk management.

  • Insurance: In the insurance sector, process mining optimizes claims processing, underwriting, and policy administration processes by identifying bottlenecks, reducing cycle times, and enhancing customer experiences.

  • Healthcare: Process mining improves healthcare processes by analyzing patient journey data, optimizing appointment scheduling, reducing wait times, and enhancing resource allocation in hospitals and healthcare facilities.

  • Manufacturing: In manufacturing, process mining optimizes supply chain management, production processes, and quality control by analyzing production data, identifying inefficiencies, and streamlining workflows to increase productivity and reduce costs.

  • Telecommunications: Process mining in telecommunications enhances network operations, customer service, and billing processes by analyzing call detail records, identifying network issues, optimizing service delivery, and improving customer satisfaction.

Why yFiles for HTML?

Most complete solution

Since 2000, yWorks is dedicated to the creation of professional graph and diagramming software libraries. yWorks enables clients to realize even the most sophisticated visualization requirements to help them gain insights into their connected data. The yFiles family of software programming libraries is the most advanced and complete solution available on the market, supporting the broadest range of platforms, integrations, input methods, data sources, backends, IDEs, and programming languages.

Perfect match for all use-cases

yFiles not only lets you create your own customized applications but integrates well with your existing solutions and dashboards on the desktop, on mobile, and on the web. Developers can use concise, rich, complete APIs to create fresh, new applications and user experiences that match your corporate identity and exactly fit your specific use-cases. Browse and choose from hundreds of source code demos and integrations to get ideas and get started in no time.

Honest, simple licensing

yFiles enables white-label integrations into your applications, with royalty-free and perpetual licensing. There are no third party code dependencies.

Industry-leading automatic layouts

yFiles has got you covered with a complete set of fully configurable, extensible automatic layout algorithms, that not merely render the elements on the screen but help users understand their data and the relationships just by looking at the diagrams.

Unmatched customizability

Decades of work went into the creation of the most flexible, extensible, and easy to use diagramming APIs that are available on the market. Everything may be customized with yFiles: data acquisition and import, graph creation, display, interaction, animation, layout, export, printing, and third party service connectivity.

Algorithms included

With yFiles, you can analyze your graphs, connected data, and networks both on the fly and interactively with a complete set of efficient graph algorithm implementations. Calculate centrality measures, perform automatic clustering, calculate flows, run reachability algorithms, find paths, cycles, and dependencies. For the best user experience, use the results to drive the visualization, interactivity, and layout.

Unequaled developer productivity

Developers quickly create sophisticated diagramming applications with yFiles. The extensive API has been carefully designed and thoroughly documented. There are developers’ guides, source code tutorials, getting started videos, and fully documented source code demo applications, that help to realize even the most advanced features. Inline API documentation lookup for all major IDEs with hundreds of code snippets and linked related topics make writing robust code a breeze. Integration samples for many major third party systems help in getting productive, quickly.

Not just a static viewer

With yFiles, you can do more than just analyze and view your data. Create interactive, deeply integrated apps that don’t just let you consume data sources, but also enable users to create, modify, and work with both existing and changing data. Integrate with third party services to automatically trigger actions and apply updates. With yFiles, there are no limits: you decide what your app can do.

High-performance implementations

While it is recommended not to overwhelm the end-user with overly complex graph visualizations, of course, all aspects of the library have been prepared to work with large amounts of data. Developers can create both high-quality diagram visualizations and rich user-interactions, as well as configure algorithms and visualizations to perform great for even the largest graphs and networks.

Generic data acquisition

You don’t need to let your users create the diagrams from scratch or use a particular file format. yFiles enables you to import graphs from any data source which is accessible via an API. Programmatically build the in-memory model using an intuitive, powerful API. Update the diagram live in response to external events and changes.

World-class support

Get the best support for your development teams. Directly connect with more than a dozen core yFiles library developers to get answers to your questions. If you don’t have the time to do the implementation or your team is not large enough to do the implementation, let yWorks help you with consultancy and project work to get your team and apps up running, quickly.

Proven solution

Customers from all industries all over the world have been using yFiles for almost twenty years for both internal and customer-facing applications and tools. See the references for a non-conclusive list.

100% client-side solution

yFiles for HTML does not require an active server component. It can be combined with any server technology. yFiles for HTML solely consists of a set of JavaScript files, an optional CSS file, and only requires an HTML page to host the visualization. yFiles for HTML-powered applications will not put a lot of load onto the server, and with caching enabled, they will be a one-time download and can run without an active internet connection, even directly from the file system, or as a PWA.

Runs in Node.js

If no visualization is required, yFiles for HTML-powered applications can run in a Node.js process and calculate layouts or run graph algorithms.

Latest drawing technologies

yFiles for HTML uses SVG, WebGL 1&2, and HTML5 Canvas to draw graphs and diagrams. The three technologies may be combined and used at the same time to get the best of all technologies, creating the ultimate user experience. Use the power of WebGL to render very large graphs together with the fidelity and ease of development of SVG in conjunction with CSS styling, animations, and transitions to draw beautiful diagrams.

Use your preferred programming language

yFiles for HTML is implemented as a pure JavaScript library that requires ECMAScript 5 at minimum at runtime. The API supports newer features of ECMAScript 2015+, though, and developers may use the library with the most current JavaScript features. For TypeScript development and GWT development, a complete set of type definitions is available, too.

Frequently Asked Questions

What is yFiles?

yFiles is a software library that supports visualizing, editing, and analyzing graphs and graph-like diagrams. It is not a ready-to-use application or graph editor. Instead, it provides a component for graph visualization, graph editor features, and an extensive set of algorithms for automatic data arrangement and graph analysis. Software developers can use yFiles to display, edit, and analyze diagrams in their own applications. yFiles is available for many platforms.

Which platforms does yFiles support?

Right now, yFiles supports HTML / JavaScript, Java (Swing), JavaFX, .NET (WinForms), and WPF.

What kind of applications can I create with yFiles?

Developers can use concise, rich, complete APIs to create fresh, new applications, and user-experiences that match your corporate identity and exactly fit your specific use-cases. yFiles enables white-label integrations into your applications, with royalty-free and perpetual licensing. Any application that works with or displays relational data in the form of graphs, diagrams, and networks can be built with the help of yFiles.

What devices can I target with yFiles?

yFiles not only lets you create your own customized applications but integrates well with your existing solutions and dashboards on the desktop, mobile, and the web. There are versions of yFiles available for all major platforms and frameworks.

How extensive is the graph API of yFiles?

yFiles offers the most extensive graph layout, visualization, and analysis APIs available commercially. In total, there are around ten thousand public API members (classes, properties, methods, interfaces, enumerations). yFiles uses a clean, consistent, mostly object-oriented architecture that enables users to customize and (re-) use the available functionality to a great extent. API components can be (re-)combined, extended, configured, reused, and modified to a very high degree. It is not mandatory to know the complete API, of course. Most applications only require a minimal subset of the full functionality, and the advanced functionality and APIs may only be required for implementing unique requirements.

As a developer, what can I expect from yFiles?

yFiles helps developers quickly create sophisticated diagramming applications. The extensive API has been carefully designed and thoroughly documented. There are developers’ guides, source code tutorials, and fully documented complete source code demo applications that help to realize even the most advanced features. Inline API documentation lookup for all major IDEs with hundreds of code snippets and linked related topics help in writing robust code, efficiently. Integration samples for many major third party systems help in getting productive, quickly.

Is yFiles Free?

No. yFiles is a commercial software library. If you decide to use yFiles in your application, you’ll have to pay a one-time fee. You also have the option to subscribe annually for technical support and updates.

How does the licensing work for yFiles?

yFiles enables white-label integrations into your applications, with royalty-free and perpetual licensing. There are no third party code dependencies. Licensing basically works on a per developer basis. Please refer to the pricing information and software license agreements of the respective product for more details.

What kind of support can I get for yFiles?

The yFiles libraries come with fully documented demo applications, detailed API documentation, and extensive developers’ guides. Apart from that, yWorks also offers professional support services for your development teams. They can connect directly with more than a dozen core yFiles library developers to get answers to their programming questions. Optionally, if you don’t have the time or necessary team, yWorks can help you with consultancy and project work to get you and your apps up running quickly.

How is the release cycle for yFiles?

There is no public roadmap for yFiles. yFiles usually gets a new major feature release about every 10 to 15 months, with bugfixes or minor maintenance releases in between as required. Typically there are between one and five bugfix releases for each major release, and previous releases get important bugfixes, too. yWorks tries very hard to keep the libraries and APIs backward compatible so that customers can update to the newest version of yFiles regularly with little to no effort and still benefit from performance improvements and new features.

Can I edit my graphs with yFiles?

With yFiles, you can do more than just analyze and view your data. You can have interactive, deeply integrated apps that don’t just let you consume data sources but also enable users to create from scratch, modify, and work with both existing and changing data. Integrate with third party services to automatically trigger actions and apply updates in real-time and publish changes to third party systems while the user works with the graph. It’s up to you to decide what your app can do.

What kind of layouts does yFiles support?

yFiles comes with the most extensive set of fully configurable, extensible automatic layout algorithms, that not merely render the elements on the screen but help users understand their data and the relationships just by looking at the diagrams. yFiles includes hierarchic, organic (force-directed), orthogonal, tree-like, radial, balloon-like, and special purpose layouts. yFiles also supports incremental, partial, and interactive layouts, as well as various edge routing and automatic label placement algorithms.

Are the layout algorithms configurable?

Layout algorithms support various settings and constraints and are fully customizable in code. They support different node sizes, nested groups, bundled edges, orthogonally and octilinearly routed edges, consider and automatically place node, edge, and port labels. Nodes may be partitioned and clustered, and different layout styles can be mixed in the same diagram.

What kind of graph analysis does yFiles support?

yFiles lets you analyze your graphs, connected data, and networks both on the fly and interactively with a complete set of efficient graph algorithm implementations. Choose from a range of different centrality measure implementations, automatic clustering algorithms, network flow algorithms, reachability and connectivity algorithms, pathfinding variants, cycle, and dependency analysis algorithms. For the best user experience, use the results to drive the visualization, interactivity, and layout.

What parts of yFiles can be customized?

yFiles has the most flexible, extensible, and easy to use diagramming APIs that are available commercially. Every aspect of the functionality is customizable with options ranging from high-level configuration settings, down to low-level implementation overrides: data acquisition, import, graph creation, display, interaction, animation, layout, export, printing, and third party service connectivity.

How can I get my data into yFiles?

End-users don’t need to create the diagrams from sketch or use a specific file format. yFiles lets you import graphs from any data source that is accessible via an API. Developers can populate the in-memory model using an intuitive, powerful API, directly connecting to their preferred data sources. Diagrams can be updated live in response to external events and changes.

How can I get my diagrams data back from yFiles?

The in-memory graph model lets you export all the information to any system and file format. There are built-in export options to various file and image formats, but as a developer, you can create your own glue code to connect to arbitrary data storage systems and third party services.

Is the diagram size limited?

Theoretically, the only limiting factor for the number of graph elements is the size of the computer’s memory. In practice, performance is also a limiting factor. For the vast majority of use-cases, yFiles delivers best-in-class performance out-of-the-box. For very large visualizations and data-sets, there are options available that let developers tune between features, running-time, and quality of the results. yFiles can deal with graphs of any size and is only bound by the memory available and the runtime complexity of the algorithms. Large graphs may require adjusting the default settings and performance depends on more than just the number of elements in the diagram, but also the structure of the graph, the algorithm and configuration, as well as platform and hardware capabilities.

Who is using yFiles, already?

Customers from almost all industries all over the planet have been using yFiles for nearly twenty years, to create both internal and customer-facing applications and tools. Clients include both single developers and the largest corporations and organizations in all of academia, public and governmental services, and of course, the commercial space. See the references for a non-conclusive list. Naturally, there are the big well-known software corporations among yWorks’ customers (unfortunately only some of them allow yWorks to list them on the references page), but there’s also a great lot of companies that are not traditionally known for software, but who still have their own IT departments create software for their intranet or customer-facing applications. And last but not least, smaller companies without IT departments that let third party implementors create useful diagramming applications with the help of yFiles for them. yFiles at its core is a generic diagramming component that is use-case agnostic and can be used to create graph and diagramming-centric applications for any business domain that requires working with or displaying connected data.

How long did it take to implement yFiles?

yFiles started as a university project at the University of Tübingen in the late 1990s. Since 2000, yWorks has taken over all development and has been working continuously with a core layout-team of two to eight developers on improving the layout algorithms. The layout algorithms alone, as of 2021, took more than seventy development years to implement. A team of more than 25 developers has been working on the implementation for the visualization and interaction and the support for the various platforms yFiles supports, totaling in more than a hundred years of development for the visualization. Porting yFiles to a new platform in the past took between three and about 15 development years. Most platform variations were implemented in between six and ten calendar months.

How long has yFiles been around?

yFiles started as a university project at the University of Tübingen in the late 1990s. The company yWorks was founded as a spin-off of the university in 2000 when the first commercial customers wanted a license for yFiles. Since then, it has been developing and improving the library. It all started as a Java library, and over time, yWorks improved and even rewrote large parts of the library to add new features and support new platforms.

Who is the company behind yFiles?

yWorks is the company behind yFiles. It was founded as a spin-off of the University of Tübingen in the year 2000 specifically for licensing and supporting yFiles commercially. The German company is a privately-held, headquartered in Tübingen. More than 30 employees are working at yWorks, over 20 of which are developers, working on yFiles and the tooling around the libraries. The library developers also provide support and implementation services to yFiles customers. So as a developer, you will get first-class, highest level support directly from the team that implements the libraries.

What does yWorks specialize in?

Since 2000, yWorks is dedicated to the creation of professional graph and diagramming software libraries. The software yWorks creates, enables customers to realize even the most sophisticated visualization requirements to help them gain insights into their connected data. Their main product is the software programming library family yFiles, which is the most sophisticated and complete solution available for diagramming applications on the market, supporting the broadest range of platforms, integrations, input methods, data sources, backends, IDEs, and programming languages. yWorks has set a track-record in providing the most extensive layout and diagramming solutions for developers on all major platforms. In addition to creating, maintaining and supporting the libraries, yWorks also provides professional consultancy services in the area of visualization and diagramming. In addition to that, yWorks also provides a set of smaller software tools, both free and commercial, end-user facing and for software developers, closed-source and open-source.

Does yWorks own all the intellectual property for yFiles?

yFiles does not depend on any third party library, except of course at runtime, where it depends on the runtime of the platform. yWorks owns the IP for all implementations in the core yFiles library. Some demos show the integration and make use of third party software, but they are not required for other cases.

Which papers and algorithms does yFiles implement?

The list of algorithms implemented by yFiles is long. For the common graph algorithms, we use the traditional implementations with the standard optimizations. For many of the layout algorithms, ideas for the implementation base on publicly available papers. Some algorithms (specifically the orthogonal layout and the balloon layout) we created and helped with the creation of the algorithms and (co-)published the papers for the algorithms. Most layout algorithms have been vastly modified, tuned, and enhanced, though, and don’t follow the original implementation ideas, anymore. yWorks added useful features to these implementations to make the algorithms work in less theoretical environments. We removed previously existing constraints of the original implementations and added new ideas to make the algorithms useful for real-world usage. For most of these changes and improvements, no papers have been published.

Can I get the papers for the layout algorithms used in yFiles?

For some of the algorithms, you will find papers that describe the core idea of the layout algorithms. For most algorithms, yWorks massively enhanced and modified the algorithms to support more advanced features that are frequently required in real-world diagrams. For these modifications, we did not publish any papers. As a commercial yFiles customer, you can obtain a license to the source code of yFiles where you can read, learn about, and modify the algorithms in documented source code form, according to the license terms.

Is a server required to host a graph drawing application?

yFiles for HTML does not require an active server component. As such, any server technology that can serve static HTML pages and JavaScript will do. yFiles solely consists of a set of JavaScript files, a CSS file, and an HTML page to host the visualization app. With caching enabled and properly configured, yFiles for HTML-powered apps can be a one-time download and can run without an active internet connection, even directly from the file-system.

Can I run yFiles for HTML graph drawing apps on the desktop?

With technologies like NW.js, Electron, Visual Studio Code, and Webkit, yFiles for HTML runs in native applications on the desktop and other devices. The visualization engine requires an HTML-5 compliant browser engine with a working DOM implementation and JavaScript support with at least ECMAScript 5. yFiles for HTML can run in a Node.js process and calculate layouts and run graph algorithms without a viewer component.

Can yFiles for HTML powered graph apps run on the server?

The visualization engine requires an HTML-5 compliant browser engine with a working DOM implementation and JavaScript support with at least ECMAScript 5. Technologies like Puppeteer and Webkit provide these features on a headless server. If no visualization is required, yFiles for HTML can run in a Node.js process and calculate layouts and run graph algorithms without a visible view.

What rendering technology does yFiles for HTML use for drawing graphs?

yFiles for HTML uses SVG, WebGL 1, WebGL 2, and HTML5 Canvas to draw graphs and diagrams. SVG, together with CSS styling, animations, and transitions creates beautiful, high-fidelity diagram visualizations. WebGL can provide the performance to render even the largest graphs. Combine all technologies and use them at the same time in the same diagram to get the best possible user experience.

Does yFiles support rendering graphs using WebGL?

WebGL is a modern, low-level rendering technology employed in modern browsers. yFiles supports using WebGL 1 and WebGL 2 for rendering large-scale, simple graph visualizations. yFiles comes with optimized built-in default visualizations that use WebGL, but developers may use the full WebGL API to render contents into a yFiles diagram. yFiles supports rendering SVG, Canvas, and WebGL in the same diagram. For medium-sized graphs, using SVG often is the preferred choice due to simplicity, versatility, and performance. With the WebGL2 rendering backend the size of the graphs is mostly limited by the performance of the graphics card adapter, only. Millions of elements can be rendered smoothly at the same time on the screen in an animated fashion, even with lower-end dedicated graphics card adapters.

Does yFiles use HTML5 Canvas for rendering graphs?

Canvas is a low-level rendering technology employed by most of today’s browsers. yFiles supports using Canvas for rendering large-scale, simple graph visualizations, and for rendering bitmap effects in the visualization. yFiles’ default styles usually use SVG or WebGL, but developers may use the full Canvas API to render contents into a yFiles diagram. yFiles supports renderings with all three technologies at the same time in the same diagram. For medium-sized graphs, using SVG often is the preferred choice due to simplicity, versatility, and performance.

Is yFiles using SVG for rendering graphs?

For medium-sized graphs, using SVG often is the preferred choice due to simplicity, versatility, and performance. But yFiles supports renderings with SVG, HTML5 Canvas, and WebGL at the same time in the same diagram. SVG creates high-fidelity vector graphics that work great for medium-sized diagrams and support CSS styling, animations, and transitions, as well as perfect text rendering on all supported browsers.

Can I create my diagramming app using TypeScript?

The API of yFiles for HTML has been designed carefully to work perfectly in a TypeScript environment. A complete TypeScript type definition file makes use of advanced TypeScript features such as nullability, interfaces, enumerations, generics, subclassing, union types, overloads, asynchronous programming, and more. yFiles for HTML is also available as an npm module, which makes the inclusion of the library in any modern project a breeze.

Can I use CSS for styling and animating my graphs?

One of the three main rendering technologies used by yFiles is SVG. SVG works on the DOM level and can be conveniently styled and animated using CSS3 transitions and animations. Native CSS transitions and animations don’t block the main thread and work smoothly even on slower devices on modern browsers. As such, they can outperform Canvas- and WebGL-based solutions.

Is yFiles available as a node module on npm?

yFiles does not have any third party dependencies and at its core only consists of several JavaScript files and a CSS file. The package contains a package.json file that can be used with the npm pack command to create a npm package of yFiles. Licensees may put this npm package into private npm registries or file repositories for convenient installation using npm or yarn. yFiles for HTML is not currently available for the public on npmjs.org.

Is the source code available for yFiles for HTML?

The sources for yFiles for HTML come in a minified, optimized form. Licensees have the option to get a non-minified debugging variant of yFiles for HTML. There is also the option to get the complete sources of yFiles for HTML with the right to modify and distribute derived versions of the library with custom applications.

Can I use GWT to create my graph application?

yFiles for HTML is a native JavaScript library for which complete GWT bindings exist. This enables GWT developers to author high-quality graph visualization web applications using the Java programming language. The GWT bindings for yFiles for HTML support various customizations. Developers may create custom subclasses of library classes and implement interfaces as well as use the complete API to author their graph applications.

Can I print my graphs from my web application?

yFiles for HTML provides mechanics to print your graphs. With SVG styles, you get high-quality print-outs. You can use poster printing and add custom headers, footers, and other content to print documents. There is no active server component required for operation.

Can I export my graphs as images from my web application?

yFiles for HTML provides several options for exporting your graphs from your web applications. The native export consists of an SVG export with high fidelity vector graphics when using SVG styles. HTML5 Canvas-based styles and WebGL-based styles are included as bitmap images inside the SVG. The resulting SVG contains all visuals and can be exported as is, to bitmap files (PNG), and PDF files (with the free svg2pdf.js third party plugin).

Can I export my graphs in other formats?

The native format for file import and export in yFiles for HTML is GraphML, which preserves the graph structure, stylistic information, and custom business data. As a lighter-weight format, JSON is often preferred if some of the data can be easily re-computed or isn’t necessary to be serialized. yFiles for HTML also has a separate companion product that adds export capability to Microsoft Visio®'s .vsdx file format, while preserving full graphical fidelity as well as editability of the graph.

Does yFiles support creating web applications for iOS and Android?

yFiles for HTML is a pure JavaScript library that leverages SVG, Canvas, WebGL, and ECMAScript 5+. It runs on any major HTML5 compliant browser released since Internet Explorer 9. This, of course, includes the native iOS and Android browsers. Also, yFiles for HTML has built-in support for touch and pen input and does not require a mouse or connected physical keyboard.

Can I use React to create my graph application?

yFiles for HTML is framework agnostic and does not have any third party dependencies. It integrates well with all major UI frameworks and has been specifically tested and prepared to work well with React and its related frameworks. You can use the npm module variant of yFiles for HTML to build modern React components and applications, using both JavaScript and TypeScript. You can even use React components to render your SVG node templates.

Can I use Vue.js to create my graph application?

yFiles for HTML is framework agnostic and does not have any third party dependencies. It integrates well with all major UI frameworks and has been specifically tested and prepared to work well with Vue.js. You can use the npm module variant of yFiles for HTML to build modern Vue.js components and applications, using both JavaScript and TypeScript. You can even use Vue.js components to render your SVG node templates.

Can I use Angular to create my graph application?

yFiles for HTML is framework agnostic and does not have any third party dependencies. It integrates well with all major UI frameworks and has been specifically tested and prepared to work well with Angular and the Angular CLI. You can use the npm module variant of yFiles for HTML to build modern Angular components and applications, using both JavaScript and TypeScript. You can even use Angular components to render your SVG node templates.

Can I use my UI framework to create my graph application?

yFiles for HTML is framework agnostic and does not have any third party dependencies. It integrates well with all major UI frameworks and has been specifically designed to not conflict with well-behaved third party UI frameworks. The npm module variant of yFiles for HTML can be used like other npm packages to build modern components and applications, using both JavaScript and TypeScript. If your UI framework provides the ability to specify some CSS rules, to run JavaScript, and access to insert or upgrade a DOM div element, it should be no problem to embed the yFiles graph component. Please contact our technical support team should you run into any issues.

Does yFiles use D3.js for rendering graphs?

No. yFiles for HTML uses its own rendering technology that supports both SVG, HTML5 Canvas, and WebGL at the same time. The rendering engine uses virtualization to be able to deal with larger visualizations, too. Developers can use D3.js to augment the visualization in yFiles for HTML, e.g., to render bar charts inside node visualizations or to map scalar values to colors in the visualization.

Can I use data binding for rendering my graphs?

Yes. yFiles supports data binding on different levels. Developers can use data binding to bind the visualization for nodes, edges, ports, and labels to properties in the underlying business data. Reactive templating and binding libraries like Angular, React, Vue.js, Svelte, or D3.js can be used for the rendering. yFiles also comes with a simple, built-in, third-party-code-free templating engine for the visualization of graph items. Binding the structure of the graph to reactive business data is also possible.

Is there a low-code version of yFiles for me to get started?

Yes! If you are new to yFiles, the App Generator can help you create and scaffold your first yFiles-powered app withing just minutes. You can interactively configure your data-sources, choose you UI-framework and programming language, and share your project ideas with your team and customers.

Can I use JSON to load my graphs?

The yFiles for HTML programming API allows developers to create graphs from any data source they have access to. There are utility classes that help in quickly parsing and converting both simple and complex data structures into graph visualizations.

How can I load my graphs from the server?

Any technology that is available in a user agent can be used for loading graphs from the server. This includes REST APIs, but also custom binary protocols that work over WebSockets, as well as XML, JSON, plain-text, etc.

Do I need server-side rendering to render my diagrams?

No. The visualization part of yFiles for HTML is an interactive JavaScript component that runs inside the browser on the client. As such, rendering the diagram on the server would not result in an interactive diagram, but rather a static image. yFiles for HTML does not require an active server component, and the page that hosts the diagram component can be rendered on the server with static server-side rendering techniques that create the complete DOM on the server. yFiles for HTML still needs to be loaded on the client to provide interactive features like zooming, scrolling, editing, and animating the diagram.

Hide Description
Open in yEd LiveDownload