Website · Documentation · GitHub · Changelog

Overview

@bpmnkit/plugins is a single package containing 22 ready-made CanvasPlugin add-ons for @bpmnkit/canvas and @bpmnkit/editor. Each plugin is imported individually via subpath exports so you only bundle what you use.

Installation

npm install @bpmnkit/plugins

Plugins

Visualization

| Subpath | Factory | Description | |---------|---------|-------------| | /minimap | createMinimapPlugin() | Thumbnail navigation minimap | | /watermark | createWatermarkPlugin(text) | Corner watermark overlay | | /ascii-view | createAsciiViewPlugin() | Toggle ASCII art rendering | | /zoom-controls | createZoomControlsPlugin() | On-canvas +/− zoom buttons |

File Management

| Subpath | Factory | Description | |---------|---------|-------------| | /tabs | createTabsPlugin(options) | Multi-file tab bar with welcome screen | | /storage | createStoragePlugin(options) | IndexedDB workspaces/projects/files with auto-save | | /storage-tabs-bridge | createStorageTabsBridge(options) | Wire tabs + storage + main menu together |

Editing

| Subpath | Factory | Description | |---------|---------|-------------| | /command-palette | createCommandPalettePlugin() | ⌘K command palette | | /command-palette-editor | createCommandPaletteEditorPlugin() | Editor-specific commands | | /history | createHistoryPlugin() | Visual undo/redo history panel | | /config-panel | createConfigPanelPlugin(options) | Properties panel for selected elements | | /config-panel-bpmn | createConfigPanelBpmnPlugin(options) | BPMN-specific properties panel |

DMN & Forms

| Subpath | Factory | Description | |---------|---------|-------------| | /dmn-editor | — | Embedded DMN decision table editor | | /dmn-viewer | — | Read-only DMN viewer | | /form-editor | — | Camunda Form schema editor | | /form-viewer | — | Read-only form renderer | | /feel-playground | — | Interactive FEEL expression tester |

Process Simulation

| Subpath | Factory | Description | |---------|---------|-------------| | /process-runner | createProcessRunnerPlugin(options) | Run BPMN instances with play/step/stop UI | | /token-highlight | createTokenHighlightPlugin() | Highlight active/visited elements during execution | | /optimize | createOptimizePlugin() | Show optimizer findings overlay |

AI & Navigation

| Subpath | Factory | Description | |---------|---------|-------------| | /ai-bridge | createAiBridgePlugin(options) | AI chat panel with diagram apply/checkpoint | | /element-docs | createElementDocsPlugin(options) | Built-in BPMN element reference docs | | /main-menu | createMainMenuPlugin(options) | File/Edit top-level menu |

Usage Examples

Minimap

import { BpmnCanvas } from "@bpmnkit/canvas"
import { createMinimapPlugin } from "@bpmnkit/plugins/minimap"

const canvas = new BpmnCanvas({
  container: document.getElementById("canvas")!,
  plugins: [createMinimapPlugin()],
})

Storage + Tabs

import { createStoragePlugin } from "@bpmnkit/plugins/storage"
import { createTabsPlugin } from "@bpmnkit/plugins/tabs"
import { createStorageTabsBridge } from "@bpmnkit/plugins/storage-tabs-bridge"

const storage = createStoragePlugin({ editor })
const tabs = createTabsPlugin({ editor })
const bridge = createStorageTabsBridge({ storage, tabs, mainMenu })

Process Simulation

import { Engine } from "@bpmnkit/engine"
import { createTokenHighlightPlugin } from "@bpmnkit/plugins/token-highlight"
import { createProcessRunnerPlugin } from "@bpmnkit/plugins/process-runner"

const engine = new Engine()
const tokenHighlight = createTokenHighlightPlugin()
const processRunner = createProcessRunnerPlugin({ engine, tokenHighlight })

const canvas = new BpmnCanvas({
  container,
  plugins: [tokenHighlight, processRunner],
})

AI Chat Panel

import { createAiBridgePlugin } from "@bpmnkit/plugins/ai-bridge"

const ai = createAiBridgePlugin({
  serverUrl: "http://localhost:3033",
  container: dock.aiPane,
  onOpen: () => dock.expand(),
})

Related Packages

| Package | Description | |---------|-------------| | @bpmnkit/core | BPMN/DMN/Form parser, builder, layout engine | | @bpmnkit/canvas | Zero-dependency SVG BPMN viewer | | @bpmnkit/editor | Full-featured interactive BPMN editor | | @bpmnkit/engine | Lightweight BPMN process execution engine | | @bpmnkit/feel | FEEL expression language parser & evaluator | | @bpmnkit/api | Camunda 8 REST API TypeScript client | | @bpmnkit/ascii | Render BPMN diagrams as Unicode ASCII art | | @bpmnkit/ui | Shared design tokens and UI components | | @bpmnkit/profiles | Shared auth, profile storage, and client factories for CLI & proxy | | @bpmnkit/operate | Monitoring & operations frontend for Camunda clusters | | @bpmnkit/connector-gen | Generate connector templates from OpenAPI specs | | @bpmnkit/cli | Camunda 8 command-line interface (casen) | | @bpmnkit/proxy | Local AI bridge and Camunda API proxy server | | @bpmnkit/cli-sdk | Plugin authoring SDK for the casen CLI | | @bpmnkit/create-casen-plugin | Scaffold a new casen CLI plugin in seconds | | @bpmnkit/casen-report | HTML reports from Camunda 8 incident and SLA data | | @bpmnkit/casen-worker-http | Example HTTP worker plugin — completes jobs with live JSONPlaceholder API data | | @bpmnkit/casen-worker-ai | AI task worker — classify, summarize, extract, and decide using Claude |

License

MIT © BPMN Kit — made by u11g