Auto-Layout: Old Engine vs New Engine
BPMN Kit's original layouter walked elements onto a cell grid. The new engine ranks the flow, gives each branch a band of its own, and routes edges around whatever is in the way. Same five process models, laid out twice — toggle between the two and see what changed.
Every diagram below ships as model-only BPMN with no diagram interchange, so both engines start from nothing and both layouts are computed in your browser when the diagram scrolls into view.
Loan pre-screening
A rejection path that rejoins an end event placed earlier in the flow — the classic case where a route ends up running back through a task.
Scroll to zoom, drag to pan.
KYC verification with retry
A retry loop plus three terminal outcomes. Branch order decides whether the outcomes stack cleanly or tangle around the happy path.
Scroll to zoom, drag to pan.
KYC onboarding with due diligence
Two nested decisions feeding four end events. Every branch has to find a lane of its own on the way out.
Scroll to zoom, drag to pan.
KYC risk classification
Twenty-one elements, two rejoins and a retry loop — the densest of the five, and the one that gains the most from ranking the happy path first.
Scroll to zoom, drag to pan.
Quote-to-cash with dunning
Two expanded sub-processes and a collections escalation, so edges have large obstacles to route around rather than through.
Scroll to zoom, drag to pan.
Against bpmn-auto-layout 2.0
bpmn.io's bpmn-auto-layout 2.0.0-alpha.2 is the layout we
measure ourselves against. Both engines laid out the same 160 diagrams, upstream's own
test fixtures, with their diagram interchange discarded, and one script measured both
outputs. Timings are XML in to XML out on one machine, in the same run.
| 160 fixtures | BPMN Kit, before | BPMN Kit, now | bpmn-auto-layout |
|---|---|---|---|
| Edges through other shapes | 41 | 0 | 10 |
| Edges cutting across their own endpoint | 83 | 0 | 0 |
| Edge crossings | 234 | 184 | 200 |
| Diagram area | 142.5 Mpx | 140.3 Mpx | 140.8 Mpx |
| Total edge length | 433k | 420k | 428k |
| Bends | 768 | 815 | 703 |
| Distance from the hand-made layout | 268 px | 264 px | 234 px |
| Runtime, median / p90 / max | 0.3 / 1.4 / 8 ms | 0.35 / 2.2 / 12 ms | 4.4 / 46 / 1267 ms |
Where we are still behind: our routes bend more, message flows still cross sequence flows more often inside a pool (63 against 54), and upstream's layouts sit closer to the diagrams people drew by hand. Part of that last gap is only where the drawing starts on the page — with the two origins aligned it narrows to 255 px against 244 px. The corpus is upstream's, chosen to cover what upstream handles, so it is not neutral ground.
The method, the metric definitions and the history of every pass are in the
bpmn-auto-layout evaluation;
the script that produced this table is
packages/core/scripts/layout-quality.mjs.
How these numbers are measured
Each model is parsed, laid out by both engines, and measured on the resulting diagram interchange — plane by plane, so an expanded sub-process is counted on its own plane rather than mixed into the parent.
- Edge crossings
- Pairs of segments from different edges that intersect. Shared endpoints do not count.
- Routes over shapes
- Edge segments that run across a shape they neither start nor end at — a line drawn through a task.
- Backward flows
- Flows drawn right-to-left whose target cannot reach their source again. Genuine loops are excluded: a retry has to travel backwards, so counting it would be unfair to both engines.
- Bends
- Waypoints that are neither the start nor the end of an edge.
- Edge length
- Total orthogonal edge length in diagram units.
Not every number goes down, and the ones that go up are the point of the trade: separating branches onto their own bands moves elements further apart, so a diagram with no crossings left can still carry more edge length than the tangled version it replaced.
Run it yourself with applyAutoLayout(defs) from
@bpmnkit/core, or pass
"grid" as the second argument for the original engine.
For how the layout pass works, see
auto-layout BPMN diagrams with the Sugiyama algorithm
and the @bpmnkit/core reference.