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.
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.