<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-d685021f3b1bceed .chartlet-f{opacity:.18}#chartlet-d685021f3b1bceed-hs-0{left:9.375%;top:5.938%;width:11.25%;height:7.5%}#chartlet-d685021f3b1bceed-hs-1{left:32.5%;top:5.938%;width:11.667%;height:7.5%}#chartlet-d685021f3b1bceed-hs-2{left:56.042%;top:5.938%;width:11.25%;height:7.5%}#chartlet-d685021f3b1bceed-hs-3{left:79.653%;top:5.938%;width:10.694%;height:7.5%}.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-0:checked) #chartlet-d685021f3b1bceed .chartlet-f-0{opacity:1}.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-0:checked) #chartlet-d685021f3b1bceed .chartlet-n-0 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-0:checked) #chartlet-d685021f3b1bceed .chartlet-n-0 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-1:checked) #chartlet-d685021f3b1bceed .chartlet-f-1{opacity:1}.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-1:checked) #chartlet-d685021f3b1bceed .chartlet-n-1 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-1:checked) #chartlet-d685021f3b1bceed .chartlet-n-1 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-2:checked) #chartlet-d685021f3b1bceed .chartlet-f-2{opacity:1}.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-2:checked) #chartlet-d685021f3b1bceed .chartlet-n-2 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-2:checked) #chartlet-d685021f3b1bceed .chartlet-n-2 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-3:checked) #chartlet-d685021f3b1bceed .chartlet-f-3{opacity:1}.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-3:checked) #chartlet-d685021f3b1bceed .chartlet-n-3 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-3:checked) #chartlet-d685021f3b1bceed .chartlet-n-3 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(.chartlet-focus-node:checked) #chartlet-d685021f3b1bceed-m .chartlet-f{opacity:.18}#chartlet-d685021f3b1bceed-m-hs-0{left:5.694%;top:5%;width:18.611%;height:6.316%}#chartlet-d685021f3b1bceed-m-hs-1{left:28.611%;top:5%;width:19.444%;height:6.316%}#chartlet-d685021f3b1bceed-m-hs-2{left:52.361%;top:5%;width:18.611%;height:6.316%}#chartlet-d685021f3b1bceed-m-hs-3{left:76.25%;top:5%;width:17.5%;height:6.316%}.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-0:checked) #chartlet-d685021f3b1bceed-m .chartlet-f-0{opacity:1}.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-0:checked) #chartlet-d685021f3b1bceed-m .chartlet-n-0 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-0:checked) #chartlet-d685021f3b1bceed-m .chartlet-n-0 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-1:checked) #chartlet-d685021f3b1bceed-m .chartlet-f-1{opacity:1}.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-1:checked) #chartlet-d685021f3b1bceed-m .chartlet-n-1 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-1:checked) #chartlet-d685021f3b1bceed-m .chartlet-n-1 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-2:checked) #chartlet-d685021f3b1bceed-m .chartlet-f-2{opacity:1}.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-2:checked) #chartlet-d685021f3b1bceed-m .chartlet-n-2 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-2:checked) #chartlet-d685021f3b1bceed-m .chartlet-n-2 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-3:checked) #chartlet-d685021f3b1bceed-m .chartlet-f-3{opacity:1}.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-3:checked) #chartlet-d685021f3b1bceed-m .chartlet-n-3 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-d685021f3b1bceed-focus-3:checked) #chartlet-d685021f3b1bceed-m .chartlet-n-3 .chartlet-seq-box{stroke-width:3}</style><details class="chartlet-focus"><summary>Focus</summary><fieldset><label><input type="radio" name="chartlet-d685021f3b1bceed-focus" checked> Show all</label><label><input type="radio" name="chartlet-d685021f3b1bceed-focus" class="chartlet-focus-node" id="chartlet-d685021f3b1bceed-focus-0"> Browser</label><label><input type="radio" name="chartlet-d685021f3b1bceed-focus" class="chartlet-focus-node" id="chartlet-d685021f3b1bceed-focus-1"> Web shop</label><label><input type="radio" name="chartlet-d685021f3b1bceed-focus" class="chartlet-focus-node" id="chartlet-d685021f3b1bceed-focus-2"> Shop API</label><label><input type="radio" name="chartlet-d685021f3b1bceed-focus" class="chartlet-focus-node" id="chartlet-d685021f3b1bceed-focus-3"> Orders</label></fieldset></details><figure class="chartlet-figure" data-viz="chart"><figcaption>Loading the cart</figcaption><div class="chartlet-variant-desktop"><div class="chartlet-stage"><svg xmlns="http://www.w3.org/2000/svg" width="720" height="640" viewBox="0 0 720 640" id="chartlet-d685021f3b1bceed" role="img" aria-labelledby="chartlet-d685021f3b1bceed-title chartlet-d685021f3b1bceed-description" class="chartlet-root chartlet-theme-dark chartlet-look-editorial"><title id="chartlet-d685021f3b1bceed-title">Loading the cart</title><desc id="chartlet-d685021f3b1bceed-description">Sequence diagram with 4 participants: Browser (actor), Web shop, Shop API and Orders (database). 7 messages, in order: 1. Browser to Web shop: GET /cart. 2. Web shop to Shop API: Load the cart for this session. 3. Shop API to Orders: SELECT items. 4. Orders to Shop API: rows (reply). 5. Shop API to itself: Price and tax check. 6. Shop API to Web shop: Cart JSON (reply). 7. Web shop to Browser: Page (reply).</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-d685021f3b1bceed .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-d685021f3b1bceed .chartlet-label,#chartlet-d685021f3b1bceed .chartlet-tick,#chartlet-d685021f3b1bceed .chartlet-value,#chartlet-d685021f3b1bceed .chartlet-value-inverse,#chartlet-d685021f3b1bceed .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-d685021f3b1bceed .chartlet-value,#chartlet-d685021f3b1bceed .chartlet-value-inverse{font-weight:600}#chartlet-d685021f3b1bceed .chartlet-value{fill:var(--chartlet-text)}#chartlet-d685021f3b1bceed .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-d685021f3b1bceed .chartlet-axis-title{font-weight:600}#chartlet-d685021f3b1bceed .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-d685021f3b1bceed .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-d685021f3b1bceed .chartlet-bar,#chartlet-d685021f3b1bceed .chartlet-point{fill:var(--chartlet-accent)}#chartlet-d685021f3b1bceed .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-d685021f3b1bceed .chartlet-background{fill:var(--chartlet-background)}.chartlet-root.chartlet-theme-dark{--chartlet-text:#e8edf6;--chartlet-muted:#a9b4c7;--chartlet-grid:#2a3342;--chartlet-zero:#7b8697;--chartlet-accent:#7ea6ff;--chartlet-background:#0e131c;--chartlet-color-1:#7ea6ff;--chartlet-color-2:#ff9c72;--chartlet-color-3:#9aa7bd;--chartlet-color-4:#e2e8f4}.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-d685021f3b1bceed .chartlet-role-blue{fill:var(--chartlet-role-blue-fill);stroke:var(--chartlet-role-blue)}#chartlet-d685021f3b1bceed .chartlet-role-green{fill:var(--chartlet-role-green-fill);stroke:var(--chartlet-role-green)}#chartlet-d685021f3b1bceed .chartlet-role-amber{fill:var(--chartlet-role-amber-fill);stroke:var(--chartlet-role-amber)}#chartlet-d685021f3b1bceed .chartlet-role-teal{fill:var(--chartlet-role-teal-fill);stroke:var(--chartlet-role-teal)}#chartlet-d685021f3b1bceed .chartlet-role-violet{fill:var(--chartlet-role-violet-fill);stroke:var(--chartlet-role-violet)}#chartlet-d685021f3b1bceed .chartlet-role-gray{fill:var(--chartlet-role-gray-fill);stroke:var(--chartlet-role-gray)}#chartlet-d685021f3b1bceed .chartlet-role-red{fill:var(--chartlet-role-red-fill);stroke:var(--chartlet-role-red)}#chartlet-d685021f3b1bceed .chartlet-diagram-rim{fill:none;stroke:var(--chartlet-role-teal);stroke-width:1.5}#chartlet-d685021f3b1bceed .chartlet-diagram-shadow{fill:var(--chartlet-shadow);stroke:none;rx:7px}#chartlet-d685021f3b1bceed .chartlet-diagram-chip{fill:var(--chartlet-background);stroke:var(--chartlet-grid);stroke-width:1;rx:4px}#chartlet-d685021f3b1bceed .chartlet-diagram-chip-text{font-size:12px;fill:var(--chartlet-text)}#chartlet-d685021f3b1bceed .chartlet-diagram-badge{fill:var(--chartlet-accent);stroke:var(--chartlet-background);stroke-width:2}#chartlet-d685021f3b1bceed .chartlet-diagram-badge-text{font-size:10px;font-weight:700;fill:var(--chartlet-background)}#chartlet-d685021f3b1bceed .chartlet-seq-box{stroke-width:1.5;stroke-linejoin:round;rx:7px}#chartlet-d685021f3b1bceed .chartlet-seq-external{stroke-dasharray:5 3}#chartlet-d685021f3b1bceed .chartlet-seq-hit{fill:transparent;stroke:none}#chartlet-d685021f3b1bceed .chartlet-seq-actor{stroke:var(--chartlet-text);stroke-width:1.5;stroke-linecap:round}#chartlet-d685021f3b1bceed .chartlet-seq-actor-head{fill:var(--chartlet-background);stroke:var(--chartlet-text);stroke-width:1.5}#chartlet-d685021f3b1bceed .chartlet-seq-label{font-size:13px;font-weight:600;fill:var(--chartlet-text)}#chartlet-d685021f3b1bceed .chartlet-seq-sublabel{font-size:11px;fill:var(--chartlet-muted)}#chartlet-d685021f3b1bceed .chartlet-seq-lifeline{stroke:var(--chartlet-zero);stroke-width:1;stroke-dasharray:3 4}#chartlet-d685021f3b1bceed .chartlet-seq-activation{fill:var(--chartlet-node);stroke:var(--chartlet-accent);stroke-width:1;rx:2px}#chartlet-d685021f3b1bceed .chartlet-seq-message{fill:none;stroke:var(--chartlet-zero);stroke-width:1.4;stroke-linejoin:round}#chartlet-d685021f3b1bceed .chartlet-seq-reply{stroke-dasharray:5 4}#chartlet-d685021f3b1bceed .chartlet-seq-head{fill:var(--chartlet-zero);stroke:var(--chartlet-zero);stroke-width:1;stroke-linejoin:round}#chartlet-d685021f3b1bceed .chartlet-seq-head-open{fill:none;stroke:var(--chartlet-zero);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}#chartlet-d685021f3b1bceed .chartlet-seq-frame{fill:none;stroke:var(--chartlet-zero);stroke-width:1;rx:6px}#chartlet-d685021f3b1bceed .chartlet-seq-tab{fill:var(--chartlet-node);stroke:var(--chartlet-zero);stroke-width:1;rx:4px}#chartlet-d685021f3b1bceed .chartlet-seq-tag{font-size:11px;font-weight:650;fill:var(--chartlet-text)}#chartlet-d685021f3b1bceed .chartlet-seq-guard{font-size:11px;fill:var(--chartlet-muted);paint-order:stroke;stroke:var(--chartlet-background);stroke-width:3px;stroke-linejoin:round}#chartlet-d685021f3b1bceed .chartlet-seq-branch{stroke:var(--chartlet-zero);stroke-width:1;stroke-dasharray:5 4}.chartlet-root.chartlet-look-editorial{--chartlet-text:#1d1c1a;--chartlet-muted:#4d4a44;--chartlet-grid:#d8d4ca;--chartlet-zero:#6b665c;--chartlet-accent:#0b6a88;--chartlet-background:#fcfbf8;--chartlet-color-1:#0b6a88;--chartlet-color-2:#a8431a;--chartlet-color-3:#6b665c;--chartlet-color-4:#1d1c1a;--chartlet-node:#f2efe8;--chartlet-lane:#fcfbf8;--chartlet-lane-head:#f2efe8;--chartlet-shadow:rgba(0,0,0,0);--chartlet-role-blue:#6b665c;--chartlet-role-blue-fill:#f2efe8;--chartlet-role-green:#6b665c;--chartlet-role-green-fill:#f2efe8;--chartlet-role-amber:#6b665c;--chartlet-role-amber-fill:#f2efe8;--chartlet-role-teal:#6b665c;--chartlet-role-teal-fill:#f2efe8;--chartlet-role-violet:#4d4a44;--chartlet-role-violet-fill:#f2efe8;--chartlet-role-gray:#6b665c;--chartlet-role-gray-fill:#f2efe8;--chartlet-role-red:#a8281c;--chartlet-role-red-fill:#fbefec}.chartlet-root.chartlet-look-editorial.chartlet-theme-dark:not(.chartlet-blueprint){--chartlet-text:#ece8df;--chartlet-muted:#b7b2a7;--chartlet-grid:#3a3840;--chartlet-zero:#8f8a80;--chartlet-accent:#62b8d4;--chartlet-background:#17161a;--chartlet-color-1:#62b8d4;--chartlet-color-2:#e0916a;--chartlet-color-3:#9a958a;--chartlet-color-4:#ece8df;--chartlet-node:#222127;--chartlet-lane:#17161a;--chartlet-lane-head:#222127;--chartlet-shadow:rgba(0,0,0,0);--chartlet-role-blue:#8f8a80;--chartlet-role-blue-fill:#222127;--chartlet-role-green:#8f8a80;--chartlet-role-green-fill:#222127;--chartlet-role-amber:#8f8a80;--chartlet-role-amber-fill:#222127;--chartlet-role-teal:#8f8a80;--chartlet-role-teal-fill:#222127;--chartlet-role-violet:#c9c4b8;--chartlet-role-violet-fill:#222127;--chartlet-role-gray:#8f8a80;--chartlet-role-gray-fill:#222127;--chartlet-role-red:#f08a7e;--chartlet-role-red-fill:#2d1f1e}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-role-blue,#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-role-green,#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-role-amber,#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-role-teal,#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-role-violet,#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-role-gray,#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-role-red{fill:var(--chartlet-node);stroke:var(--chartlet-zero)}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-flow-node{stroke-width:1;rx:6px}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-flow-start{stroke-width:1}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-flow-end{stroke-width:2}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-flow-inner{stroke:var(--chartlet-zero)}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-flow-edge{stroke:var(--chartlet-zero);stroke-width:1}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-flow-main{stroke:var(--chartlet-accent);stroke-width:2}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-flow-group{fill:none;stroke:var(--chartlet-zero);stroke-width:1;stroke-dasharray:3 3;rx:8px}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-diagram-shadow{display:none}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-diagram-chip{fill:var(--chartlet-background);stroke:none;rx:2px}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-diagram-badge{fill:var(--chartlet-text);stroke:var(--chartlet-background)}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-diagram-badge-text{fill:var(--chartlet-background)}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-diagram-tag{fill:var(--chartlet-background);stroke:var(--chartlet-zero);stroke-width:1;rx:3px}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-diagram-tech{font-size:11px;fill:var(--chartlet-text)}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-diagram-tag-text{font-size:9px;font-weight:600;letter-spacing:.5px;fill:var(--chartlet-text)}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-seq-box{stroke-width:1;rx:6px}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-seq-message{stroke:var(--chartlet-zero);stroke-width:1}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-seq-activation{stroke:var(--chartlet-zero)}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-seq-frame{rx:8px}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-state{rx:8px}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-state-inner{stroke:var(--chartlet-zero);rx:6px}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-arch-head{fill:var(--chartlet-node);stroke:var(--chartlet-zero)}#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-flow-sublabel,#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-flow-group-label,#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-flow-card,#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-diagram-tag-text,#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-diagram-tech,#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-arch-interface,#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-seq-sublabel,#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-seq-tag,#chartlet-d685021f3b1bceed.chartlet-look-editorial .chartlet-seq-guard{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"JetBrains Mono","DejaVu Sans Mono",monospace}</style><rect class="chartlet-background" x="0" y="0" width="720" height="640"/><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1"><line x1="108" y1="86" x2="108" y2="624" class="chartlet-seq-lifeline"/></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1 chartlet-f-2"><line x1="276" y1="86" x2="276" y2="624" class="chartlet-seq-lifeline"/></g><g class="chartlet-f chartlet-n-2 chartlet-f-1 chartlet-f-2 chartlet-f-3"><line x1="444" y1="86" x2="444" y2="624" class="chartlet-seq-lifeline"/></g><g class="chartlet-f chartlet-n-3 chartlet-f-2 chartlet-f-3"><line x1="612" y1="86" x2="612" y2="624" class="chartlet-seq-lifeline"/></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1 chartlet-f-2"><rect x="271" y="153.138" width="10" height="448.878" class="chartlet-seq-activation"/></g><g class="chartlet-f chartlet-n-2 chartlet-f-1 chartlet-f-2 chartlet-f-3"><rect x="439" y="241.236" width="10" height="293.659" class="chartlet-seq-activation"/></g><g class="chartlet-f chartlet-n-3 chartlet-f-2 chartlet-f-3"><rect x="607" y="308.358" width="10" height="67.122" class="chartlet-seq-activation"/></g><g class="chartlet-f chartlet-f-0 chartlet-f-1"><polyline points="108,153.138 263,153.138" class="chartlet-seq-message"><title>1. Browser → Web shop: GET /cart</title></polyline><polyline points="263,156.638 271,153.138 263,149.638 263,156.638" class="chartlet-seq-head"/><rect x="153.72" y="117.138" width="71.56" height="21" class="chartlet-diagram-chip"/><text x="189.5" y="131.138" text-anchor="middle" class="chartlet-diagram-chip-text">GET /cart</text><circle cx="124" cy="153.138" r="8" class="chartlet-diagram-badge"/><text x="124" y="156.638" text-anchor="middle" class="chartlet-diagram-badge-text">1</text></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><polyline points="281,241.236 431,241.236" class="chartlet-seq-message"><title>2. Web shop → Shop API: Load the cart for this session</title></polyline><polyline points="431,244.736 439,241.236 431,237.736 431,244.736" class="chartlet-seq-head"/><rect x="287.74" y="190.236" width="144.52" height="36" class="chartlet-diagram-chip"/><text x="360" y="204.236" text-anchor="middle" class="chartlet-diagram-chip-text">Load the cart for this</text><text x="360" y="219.236" text-anchor="middle" class="chartlet-diagram-chip-text">session</text><circle cx="297" cy="241.236" r="8" class="chartlet-diagram-badge"/><text x="297" y="244.736" text-anchor="middle" class="chartlet-diagram-badge-text">2</text></g><g class="chartlet-f chartlet-f-2 chartlet-f-3"><polyline points="449,308.358 599,308.358" class="chartlet-seq-message"><title>3. Shop API → Orders: SELECT items</title></polyline><polyline points="599,311.858 607,308.358 599,304.858 599,311.858" class="chartlet-seq-head"/><rect x="479.68" y="272.358" width="96.64" height="21" class="chartlet-diagram-chip"/><text x="528" y="286.358" text-anchor="middle" class="chartlet-diagram-chip-text">SELECT items</text><circle cx="465" cy="308.358" r="8" class="chartlet-diagram-badge"/><text x="465" y="311.858" text-anchor="middle" class="chartlet-diagram-badge-text">3</text></g><g class="chartlet-f chartlet-f-2 chartlet-f-3"><polyline points="607,375.48 457,375.48" class="chartlet-seq-message chartlet-seq-reply"><title>4. Orders → Shop API: rows</title></polyline><polyline points="457,371.98 449,375.48 457,378.98" class="chartlet-seq-head-open"/><rect x="507.52" y="339.48" width="40.96" height="21" class="chartlet-diagram-chip"/><text x="528" y="353.48" text-anchor="middle" class="chartlet-diagram-chip-text">rows</text><circle cx="591" cy="375.48" r="8" class="chartlet-diagram-badge"/><text x="591" y="378.98" text-anchor="middle" class="chartlet-diagram-badge-text">4</text></g><g class="chartlet-f chartlet-f-2"><polyline points="449,442.602 467,442.602 469.625,442.977 471.5,444.102 472.625,445.977 473,448.602 473,452.602 472.625,455.227 471.5,457.102 469.625,458.227 467,458.602 457,458.602" class="chartlet-seq-message"><title>5. Shop API → Shop API: Price and tax check</title></polyline><polyline points="457,455.102 449,458.602 457,462.102 457,455.102" class="chartlet-seq-head"/><rect x="451" y="406.602" width="127.24" height="21" class="chartlet-diagram-chip"/><text x="456" y="420.602" text-anchor="start" class="chartlet-diagram-chip-text">Price and tax check</text><circle cx="473" cy="450.602" r="8" class="chartlet-diagram-badge"/><text x="473" y="454.102" text-anchor="middle" class="chartlet-diagram-badge-text">5</text></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><polyline points="439,534.894 289,534.894" class="chartlet-seq-message chartlet-seq-reply"><title>6. Shop API → Web shop: Cart JSON</title></polyline><polyline points="289,531.394 281,534.894 289,538.394" class="chartlet-seq-head-open"/><rect x="322.9" y="498.894" width="74.2" height="21" class="chartlet-diagram-chip"/><text x="360" y="512.894" text-anchor="middle" class="chartlet-diagram-chip-text">Cart JSON</text><circle cx="423" cy="534.894" r="8" class="chartlet-diagram-badge"/><text x="423" y="538.394" text-anchor="middle" class="chartlet-diagram-badge-text">6</text></g><g class="chartlet-f chartlet-f-0 chartlet-f-1"><polyline points="271,602.016 116,602.016" class="chartlet-seq-message chartlet-seq-reply"><title>7. Web shop → Browser: Page</title></polyline><polyline points="116,598.516 108,602.016 116,605.516" class="chartlet-seq-head-open"/><rect x="170.4" y="566.016" width="38.2" height="21" class="chartlet-diagram-chip"/><text x="189.5" y="580.016" text-anchor="middle" class="chartlet-diagram-chip-text">Page</text><circle cx="255" cy="602.016" r="8" class="chartlet-diagram-badge"/><text x="255" y="605.516" text-anchor="middle" class="chartlet-diagram-badge-text">7</text></g><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1"><circle cx="108" cy="17.5" r="4.5" class="chartlet-seq-actor-head"/><line x1="108" y1="22" x2="108" y2="29" class="chartlet-seq-actor"/><line x1="101" y1="24.5" x2="115" y2="24.5" class="chartlet-seq-actor"/><line x1="108" y1="29" x2="102" y2="35" class="chartlet-seq-actor"/><line x1="108" y1="29" x2="114" y2="35" class="chartlet-seq-actor"/><rect x="67.5" y="38" width="81" height="48" class="chartlet-seq-hit"><title>Browser</title></rect><text x="108" y="66.5" text-anchor="middle" class="chartlet-seq-label">Browser</text></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1 chartlet-f-2"><rect x="234" y="40.5" width="84" height="48" class="chartlet-diagram-shadow"/><rect x="234" y="38" width="84" height="48" class="chartlet-seq-box chartlet-role-blue"><title>Web shop – SvelteKit</title></rect><text x="276" y="60" text-anchor="middle" class="chartlet-seq-label">Web shop</text><text x="276" y="75" text-anchor="middle" class="chartlet-seq-sublabel">SvelteKit</text></g><g class="chartlet-f chartlet-n-2 chartlet-f-1 chartlet-f-2 chartlet-f-3"><rect x="403.5" y="40.5" width="81" height="48" class="chartlet-diagram-shadow"/><rect x="403.5" y="38" width="81" height="48" class="chartlet-seq-box chartlet-role-blue"><title>Shop API – Rust</title></rect><text x="444" y="60" text-anchor="middle" class="chartlet-seq-label">Shop API</text><text x="444" y="75" text-anchor="middle" class="chartlet-seq-sublabel">Rust</text></g><g class="chartlet-f chartlet-n-3 chartlet-f-2 chartlet-f-3"><polyline points="573.5,45.5 573.5,83.5 574.812,84.794 578.658,86 584.776,87.036 592.75,87.83 602.035,88.33 612,88.5 621.965,88.33 631.25,87.83 639.224,87.036 645.342,86 649.188,84.794 650.5,83.5 650.5,45.5 649.188,44.206 645.342,43 639.224,41.964 631.25,41.17 621.965,40.67 612,40.5 602.035,40.67 592.75,41.17 584.776,41.964 578.658,43 574.812,44.206 573.5,45.5 573.5,45.5" class="chartlet-diagram-shadow"/><polyline points="573.5,43 573.5,81 574.812,82.294 578.658,83.5 584.776,84.536 592.75,85.33 602.035,85.83 612,86 621.965,85.83 631.25,85.33 639.224,84.536 645.342,83.5 649.188,82.294 650.5,81 650.5,43 649.188,41.706 645.342,40.5 639.224,39.464 631.25,38.67 621.965,38.17 612,38 602.035,38.17 592.75,38.67 584.776,39.464 578.658,40.5 574.812,41.706 573.5,43 573.5,43" class="chartlet-seq-box chartlet-role-teal"><title>Orders – Postgres</title></polyline><polyline points="573.5,43 574.812,44.294 578.658,45.5 584.776,46.536 592.75,47.33 602.035,47.83 612,48 621.965,47.83 631.25,47.33 639.224,46.536 645.342,45.5 649.188,44.294 650.5,43" class="chartlet-diagram-rim"/><text x="612" y="60" text-anchor="middle" class="chartlet-seq-label">Orders</text><text x="612" y="75" text-anchor="middle" class="chartlet-seq-sublabel">Postgres</text></g></svg><label class="chartlet-hotspot" id="chartlet-d685021f3b1bceed-hs-0" for="chartlet-d685021f3b1bceed-focus-0"></label><label class="chartlet-hotspot" id="chartlet-d685021f3b1bceed-hs-1" for="chartlet-d685021f3b1bceed-focus-1"></label><label class="chartlet-hotspot" id="chartlet-d685021f3b1bceed-hs-2" for="chartlet-d685021f3b1bceed-focus-2"></label><label class="chartlet-hotspot" id="chartlet-d685021f3b1bceed-hs-3" for="chartlet-d685021f3b1bceed-focus-3"></label></div></div><div class="chartlet-variant-mobile"><div class="chartlet-stage"><svg xmlns="http://www.w3.org/2000/svg" width="360" height="760" viewBox="0 0 360 760" id="chartlet-d685021f3b1bceed-m" role="img" aria-labelledby="chartlet-d685021f3b1bceed-m-title chartlet-d685021f3b1bceed-m-description" class="chartlet-root chartlet-theme-dark chartlet-look-editorial"><title id="chartlet-d685021f3b1bceed-m-title">Loading the cart</title><desc id="chartlet-d685021f3b1bceed-m-description">Sequence diagram with 4 participants: Browser (actor), Web shop, Shop API and Orders (database). 7 messages, in order: 1. Browser to Web shop: GET /cart. 2. Web shop to Shop API: Load the cart for this session. 3. Shop API to Orders: SELECT items. 4. Orders to Shop API: rows (reply). 5. Shop API to itself: Price and tax check. 6. Shop API to Web shop: Cart JSON (reply). 7. Web shop to Browser: Page (reply).</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-d685021f3b1bceed-m .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-d685021f3b1bceed-m .chartlet-label,#chartlet-d685021f3b1bceed-m .chartlet-tick,#chartlet-d685021f3b1bceed-m .chartlet-value,#chartlet-d685021f3b1bceed-m .chartlet-value-inverse,#chartlet-d685021f3b1bceed-m .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-d685021f3b1bceed-m .chartlet-value,#chartlet-d685021f3b1bceed-m .chartlet-value-inverse{font-weight:600}#chartlet-d685021f3b1bceed-m .chartlet-value{fill:var(--chartlet-text)}#chartlet-d685021f3b1bceed-m .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-d685021f3b1bceed-m .chartlet-axis-title{font-weight:600}#chartlet-d685021f3b1bceed-m .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-d685021f3b1bceed-m .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-d685021f3b1bceed-m .chartlet-bar,#chartlet-d685021f3b1bceed-m .chartlet-point{fill:var(--chartlet-accent)}#chartlet-d685021f3b1bceed-m .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-d685021f3b1bceed-m .chartlet-background{fill:var(--chartlet-background)}.chartlet-root.chartlet-theme-dark{--chartlet-text:#e8edf6;--chartlet-muted:#a9b4c7;--chartlet-grid:#2a3342;--chartlet-zero:#7b8697;--chartlet-accent:#7ea6ff;--chartlet-background:#0e131c;--chartlet-color-1:#7ea6ff;--chartlet-color-2:#ff9c72;--chartlet-color-3:#9aa7bd;--chartlet-color-4:#e2e8f4}#chartlet-d685021f3b1bceed-m .chartlet-title-small{font-size:18px}.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-d685021f3b1bceed-m .chartlet-role-blue{fill:var(--chartlet-role-blue-fill);stroke:var(--chartlet-role-blue)}#chartlet-d685021f3b1bceed-m .chartlet-role-green{fill:var(--chartlet-role-green-fill);stroke:var(--chartlet-role-green)}#chartlet-d685021f3b1bceed-m .chartlet-role-amber{fill:var(--chartlet-role-amber-fill);stroke:var(--chartlet-role-amber)}#chartlet-d685021f3b1bceed-m .chartlet-role-teal{fill:var(--chartlet-role-teal-fill);stroke:var(--chartlet-role-teal)}#chartlet-d685021f3b1bceed-m .chartlet-role-violet{fill:var(--chartlet-role-violet-fill);stroke:var(--chartlet-role-violet)}#chartlet-d685021f3b1bceed-m .chartlet-role-gray{fill:var(--chartlet-role-gray-fill);stroke:var(--chartlet-role-gray)}#chartlet-d685021f3b1bceed-m .chartlet-role-red{fill:var(--chartlet-role-red-fill);stroke:var(--chartlet-role-red)}#chartlet-d685021f3b1bceed-m .chartlet-diagram-rim{fill:none;stroke:var(--chartlet-role-teal);stroke-width:1.5}#chartlet-d685021f3b1bceed-m .chartlet-diagram-shadow{fill:var(--chartlet-shadow);stroke:none;rx:7px}#chartlet-d685021f3b1bceed-m .chartlet-diagram-chip{fill:var(--chartlet-background);stroke:var(--chartlet-grid);stroke-width:1;rx:4px}#chartlet-d685021f3b1bceed-m .chartlet-diagram-chip-text{font-size:12px;fill:var(--chartlet-text)}#chartlet-d685021f3b1bceed-m .chartlet-diagram-badge{fill:var(--chartlet-accent);stroke:var(--chartlet-background);stroke-width:2}#chartlet-d685021f3b1bceed-m .chartlet-diagram-badge-text{font-size:10px;font-weight:700;fill:var(--chartlet-background)}#chartlet-d685021f3b1bceed-m .chartlet-seq-box{stroke-width:1.5;stroke-linejoin:round;rx:7px}#chartlet-d685021f3b1bceed-m .chartlet-seq-external{stroke-dasharray:5 3}#chartlet-d685021f3b1bceed-m .chartlet-seq-hit{fill:transparent;stroke:none}#chartlet-d685021f3b1bceed-m .chartlet-seq-actor{stroke:var(--chartlet-text);stroke-width:1.5;stroke-linecap:round}#chartlet-d685021f3b1bceed-m .chartlet-seq-actor-head{fill:var(--chartlet-background);stroke:var(--chartlet-text);stroke-width:1.5}#chartlet-d685021f3b1bceed-m .chartlet-seq-label{font-size:13px;font-weight:600;fill:var(--chartlet-text)}#chartlet-d685021f3b1bceed-m .chartlet-seq-sublabel{font-size:11px;fill:var(--chartlet-muted)}#chartlet-d685021f3b1bceed-m .chartlet-seq-lifeline{stroke:var(--chartlet-zero);stroke-width:1;stroke-dasharray:3 4}#chartlet-d685021f3b1bceed-m .chartlet-seq-activation{fill:var(--chartlet-node);stroke:var(--chartlet-accent);stroke-width:1;rx:2px}#chartlet-d685021f3b1bceed-m .chartlet-seq-message{fill:none;stroke:var(--chartlet-zero);stroke-width:1.4;stroke-linejoin:round}#chartlet-d685021f3b1bceed-m .chartlet-seq-reply{stroke-dasharray:5 4}#chartlet-d685021f3b1bceed-m .chartlet-seq-head{fill:var(--chartlet-zero);stroke:var(--chartlet-zero);stroke-width:1;stroke-linejoin:round}#chartlet-d685021f3b1bceed-m .chartlet-seq-head-open{fill:none;stroke:var(--chartlet-zero);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}#chartlet-d685021f3b1bceed-m .chartlet-seq-frame{fill:none;stroke:var(--chartlet-zero);stroke-width:1;rx:6px}#chartlet-d685021f3b1bceed-m .chartlet-seq-tab{fill:var(--chartlet-node);stroke:var(--chartlet-zero);stroke-width:1;rx:4px}#chartlet-d685021f3b1bceed-m .chartlet-seq-tag{font-size:11px;font-weight:650;fill:var(--chartlet-text)}#chartlet-d685021f3b1bceed-m .chartlet-seq-guard{font-size:11px;fill:var(--chartlet-muted);paint-order:stroke;stroke:var(--chartlet-background);stroke-width:3px;stroke-linejoin:round}#chartlet-d685021f3b1bceed-m .chartlet-seq-branch{stroke:var(--chartlet-zero);stroke-width:1;stroke-dasharray:5 4}.chartlet-root.chartlet-look-editorial{--chartlet-text:#1d1c1a;--chartlet-muted:#4d4a44;--chartlet-grid:#d8d4ca;--chartlet-zero:#6b665c;--chartlet-accent:#0b6a88;--chartlet-background:#fcfbf8;--chartlet-color-1:#0b6a88;--chartlet-color-2:#a8431a;--chartlet-color-3:#6b665c;--chartlet-color-4:#1d1c1a;--chartlet-node:#f2efe8;--chartlet-lane:#fcfbf8;--chartlet-lane-head:#f2efe8;--chartlet-shadow:rgba(0,0,0,0);--chartlet-role-blue:#6b665c;--chartlet-role-blue-fill:#f2efe8;--chartlet-role-green:#6b665c;--chartlet-role-green-fill:#f2efe8;--chartlet-role-amber:#6b665c;--chartlet-role-amber-fill:#f2efe8;--chartlet-role-teal:#6b665c;--chartlet-role-teal-fill:#f2efe8;--chartlet-role-violet:#4d4a44;--chartlet-role-violet-fill:#f2efe8;--chartlet-role-gray:#6b665c;--chartlet-role-gray-fill:#f2efe8;--chartlet-role-red:#a8281c;--chartlet-role-red-fill:#fbefec}.chartlet-root.chartlet-look-editorial.chartlet-theme-dark:not(.chartlet-blueprint){--chartlet-text:#ece8df;--chartlet-muted:#b7b2a7;--chartlet-grid:#3a3840;--chartlet-zero:#8f8a80;--chartlet-accent:#62b8d4;--chartlet-background:#17161a;--chartlet-color-1:#62b8d4;--chartlet-color-2:#e0916a;--chartlet-color-3:#9a958a;--chartlet-color-4:#ece8df;--chartlet-node:#222127;--chartlet-lane:#17161a;--chartlet-lane-head:#222127;--chartlet-shadow:rgba(0,0,0,0);--chartlet-role-blue:#8f8a80;--chartlet-role-blue-fill:#222127;--chartlet-role-green:#8f8a80;--chartlet-role-green-fill:#222127;--chartlet-role-amber:#8f8a80;--chartlet-role-amber-fill:#222127;--chartlet-role-teal:#8f8a80;--chartlet-role-teal-fill:#222127;--chartlet-role-violet:#c9c4b8;--chartlet-role-violet-fill:#222127;--chartlet-role-gray:#8f8a80;--chartlet-role-gray-fill:#222127;--chartlet-role-red:#f08a7e;--chartlet-role-red-fill:#2d1f1e}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-role-blue,#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-role-green,#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-role-amber,#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-role-teal,#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-role-violet,#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-role-gray,#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-role-red{fill:var(--chartlet-node);stroke:var(--chartlet-zero)}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-flow-node{stroke-width:1;rx:6px}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-flow-start{stroke-width:1}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-flow-end{stroke-width:2}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-flow-inner{stroke:var(--chartlet-zero)}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-flow-edge{stroke:var(--chartlet-zero);stroke-width:1}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-flow-main{stroke:var(--chartlet-accent);stroke-width:2}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-flow-group{fill:none;stroke:var(--chartlet-zero);stroke-width:1;stroke-dasharray:3 3;rx:8px}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-diagram-shadow{display:none}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-diagram-chip{fill:var(--chartlet-background);stroke:none;rx:2px}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-diagram-badge{fill:var(--chartlet-text);stroke:var(--chartlet-background)}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-diagram-badge-text{fill:var(--chartlet-background)}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-diagram-tag{fill:var(--chartlet-background);stroke:var(--chartlet-zero);stroke-width:1;rx:3px}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-diagram-tech{font-size:11px;fill:var(--chartlet-text)}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-diagram-tag-text{font-size:9px;font-weight:600;letter-spacing:.5px;fill:var(--chartlet-text)}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-seq-box{stroke-width:1;rx:6px}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-seq-message{stroke:var(--chartlet-zero);stroke-width:1}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-seq-activation{stroke:var(--chartlet-zero)}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-seq-frame{rx:8px}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-state{rx:8px}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-state-inner{stroke:var(--chartlet-zero);rx:6px}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-arch-head{fill:var(--chartlet-node);stroke:var(--chartlet-zero)}#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-flow-sublabel,#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-flow-group-label,#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-flow-card,#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-diagram-tag-text,#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-diagram-tech,#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-arch-interface,#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-seq-sublabel,#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-seq-tag,#chartlet-d685021f3b1bceed-m.chartlet-look-editorial .chartlet-seq-guard{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"JetBrains Mono","DejaVu Sans Mono",monospace}</style><rect class="chartlet-background" x="0" y="0" width="360" height="760"/><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1"><line x1="54" y1="86" x2="54" y2="684" class="chartlet-seq-lifeline"/></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1 chartlet-f-2"><line x1="138" y1="86" x2="138" y2="684" class="chartlet-seq-lifeline"/></g><g class="chartlet-f chartlet-n-2 chartlet-f-1 chartlet-f-2 chartlet-f-3"><line x1="222" y1="86" x2="222" y2="684" class="chartlet-seq-lifeline"/></g><g class="chartlet-f chartlet-n-3 chartlet-f-2 chartlet-f-3"><line x1="306" y1="86" x2="306" y2="684" class="chartlet-seq-lifeline"/></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1 chartlet-f-2"><rect x="133" y="157" width="10" height="504" class="chartlet-seq-activation"/></g><g class="chartlet-f chartlet-n-2 chartlet-f-1 chartlet-f-2 chartlet-f-3"><rect x="217" y="251.5" width="10" height="337.5" class="chartlet-seq-activation"/></g><g class="chartlet-f chartlet-n-3 chartlet-f-2 chartlet-f-3"><rect x="301" y="323.5" width="10" height="72" class="chartlet-seq-activation"/></g><g class="chartlet-f chartlet-f-0 chartlet-f-1"><polyline points="54,157 125,157" class="chartlet-seq-message"><title>1. Browser → Web shop: GET /cart</title></polyline><polyline points="125,160.5 133,157 125,153.5 125,160.5" class="chartlet-seq-head"/><rect x="57.72" y="121" width="71.56" height="21" class="chartlet-diagram-chip"/><text x="93.5" y="135" text-anchor="middle" class="chartlet-diagram-chip-text">GET /cart</text><circle cx="70" cy="157" r="8" class="chartlet-diagram-badge"/><text x="70" y="160.5" text-anchor="middle" class="chartlet-diagram-badge-text">1</text></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><polyline points="143,251.5 209,251.5" class="chartlet-seq-message"><title>2. Web shop → Shop API: Load the cart for this session</title></polyline><polyline points="209,255 217,251.5 209,248 209,255" class="chartlet-seq-head"/><rect x="107.74" y="200.5" width="144.52" height="36" class="chartlet-diagram-chip"/><text x="180" y="214.5" text-anchor="middle" class="chartlet-diagram-chip-text">Load the cart for this</text><text x="180" y="229.5" text-anchor="middle" class="chartlet-diagram-chip-text">session</text><circle cx="159" cy="251.5" r="8" class="chartlet-diagram-badge"/><text x="159" y="255" text-anchor="middle" class="chartlet-diagram-badge-text">2</text></g><g class="chartlet-f chartlet-f-2 chartlet-f-3"><polyline points="227,323.5 293,323.5" class="chartlet-seq-message"><title>3. Shop API → Orders: SELECT items</title></polyline><polyline points="293,327 301,323.5 293,320 293,327" class="chartlet-seq-head"/><rect x="215.68" y="287.5" width="96.64" height="21" class="chartlet-diagram-chip"/><text x="264" y="301.5" text-anchor="middle" class="chartlet-diagram-chip-text">SELECT items</text><circle cx="243" cy="323.5" r="8" class="chartlet-diagram-badge"/><text x="243" y="327" text-anchor="middle" class="chartlet-diagram-badge-text">3</text></g><g class="chartlet-f chartlet-f-2 chartlet-f-3"><polyline points="301,395.5 235,395.5" class="chartlet-seq-message chartlet-seq-reply"><title>4. Orders → Shop API: rows</title></polyline><polyline points="235,392 227,395.5 235,399" class="chartlet-seq-head-open"/><rect x="243.52" y="359.5" width="40.96" height="21" class="chartlet-diagram-chip"/><text x="264" y="373.5" text-anchor="middle" class="chartlet-diagram-chip-text">rows</text><circle cx="285" cy="395.5" r="8" class="chartlet-diagram-badge"/><text x="285" y="399" text-anchor="middle" class="chartlet-diagram-badge-text">4</text></g><g class="chartlet-f chartlet-f-2"><polyline points="227,490 245,490 247.625,490.375 249.5,491.5 250.625,493.375 251,496 251,500 250.625,502.625 249.5,504.5 247.625,505.625 245,506 235,506" class="chartlet-seq-message"><title>5. Shop API → Shop API: Price and tax check</title></polyline><polyline points="235,502.5 227,506 235,509.5 235,502.5" class="chartlet-seq-head"/><rect x="229" y="439" width="89.8" height="36" class="chartlet-diagram-chip"/><text x="234" y="453" text-anchor="start" class="chartlet-diagram-chip-text">Price and tax</text><text x="234" y="468" text-anchor="start" class="chartlet-diagram-chip-text">check</text><circle cx="251" cy="498" r="8" class="chartlet-diagram-badge"/><text x="251" y="501.5" text-anchor="middle" class="chartlet-diagram-badge-text">5</text></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><polyline points="217,589 151,589" class="chartlet-seq-message chartlet-seq-reply"><title>6. Shop API → Web shop: Cart JSON</title></polyline><polyline points="151,585.5 143,589 151,592.5" class="chartlet-seq-head-open"/><rect x="142.9" y="553" width="74.2" height="21" class="chartlet-diagram-chip"/><text x="180" y="567" text-anchor="middle" class="chartlet-diagram-chip-text">Cart JSON</text><circle cx="201" cy="589" r="8" class="chartlet-diagram-badge"/><text x="201" y="592.5" text-anchor="middle" class="chartlet-diagram-badge-text">6</text></g><g class="chartlet-f chartlet-f-0 chartlet-f-1"><polyline points="133,661 62,661" class="chartlet-seq-message chartlet-seq-reply"><title>7. Web shop → Browser: Page</title></polyline><polyline points="62,657.5 54,661 62,664.5" class="chartlet-seq-head-open"/><rect x="74.4" y="625" width="38.2" height="21" class="chartlet-diagram-chip"/><text x="93.5" y="639" text-anchor="middle" class="chartlet-diagram-chip-text">Page</text><circle cx="117" cy="661" r="8" class="chartlet-diagram-badge"/><text x="117" y="664.5" text-anchor="middle" class="chartlet-diagram-badge-text">7</text></g><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1"><circle cx="54" cy="17.5" r="4.5" class="chartlet-seq-actor-head"/><line x1="54" y1="22" x2="54" y2="29" class="chartlet-seq-actor"/><line x1="47" y1="24.5" x2="61" y2="24.5" class="chartlet-seq-actor"/><line x1="54" y1="29" x2="48" y2="35" class="chartlet-seq-actor"/><line x1="54" y1="29" x2="60" y2="35" class="chartlet-seq-actor"/><rect x="20.5" y="38" width="67" height="48" class="chartlet-seq-hit"><title>Browser</title></rect><text x="54" y="66.5" text-anchor="middle" class="chartlet-seq-label">Browser</text></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1 chartlet-f-2"><rect x="103" y="40.5" width="70" height="48" class="chartlet-diagram-shadow"/><rect x="103" y="38" width="70" height="48" class="chartlet-seq-box chartlet-role-blue"><title>Web shop – SvelteKit</title></rect><text x="138" y="60" text-anchor="middle" class="chartlet-seq-label">Web shop</text><text x="138" y="75" text-anchor="middle" class="chartlet-seq-sublabel">SvelteKit</text></g><g class="chartlet-f chartlet-n-2 chartlet-f-1 chartlet-f-2 chartlet-f-3"><rect x="188.5" y="40.5" width="67" height="48" class="chartlet-diagram-shadow"/><rect x="188.5" y="38" width="67" height="48" class="chartlet-seq-box chartlet-role-blue"><title>Shop API – Rust</title></rect><text x="222" y="60" text-anchor="middle" class="chartlet-seq-label">Shop API</text><text x="222" y="75" text-anchor="middle" class="chartlet-seq-sublabel">Rust</text></g><g class="chartlet-f chartlet-n-3 chartlet-f-2 chartlet-f-3"><polyline points="274.5,45.5 274.5,83.5 275.573,84.794 278.72,86 283.726,87.036 290.25,87.83 297.847,88.33 306,88.5 314.153,88.33 321.75,87.83 328.274,87.036 333.28,86 336.427,84.794 337.5,83.5 337.5,45.5 336.427,44.206 333.28,43 328.274,41.964 321.75,41.17 314.153,40.67 306,40.5 297.847,40.67 290.25,41.17 283.726,41.964 278.72,43 275.573,44.206 274.5,45.5 274.5,45.5" class="chartlet-diagram-shadow"/><polyline points="274.5,43 274.5,81 275.573,82.294 278.72,83.5 283.726,84.536 290.25,85.33 297.847,85.83 306,86 314.153,85.83 321.75,85.33 328.274,84.536 333.28,83.5 336.427,82.294 337.5,81 337.5,43 336.427,41.706 333.28,40.5 328.274,39.464 321.75,38.67 314.153,38.17 306,38 297.847,38.17 290.25,38.67 283.726,39.464 278.72,40.5 275.573,41.706 274.5,43 274.5,43" class="chartlet-seq-box chartlet-role-teal"><title>Orders – Postgres</title></polyline><polyline points="274.5,43 275.573,44.294 278.72,45.5 283.726,46.536 290.25,47.33 297.847,47.83 306,48 314.153,47.83 321.75,47.33 328.274,46.536 333.28,45.5 336.427,44.294 337.5,43" class="chartlet-diagram-rim"/><text x="306" y="60" text-anchor="middle" class="chartlet-seq-label">Orders</text><text x="306" y="75" text-anchor="middle" class="chartlet-seq-sublabel">Postgres</text></g></svg><label class="chartlet-hotspot" id="chartlet-d685021f3b1bceed-m-hs-0" for="chartlet-d685021f3b1bceed-focus-0"></label><label class="chartlet-hotspot" id="chartlet-d685021f3b1bceed-m-hs-1" for="chartlet-d685021f3b1bceed-focus-1"></label><label class="chartlet-hotspot" id="chartlet-d685021f3b1bceed-m-hs-2" for="chartlet-d685021f3b1bceed-focus-2"></label><label class="chartlet-hotspot" id="chartlet-d685021f3b1bceed-m-hs-3" for="chartlet-d685021f3b1bceed-focus-3"></label></div></div><p class="chartlet-source">Source: Illustrative reference architecture</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Loading the cart</caption><thead><tr><th scope="col">No.</th><th scope="col">From</th><th scope="col">To</th><th scope="col">Message</th><th scope="col">Kind</th></tr></thead><tbody><tr><th scope="row">1</th><td>Browser</td><td>Web shop</td><td>GET /cart</td><td>call</td></tr><tr><th scope="row">2</th><td>Web shop</td><td>Shop API</td><td>Load the cart for this session</td><td>call</td></tr><tr><th scope="row">3</th><td>Shop API</td><td>Orders</td><td>SELECT items</td><td>call</td></tr><tr><th scope="row">4</th><td>Orders</td><td>Shop API</td><td>rows</td><td>reply</td></tr><tr><th scope="row">5</th><td>Shop API</td><td>Shop API</td><td>Price and tax check</td><td>call</td></tr><tr><th scope="row">6</th><td>Shop API</td><td>Web shop</td><td>Cart JSON</td><td>reply</td></tr><tr><th scope="row">7</th><td>Web shop</td><td>Browser</td><td>Page</td><td>reply</td></tr></tbody></table></details></figure></div>