Streamdown BPMN

A Streamdown custom renderer that turns bpmn code fences into interactive BPMN 2.0 diagrams — with pan, zoom, fullscreen and SVG/BPMN export.

The same streaming idea that powers the chart renderer works for process diagrams. Streamdown BPMN upgrades fenced bpmn blocks — containing standard BPMN 2.0 XML — into an interactive bpmn.io viewer with pan, zoom, fullscreen and SVG/BPMN export. It is streaming-aware: until the closing </bpmn:definitions> tag arrives, the block shows a skeleton instead of a broken diagram.

Installation

Install it from the same registry:

npx shadcn@latest add https://bitbasti.com/r/streamdown-bpmn.json

Then add bpmnRenderers to the same renderers array — it can sit right alongside the chart renderer:

import { Streamdown } from "streamdown";
import { rechartsRenderers } from "@/components/streamdown-recharts";
import { bpmnRenderers } from "@/components/streamdown-bpmn";
 
export function Message({ markdown }: { markdown: string }) {
  return (
    <Streamdown
      plugins={{ renderers: [...rechartsRenderers, ...bpmnRenderers] }}
    >
      {markdown}
    </Streamdown>
  );
}

Examples

Linear process

A start event, a couple of tasks and an end event in sequence.

Exclusive gateway

An exclusive gateway branches the flow into an approved and a rejected path.

Prompting the model

BPMN is verbose, so it helps to remind the model of the exact fence and that the XML must carry BPMNDiagram layout so the viewer can place the shapes. A compact system prompt:

You are a process-modelling assistant. When the user describes a workflow,
respond with a fenced `bpmn` code block containing valid BPMN 2.0 XML.
 
Requirements:
- A single <bpmn:definitions> root with the standard bpmn / bpmndi / dc / di
  namespaces.
- One <bpmn:process> with startEvent, tasks, gateways and endEvents wired by
  <bpmn:sequenceFlow> elements.
- A <bpmndi:BPMNDiagram> section with BPMNShape / BPMNEdge bounds and waypoints
  for every node and flow, so the diagram can be laid out.
 
Emit only the XML inside the fence. Add a short sentence of context before it.

A sample user prompt:

Model our expense approval: an employee submits a request, a manager reviews it,
then an exclusive gateway splits into "approved" (process the payment, then end)
and "rejected" (end). Use a BPMN diagram.

The model replies with prose plus a bpmn fence, which the renderer upgrades into a live, zoomable diagram like the ones above.

Beyond the diagram

Each rendered diagram carries a small toolbar:

• Zoom & reset — zoom in/out and fit the diagram back to the viewport.
• Fullscreen — open the diagram in an overlay for a closer look.
• Export — download the diagram as an SVG image or the raw BPMN XML.