Tools to Draw an AI Agent Workflow Diagram (2026): A Neutral Comparison
Eight tools, eight approaches. The choice cascades into BPMN-spec coverage, bundle size, accessibility, build-time vs runtime, SEO, and licensing. There is no “best” in the abstract; the best tool depends on whether the diagram is a static reference, an interactive editor, or a collaborative modelling surface.
Comparison table
| Tool | Licence | Bundle | BPMN 2.0 fidelity | Render | SEO |
|---|---|---|---|---|---|
| bpmn.io / bpmn-js | bpmn.io / MIT | ~150 KB+ gzipped | Full BPMN 2.0 native | Client-side; SSR via headless approach | Good when SSR-ed, weaker as runtime |
| mermaid | MIT | ~600 KB raw, ~100-200 KB gzipped, can SSR | Approximate (sequenceDiagram, flowchart, swimlane added 2024) | Build-time via @mermaid-js/mermaid-cli; client-side default | Excellent when SSR-ed at build time |
| draw.io / diagrams.net | Apache 2.0 | 0 KB JS at runtime (static SVG export) | BPMN 2.0 shape library available | Editor → SVG export, checked into repo | Excellent (static SVG) |
| Camunda Modeler | Free desktop app (Camunda) | Desktop app | Full BPMN 2.0 native (Camunda is a major BPMN vendor) | Editor → BPMN XML / SVG export | n/a |
| react-flow | MIT | ~50-100 KB gzipped | Custom (not BPMN-native) | Client-side default | Poor (client-side render) |
| D3 | ISC | ~70-250 KB depending on subset | Custom (not BPMN-native) | Possible via JSDOM at build time | Good when SSR-ed |
| Custom SVG (hand-built) | n/a | 0 KB JS at runtime | As correct as the author makes it | Hand-authored, build-time | Excellent (text labels inline) |
| Lucidchart / Miro / Whimsical | SaaS, paid tiers | n/a (SaaS render) | BPMN templates available | SaaS, embed or export | Embed-shaped (less control) |
Per-tool notes
bpmn.io / bpmn-js
Strongest BPMN fidelity available. Round-trips BPMN 2.0 XML. Designed as an editor, but the renderer can run in read-only mode. Heavy bundle.
mermaid
Strong for lightweight per-example diagrams. mermaid-cli renders to SVG at build time, which is what this site uses for the build-time examples. Full BPMN 2.0 fidelity is approximate.
draw.io / diagrams.net
The editor produces clean SVGs that can be checked into the repo. Best balance for per-process production diagrams. Not BPMN-native but the BPMN 2.0 shape library is accurate.
Camunda Modeler
https://camunda.com/download/modeler/
Vendor BPMN tool. Best for teams that want BPMN XML round-trip with a Camunda or other compliant engine. Desktop only.
react-flow
Designed for editor surfaces. Wrong shape for a static reference page. Excellent for an interactive editor.
D3
Most flexible, most build effort. Overkill for a process-flow reference; better suited to data visualisation.
Custom SVG (hand-built)
https://developer.mozilla.org/en-US/docs/Web/SVG
Right for the canonical patterns on this site. Smallest bundle, most control. Most build effort up front.
Lucidchart / Miro / Whimsical
Strong for collaborative modelling. Less suitable for a publish-static reference page; the export quality and the embed footprint vary.
Recommendation per use case
For a static reference page that needs BPMN-spec correctness, the recommended stack is draw.io BPMN exports for the per-process diagrams (BPMN 2.0 shapes, accurate, exported to clean SVG), build-time mermaid for lightweight per-example diagrams (rendered to SVG via mermaid-cli), and hand-authored SVG for the canonical pattern shapes that appear across the site. This is the stack this site uses.
For an interactive BPMN editor (where the user drags shapes around), bpmn-js is the right answer. The bundle weight is unavoidable; the round-trip with BPMN 2.0 XML is unique to bpmn-js.
For collaborative process modelling with several stakeholders editing simultaneously, Camunda Modeler (desktop, free) or a SaaS editor (Lucidchart, Miro) is appropriate. Camunda Modeler is the right pick if BPMN engine round-trip is a requirement.
What this site uses
This site renders all canonical pattern diagrams as hand-authored SVG (the five shapes on the definition page and the per-page diagrams across handoffs, BPMN, and human-vs-agent). The five per-process diagrams (customer support, invoice processing, IT ticketing, sales pipeline, engineering task flow) are authored as BPMN-correct SVGs in the same style as a draw.io BPMN export. The rationale is in the methodology page: zero runtime cost, full SEO, full accessibility, full visual control, and BPMN-spec correctness verified by hand.
Related pages
- BPMN with AI agents : the spec-correct element reference the tools should produce.
- Methodology : why the site uses this stack.
- Examples : what the output looks like.