@bpmnkit/canvas

Overview

@bpmnkit/canvas is a lightweight BPMN 2.0 diagram viewer that renders to SVG. It has no runtime dependencies and works in any browser environment.

Features:

• SVG rendering of all standard BPMN 2.0 element types
• Pan and zoom (mouse wheel, touch pinch, keyboard)
• Dark and light theme
• Plugin API for extending rendering and behavior
• diagram:load and diagram:change events

Installation

pnpm add @bpmnkit/canvas

Basic Usage

import { BpmnCanvas } from "@bpmnkit/canvas";

const canvas = new BpmnCanvas({
  container: document.getElementById("canvas"),
  theme: "dark",   // "dark" | "light"
});

await canvas.loadXML(bpmnXml);

Options

type CanvasOptions = {
  container: HTMLElement;
  theme?: "dark" | "light";
  plugins?: CanvasPlugin[];
};

API

Events

canvas.on("diagram:load", () => {
  console.log("Diagram loaded");
});

canvas.on("diagram:change", () => {
  console.log("Diagram modified");
});

Plugins

The canvas accepts an array of plugins that can extend its behavior:

import { BpmnCanvas } from "@bpmnkit/canvas";
import { createMinimapPlugin } from "@bpmnkit/canvas-plugin-minimap";
import { createZoomControlsPlugin } from "@bpmnkit/canvas-plugin-zoom-controls";

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

Plugin interface

type CanvasPlugin = {
  name: string;
  install(api: CanvasApi): void;
  uninstall?(): void;
};

Available plugins