orkes-workflow-visualizer

orkes-workflow-visualizer is a powerful library that leverages Reaflow to visually represent workflow definitions and execution diagrams. With a fully customized interface, this package enables seamless and intuitive visualization of workflows, offering tailored node designs, edge connections, and layout configurations to suit various workflow management needs.

Show support for the orkes workflow visualizer. Please help spread the awareness by starring our repo.

Features

• Custom diagram for Workflow definition.
• Custom diagram for Workflow execution.
• Fully customizable and easy to integrate with existing applications.

Installation

To install the library, use npm or yarn:

npm install orkes-workflow-visualizer

or

yarn add orkes-workflow-visualizer

Usage

Here’s an example of how to use orkes-workflow-visualizer in your project.

Basic Setup

1. Import the necessary components:

   import { WorkflowVisualizer } from "orkes-workflow-visualizer";

2. Use the component in your application:

   import { WorkflowVisualizer } from "orkes-workflow-visualizer";
   
   const App = () => (
     <div>
       <WorkflowVisualizer
         maxHeightOverride
         pannable
         zoomable
         zoom={0.7}
         data={executionData}
         executionMode={true}
         onClick={(e, data) => setData(data)}
       />
     </div>
   );
   
   ReactDOM.render(<App />, document.getElementById("root"));

Contributing

We welcome contributions to orkes-workflow-visualizer. If you have any issues or feature requests, please open an issue on our GitHub repository.

License

This library is licensed under the Apache-2.0 License. See the LICENSE file for more details.

---

This README.md provides an overview of how to install, use, and extend the orkes-workflow-visualizer library. For more detailed documentation and examples, please refer to the project's GitHub repository.