chartlet 0.22.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<div class="chartlet-wrapper"><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-2d8256919eba870e .chartlet-f{opacity:.18}#chartlet-2d8256919eba870e-hs-1{left:11.797%;top:36.641%;width:8.125%;height:6.158%}#chartlet-2d8256919eba870e-hs-2{left:7.969%;top:58.457%;width:8.125%;height:4.433%}#chartlet-2d8256919eba870e-hs-0{left:72.422%;top:10.099%;width:8.125%;height:7.635%}#chartlet-2d8256919eba870e-hs-3{left:73.594%;top:56.98%;width:8.125%;height:7.389%}#chartlet-2d8256919eba870e-hs-4{left:83.906%;top:58.457%;width:8.125%;height:4.433%}#chartlet-2d8256919eba870e-hs-5{left:83.906%;top:76.355%;width:8.125%;height:4.433%}#chartlet-2d8256919eba870e-hs-6{left:79.922%;top:36.641%;width:8.125%;height:6.158%}.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-1:checked) #chartlet-2d8256919eba870e .chartlet-f-1{opacity:1}.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-1:checked) #chartlet-2d8256919eba870e .chartlet-n-1 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-1:checked) #chartlet-2d8256919eba870e .chartlet-n-1 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-2:checked) #chartlet-2d8256919eba870e .chartlet-f-2{opacity:1}.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-2:checked) #chartlet-2d8256919eba870e .chartlet-n-2 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-2:checked) #chartlet-2d8256919eba870e .chartlet-n-2 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-0:checked) #chartlet-2d8256919eba870e .chartlet-f-0{opacity:1}.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-0:checked) #chartlet-2d8256919eba870e .chartlet-n-0 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-0:checked) #chartlet-2d8256919eba870e .chartlet-n-0 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-3:checked) #chartlet-2d8256919eba870e .chartlet-f-3{opacity:1}.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-3:checked) #chartlet-2d8256919eba870e .chartlet-n-3 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-3:checked) #chartlet-2d8256919eba870e .chartlet-n-3 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-4:checked) #chartlet-2d8256919eba870e .chartlet-f-4{opacity:1}.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-4:checked) #chartlet-2d8256919eba870e .chartlet-n-4 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-4:checked) #chartlet-2d8256919eba870e .chartlet-n-4 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-5:checked) #chartlet-2d8256919eba870e .chartlet-f-5{opacity:1}.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-5:checked) #chartlet-2d8256919eba870e .chartlet-n-5 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-5:checked) #chartlet-2d8256919eba870e .chartlet-n-5 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-6:checked) #chartlet-2d8256919eba870e .chartlet-f-6{opacity:1}.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-6:checked) #chartlet-2d8256919eba870e .chartlet-n-6 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-2d8256919eba870e-focus-6:checked) #chartlet-2d8256919eba870e .chartlet-n-6 .chartlet-seq-box{stroke-width:3}</style><details class="chartlet-focus"><summary>Focus</summary><fieldset><label><input type="radio" name="chartlet-2d8256919eba870e-focus" checked> Show all</label><label><input type="radio" name="chartlet-2d8256919eba870e-focus" class="chartlet-focus-node" id="chartlet-2d8256919eba870e-focus-1"> Orders</label><label><input type="radio" name="chartlet-2d8256919eba870e-focus" class="chartlet-focus-node" id="chartlet-2d8256919eba870e-focus-2"> Legacy ERP</label><label><input type="radio" name="chartlet-2d8256919eba870e-focus" class="chartlet-focus-node" id="chartlet-2d8256919eba870e-focus-0"> Web shop</label><label><input type="radio" name="chartlet-2d8256919eba870e-focus" class="chartlet-focus-node" id="chartlet-2d8256919eba870e-focus-3"> Orders DB</label><label><input type="radio" name="chartlet-2d8256919eba870e-focus" class="chartlet-focus-node" id="chartlet-2d8256919eba870e-focus-4"> Event bus</label><label><input type="radio" name="chartlet-2d8256919eba870e-focus" class="chartlet-focus-node" id="chartlet-2d8256919eba870e-focus-5"> Billing</label><label><input type="radio" name="chartlet-2d8256919eba870e-focus" class="chartlet-focus-node" id="chartlet-2d8256919eba870e-focus-6"> Orders</label></fieldset></details><figure class="chartlet-figure" data-viz="chart"><figcaption>The orders platform: today and as targeted</figcaption><div class="chartlet-stage"><svg xmlns="http://www.w3.org/2000/svg" width="1280" height="812" viewBox="0 0 1280 812" id="chartlet-2d8256919eba870e" role="img" aria-labelledby="chartlet-2d8256919eba870e-title chartlet-2d8256919eba870e-description" class="chartlet-root"><title id="chartlet-2d8256919eba870e-title">The orders platform: today and as targeted</title><desc id="chartlet-2d8256919eba870e-description">Architecture change from Today to Target: 8 changes. Added: Event bus; Billing. Removed: Legacy ERP. Changed: Orders (technology: Java → Kotlin). Moved: Orders (from Data center to Cloud region). Rewired: Orders → Legacy ERP (removed); Orders → Event bus (added); Event bus → Billing (added).</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-2d8256919eba870e .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-2d8256919eba870e .chartlet-label,#chartlet-2d8256919eba870e .chartlet-tick,#chartlet-2d8256919eba870e .chartlet-value,#chartlet-2d8256919eba870e .chartlet-value-inverse,#chartlet-2d8256919eba870e .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-2d8256919eba870e .chartlet-value,#chartlet-2d8256919eba870e .chartlet-value-inverse{font-weight:600}#chartlet-2d8256919eba870e .chartlet-value{fill:var(--chartlet-text)}#chartlet-2d8256919eba870e .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-2d8256919eba870e .chartlet-axis-title{font-weight:600}#chartlet-2d8256919eba870e .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-2d8256919eba870e .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-2d8256919eba870e .chartlet-bar,#chartlet-2d8256919eba870e .chartlet-point{fill:var(--chartlet-accent)}#chartlet-2d8256919eba870e .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-2d8256919eba870e .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-2d8256919eba870e .chartlet-role-blue{fill:var(--chartlet-role-blue-fill);stroke:var(--chartlet-role-blue)}#chartlet-2d8256919eba870e .chartlet-role-green{fill:var(--chartlet-role-green-fill);stroke:var(--chartlet-role-green)}#chartlet-2d8256919eba870e .chartlet-role-amber{fill:var(--chartlet-role-amber-fill);stroke:var(--chartlet-role-amber)}#chartlet-2d8256919eba870e .chartlet-role-teal{fill:var(--chartlet-role-teal-fill);stroke:var(--chartlet-role-teal)}#chartlet-2d8256919eba870e .chartlet-role-violet{fill:var(--chartlet-role-violet-fill);stroke:var(--chartlet-role-violet)}#chartlet-2d8256919eba870e .chartlet-role-gray{fill:var(--chartlet-role-gray-fill);stroke:var(--chartlet-role-gray)}#chartlet-2d8256919eba870e .chartlet-role-red{fill:var(--chartlet-role-red-fill);stroke:var(--chartlet-role-red)}#chartlet-2d8256919eba870e .chartlet-diagram-rim{fill:none;stroke:var(--chartlet-role-teal);stroke-width:1.5}#chartlet-2d8256919eba870e .chartlet-diagram-shadow{fill:var(--chartlet-shadow);stroke:none;rx:7px}#chartlet-2d8256919eba870e .chartlet-diagram-chip{fill:var(--chartlet-background);stroke:var(--chartlet-grid);stroke-width:1;rx:4px}#chartlet-2d8256919eba870e .chartlet-diagram-chip-text{font-size:12px;fill:var(--chartlet-text)}#chartlet-2d8256919eba870e .chartlet-diagram-badge{fill:var(--chartlet-accent);stroke:var(--chartlet-background);stroke-width:2}#chartlet-2d8256919eba870e .chartlet-diagram-badge-text{font-size:10px;font-weight:700;fill:var(--chartlet-background)}#chartlet-2d8256919eba870e .chartlet-flow-node{stroke-width:1.5;stroke-linejoin:round;rx:7px}#chartlet-2d8256919eba870e .chartlet-flow-start{stroke-width:2}#chartlet-2d8256919eba870e .chartlet-flow-end{stroke-width:3}#chartlet-2d8256919eba870e .chartlet-flow-external{stroke-dasharray:5 3}#chartlet-2d8256919eba870e .chartlet-flow-inner{stroke:var(--chartlet-role-blue);stroke-width:1}#chartlet-2d8256919eba870e .chartlet-flow-label{font-size:13px;font-weight:600;fill:var(--chartlet-text)}#chartlet-2d8256919eba870e .chartlet-flow-sublabel{font-size:11px;fill:var(--chartlet-muted)}#chartlet-2d8256919eba870e .chartlet-flow-edge{fill:none;stroke:var(--chartlet-zero);stroke-width:1.4;stroke-linejoin:round}#chartlet-2d8256919eba870e .chartlet-flow-dashed{stroke-dasharray:5 4}#chartlet-2d8256919eba870e .chartlet-flow-dotted{stroke-dasharray:1 4;stroke-linecap:round}#chartlet-2d8256919eba870e .chartlet-flow-main{stroke:var(--chartlet-accent);stroke-width:2.2}#chartlet-2d8256919eba870e .chartlet-flow-head{fill:var(--chartlet-zero);stroke:var(--chartlet-zero);stroke-width:1;stroke-linejoin:round}#chartlet-2d8256919eba870e .chartlet-flow-main-head{fill:var(--chartlet-accent);stroke:var(--chartlet-accent)}#chartlet-2d8256919eba870e .chartlet-flow-lane{fill:var(--chartlet-lane);stroke:var(--chartlet-grid);stroke-width:1}#chartlet-2d8256919eba870e .chartlet-flow-lane-alt{fill:var(--chartlet-background)}#chartlet-2d8256919eba870e .chartlet-flow-lane-head{fill:var(--chartlet-lane-head);stroke:none}#chartlet-2d8256919eba870e .chartlet-flow-lane-label{font-size:11px;font-weight:650;fill:var(--chartlet-muted);letter-spacing:.04em}#chartlet-2d8256919eba870e .chartlet-flow-group{fill:var(--chartlet-accent);fill-opacity:.04;stroke:var(--chartlet-zero);stroke-width:1;stroke-dasharray:4 3;rx:10px}#chartlet-2d8256919eba870e .chartlet-flow-group-label{font-size:11px;font-weight:600;fill:var(--chartlet-muted)}#chartlet-2d8256919eba870e .chartlet-arch-head{fill:var(--chartlet-role-violet-fill);stroke:var(--chartlet-role-violet);stroke-width:1.5}#chartlet-2d8256919eba870e .chartlet-arch-dot{fill:var(--chartlet-role-blue);stroke:none}#chartlet-2d8256919eba870e .chartlet-delta-heading{font-size:14px;font-weight:700;fill:var(--chartlet-text)}#chartlet-2d8256919eba870e .chartlet-delta-entry{font-size:12px;fill:var(--chartlet-text)}#chartlet-2d8256919eba870e .chartlet-delta-sign{font-size:14px;font-weight:700;fill:var(--chartlet-text)}#chartlet-2d8256919eba870e .chartlet-delta-rule{stroke:var(--chartlet-grid);stroke-width:1;stroke-dasharray:3 4}</style><text x="24" y="32" text-anchor="start" class="chartlet-delta-heading">Before: Today</text><rect x="90" y="269.528" width="177" height="253.146" class="chartlet-flow-group"/><text x="98" y="282.528" text-anchor="start" class="chartlet-flow-group-label">Data center</text><rect x="283" y="54" width="275" height="614" class="chartlet-flow-group"/><text x="291" y="67" text-anchor="start" class="chartlet-flow-group-label">Cloud region</text><g class="chartlet-f chartlet-f-0 chartlet-f-1"><polyline points="335,144 335,226.247 203,226.247 203,289.528" class="chartlet-flow-edge"><title>Web shop → Orders: places orders [HTTPS]</title></polyline><polyline points="199.5,289.528 203,297.528 206.5,289.528 199.5,289.528" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><polyline points="191,347.528 191,429.775 154,429.775 154,466.674" class="chartlet-flow-edge"><title>Orders → Legacy ERP: syncs stock [SOAP]</title></polyline><polyline points="150.5,466.674 154,474.674 157.5,466.674 150.5,466.674" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-1 chartlet-f-3"><polyline points="215,347.528 215,429.775 350,429.775 350,454.674" class="chartlet-flow-edge"><title>Orders → Orders DB: reads and writes [SQL]</title></polyline><polyline points="346.5,454.674 350,462.674 353.5,454.674 346.5,454.674" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1 chartlet-f-6"></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1 chartlet-f-2 chartlet-f-3"></g><g class="chartlet-f chartlet-n-2 chartlet-f-1 chartlet-f-2"></g><g class="chartlet-f chartlet-n-3 chartlet-f-1 chartlet-f-3 chartlet-f-6"></g><g class="chartlet-f chartlet-n-4 chartlet-f-4 chartlet-f-5 chartlet-f-6"></g><g class="chartlet-f chartlet-n-5 chartlet-f-4 chartlet-f-5"></g><g class="chartlet-f chartlet-n-6 chartlet-f-0 chartlet-f-3 chartlet-f-4 chartlet-f-6"></g><g class="chartlet-f chartlet-f-0 chartlet-f-1"><rect x="239.64" y="149" width="91.36" height="36" class="chartlet-diagram-chip"/><text x="326" y="163" text-anchor="end" class="chartlet-diagram-chip-text">places orders</text><text x="326" y="178" text-anchor="end" class="chartlet-diagram-chip-text">[HTTPS]</text></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><rect x="105.96" y="352.528" width="81.04" height="36" class="chartlet-diagram-chip"/><text x="182" y="366.528" text-anchor="end" class="chartlet-diagram-chip-text">syncs stock</text><text x="182" y="381.528" text-anchor="end" class="chartlet-diagram-chip-text">[SOAP]</text></g><g class="chartlet-f chartlet-f-1 chartlet-f-3"><rect x="219" y="352.528" width="112.72" height="36" class="chartlet-diagram-chip"/><text x="224" y="366.528" text-anchor="start" class="chartlet-diagram-chip-text">reads and writes</text><text x="224" y="381.528" text-anchor="start" class="chartlet-diagram-chip-text">[SQL]</text></g><g class="chartlet-f chartlet-f-0 chartlet-f-6"></g><g class="chartlet-f chartlet-f-4 chartlet-f-6"></g><g class="chartlet-f chartlet-f-4 chartlet-f-5"></g><g class="chartlet-f chartlet-f-3 chartlet-f-6"></g><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1 chartlet-f-6"><rect x="295" y="84.5" width="104" height="62" class="chartlet-diagram-shadow"/><rect x="295" y="82" width="104" height="62" class="chartlet-flow-node chartlet-role-blue"><title>Web shop – React</title></rect><line x1="295" y1="94" x2="399" y2="94" class="chartlet-flow-inner"/><circle cx="303" cy="88" r="1.8" class="chartlet-arch-dot"/><circle cx="309" cy="88" r="1.8" class="chartlet-arch-dot"/><circle cx="315" cy="88" r="1.8" class="chartlet-arch-dot"/><text x="347" y="116.5" text-anchor="middle" class="chartlet-flow-label">Web shop</text><text x="347" y="130.5" text-anchor="middle" class="chartlet-flow-sublabel">React</text></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1 chartlet-f-2 chartlet-f-3"><rect x="151" y="300.028" width="104" height="50" class="chartlet-diagram-shadow"/><rect x="151" y="297.528" width="104" height="50" class="chartlet-flow-node chartlet-role-blue"><title>Orders – Kotlin</title></rect><text x="203" y="320.028" text-anchor="middle" class="chartlet-flow-label">Orders</text><text x="203" y="334.028" text-anchor="middle" class="chartlet-flow-sublabel">Java</text></g><g class="chartlet-f chartlet-n-2 chartlet-f-1 chartlet-f-2 chartlet-flow-role-deprecated"><rect x="102" y="477.174" width="104" height="36" class="chartlet-diagram-shadow"/><rect x="102" y="474.674" width="104" height="36" class="chartlet-flow-node chartlet-flow-external chartlet-role-gray"><title>Legacy ERP</title></rect><text x="154" y="497.174" text-anchor="middle" class="chartlet-flow-label">Legacy ERP</text></g><g class="chartlet-f chartlet-n-3 chartlet-f-1 chartlet-f-3 chartlet-f-6"><polyline points="310,470.174 310,520.174 311.772,521.468 316.967,522.674 325.23,523.71 336,524.504 348.541,525.004 362,525.174 375.459,525.004 388,524.504 398.77,523.71 407.033,522.674 412.228,521.468 414,520.174 414,470.174 412.228,468.88 407.033,467.674 398.77,466.639 388,465.844 375.459,465.345 362,465.174 348.541,465.345 336,465.844 325.23,466.639 316.967,467.674 311.772,468.88 310,470.174 310,470.174" class="chartlet-diagram-shadow"/><polyline points="310,467.674 310,517.674 311.772,518.968 316.967,520.174 325.23,521.21 336,522.004 348.541,522.504 362,522.674 375.459,522.504 388,522.004 398.77,521.21 407.033,520.174 412.228,518.968 414,517.674 414,467.674 412.228,466.38 407.033,465.174 398.77,464.139 388,463.344 375.459,462.845 362,462.674 348.541,462.845 336,463.344 325.23,464.139 316.967,465.174 311.772,466.38 310,467.674 310,467.674" class="chartlet-flow-node chartlet-role-teal"><title>Orders DB – PostgreSQL</title></polyline><polyline points="310,467.674 311.772,468.968 316.967,470.174 325.23,471.21 336,472.004 348.541,472.504 362,472.674 375.459,472.504 388,472.004 398.77,471.21 407.033,470.174 412.228,468.968 414,467.674" class="chartlet-diagram-rim"/><text x="362" y="493.174" text-anchor="middle" class="chartlet-flow-label">Orders DB</text><text x="362" y="507.174" text-anchor="middle" class="chartlet-flow-sublabel">PostgreSQL</text></g><circle cx="153" cy="299.528" r="8" class="chartlet-diagram-badge"><title>changed</title></circle><text x="153" y="303.028" text-anchor="middle" class="chartlet-diagram-badge-text">~</text><circle cx="172" cy="299.528" r="8" class="chartlet-diagram-badge"><title>moved</title></circle><text x="172" y="303.028" text-anchor="middle" class="chartlet-diagram-badge-text">→</text><g class="chartlet-flow-role-deprecated"><circle cx="104" cy="476.674" r="8" class="chartlet-diagram-badge"/><text x="104" y="480.174" text-anchor="middle" class="chartlet-diagram-badge-text">−</text></g><text x="656" y="32" text-anchor="start" class="chartlet-delta-heading">After: Target</text><rect x="915" y="54" width="275" height="614" class="chartlet-flow-group"/><text x="923" y="67" text-anchor="start" class="chartlet-flow-group-label">Cloud region</text><g class="chartlet-f chartlet-f-0 chartlet-f-6"><polyline points="991,144 991,226.247 1075,226.247 1075,289.528" class="chartlet-flow-edge"><title>Web shop → Orders: places orders [HTTPS]</title></polyline><polyline points="1071.5,289.528 1075,297.528 1078.5,289.528 1071.5,289.528" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-4 chartlet-f-6"><polyline points="1087,347.528 1087,429.775 1126,429.775 1126,466.674" class="chartlet-flow-edge"><title>Orders → Event bus: publishes order events</title></polyline><polyline points="1122.5,466.674 1126,474.674 1129.5,466.674 1122.5,466.674" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-4 chartlet-f-5"><polyline points="1126,510.674 1126,612" class="chartlet-flow-edge"><title>Event bus → Billing: delivers events</title></polyline><polyline points="1122.5,612 1126,620 1129.5,612 1122.5,612" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-f-3 chartlet-f-6"><polyline points="1063,347.528 1063,429.775 1006,429.775 1006,454.674" class="chartlet-flow-edge"><title>Orders → Orders DB: reads and writes [SQL]</title></polyline><polyline points="1002.5,454.674 1006,462.674 1009.5,454.674 1002.5,454.674" class="chartlet-flow-head"/></g><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1 chartlet-f-6"></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1 chartlet-f-2 chartlet-f-3"></g><g class="chartlet-f chartlet-n-2 chartlet-f-1 chartlet-f-2"></g><g class="chartlet-f chartlet-n-3 chartlet-f-1 chartlet-f-3 chartlet-f-6"></g><g class="chartlet-f chartlet-n-4 chartlet-f-4 chartlet-f-5 chartlet-f-6"></g><g class="chartlet-f chartlet-n-5 chartlet-f-4 chartlet-f-5"></g><g class="chartlet-f chartlet-n-6 chartlet-f-0 chartlet-f-3 chartlet-f-4 chartlet-f-6"></g><g class="chartlet-f chartlet-f-0 chartlet-f-1"></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"></g><g class="chartlet-f chartlet-f-1 chartlet-f-3"></g><g class="chartlet-f chartlet-f-0 chartlet-f-6"><rect x="995" y="149" width="91.36" height="36" class="chartlet-diagram-chip"/><text x="1000" y="163" text-anchor="start" class="chartlet-diagram-chip-text">places orders</text><text x="1000" y="178" text-anchor="start" class="chartlet-diagram-chip-text">[HTTPS]</text></g><g class="chartlet-f chartlet-f-4 chartlet-f-6"><rect x="1091" y="352.528" width="145.84" height="21" class="chartlet-diagram-chip"/><text x="1096" y="366.528" text-anchor="start" class="chartlet-diagram-chip-text">publishes order events</text></g><g class="chartlet-f chartlet-f-4 chartlet-f-5"><rect x="1130" y="515.674" width="101.68" height="21" class="chartlet-diagram-chip"/><text x="1135" y="529.674" text-anchor="start" class="chartlet-diagram-chip-text">delivers events</text></g><g class="chartlet-f chartlet-f-3 chartlet-f-6"><rect x="946.28" y="391.528" width="112.72" height="36" class="chartlet-diagram-chip"/><text x="1054" y="405.528" text-anchor="end" class="chartlet-diagram-chip-text">reads and writes</text><text x="1054" y="420.528" text-anchor="end" class="chartlet-diagram-chip-text">[SQL]</text></g><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1 chartlet-f-6"><rect x="927" y="84.5" width="104" height="62" class="chartlet-diagram-shadow"/><rect x="927" y="82" width="104" height="62" class="chartlet-flow-node chartlet-role-blue"><title>Web shop – React</title></rect><line x1="927" y1="94" x2="1031" y2="94" class="chartlet-flow-inner"/><circle cx="935" cy="88" r="1.8" class="chartlet-arch-dot"/><circle cx="941" cy="88" r="1.8" class="chartlet-arch-dot"/><circle cx="947" cy="88" r="1.8" class="chartlet-arch-dot"/><text x="979" y="116.5" text-anchor="middle" class="chartlet-flow-label">Web shop</text><text x="979" y="130.5" text-anchor="middle" class="chartlet-flow-sublabel">React</text></g><g class="chartlet-f chartlet-n-3 chartlet-f-1 chartlet-f-3 chartlet-f-6"><polyline points="942,470.174 942,520.174 943.772,521.468 948.967,522.674 957.23,523.71 968,524.504 980.541,525.004 994,525.174 1007.459,525.004 1020,524.504 1030.77,523.71 1039.033,522.674 1044.228,521.468 1046,520.174 1046,470.174 1044.228,468.88 1039.033,467.674 1030.77,466.639 1020,465.844 1007.459,465.345 994,465.174 980.541,465.345 968,465.844 957.23,466.639 948.967,467.674 943.772,468.88 942,470.174 942,470.174" class="chartlet-diagram-shadow"/><polyline points="942,467.674 942,517.674 943.772,518.968 948.967,520.174 957.23,521.21 968,522.004 980.541,522.504 994,522.674 1007.459,522.504 1020,522.004 1030.77,521.21 1039.033,520.174 1044.228,518.968 1046,517.674 1046,467.674 1044.228,466.38 1039.033,465.174 1030.77,464.139 1020,463.344 1007.459,462.845 994,462.674 980.541,462.845 968,463.344 957.23,464.139 948.967,465.174 943.772,466.38 942,467.674 942,467.674" class="chartlet-flow-node chartlet-role-teal"><title>Orders DB – PostgreSQL</title></polyline><polyline points="942,467.674 943.772,468.968 948.967,470.174 957.23,471.21 968,472.004 980.541,472.504 994,472.674 1007.459,472.504 1020,472.004 1030.77,471.21 1039.033,470.174 1044.228,468.968 1046,467.674" class="chartlet-diagram-rim"/><text x="994" y="493.174" text-anchor="middle" class="chartlet-flow-label">Orders DB</text><text x="994" y="507.174" text-anchor="middle" class="chartlet-flow-sublabel">PostgreSQL</text></g><g class="chartlet-f chartlet-n-4 chartlet-f-4 chartlet-f-5 chartlet-f-6 chartlet-flow-role-planned"><rect x="1078" y="473.174" width="104" height="36" class="chartlet-diagram-shadow"/><rect x="1078" y="470.674" width="104" height="36" class="chartlet-flow-node chartlet-role-violet"/><rect x="1074" y="477.174" width="104" height="36" class="chartlet-diagram-shadow"/><rect x="1074" y="474.674" width="104" height="36" class="chartlet-flow-node chartlet-role-violet"><title>Event bus</title></rect><text x="1126" y="497.174" text-anchor="middle" class="chartlet-flow-label">Event bus</text></g><g class="chartlet-f chartlet-n-5 chartlet-f-4 chartlet-f-5 chartlet-flow-role-planned"><rect x="1074" y="622.5" width="104" height="36" class="chartlet-diagram-shadow"/><rect x="1074" y="620" width="104" height="36" class="chartlet-flow-node chartlet-role-blue"><title>Billing</title></rect><text x="1126" y="642.5" text-anchor="middle" class="chartlet-flow-label">Billing</text></g><g class="chartlet-f chartlet-n-6 chartlet-f-0 chartlet-f-3 chartlet-f-4 chartlet-f-6"><rect x="1023" y="300.028" width="104" height="50" class="chartlet-diagram-shadow"/><rect x="1023" y="297.528" width="104" height="50" class="chartlet-flow-node chartlet-role-blue"><title>Orders – Kotlin</title></rect><text x="1075" y="320.028" text-anchor="middle" class="chartlet-flow-label">Orders</text><text x="1075" y="334.028" text-anchor="middle" class="chartlet-flow-sublabel">Kotlin</text></g><g class="chartlet-flow-role-planned"><circle cx="1076" cy="476.674" r="8" class="chartlet-diagram-badge"/><text x="1076" y="480.174" text-anchor="middle" class="chartlet-diagram-badge-text">+</text></g><g class="chartlet-flow-role-planned"><circle cx="1076" cy="622" r="8" class="chartlet-diagram-badge"/><text x="1076" y="625.5" text-anchor="middle" class="chartlet-diagram-badge-text">+</text></g><circle cx="1025" cy="299.528" r="8" class="chartlet-diagram-badge"><title>changed</title></circle><text x="1025" y="303.028" text-anchor="middle" class="chartlet-diagram-badge-text">~</text><circle cx="1044" cy="299.528" r="8" class="chartlet-diagram-badge"><title>moved</title></circle><text x="1044" y="303.028" text-anchor="middle" class="chartlet-diagram-badge-text">→</text><line x1="640" y1="16" x2="640" y2="684" class="chartlet-delta-rule"/><text x="24" y="710" text-anchor="start" class="chartlet-delta-heading">Changes</text><text x="32" y="732" text-anchor="middle" class="chartlet-delta-sign">+</text><text x="48" y="732" text-anchor="start" class="chartlet-delta-entry">Added: Event bus; Billing.</text><text x="32" y="748" text-anchor="middle" class="chartlet-delta-sign">−</text><text x="48" y="748" text-anchor="start" class="chartlet-delta-entry">Removed: Legacy ERP.</text><text x="32" y="764" text-anchor="middle" class="chartlet-delta-sign">~</text><text x="48" y="764" text-anchor="start" class="chartlet-delta-entry">Changed: Orders (technology: Java → Kotlin).</text><text x="32" y="780" text-anchor="middle" class="chartlet-delta-sign">→</text><text x="48" y="780" text-anchor="start" class="chartlet-delta-entry">Moved: Orders (from Data center to Cloud region).</text><text x="32" y="796" text-anchor="middle" class="chartlet-delta-sign">↔</text><text x="48" y="796" text-anchor="start" class="chartlet-delta-entry">Rewired: Orders → Legacy ERP (removed); Orders → Event bus (added); Event bus → Billing (added).</text></svg><label class="chartlet-hotspot" id="chartlet-2d8256919eba870e-hs-1" for="chartlet-2d8256919eba870e-focus-1"></label><label class="chartlet-hotspot" id="chartlet-2d8256919eba870e-hs-2" for="chartlet-2d8256919eba870e-focus-2"></label><label class="chartlet-hotspot" id="chartlet-2d8256919eba870e-hs-0" for="chartlet-2d8256919eba870e-focus-0"></label><label class="chartlet-hotspot" id="chartlet-2d8256919eba870e-hs-3" for="chartlet-2d8256919eba870e-focus-3"></label><label class="chartlet-hotspot" id="chartlet-2d8256919eba870e-hs-4" for="chartlet-2d8256919eba870e-focus-4"></label><label class="chartlet-hotspot" id="chartlet-2d8256919eba870e-hs-5" for="chartlet-2d8256919eba870e-focus-5"></label><label class="chartlet-hotspot" id="chartlet-2d8256919eba870e-hs-6" for="chartlet-2d8256919eba870e-focus-6"></label></div><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for The orders platform: today and as targeted</caption><thead><tr><th scope="col">Change</th><th scope="col">Concerns</th><th scope="col">Detail</th></tr></thead><tbody><tr><th scope="row">+ added</th><td>Event bus</td><td></td></tr><tr><th scope="row">+ added</th><td>Billing</td><td></td></tr><tr><th scope="row">− removed</th><td>Legacy ERP</td><td></td></tr><tr><th scope="row">~ changed</th><td>Orders</td><td>technology: Java → Kotlin</td></tr><tr><th scope="row">→ moved</th><td>Orders</td><td>from Data center to Cloud region</td></tr><tr><th scope="row">↔ rewired</th><td>Orders → Legacy ERP</td><td>removed</td></tr><tr><th scope="row">↔ rewired</th><td>Orders → Event bus</td><td>added</td></tr><tr><th scope="row">↔ rewired</th><td>Event bus → Billing</td><td>added</td></tr></tbody></table></details></figure></div>