chartlet 0.23.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<div class="chartlet-wrapper chartlet-responsive chartlet-bp-640"><style>.chartlet-wrapper.chartlet-responsive{display:block;width:100%;container-type:inline-size}.chartlet-variant-mobile{display:none}@container (max-width:639px){.chartlet-bp-640 .chartlet-variant-desktop{display:none}.chartlet-bp-640 .chartlet-variant-mobile{display:block}}</style><style>.chartlet-stage{position:relative;display:inline-block;max-width:100%;vertical-align:top}.chartlet-stage>svg{display:block}.chartlet-hotspot{position:absolute;border-radius:8px;cursor:pointer}.chartlet-focus{margin:0 0 12px 0;font-size:13px}.chartlet-focus summary{cursor:pointer;min-height:24px}.chartlet-focus fieldset{border:none;padding:0;margin:4px 0 0 0}.chartlet-focus label{display:inline-flex;align-items:center;min-height:44px;margin-right:14px;cursor:pointer;white-space:nowrap}.chartlet-focus input{margin-right:4px}.chartlet-focus input:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.chartlet-wrapper:has(.chartlet-focus-node:checked) #chartlet-76c636e55e0a3941 .chartlet-f{opacity:.18}#chartlet-76c636e55e0a3941-hs-0{left:46.718%;top:43.581%;width:6.564%;height:6.419%}#chartlet-76c636e55e0a3941-hs-1{left:49.111%;top:30.687%;width:5.467%;height:2.872%}#chartlet-76c636e55e0a3941-hs-2{left:57.593%;top:43.581%;width:7.013%;height:2.872%}#chartlet-76c636e55e0a3941-hs-3{left:49.111%;top:56.475%;width:8.907%;height:2.872%}#chartlet-76c636e55e0a3941-hs-4{left:35.394%;top:43.581%;width:7.013%;height:2.872%}#chartlet-76c636e55e0a3941-hs-5{left:66.074%;top:43.581%;width:10.373%;height:2.872%}#chartlet-76c636e55e0a3941-hs-6{left:26.966%;top:43.581%;width:6.96%;height:2.872%}#chartlet-76c636e55e0a3941-hs-7{left:49.111%;top:82.264%;width:8.88%;height:2.872%}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-0:checked) #chartlet-76c636e55e0a3941 .chartlet-f-0{opacity:1}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-0:checked) #chartlet-76c636e55e0a3941 .chartlet-n-0 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-0:checked) #chartlet-76c636e55e0a3941 .chartlet-n-0 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-1:checked) #chartlet-76c636e55e0a3941 .chartlet-f-1{opacity:1}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-1:checked) #chartlet-76c636e55e0a3941 .chartlet-n-1 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-1:checked) #chartlet-76c636e55e0a3941 .chartlet-n-1 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-2:checked) #chartlet-76c636e55e0a3941 .chartlet-f-2{opacity:1}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-2:checked) #chartlet-76c636e55e0a3941 .chartlet-n-2 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-2:checked) #chartlet-76c636e55e0a3941 .chartlet-n-2 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-3:checked) #chartlet-76c636e55e0a3941 .chartlet-f-3{opacity:1}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-3:checked) #chartlet-76c636e55e0a3941 .chartlet-n-3 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-3:checked) #chartlet-76c636e55e0a3941 .chartlet-n-3 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-4:checked) #chartlet-76c636e55e0a3941 .chartlet-f-4{opacity:1}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-4:checked) #chartlet-76c636e55e0a3941 .chartlet-n-4 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-4:checked) #chartlet-76c636e55e0a3941 .chartlet-n-4 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-5:checked) #chartlet-76c636e55e0a3941 .chartlet-f-5{opacity:1}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-5:checked) #chartlet-76c636e55e0a3941 .chartlet-n-5 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-5:checked) #chartlet-76c636e55e0a3941 .chartlet-n-5 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-6:checked) #chartlet-76c636e55e0a3941 .chartlet-f-6{opacity:1}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-6:checked) #chartlet-76c636e55e0a3941 .chartlet-n-6 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-6:checked) #chartlet-76c636e55e0a3941 .chartlet-n-6 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-7:checked) #chartlet-76c636e55e0a3941 .chartlet-f-7{opacity:1}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-7:checked) #chartlet-76c636e55e0a3941 .chartlet-n-7 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-7:checked) #chartlet-76c636e55e0a3941 .chartlet-n-7 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(.chartlet-focus-node:checked) #chartlet-76c636e55e0a3941-m .chartlet-f{opacity:.18}#chartlet-76c636e55e0a3941-m-hs-0{left:44.53%;top:44.345%;width:10.941%;height:5.655%}#chartlet-76c636e55e0a3941-m-hs-1{left:48.519%;top:35.859%;width:9.111%;height:2.53%}#chartlet-76c636e55e0a3941-m-hs-2{left:56.29%;top:41.667%;width:8.541%;height:4.911%}#chartlet-76c636e55e0a3941-m-hs-3{left:48.519%;top:52.831%;width:14.844%;height:2.53%}#chartlet-76c636e55e0a3941-m-hs-4{left:35.169%;top:44.792%;width:8.541%;height:4.762%}#chartlet-76c636e55e0a3941-m-hs-5{left:69.64%;top:44.345%;width:17.289%;height:2.53%}#chartlet-76c636e55e0a3941-m-hs-6{left:18.76%;top:44.345%;width:11.6%;height:2.53%}#chartlet-76c636e55e0a3941-m-hs-7{left:48.519%;top:69.804%;width:14.8%;height:2.53%}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-0:checked) #chartlet-76c636e55e0a3941-m .chartlet-f-0{opacity:1}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-0:checked) #chartlet-76c636e55e0a3941-m .chartlet-n-0 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-0:checked) #chartlet-76c636e55e0a3941-m .chartlet-n-0 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-1:checked) #chartlet-76c636e55e0a3941-m .chartlet-f-1{opacity:1}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-1:checked) #chartlet-76c636e55e0a3941-m .chartlet-n-1 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-1:checked) #chartlet-76c636e55e0a3941-m .chartlet-n-1 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-2:checked) #chartlet-76c636e55e0a3941-m .chartlet-f-2{opacity:1}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-2:checked) #chartlet-76c636e55e0a3941-m .chartlet-n-2 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-2:checked) #chartlet-76c636e55e0a3941-m .chartlet-n-2 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-3:checked) #chartlet-76c636e55e0a3941-m .chartlet-f-3{opacity:1}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-3:checked) #chartlet-76c636e55e0a3941-m .chartlet-n-3 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-3:checked) #chartlet-76c636e55e0a3941-m .chartlet-n-3 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-4:checked) #chartlet-76c636e55e0a3941-m .chartlet-f-4{opacity:1}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-4:checked) #chartlet-76c636e55e0a3941-m .chartlet-n-4 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-4:checked) #chartlet-76c636e55e0a3941-m .chartlet-n-4 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-5:checked) #chartlet-76c636e55e0a3941-m .chartlet-f-5{opacity:1}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-5:checked) #chartlet-76c636e55e0a3941-m .chartlet-n-5 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-5:checked) #chartlet-76c636e55e0a3941-m .chartlet-n-5 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-6:checked) #chartlet-76c636e55e0a3941-m .chartlet-f-6{opacity:1}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-6:checked) #chartlet-76c636e55e0a3941-m .chartlet-n-6 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-6:checked) #chartlet-76c636e55e0a3941-m .chartlet-n-6 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-7:checked) #chartlet-76c636e55e0a3941-m .chartlet-f-7{opacity:1}.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-7:checked) #chartlet-76c636e55e0a3941-m .chartlet-n-7 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-76c636e55e0a3941-focus-7:checked) #chartlet-76c636e55e0a3941-m .chartlet-n-7 .chartlet-seq-box{stroke-width:3}</style><details class="chartlet-focus"><summary>Focus</summary><fieldset><label><input type="radio" name="chartlet-76c636e55e0a3941-focus" checked> Show all</label><label><input type="radio" name="chartlet-76c636e55e0a3941-focus" class="chartlet-focus-node" id="chartlet-76c636e55e0a3941-focus-0"> Checkout</label><label><input type="radio" name="chartlet-76c636e55e0a3941-focus" class="chartlet-focus-node" id="chartlet-76c636e55e0a3941-focus-1"> Cart</label><label><input type="radio" name="chartlet-76c636e55e0a3941-focus" class="chartlet-focus-node" id="chartlet-76c636e55e0a3941-focus-2"> Pricing</label><label><input type="radio" name="chartlet-76c636e55e0a3941-focus" class="chartlet-focus-node" id="chartlet-76c636e55e0a3941-focus-3"> Payments</label><label><input type="radio" name="chartlet-76c636e55e0a3941-focus" class="chartlet-focus-node" id="chartlet-76c636e55e0a3941-focus-4"> Sign-in</label><label><input type="radio" name="chartlet-76c636e55e0a3941-focus" class="chartlet-focus-node" id="chartlet-76c636e55e0a3941-focus-5"> Fraud check</label><label><input type="radio" name="chartlet-76c636e55e0a3941-focus" class="chartlet-focus-node" id="chartlet-76c636e55e0a3941-focus-6"> Ledger</label><label><input type="radio" name="chartlet-76c636e55e0a3941-focus" class="chartlet-focus-node" id="chartlet-76c636e55e0a3941-focus-7"> Event bus</label></fieldset></details><figure class="chartlet-figure" data-viz="chart"><figcaption>Checkout dependencies: the payment chain</figcaption><div class="chartlet-variant-desktop"><div class="chartlet-stage"><svg xmlns="http://www.w3.org/2000/svg" width="900" height="592" viewBox="0 0 900 592" id="chartlet-76c636e55e0a3941" role="img" aria-labelledby="chartlet-76c636e55e0a3941-title chartlet-76c636e55e0a3941-description" class="chartlet-root"><title id="chartlet-76c636e55e0a3941-title">Checkout dependencies: the payment chain</title><desc id="chartlet-76c636e55e0a3941-description">Network with 8 nodes and 8 connections in 3 groups: Shop, Finance and Platform. In rings around Checkout: 1 step away: Cart, Pricing, Payments and Sign-in; 2 steps away: Fraud check and Ledger; 3 steps away: Event bus. Most connected: Checkout (4 connections). Nothing leads into Checkout. Bottleneck: Payments; without it the diagram falls apart. Checkout (group Shop): leads to Cart, Pricing, Payments and Sign-in. Cart (group Shop): no outgoing connection. Pricing (group Shop): no outgoing connection. Payments (group Finance): leads to Fraud check and Ledger. Sign-in (group Platform): no outgoing connection. Fraud check (group Finance): leads to Event bus. Ledger (group Finance): leads to Event bus. Event bus (group Platform): no outgoing connection. Emphasized: Payments. Emphasized path: Checkout → Payments → Ledger → Event bus. Legend: emphasized, solid line, dashed line, emphasized path.</desc><style>.chartlet-root{--chartlet-text:#172033;--chartlet-muted:#344054;--chartlet-grid:#d9dee8;--chartlet-zero:#667085;--chartlet-accent:#2563eb;--chartlet-background:#fff;--chartlet-color-1:#2563eb;--chartlet-color-2:#c2410c;--chartlet-color-3:#475569;--chartlet-color-4:#111827;max-width:100%;height:auto;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--chartlet-text)}#chartlet-76c636e55e0a3941 .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-76c636e55e0a3941 .chartlet-label,#chartlet-76c636e55e0a3941 .chartlet-tick,#chartlet-76c636e55e0a3941 .chartlet-value,#chartlet-76c636e55e0a3941 .chartlet-value-inverse,#chartlet-76c636e55e0a3941 .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-76c636e55e0a3941 .chartlet-value,#chartlet-76c636e55e0a3941 .chartlet-value-inverse{font-weight:600}#chartlet-76c636e55e0a3941 .chartlet-value{fill:var(--chartlet-text)}#chartlet-76c636e55e0a3941 .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-76c636e55e0a3941 .chartlet-axis-title{font-weight:600}#chartlet-76c636e55e0a3941 .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-76c636e55e0a3941 .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-76c636e55e0a3941 .chartlet-bar,#chartlet-76c636e55e0a3941 .chartlet-point{fill:var(--chartlet-accent)}#chartlet-76c636e55e0a3941 .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-76c636e55e0a3941 .chartlet-background{fill:var(--chartlet-background)}.chartlet-root{--chartlet-node:#eef3fd;--chartlet-lane:#f7f9fc;--chartlet-lane-head:#eef1f6;--chartlet-shadow:rgba(16,24,40,.09);--chartlet-role-blue:#2563eb;--chartlet-role-blue-fill:#eef3fd;--chartlet-role-green:#15803d;--chartlet-role-green-fill:#ecfdf3;--chartlet-role-amber:#b45309;--chartlet-role-amber-fill:#fff7e8;--chartlet-role-teal:#0f766e;--chartlet-role-teal-fill:#e9faf7;--chartlet-role-violet:#6d28d9;--chartlet-role-violet-fill:#f3efff;--chartlet-role-gray:#667085;--chartlet-role-gray-fill:#f7f8fa;--chartlet-role-red:#b42318;--chartlet-role-red-fill:#fef3f2}.chartlet-root.chartlet-theme-dark{--chartlet-node:#1a2436;--chartlet-lane:#121925;--chartlet-lane-head:#18212f;--chartlet-shadow:rgba(0,0,0,.45);--chartlet-role-blue:#7ea6ff;--chartlet-role-blue-fill:#1a2436;--chartlet-role-green:#4ade80;--chartlet-role-green-fill:#132a1d;--chartlet-role-amber:#fbbf24;--chartlet-role-amber-fill:#2b2210;--chartlet-role-teal:#2dd4bf;--chartlet-role-teal-fill:#0f2a27;--chartlet-role-violet:#b69cff;--chartlet-role-violet-fill:#231c38;--chartlet-role-gray:#9aa7bd;--chartlet-role-gray-fill:#161d29;--chartlet-role-red:#f97066;--chartlet-role-red-fill:#2d1616}#chartlet-76c636e55e0a3941 .chartlet-role-blue{fill:var(--chartlet-role-blue-fill);stroke:var(--chartlet-role-blue)}#chartlet-76c636e55e0a3941 .chartlet-role-green{fill:var(--chartlet-role-green-fill);stroke:var(--chartlet-role-green)}#chartlet-76c636e55e0a3941 .chartlet-role-amber{fill:var(--chartlet-role-amber-fill);stroke:var(--chartlet-role-amber)}#chartlet-76c636e55e0a3941 .chartlet-role-teal{fill:var(--chartlet-role-teal-fill);stroke:var(--chartlet-role-teal)}#chartlet-76c636e55e0a3941 .chartlet-role-violet{fill:var(--chartlet-role-violet-fill);stroke:var(--chartlet-role-violet)}#chartlet-76c636e55e0a3941 .chartlet-role-gray{fill:var(--chartlet-role-gray-fill);stroke:var(--chartlet-role-gray)}#chartlet-76c636e55e0a3941 .chartlet-role-red{fill:var(--chartlet-role-red-fill);stroke:var(--chartlet-role-red)}#chartlet-76c636e55e0a3941 .chartlet-diagram-rim{fill:none;stroke:var(--chartlet-role-teal);stroke-width:1.5}#chartlet-76c636e55e0a3941 .chartlet-diagram-shadow{fill:var(--chartlet-shadow);stroke:none;rx:7px}#chartlet-76c636e55e0a3941 .chartlet-diagram-chip{fill:var(--chartlet-background);stroke:var(--chartlet-grid);stroke-width:1;rx:4px}#chartlet-76c636e55e0a3941 .chartlet-diagram-chip-text{font-size:12px;fill:var(--chartlet-text)}#chartlet-76c636e55e0a3941 .chartlet-diagram-badge{fill:var(--chartlet-accent);stroke:var(--chartlet-background);stroke-width:2}#chartlet-76c636e55e0a3941 .chartlet-diagram-badge-text{font-size:10px;font-weight:700;fill:var(--chartlet-background)}#chartlet-76c636e55e0a3941 .chartlet-flow-node{stroke-width:1.5;stroke-linejoin:round;rx:7px}#chartlet-76c636e55e0a3941 .chartlet-flow-start{stroke-width:2}#chartlet-76c636e55e0a3941 .chartlet-flow-end{stroke-width:3}#chartlet-76c636e55e0a3941 .chartlet-flow-external{stroke-dasharray:5 3}#chartlet-76c636e55e0a3941 .chartlet-flow-inner{stroke:var(--chartlet-role-blue);stroke-width:1}#chartlet-76c636e55e0a3941 .chartlet-flow-label{font-size:13px;font-weight:600;fill:var(--chartlet-text)}#chartlet-76c636e55e0a3941 .chartlet-flow-sublabel{font-size:11px;fill:var(--chartlet-muted)}#chartlet-76c636e55e0a3941 .chartlet-flow-edge{fill:none;stroke:var(--chartlet-zero);stroke-width:1.4;stroke-linejoin:round}#chartlet-76c636e55e0a3941 .chartlet-flow-dashed{stroke-dasharray:5 4}#chartlet-76c636e55e0a3941 .chartlet-flow-dotted{stroke-dasharray:1 4;stroke-linecap:round}#chartlet-76c636e55e0a3941 .chartlet-flow-main{stroke:var(--chartlet-accent);stroke-width:2.2}#chartlet-76c636e55e0a3941 .chartlet-flow-head{fill:var(--chartlet-zero);stroke:var(--chartlet-zero);stroke-width:1;stroke-linejoin:round}#chartlet-76c636e55e0a3941 .chartlet-flow-main-head{fill:var(--chartlet-accent);stroke:var(--chartlet-accent)}#chartlet-76c636e55e0a3941 .chartlet-flow-lane{fill:var(--chartlet-lane);stroke:var(--chartlet-grid);stroke-width:1}#chartlet-76c636e55e0a3941 .chartlet-flow-lane-alt{fill:var(--chartlet-background)}#chartlet-76c636e55e0a3941 .chartlet-flow-lane-head{fill:var(--chartlet-lane-head);stroke:none}#chartlet-76c636e55e0a3941 .chartlet-flow-lane-label{font-size:11px;font-weight:650;fill:var(--chartlet-muted);letter-spacing:.04em}#chartlet-76c636e55e0a3941 .chartlet-flow-group{fill:var(--chartlet-accent);fill-opacity:.04;stroke:var(--chartlet-zero);stroke-width:1;stroke-dasharray:4 3;rx:10px}#chartlet-76c636e55e0a3941 .chartlet-flow-group-label{font-size:11px;font-weight:600;fill:var(--chartlet-muted)}.chartlet-root{--chartlet-net-5:#0f766e;--chartlet-net-6:#6d28d9;--chartlet-net-7:#b45309;--chartlet-net-8:#be185d}.chartlet-root.chartlet-theme-dark{--chartlet-net-5:#2dd4bf;--chartlet-net-6:#b69cff;--chartlet-net-7:#fbbf24;--chartlet-net-8:#f472b6}#chartlet-76c636e55e0a3941 .chartlet-net-node{fill:var(--chartlet-role-blue);stroke:var(--chartlet-background);stroke-width:2}#chartlet-76c636e55e0a3941 .chartlet-net-g1{fill:var(--chartlet-color-1)}#chartlet-76c636e55e0a3941 .chartlet-net-g2{fill:var(--chartlet-color-2)}#chartlet-76c636e55e0a3941 .chartlet-net-g3{fill:var(--chartlet-color-3)}#chartlet-76c636e55e0a3941 .chartlet-net-g4{fill:var(--chartlet-color-4)}#chartlet-76c636e55e0a3941 .chartlet-net-g5{fill:var(--chartlet-net-5)}#chartlet-76c636e55e0a3941 .chartlet-net-g6{fill:var(--chartlet-net-6)}#chartlet-76c636e55e0a3941 .chartlet-net-g7{fill:var(--chartlet-net-7)}#chartlet-76c636e55e0a3941 .chartlet-net-g8{fill:var(--chartlet-net-8)}#chartlet-76c636e55e0a3941 .chartlet-net-center{stroke:var(--chartlet-text)}#chartlet-76c636e55e0a3941 .chartlet-net-label{font-size:12px;font-weight:600;fill:var(--chartlet-text)}#chartlet-76c636e55e0a3941 .chartlet-net-ring{fill:none;stroke:var(--chartlet-grid);stroke-width:1;stroke-dasharray:3 4}#chartlet-76c636e55e0a3941 .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-76c636e55e0a3941 .chartlet-emph .chartlet-flow-node,#chartlet-76c636e55e0a3941 .chartlet-emph .chartlet-seq-box{stroke:var(--chartlet-accent);stroke-width:3.5;fill:var(--chartlet-accent);fill-opacity:.14}#chartlet-76c636e55e0a3941 .chartlet-emph .chartlet-diagram-shadow{fill:none}#chartlet-76c636e55e0a3941 .chartlet-emph .chartlet-seq-actor,#chartlet-76c636e55e0a3941 .chartlet-emph .chartlet-seq-actor-head{stroke:var(--chartlet-accent);stroke-width:2.6}#chartlet-76c636e55e0a3941 .chartlet-emph-ring{fill:none;stroke:var(--chartlet-accent);stroke-width:3}#chartlet-76c636e55e0a3941 .chartlet-emph-edge .chartlet-flow-edge,#chartlet-76c636e55e0a3941 .chartlet-emph-edge .chartlet-seq-message{stroke:var(--chartlet-accent);stroke-width:3.2}#chartlet-76c636e55e0a3941 .chartlet-emph-edge .chartlet-flow-head,#chartlet-76c636e55e0a3941 .chartlet-emph-edge .chartlet-seq-head{fill:var(--chartlet-accent);stroke:var(--chartlet-accent)}#chartlet-76c636e55e0a3941 .chartlet-emph-edge .chartlet-flow-hollow{fill:var(--chartlet-background)}#chartlet-76c636e55e0a3941 .chartlet-emph-edge .chartlet-flow-solid{fill:var(--chartlet-accent)}#chartlet-76c636e55e0a3941 .chartlet-emph-edge .chartlet-flow-open,#chartlet-76c636e55e0a3941 .chartlet-emph-edge .chartlet-seq-head-open{stroke:var(--chartlet-accent);stroke-width:2.4}#chartlet-76c636e55e0a3941 .chartlet-emph-edge .chartlet-diagram-chip-text{font-weight:700}#chartlet-76c636e55e0a3941 .chartlet-emph-quiet .chartlet-flow-main{stroke:var(--chartlet-zero);stroke-width:1.4}#chartlet-76c636e55e0a3941 .chartlet-emph-quiet .chartlet-flow-main-head{fill:var(--chartlet-zero);stroke:var(--chartlet-zero)}#chartlet-76c636e55e0a3941 .chartlet-legend-line{fill:none;stroke:var(--chartlet-zero);stroke-width:1.4;stroke-linejoin:round}#chartlet-76c636e55e0a3941 .chartlet-legend-dashed{stroke-dasharray:5 4}#chartlet-76c636e55e0a3941 .chartlet-legend-dotted{stroke-dasharray:1 4;stroke-linecap:round}#chartlet-76c636e55e0a3941 .chartlet-legend-main{stroke:var(--chartlet-accent);stroke-width:2.2}#chartlet-76c636e55e0a3941 .chartlet-legend-path{stroke:var(--chartlet-accent);stroke-width:3.2}#chartlet-76c636e55e0a3941 .chartlet-legend-head{fill:var(--chartlet-zero);stroke:var(--chartlet-zero);stroke-width:1;stroke-linejoin:round}#chartlet-76c636e55e0a3941 .chartlet-legend-open{fill:none;stroke:var(--chartlet-zero);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}#chartlet-76c636e55e0a3941 .chartlet-legend-emph{fill:var(--chartlet-accent);fill-opacity:.14;stroke:var(--chartlet-accent);stroke-width:3.5;rx:4px}#chartlet-76c636e55e0a3941 .chartlet-legend-text{font-size:12px;fill:var(--chartlet-muted)}</style><circle cx="450" cy="267" r="76.333" class="chartlet-net-ring"/><circle cx="450" cy="267" r="152.667" class="chartlet-net-ring"/><circle cx="450" cy="267" r="229" class="chartlet-net-ring"/><g class="chartlet-f chartlet-f-0 chartlet-f-1 chartlet-emph-quiet"><polyline points="450,257 450,205.667" class="chartlet-flow-edge"><title>Checkout → Cart</title></polyline><polyline points="453.5,205.667 450,197.667 446.5,205.667 453.5,205.667" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-0 chartlet-f-2 chartlet-emph-quiet"><polyline points="460,267 511.333,267" class="chartlet-flow-edge"><title>Checkout → Pricing</title></polyline><polyline points="511.333,270.5 519.333,267 511.333,263.5 511.333,270.5" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-0 chartlet-f-3 chartlet-emph-edge"><polyline points="450,277 450,328.333" class="chartlet-flow-edge"><title>Checkout → Payments</title></polyline><polyline points="446.5,328.333 450,336.333 453.5,328.333 446.5,328.333" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-0 chartlet-f-4 chartlet-emph-quiet"><polyline points="440,267 388.667,267" class="chartlet-flow-edge"><title>Checkout → Sign-in</title></polyline><polyline points="388.667,263.5 380.667,267 388.667,270.5 388.667,263.5" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-3 chartlet-f-5 chartlet-emph-quiet"><polyline points="456.261,340.203 589.25,273.708" class="chartlet-flow-edge"><title>Payments → Fraud check</title></polyline><polyline points="590.816,276.839 596.406,270.13 587.685,270.578 590.816,276.839" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-3 chartlet-f-6 chartlet-emph-edge"><polyline points="443.739,340.203 310.75,273.708" class="chartlet-flow-edge"><title>Payments → Ledger</title></polyline><polyline points="312.315,270.578 303.594,270.13 309.184,276.839 312.315,270.578" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-6 chartlet-f-7 chartlet-emph-edge"><polyline points="301.216,272.824 441.679,483.519" class="chartlet-flow-edge"><title>Ledger → Event bus</title></polyline><polyline points="438.767,485.461 446.117,490.176 444.592,481.578 438.767,485.461" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-5 chartlet-f-7 chartlet-emph-quiet"><polyline points="598.784,272.824 458.321,483.519" class="chartlet-flow-edge chartlet-flow-dashed"><title>Fraud check → Event bus</title></polyline><polyline points="455.408,481.578 453.883,490.176 461.233,485.461 455.408,481.578" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1 chartlet-f-2 chartlet-f-3 chartlet-f-4"><circle cx="450" cy="267" r="9" class="chartlet-net-node chartlet-net-center chartlet-net-g1"><title>Checkout (Shop)</title></circle><text x="450" y="292" text-anchor="middle" class="chartlet-net-label">Checkout</text></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1"><circle cx="450" cy="190.667" r="6" class="chartlet-net-node chartlet-net-g1"><title>Cart (Shop)</title></circle><text x="461" y="194.667" text-anchor="start" class="chartlet-net-label">Cart</text></g><g class="chartlet-f chartlet-n-2 chartlet-f-0 chartlet-f-2"><circle cx="526.333" cy="267" r="6" class="chartlet-net-node chartlet-net-g1"><title>Pricing (Shop)</title></circle><text x="537.333" y="271" text-anchor="start" class="chartlet-net-label">Pricing</text></g><g class="chartlet-f chartlet-n-3 chartlet-f-0 chartlet-f-3 chartlet-f-5 chartlet-f-6 chartlet-emph"><circle cx="450" cy="343.333" r="6" class="chartlet-net-node chartlet-net-g2"><title>Payments (Finance)</title></circle><circle cx="450" cy="343.333" r="12.5" class="chartlet-emph-ring"/><text x="461" y="347.333" text-anchor="start" class="chartlet-net-label">Payments</text></g><g class="chartlet-f chartlet-n-4 chartlet-f-0 chartlet-f-4"><circle cx="373.667" cy="267" r="6" class="chartlet-net-node chartlet-net-g3"><title>Sign-in (Platform)</title></circle><text x="362.667" y="271" text-anchor="end" class="chartlet-net-label">Sign-in</text></g><g class="chartlet-f chartlet-n-5 chartlet-f-3 chartlet-f-5 chartlet-f-7"><circle cx="602.667" cy="267" r="6" class="chartlet-net-node chartlet-net-g2"><title>Fraud check (Finance)</title></circle><text x="613.667" y="271" text-anchor="start" class="chartlet-net-label">Fraud check</text></g><g class="chartlet-f chartlet-n-6 chartlet-f-3 chartlet-f-6 chartlet-f-7"><circle cx="297.333" cy="267" r="6" class="chartlet-net-node chartlet-net-g2"><title>Ledger (Finance)</title></circle><text x="286.333" y="271" text-anchor="end" class="chartlet-net-label">Ledger</text></g><g class="chartlet-f chartlet-n-7 chartlet-f-5 chartlet-f-6 chartlet-f-7"><circle cx="450" cy="496" r="6" class="chartlet-net-node chartlet-net-g3"><title>Event bus (Platform)</title></circle><text x="461" y="500" text-anchor="start" class="chartlet-net-label">Event bus</text></g><circle cx="30" cy="524" r="6" class="chartlet-net-node chartlet-net-g1"/><text x="42" y="528" text-anchor="start" class="chartlet-legend">Shop</text><circle cx="96.2" cy="524" r="6" class="chartlet-net-node chartlet-net-g2"/><text x="108.2" y="528" text-anchor="start" class="chartlet-legend">Finance</text><circle cx="179.44" cy="524" r="6" class="chartlet-net-node chartlet-net-g3"/><text x="191.44" y="528" text-anchor="start" class="chartlet-legend">Platform</text><g class="chartlet-legend-strip"><circle cx="37" cy="572" r="8" class="chartlet-emph-ring"/><text x="58" y="576" text-anchor="start" class="chartlet-legend-text">Emphasized</text><line x1="149.48" y1="572" x2="175.48" y2="572" class="chartlet-legend-line"/><text x="183.48" y="576" text-anchor="start" class="chartlet-legend-text">Solid line</text><line x1="258.64" y1="572" x2="284.64" y2="572" class="chartlet-legend-line chartlet-legend-dashed"/><text x="292.64" y="576" text-anchor="start" class="chartlet-legend-text">Dashed line</text><line x1="380.76" y1="572" x2="406.76" y2="572" class="chartlet-legend-line chartlet-legend-path"/><text x="414.76" y="576" text-anchor="start" class="chartlet-legend-text">Emphasized path</text></g></svg><label class="chartlet-hotspot" id="chartlet-76c636e55e0a3941-hs-0" for="chartlet-76c636e55e0a3941-focus-0"></label><label class="chartlet-hotspot" id="chartlet-76c636e55e0a3941-hs-1" for="chartlet-76c636e55e0a3941-focus-1"></label><label class="chartlet-hotspot" id="chartlet-76c636e55e0a3941-hs-2" for="chartlet-76c636e55e0a3941-focus-2"></label><label class="chartlet-hotspot" id="chartlet-76c636e55e0a3941-hs-3" for="chartlet-76c636e55e0a3941-focus-3"></label><label class="chartlet-hotspot" id="chartlet-76c636e55e0a3941-hs-4" for="chartlet-76c636e55e0a3941-focus-4"></label><label class="chartlet-hotspot" id="chartlet-76c636e55e0a3941-hs-5" for="chartlet-76c636e55e0a3941-focus-5"></label><label class="chartlet-hotspot" id="chartlet-76c636e55e0a3941-hs-6" for="chartlet-76c636e55e0a3941-focus-6"></label><label class="chartlet-hotspot" id="chartlet-76c636e55e0a3941-hs-7" for="chartlet-76c636e55e0a3941-focus-7"></label></div></div><div class="chartlet-variant-mobile"><div class="chartlet-stage"><svg xmlns="http://www.w3.org/2000/svg" width="540" height="672" viewBox="0 0 540 672" id="chartlet-76c636e55e0a3941-m" role="img" aria-labelledby="chartlet-76c636e55e0a3941-m-title chartlet-76c636e55e0a3941-m-description" class="chartlet-root"><title id="chartlet-76c636e55e0a3941-m-title">Checkout dependencies: the payment chain</title><desc id="chartlet-76c636e55e0a3941-m-description">Network with 8 nodes and 8 connections in 3 groups: Shop, Finance and Platform. In rings around Checkout: 1 step away: Cart, Pricing, Payments and Sign-in; 2 steps away: Fraud check and Ledger; 3 steps away: Event bus. Most connected: Checkout (4 connections). Nothing leads into Checkout. Bottleneck: Payments; without it the diagram falls apart. Checkout (group Shop): leads to Cart, Pricing, Payments and Sign-in. Cart (group Shop): no outgoing connection. Pricing (group Shop): no outgoing connection. Payments (group Finance): leads to Fraud check and Ledger. Sign-in (group Platform): no outgoing connection. Fraud check (group Finance): leads to Event bus. Ledger (group Finance): leads to Event bus. Event bus (group Platform): no outgoing connection. Emphasized: Payments. Emphasized path: Checkout → Payments → Ledger → Event bus. Legend: emphasized, solid line, dashed line, emphasized path.</desc><style>.chartlet-root{--chartlet-text:#172033;--chartlet-muted:#344054;--chartlet-grid:#d9dee8;--chartlet-zero:#667085;--chartlet-accent:#2563eb;--chartlet-background:#fff;--chartlet-color-1:#2563eb;--chartlet-color-2:#c2410c;--chartlet-color-3:#475569;--chartlet-color-4:#111827;max-width:100%;height:auto;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--chartlet-text)}#chartlet-76c636e55e0a3941-m .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-76c636e55e0a3941-m .chartlet-label,#chartlet-76c636e55e0a3941-m .chartlet-tick,#chartlet-76c636e55e0a3941-m .chartlet-value,#chartlet-76c636e55e0a3941-m .chartlet-value-inverse,#chartlet-76c636e55e0a3941-m .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-76c636e55e0a3941-m .chartlet-value,#chartlet-76c636e55e0a3941-m .chartlet-value-inverse{font-weight:600}#chartlet-76c636e55e0a3941-m .chartlet-value{fill:var(--chartlet-text)}#chartlet-76c636e55e0a3941-m .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-76c636e55e0a3941-m .chartlet-axis-title{font-weight:600}#chartlet-76c636e55e0a3941-m .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-76c636e55e0a3941-m .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-76c636e55e0a3941-m .chartlet-bar,#chartlet-76c636e55e0a3941-m .chartlet-point{fill:var(--chartlet-accent)}#chartlet-76c636e55e0a3941-m .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-76c636e55e0a3941-m .chartlet-background{fill:var(--chartlet-background)}.chartlet-root{--chartlet-node:#eef3fd;--chartlet-lane:#f7f9fc;--chartlet-lane-head:#eef1f6;--chartlet-shadow:rgba(16,24,40,.09);--chartlet-role-blue:#2563eb;--chartlet-role-blue-fill:#eef3fd;--chartlet-role-green:#15803d;--chartlet-role-green-fill:#ecfdf3;--chartlet-role-amber:#b45309;--chartlet-role-amber-fill:#fff7e8;--chartlet-role-teal:#0f766e;--chartlet-role-teal-fill:#e9faf7;--chartlet-role-violet:#6d28d9;--chartlet-role-violet-fill:#f3efff;--chartlet-role-gray:#667085;--chartlet-role-gray-fill:#f7f8fa;--chartlet-role-red:#b42318;--chartlet-role-red-fill:#fef3f2}.chartlet-root.chartlet-theme-dark{--chartlet-node:#1a2436;--chartlet-lane:#121925;--chartlet-lane-head:#18212f;--chartlet-shadow:rgba(0,0,0,.45);--chartlet-role-blue:#7ea6ff;--chartlet-role-blue-fill:#1a2436;--chartlet-role-green:#4ade80;--chartlet-role-green-fill:#132a1d;--chartlet-role-amber:#fbbf24;--chartlet-role-amber-fill:#2b2210;--chartlet-role-teal:#2dd4bf;--chartlet-role-teal-fill:#0f2a27;--chartlet-role-violet:#b69cff;--chartlet-role-violet-fill:#231c38;--chartlet-role-gray:#9aa7bd;--chartlet-role-gray-fill:#161d29;--chartlet-role-red:#f97066;--chartlet-role-red-fill:#2d1616}#chartlet-76c636e55e0a3941-m .chartlet-role-blue{fill:var(--chartlet-role-blue-fill);stroke:var(--chartlet-role-blue)}#chartlet-76c636e55e0a3941-m .chartlet-role-green{fill:var(--chartlet-role-green-fill);stroke:var(--chartlet-role-green)}#chartlet-76c636e55e0a3941-m .chartlet-role-amber{fill:var(--chartlet-role-amber-fill);stroke:var(--chartlet-role-amber)}#chartlet-76c636e55e0a3941-m .chartlet-role-teal{fill:var(--chartlet-role-teal-fill);stroke:var(--chartlet-role-teal)}#chartlet-76c636e55e0a3941-m .chartlet-role-violet{fill:var(--chartlet-role-violet-fill);stroke:var(--chartlet-role-violet)}#chartlet-76c636e55e0a3941-m .chartlet-role-gray{fill:var(--chartlet-role-gray-fill);stroke:var(--chartlet-role-gray)}#chartlet-76c636e55e0a3941-m .chartlet-role-red{fill:var(--chartlet-role-red-fill);stroke:var(--chartlet-role-red)}#chartlet-76c636e55e0a3941-m .chartlet-diagram-rim{fill:none;stroke:var(--chartlet-role-teal);stroke-width:1.5}#chartlet-76c636e55e0a3941-m .chartlet-diagram-shadow{fill:var(--chartlet-shadow);stroke:none;rx:7px}#chartlet-76c636e55e0a3941-m .chartlet-diagram-chip{fill:var(--chartlet-background);stroke:var(--chartlet-grid);stroke-width:1;rx:4px}#chartlet-76c636e55e0a3941-m .chartlet-diagram-chip-text{font-size:12px;fill:var(--chartlet-text)}#chartlet-76c636e55e0a3941-m .chartlet-diagram-badge{fill:var(--chartlet-accent);stroke:var(--chartlet-background);stroke-width:2}#chartlet-76c636e55e0a3941-m .chartlet-diagram-badge-text{font-size:10px;font-weight:700;fill:var(--chartlet-background)}#chartlet-76c636e55e0a3941-m .chartlet-flow-node{stroke-width:1.5;stroke-linejoin:round;rx:7px}#chartlet-76c636e55e0a3941-m .chartlet-flow-start{stroke-width:2}#chartlet-76c636e55e0a3941-m .chartlet-flow-end{stroke-width:3}#chartlet-76c636e55e0a3941-m .chartlet-flow-external{stroke-dasharray:5 3}#chartlet-76c636e55e0a3941-m .chartlet-flow-inner{stroke:var(--chartlet-role-blue);stroke-width:1}#chartlet-76c636e55e0a3941-m .chartlet-flow-label{font-size:13px;font-weight:600;fill:var(--chartlet-text)}#chartlet-76c636e55e0a3941-m .chartlet-flow-sublabel{font-size:11px;fill:var(--chartlet-muted)}#chartlet-76c636e55e0a3941-m .chartlet-flow-edge{fill:none;stroke:var(--chartlet-zero);stroke-width:1.4;stroke-linejoin:round}#chartlet-76c636e55e0a3941-m .chartlet-flow-dashed{stroke-dasharray:5 4}#chartlet-76c636e55e0a3941-m .chartlet-flow-dotted{stroke-dasharray:1 4;stroke-linecap:round}#chartlet-76c636e55e0a3941-m .chartlet-flow-main{stroke:var(--chartlet-accent);stroke-width:2.2}#chartlet-76c636e55e0a3941-m .chartlet-flow-head{fill:var(--chartlet-zero);stroke:var(--chartlet-zero);stroke-width:1;stroke-linejoin:round}#chartlet-76c636e55e0a3941-m .chartlet-flow-main-head{fill:var(--chartlet-accent);stroke:var(--chartlet-accent)}#chartlet-76c636e55e0a3941-m .chartlet-flow-lane{fill:var(--chartlet-lane);stroke:var(--chartlet-grid);stroke-width:1}#chartlet-76c636e55e0a3941-m .chartlet-flow-lane-alt{fill:var(--chartlet-background)}#chartlet-76c636e55e0a3941-m .chartlet-flow-lane-head{fill:var(--chartlet-lane-head);stroke:none}#chartlet-76c636e55e0a3941-m .chartlet-flow-lane-label{font-size:11px;font-weight:650;fill:var(--chartlet-muted);letter-spacing:.04em}#chartlet-76c636e55e0a3941-m .chartlet-flow-group{fill:var(--chartlet-accent);fill-opacity:.04;stroke:var(--chartlet-zero);stroke-width:1;stroke-dasharray:4 3;rx:10px}#chartlet-76c636e55e0a3941-m .chartlet-flow-group-label{font-size:11px;font-weight:600;fill:var(--chartlet-muted)}.chartlet-root{--chartlet-net-5:#0f766e;--chartlet-net-6:#6d28d9;--chartlet-net-7:#b45309;--chartlet-net-8:#be185d}.chartlet-root.chartlet-theme-dark{--chartlet-net-5:#2dd4bf;--chartlet-net-6:#b69cff;--chartlet-net-7:#fbbf24;--chartlet-net-8:#f472b6}#chartlet-76c636e55e0a3941-m .chartlet-net-node{fill:var(--chartlet-role-blue);stroke:var(--chartlet-background);stroke-width:2}#chartlet-76c636e55e0a3941-m .chartlet-net-g1{fill:var(--chartlet-color-1)}#chartlet-76c636e55e0a3941-m .chartlet-net-g2{fill:var(--chartlet-color-2)}#chartlet-76c636e55e0a3941-m .chartlet-net-g3{fill:var(--chartlet-color-3)}#chartlet-76c636e55e0a3941-m .chartlet-net-g4{fill:var(--chartlet-color-4)}#chartlet-76c636e55e0a3941-m .chartlet-net-g5{fill:var(--chartlet-net-5)}#chartlet-76c636e55e0a3941-m .chartlet-net-g6{fill:var(--chartlet-net-6)}#chartlet-76c636e55e0a3941-m .chartlet-net-g7{fill:var(--chartlet-net-7)}#chartlet-76c636e55e0a3941-m .chartlet-net-g8{fill:var(--chartlet-net-8)}#chartlet-76c636e55e0a3941-m .chartlet-net-center{stroke:var(--chartlet-text)}#chartlet-76c636e55e0a3941-m .chartlet-net-label{font-size:12px;font-weight:600;fill:var(--chartlet-text)}#chartlet-76c636e55e0a3941-m .chartlet-net-ring{fill:none;stroke:var(--chartlet-grid);stroke-width:1;stroke-dasharray:3 4}#chartlet-76c636e55e0a3941-m .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-76c636e55e0a3941-m .chartlet-emph .chartlet-flow-node,#chartlet-76c636e55e0a3941-m .chartlet-emph .chartlet-seq-box{stroke:var(--chartlet-accent);stroke-width:3.5;fill:var(--chartlet-accent);fill-opacity:.14}#chartlet-76c636e55e0a3941-m .chartlet-emph .chartlet-diagram-shadow{fill:none}#chartlet-76c636e55e0a3941-m .chartlet-emph .chartlet-seq-actor,#chartlet-76c636e55e0a3941-m .chartlet-emph .chartlet-seq-actor-head{stroke:var(--chartlet-accent);stroke-width:2.6}#chartlet-76c636e55e0a3941-m .chartlet-emph-ring{fill:none;stroke:var(--chartlet-accent);stroke-width:3}#chartlet-76c636e55e0a3941-m .chartlet-emph-edge .chartlet-flow-edge,#chartlet-76c636e55e0a3941-m .chartlet-emph-edge .chartlet-seq-message{stroke:var(--chartlet-accent);stroke-width:3.2}#chartlet-76c636e55e0a3941-m .chartlet-emph-edge .chartlet-flow-head,#chartlet-76c636e55e0a3941-m .chartlet-emph-edge .chartlet-seq-head{fill:var(--chartlet-accent);stroke:var(--chartlet-accent)}#chartlet-76c636e55e0a3941-m .chartlet-emph-edge .chartlet-flow-hollow{fill:var(--chartlet-background)}#chartlet-76c636e55e0a3941-m .chartlet-emph-edge .chartlet-flow-solid{fill:var(--chartlet-accent)}#chartlet-76c636e55e0a3941-m .chartlet-emph-edge .chartlet-flow-open,#chartlet-76c636e55e0a3941-m .chartlet-emph-edge .chartlet-seq-head-open{stroke:var(--chartlet-accent);stroke-width:2.4}#chartlet-76c636e55e0a3941-m .chartlet-emph-edge .chartlet-diagram-chip-text{font-weight:700}#chartlet-76c636e55e0a3941-m .chartlet-emph-quiet .chartlet-flow-main{stroke:var(--chartlet-zero);stroke-width:1.4}#chartlet-76c636e55e0a3941-m .chartlet-emph-quiet .chartlet-flow-main-head{fill:var(--chartlet-zero);stroke:var(--chartlet-zero)}#chartlet-76c636e55e0a3941-m .chartlet-legend-line{fill:none;stroke:var(--chartlet-zero);stroke-width:1.4;stroke-linejoin:round}#chartlet-76c636e55e0a3941-m .chartlet-legend-dashed{stroke-dasharray:5 4}#chartlet-76c636e55e0a3941-m .chartlet-legend-dotted{stroke-dasharray:1 4;stroke-linecap:round}#chartlet-76c636e55e0a3941-m .chartlet-legend-main{stroke:var(--chartlet-accent);stroke-width:2.2}#chartlet-76c636e55e0a3941-m .chartlet-legend-path{stroke:var(--chartlet-accent);stroke-width:3.2}#chartlet-76c636e55e0a3941-m .chartlet-legend-head{fill:var(--chartlet-zero);stroke:var(--chartlet-zero);stroke-width:1;stroke-linejoin:round}#chartlet-76c636e55e0a3941-m .chartlet-legend-open{fill:none;stroke:var(--chartlet-zero);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}#chartlet-76c636e55e0a3941-m .chartlet-legend-emph{fill:var(--chartlet-accent);fill-opacity:.14;stroke:var(--chartlet-accent);stroke-width:3.5;rx:4px}#chartlet-76c636e55e0a3941-m .chartlet-legend-text{font-size:12px;fill:var(--chartlet-muted)}</style><circle cx="270" cy="307" r="57.027" class="chartlet-net-ring"/><circle cx="270" cy="307" r="114.053" class="chartlet-net-ring"/><circle cx="270" cy="307" r="171.08" class="chartlet-net-ring"/><g class="chartlet-f chartlet-f-0 chartlet-f-1 chartlet-emph-quiet"><polyline points="270,297 270,264.973" class="chartlet-flow-edge"><title>Checkout → Cart</title></polyline><polyline points="273.5,264.973 270,256.973 266.5,264.973 273.5,264.973" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-0 chartlet-f-2 chartlet-emph-quiet"><polyline points="280,307 312.027,307" class="chartlet-flow-edge"><title>Checkout → Pricing</title></polyline><polyline points="312.027,310.5 320.027,307 312.027,303.5 312.027,310.5" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-0 chartlet-f-3 chartlet-emph-edge"><polyline points="270,317 270,349.027" class="chartlet-flow-edge"><title>Checkout → Payments</title></polyline><polyline points="266.5,349.027 270,357.027 273.5,349.027 266.5,349.027" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-0 chartlet-f-4 chartlet-emph-quiet"><polyline points="260,307 227.973,307" class="chartlet-flow-edge"><title>Checkout → Sign-in</title></polyline><polyline points="227.973,303.5 219.973,307 227.973,310.5 227.973,303.5" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-3 chartlet-f-5 chartlet-emph-quiet"><polyline points="276.261,360.896 370.637,313.708" class="chartlet-flow-edge"><title>Payments → Fraud check</title></polyline><polyline points="372.202,316.839 377.792,310.13 369.072,310.578 372.202,316.839" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-3 chartlet-f-6 chartlet-emph-edge"><polyline points="263.739,360.896 169.363,313.708" class="chartlet-flow-edge"><title>Payments → Ledger</title></polyline><polyline points="170.928,310.578 162.208,310.13 167.798,316.839 170.928,310.578" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-6 chartlet-f-7 chartlet-emph-edge"><polyline points="159.83,312.824 261.679,465.599" class="chartlet-flow-edge"><title>Ledger → Event bus</title></polyline><polyline points="258.767,467.541 266.117,472.256 264.592,463.658 258.767,467.541" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-5 chartlet-f-7 chartlet-emph-quiet"><polyline points="380.17,312.824 278.321,465.599" class="chartlet-flow-edge chartlet-flow-dashed"><title>Fraud check → Event bus</title></polyline><polyline points="275.408,463.658 273.883,472.256 281.233,467.541 275.408,463.658" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1 chartlet-f-2 chartlet-f-3 chartlet-f-4"><circle cx="270" cy="307" r="9" class="chartlet-net-node chartlet-net-center chartlet-net-g1"><title>Checkout (Shop)</title></circle><text x="270" y="332" text-anchor="middle" class="chartlet-net-label">Checkout</text></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1"><circle cx="270" cy="249.973" r="6" class="chartlet-net-node chartlet-net-g1"><title>Cart (Shop)</title></circle><text x="281" y="253.973" text-anchor="start" class="chartlet-net-label">Cart</text></g><g class="chartlet-f chartlet-n-2 chartlet-f-0 chartlet-f-2"><circle cx="327.027" cy="307" r="6" class="chartlet-net-node chartlet-net-g1"><title>Pricing (Shop)</title></circle><text x="327.027" y="293" text-anchor="middle" class="chartlet-net-label">Pricing</text></g><g class="chartlet-f chartlet-n-3 chartlet-f-0 chartlet-f-3 chartlet-f-5 chartlet-f-6 chartlet-emph"><circle cx="270" cy="364.027" r="6" class="chartlet-net-node chartlet-net-g2"><title>Payments (Finance)</title></circle><circle cx="270" cy="364.027" r="12.5" class="chartlet-emph-ring"/><text x="281" y="368.027" text-anchor="start" class="chartlet-net-label">Payments</text></g><g class="chartlet-f chartlet-n-4 chartlet-f-0 chartlet-f-4"><circle cx="212.973" cy="307" r="6" class="chartlet-net-node chartlet-net-g3"><title>Sign-in (Platform)</title></circle><text x="212.973" y="329" text-anchor="middle" class="chartlet-net-label">Sign-in</text></g><g class="chartlet-f chartlet-n-5 chartlet-f-3 chartlet-f-5 chartlet-f-7"><circle cx="384.053" cy="307" r="6" class="chartlet-net-node chartlet-net-g2"><title>Fraud check (Finance)</title></circle><text x="395.053" y="311" text-anchor="start" class="chartlet-net-label">Fraud check</text></g><g class="chartlet-f chartlet-n-6 chartlet-f-3 chartlet-f-6 chartlet-f-7"><circle cx="155.947" cy="307" r="6" class="chartlet-net-node chartlet-net-g2"><title>Ledger (Finance)</title></circle><text x="144.947" y="311" text-anchor="end" class="chartlet-net-label">Ledger</text></g><g class="chartlet-f chartlet-n-7 chartlet-f-5 chartlet-f-6 chartlet-f-7"><circle cx="270" cy="478.08" r="6" class="chartlet-net-node chartlet-net-g3"><title>Event bus (Platform)</title></circle><text x="281" y="482.08" text-anchor="start" class="chartlet-net-label">Event bus</text></g><circle cx="30" cy="604" r="6" class="chartlet-net-node chartlet-net-g1"/><text x="42" y="608" text-anchor="start" class="chartlet-legend">Shop</text><circle cx="96.2" cy="604" r="6" class="chartlet-net-node chartlet-net-g2"/><text x="108.2" y="608" text-anchor="start" class="chartlet-legend">Finance</text><circle cx="179.44" cy="604" r="6" class="chartlet-net-node chartlet-net-g3"/><text x="191.44" y="608" text-anchor="start" class="chartlet-legend">Platform</text><g class="chartlet-legend-strip"><circle cx="37" cy="652" r="8" class="chartlet-emph-ring"/><text x="58" y="656" text-anchor="start" class="chartlet-legend-text">Emphasized</text><line x1="149.48" y1="652" x2="175.48" y2="652" class="chartlet-legend-line"/><text x="183.48" y="656" text-anchor="start" class="chartlet-legend-text">Solid line</text><line x1="258.64" y1="652" x2="284.64" y2="652" class="chartlet-legend-line chartlet-legend-dashed"/><text x="292.64" y="656" text-anchor="start" class="chartlet-legend-text">Dashed line</text><line x1="380.76" y1="652" x2="406.76" y2="652" class="chartlet-legend-line chartlet-legend-path"/><text x="414.76" y="656" text-anchor="start" class="chartlet-legend-text">Emphasized path</text></g></svg><label class="chartlet-hotspot" id="chartlet-76c636e55e0a3941-m-hs-0" for="chartlet-76c636e55e0a3941-focus-0"></label><label class="chartlet-hotspot" id="chartlet-76c636e55e0a3941-m-hs-1" for="chartlet-76c636e55e0a3941-focus-1"></label><label class="chartlet-hotspot" id="chartlet-76c636e55e0a3941-m-hs-2" for="chartlet-76c636e55e0a3941-focus-2"></label><label class="chartlet-hotspot" id="chartlet-76c636e55e0a3941-m-hs-3" for="chartlet-76c636e55e0a3941-focus-3"></label><label class="chartlet-hotspot" id="chartlet-76c636e55e0a3941-m-hs-4" for="chartlet-76c636e55e0a3941-focus-4"></label><label class="chartlet-hotspot" id="chartlet-76c636e55e0a3941-m-hs-5" for="chartlet-76c636e55e0a3941-focus-5"></label><label class="chartlet-hotspot" id="chartlet-76c636e55e0a3941-m-hs-6" for="chartlet-76c636e55e0a3941-focus-6"></label><label class="chartlet-hotspot" id="chartlet-76c636e55e0a3941-m-hs-7" for="chartlet-76c636e55e0a3941-focus-7"></label></div></div><p class="chartlet-source">Source: Service catalogue</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Checkout dependencies: the payment chain</caption><thead><tr><th scope="col">Node</th><th scope="col">Group</th><th scope="col">Ring</th><th scope="col">Leads to</th><th scope="col">Emphasis</th></tr></thead><tbody><tr><th scope="row">Checkout</th><td>Shop</td><td>Center</td><td>Cart, Pricing, Payments, Sign-in</td><td>on emphasized path</td></tr><tr><th scope="row">Cart</th><td>Shop</td><td>1</td><td></td><td></td></tr><tr><th scope="row">Pricing</th><td>Shop</td><td>1</td><td></td><td></td></tr><tr><th scope="row">Payments</th><td>Finance</td><td>1</td><td>Fraud check, Ledger</td><td>emphasized, on emphasized path</td></tr><tr><th scope="row">Sign-in</th><td>Platform</td><td>1</td><td></td><td></td></tr><tr><th scope="row">Fraud check</th><td>Finance</td><td>2</td><td>Event bus</td><td></td></tr><tr><th scope="row">Ledger</th><td>Finance</td><td>2</td><td>Event bus</td><td>on emphasized path</td></tr><tr><th scope="row">Event bus</th><td>Platform</td><td>3</td><td></td><td>on emphasized path</td></tr></tbody></table></details></figure></div>