@cravern/bpmn-flow-designer

v1.0.22

Published

11 days ago

A React component for designing and editing BPMN workflows with AI-powered generation

Downloads

2,314

0High
0Medium
0Low

rdritchi

mogi1117

bpmn workflow flow-designer react ai-generation

BPMN Flow Designer

A powerful React component for designing and editing BPMN (Business Process Model and Notation) workflows with AI-powered diagram generation capabilities.

Features

🎨 Visual BPMN Editor: Drag-and-drop interface for creating BPMN diagrams
🤖 AI-Powered Generation: Generate BPMN diagrams from natural language descriptions using Google's Gemini API
📥 XML Import/Export: Import existing BPMN XML and export your designs
🎯 Component Palette: Built-in components (Start Event, Tasks, Gateways, End Events)
💅 Styled UI: Modern, responsive interface with Tailwind CSS
🔧 Fully Typed: Complete TypeScript support with type definitions

Installation

npm install bpmn-flow-designer

Prerequisites

You need to have the following peer dependencies installed:

npm install react react-dom tailwindcss

You'll also need to load BPMN-JS library. Add this to your HTML <head>:

<!-- BPMN-JS Styles -->
<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/assets/diagram-js.css"
/>
<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/assets/bpmn-font/css/bpmn.css"
/>

<!-- BPMN-JS Library -->
<script src="https://unpkg.com/[email protected]/dist/bpmn-modeler.development.js"></script>

Usage

Basic Example

import React from "react";
import { BpmnDesigner } from "bpmn-flow-designer";
import "bpmn-flow-designer/dist/style.css";

function App() {
  return (
    <BpmnDesigner
      title="My Workflow"
      onSave={(xml) => {
        console.log("BPMN XML:", xml);
      }}
    />
  );
}

export default App;

With Custom Initial XML

import { BpmnDesigner } from "bpmn-flow-designer";

const customXml = `<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL">
  <!-- Your custom BPMN XML here -->
</bpmn:definitions>`;

export default function App() {
  return (
    <BpmnDesigner
      initialXml={customXml}
      title="Custom Workflow"
      onSave={(xml) => console.log(xml)}
    />
  );
}

Props

BpmnDesignerProps

interface BpmnDesignerProps {
  /**
   * Initial BPMN XML to load into the editor
   * @default Default start event only
   */
  initialXml?: string;

  /**
   * Callback function triggered when the user exports/saves the diagram
   * @param xml - The exported BPMN XML string
   */
  onSave?: (xml: string) => void;

  /**
   * Title displayed in the header
   * @default "Flow Designer"
   */
  title?: string;
}

AI Generation Features

The component includes AI-powered BPMN generation using Google's Gemini API. To enable this feature:

Set up a Gemini API key
Create a .env file in your project:

VITE_GEMINI_API_KEY=your_api_key_here

The AI Architect section will allow you to describe workflows in natural language and automatically generate BPMN diagrams

Styling

The component uses Tailwind CSS for styling. Make sure your project has Tailwind CSS configured. The package exports all necessary styles via the CSS file:

import "bpmn-flow-designer/dist/style.css";

Ensure Tailwind CSS is installed and configured in your project:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Exporting Diagrams

Users can export their BPMN diagrams by:

Clicking the "Download BPMN" button in the header
Using the onSave callback to capture the XML

The exported file is a standard BPMN 2.0 XML file that can be imported into other BPMN tools.

Components Available

The palette includes the following BPMN components:

Start Event - Initiates the process flow
Task - Represents a work item or activity
Gateway - Decision points (Exclusive Gateway)
End Event - Terminates the process flow

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues and feature requests, please open an issue on the GitHub repository.

Run Locally

Prerequisites: Node.js

Install dependencies: npm install
Set the GEMINI_API_KEY in .env.local to your Gemini API key
Run the app: npm run dev