Getting Started

Prerequisites

To use the Process Mining component, yFiles for HTML is required. You can evaluate yFiles for 60 days free of charge on my.yworks.com. See Licensing for more information on this topic.

You can learn how to work with the yFiles npm module in our Developer’s Guide. A convenient way of getting access to yFiles is to use the yFiles Dev Suite.

Project Setup

Installation

In addition to yFiles, the Process Mining component requires React to be installed in your project. If you want to start your project from scratch, we recommend using vite:
```
npm create vite@latest my-process-mining-app -- --template react-ts
```
Add the yFiles dependency:
```
npm install <yFiles package path>/lib-dev/yfiles-26.0.0+dev.tgz
```
Sample package.json dependencies
The resulting package.json dependencies should resemble the following:
```
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "yfiles": "./lib-dev/yfiles-26.0.0.tgz"
  }
```
Now, the component itself can be installed:
```
npm install @yworks/react-yfiles-process-mining
```
License

Be sure to invoke registerLicense before using the Process Mining React component. When evaluating yFiles, the license JSON file is found in the lib/ folder of the yFiles for HTML evaluation package. For licensed users, the license data is provided separately.
License registration
Import or paste your license data and register the license, e.g. in App.tsx:
```
import yFilesLicense from './license.json'

registerLicense(yFilesLicense)
```

Stylesheet

Make sure to import the CSS stylesheet as well:

import '@yworks/react-yfiles-process-mining/dist/index.css'

Usage

You are now all set to utilize the Process Mining component with your data! See a basic example App.tsx below:

import {
  ProcessMining,
  registerLicense
} from '@yworks/react-yfiles-process-mining'

import '@yworks/react-yfiles-process-mining/dist/index.css'

import yFilesLicense from './license.json'

registerLicense(yFilesLicense)

const eventLog = [
  { caseId: 0, activity: 'Start', timestamp: 8.383561495922297, duration: 0.0006804154279300233 },
  { caseId: 0, activity: 'Step A', timestamp: 8.928697652413142, duration: 0.10316578562597925 },
  { caseId: 0, activity: 'Step B', timestamp: 9.576999594529966, duration: 0.041202953341980784 },
  { caseId: 0, activity: 'End', timestamp: 10.163338704362792, duration: 0.2746326125522593 }
]

function App() {
  return <ProcessMining eventLog={eventLog}></ProcessMining>
}

export default App

Note: By default, the ProcessMining component adjusts its size to match the size of its parent element. Therefore, it is necessary to set the dimensions of the containing element or apply styling directly to the ProcessMining component. This can be achieved by defining a CSS class or applying inline styles.

Graph Extraction

To uncover the flow and workload within the event log, the process mining component derives a graph structure that encapsulates the underlying processes in the log. The nodes of this structure represent the process steps, which emerge when an activity is linked to at least one event. The edges, known as transitions, are inferred from consecutive events associated with two steps, representing movement from one process step to another. For instance, in the event log provided below, two process steps will emerge, linked to activities ‘Start’ and ‘Step A’, along with a transition between them.

const eventLog = [
  { caseId: 0, activity: 'Start', timestamp: 8.2, duration: 0.2 },
  { caseId: 0, activity: 'Step A', timestamp: 8.9, duration: 0.1 },
] satisfies ActivityEvent[]

Transition events essentially bridge the gap between events and can be visualized with small circles on a transition.

The number of simultaneous events at a process step or transition contributes to a heat history, accessible at any timestamp within the event log’s range. A heatmap serves to visualize the current activity intensity.

To gain a comprehensive overview of changes across the entire event log, you can dynamically traverse the timespan. This approach helps clarify how things change over different time periods, providing a clearer picture of how processes and workloads evolve.

Learn More

Explore the possibilities of visualizing process mining diagrams with the yFiles Process Mining Component. For further information about yFiles for HTML and our company, please visit yWorks.com.

If you are exploring a different use case and require another React component, please take a look at the available React components powered by yFiles!

For support or feedback, please reach out to our support team or open an issue on GitHub. Happy diagramming!