Live checkout flow
Cart → pay → confirm; pulses sit on the active step, traffic flows along the path.
Rendering…
Make it your own.
{
"nodes": [
{ "id":"u","type":"actor","label":"Shopper","x":40,"y":180 },
{ "id":"c","type":"rounded","label":"Cart","x":240,"y":180,"fill":"#dbeafe","stroke":"#2563eb" },
{ "id":"p","type":"rounded","label":"Pay","x":420,"y":180,"fill":"#fef3c7","stroke":"#a16207","motion":"pulse" },
{ "id":"d","type":"diamond","label":"3DS?","x":620,"y":165,"fill":"#fef3c7","stroke":"#a16207" },
{ "id":"a","type":"stadium","label":"Authorise","x":820,"y":80,"fill":"#dcfce7","stroke":"#15803d","motion":"ping" },
{ "id":"r","type":"stadium","label":"Decline","x":820,"y":280,"fill":"#fee2e2","stroke":"#b91c1c" },
{ "id":"cf","type":"document","label":"Receipt","x":1020,"y":80,"fill":"#ede9fe","stroke":"#6d28d9" }
],
"edges": [
{ "id":"e1","source":"u","target":"c","animated":true,"className":"lf-flow-edge" },
{ "id":"e2","source":"c","target":"p","animated":true,"className":"lf-flow-edge" },
{ "id":"e3","source":"p","target":"d","animated":true,"className":"lf-flow-edge" },
{ "id":"e4","source":"d","target":"a","label":"pass","animated":true,"className":"lf-flow-edge" },
{ "id":"e5","source":"d","target":"r","label":"fail" },
{ "id":"e6","source":"a","target":"cf","animated":true,"className":"lf-flow-edge" }
]
}