chartlet 0.13.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-3cbfda263e8b31ae .chartlet-f{opacity:.18}#chartlet-3cbfda263e8b31ae-hs-0{left:7.9%;top:5.672%;width:9%;height:7.164%}#chartlet-3cbfda263e8b31ae-hs-1{left:25.888%;top:5.672%;width:10.625%;height:7.164%}#chartlet-3cbfda263e8b31ae-hs-2{left:44.875%;top:5.672%;width:10.25%;height:7.164%}#chartlet-3cbfda263e8b31ae-hs-3{left:62.862%;top:5.672%;width:11.875%;height:7.164%}#chartlet-3cbfda263e8b31ae-hs-4{left:81.163%;top:5.672%;width:12.875%;height:7.164%}.chartlet-wrapper:has(#chartlet-3cbfda263e8b31ae-focus-0:checked) #chartlet-3cbfda263e8b31ae .chartlet-f-0{opacity:1}.chartlet-wrapper:has(#chartlet-3cbfda263e8b31ae-focus-0:checked) #chartlet-3cbfda263e8b31ae .chartlet-n-0 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-3cbfda263e8b31ae-focus-0:checked) #chartlet-3cbfda263e8b31ae .chartlet-n-0 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-3cbfda263e8b31ae-focus-1:checked) #chartlet-3cbfda263e8b31ae .chartlet-f-1{opacity:1}.chartlet-wrapper:has(#chartlet-3cbfda263e8b31ae-focus-1:checked) #chartlet-3cbfda263e8b31ae .chartlet-n-1 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-3cbfda263e8b31ae-focus-1:checked) #chartlet-3cbfda263e8b31ae .chartlet-n-1 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-3cbfda263e8b31ae-focus-2:checked) #chartlet-3cbfda263e8b31ae .chartlet-f-2{opacity:1}.chartlet-wrapper:has(#chartlet-3cbfda263e8b31ae-focus-2:checked) #chartlet-3cbfda263e8b31ae .chartlet-n-2 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-3cbfda263e8b31ae-focus-2:checked) #chartlet-3cbfda263e8b31ae .chartlet-n-2 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-3cbfda263e8b31ae-focus-3:checked) #chartlet-3cbfda263e8b31ae .chartlet-f-3{opacity:1}.chartlet-wrapper:has(#chartlet-3cbfda263e8b31ae-focus-3:checked) #chartlet-3cbfda263e8b31ae .chartlet-n-3 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-3cbfda263e8b31ae-focus-3:checked) #chartlet-3cbfda263e8b31ae .chartlet-n-3 .chartlet-seq-box{stroke-width:3}.chartlet-wrapper:has(#chartlet-3cbfda263e8b31ae-focus-4:checked) #chartlet-3cbfda263e8b31ae .chartlet-f-4{opacity:1}.chartlet-wrapper:has(#chartlet-3cbfda263e8b31ae-focus-4:checked) #chartlet-3cbfda263e8b31ae .chartlet-n-4 .chartlet-flow-node,.chartlet-wrapper:has(#chartlet-3cbfda263e8b31ae-focus-4:checked) #chartlet-3cbfda263e8b31ae .chartlet-n-4 .chartlet-seq-box{stroke-width:3}</style><details class="chartlet-focus"><summary>Focus</summary><fieldset><label><input type="radio" name="chartlet-3cbfda263e8b31ae-focus" checked> Show all</label><label><input type="radio" name="chartlet-3cbfda263e8b31ae-focus" class="chartlet-focus-node" id="chartlet-3cbfda263e8b31ae-focus-0"> Reader</label><label><input type="radio" name="chartlet-3cbfda263e8b31ae-focus" class="chartlet-focus-node" id="chartlet-3cbfda263e8b31ae-focus-1"> Item API</label><label><input type="radio" name="chartlet-3cbfda263e8b31ae-focus" class="chartlet-focus-node" id="chartlet-3cbfda263e8b31ae-focus-2"> Cache</label><label><input type="radio" name="chartlet-3cbfda263e8b31ae-focus" class="chartlet-focus-node" id="chartlet-3cbfda263e8b31ae-focus-3"> Item store</label><label><input type="radio" name="chartlet-3cbfda263e8b31ae-focus" class="chartlet-focus-node" id="chartlet-3cbfda263e8b31ae-focus-4"> Change feed</label></fieldset></details><figure class="chartlet-figure" data-viz="chart"><figcaption>Reading an item through the cache</figcaption><div class="chartlet-stage"><svg xmlns="http://www.w3.org/2000/svg" width="800" height="670" viewBox="0 0 800 670" id="chartlet-3cbfda263e8b31ae" role="img" aria-labelledby="chartlet-3cbfda263e8b31ae-title chartlet-3cbfda263e8b31ae-description" class="chartlet-root"><title id="chartlet-3cbfda263e8b31ae-title">Reading an item through the cache</title><desc id="chartlet-3cbfda263e8b31ae-description">Sequence diagram with 5 participants: Reader (actor), Item API, Cache (database), Item store (database) and Change feed (queue). 10 messages, in order: 1. Reader to Item API: GET /items/42. 2. Item API to itself: check token. 3. Item API to Cache: get item:42. 4. Cache to Item API: hit (reply). 5. Cache to Item API: miss (reply). 6. Item API to Item store: SELECT item 42. 7. Item store to Item API: row (reply). 8. Item API to Cache: set item:42, 5 min (asynchronous). 9. Item API to Change feed: item.read (asynchronous). 10. Item API to Reader: 200 OK (reply). Fragment alt &quot;cached&quot; spans messages 4–8, else &quot;not cached&quot; from message 5.</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-3cbfda263e8b31ae .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-3cbfda263e8b31ae .chartlet-label,#chartlet-3cbfda263e8b31ae .chartlet-tick,#chartlet-3cbfda263e8b31ae .chartlet-value,#chartlet-3cbfda263e8b31ae .chartlet-value-inverse,#chartlet-3cbfda263e8b31ae .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-3cbfda263e8b31ae .chartlet-value,#chartlet-3cbfda263e8b31ae .chartlet-value-inverse{font-weight:600}#chartlet-3cbfda263e8b31ae .chartlet-value{fill:var(--chartlet-text)}#chartlet-3cbfda263e8b31ae .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-3cbfda263e8b31ae .chartlet-axis-title{font-weight:600}#chartlet-3cbfda263e8b31ae .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-3cbfda263e8b31ae .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-3cbfda263e8b31ae .chartlet-bar,#chartlet-3cbfda263e8b31ae .chartlet-point{fill:var(--chartlet-accent)}#chartlet-3cbfda263e8b31ae .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-3cbfda263e8b31ae .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-3cbfda263e8b31ae .chartlet-role-blue{fill:var(--chartlet-role-blue-fill);stroke:var(--chartlet-role-blue)}#chartlet-3cbfda263e8b31ae .chartlet-role-green{fill:var(--chartlet-role-green-fill);stroke:var(--chartlet-role-green)}#chartlet-3cbfda263e8b31ae .chartlet-role-amber{fill:var(--chartlet-role-amber-fill);stroke:var(--chartlet-role-amber)}#chartlet-3cbfda263e8b31ae .chartlet-role-teal{fill:var(--chartlet-role-teal-fill);stroke:var(--chartlet-role-teal)}#chartlet-3cbfda263e8b31ae .chartlet-role-violet{fill:var(--chartlet-role-violet-fill);stroke:var(--chartlet-role-violet)}#chartlet-3cbfda263e8b31ae .chartlet-role-gray{fill:var(--chartlet-role-gray-fill);stroke:var(--chartlet-role-gray)}#chartlet-3cbfda263e8b31ae .chartlet-role-red{fill:var(--chartlet-role-red-fill);stroke:var(--chartlet-role-red)}#chartlet-3cbfda263e8b31ae .chartlet-diagram-rim{fill:none;stroke:var(--chartlet-role-teal);stroke-width:1.5}#chartlet-3cbfda263e8b31ae .chartlet-diagram-shadow{fill:var(--chartlet-shadow);stroke:none;rx:7px}#chartlet-3cbfda263e8b31ae .chartlet-diagram-chip{fill:var(--chartlet-background);stroke:var(--chartlet-grid);stroke-width:1;rx:4px}#chartlet-3cbfda263e8b31ae .chartlet-diagram-chip-text{font-size:12px;fill:var(--chartlet-text)}#chartlet-3cbfda263e8b31ae .chartlet-diagram-badge{fill:var(--chartlet-accent);stroke:var(--chartlet-background);stroke-width:2}#chartlet-3cbfda263e8b31ae .chartlet-diagram-badge-text{font-size:10px;font-weight:700;fill:var(--chartlet-background)}#chartlet-3cbfda263e8b31ae .chartlet-seq-box{stroke-width:1.5;stroke-linejoin:round;rx:7px}#chartlet-3cbfda263e8b31ae .chartlet-seq-external{stroke-dasharray:5 3}#chartlet-3cbfda263e8b31ae .chartlet-seq-hit{fill:transparent;stroke:none}#chartlet-3cbfda263e8b31ae .chartlet-seq-actor{stroke:var(--chartlet-text);stroke-width:1.5;stroke-linecap:round}#chartlet-3cbfda263e8b31ae .chartlet-seq-actor-head{fill:var(--chartlet-background);stroke:var(--chartlet-text);stroke-width:1.5}#chartlet-3cbfda263e8b31ae .chartlet-seq-label{font-size:13px;font-weight:600;fill:var(--chartlet-text)}#chartlet-3cbfda263e8b31ae .chartlet-seq-sublabel{font-size:11px;fill:var(--chartlet-muted)}#chartlet-3cbfda263e8b31ae .chartlet-seq-lifeline{stroke:var(--chartlet-zero);stroke-width:1;stroke-dasharray:3 4}#chartlet-3cbfda263e8b31ae .chartlet-seq-activation{fill:var(--chartlet-node);stroke:var(--chartlet-accent);stroke-width:1;rx:2px}#chartlet-3cbfda263e8b31ae .chartlet-seq-message{fill:none;stroke:var(--chartlet-zero);stroke-width:1.4;stroke-linejoin:round}#chartlet-3cbfda263e8b31ae .chartlet-seq-reply{stroke-dasharray:5 4}#chartlet-3cbfda263e8b31ae .chartlet-seq-head{fill:var(--chartlet-zero);stroke:var(--chartlet-zero);stroke-width:1;stroke-linejoin:round}#chartlet-3cbfda263e8b31ae .chartlet-seq-head-open{fill:none;stroke:var(--chartlet-zero);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}#chartlet-3cbfda263e8b31ae .chartlet-seq-frame{fill:none;stroke:var(--chartlet-zero);stroke-width:1;rx:6px}#chartlet-3cbfda263e8b31ae .chartlet-seq-tab{fill:var(--chartlet-node);stroke:var(--chartlet-zero);stroke-width:1;rx:4px}#chartlet-3cbfda263e8b31ae .chartlet-seq-tag{font-size:11px;font-weight:650;fill:var(--chartlet-text)}#chartlet-3cbfda263e8b31ae .chartlet-seq-guard{font-size:11px;fill:var(--chartlet-muted);paint-order:stroke;stroke:var(--chartlet-background);stroke-width:3px;stroke-linejoin:round}#chartlet-3cbfda263e8b31ae .chartlet-seq-branch{stroke:var(--chartlet-zero);stroke-width:1;stroke-dasharray:5 4}</style><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1"><line x1="99.2" y1="86" x2="99.2" y2="654" class="chartlet-seq-lifeline"/></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1 chartlet-f-2 chartlet-f-3 chartlet-f-4"><line x1="249.6" y1="86" x2="249.6" y2="654" class="chartlet-seq-lifeline"/></g><g class="chartlet-f chartlet-n-2 chartlet-f-1 chartlet-f-2"><line x1="400" y1="86" x2="400" y2="654" class="chartlet-seq-lifeline"/></g><g class="chartlet-f chartlet-n-3 chartlet-f-1 chartlet-f-3"><line x1="550.4" y1="86" x2="550.4" y2="654" class="chartlet-seq-lifeline"/></g><g class="chartlet-f chartlet-n-4 chartlet-f-1 chartlet-f-4"><line x1="700.8" y1="86" x2="700.8" y2="654" class="chartlet-seq-lifeline"/></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1 chartlet-f-2 chartlet-f-3 chartlet-f-4"><rect x="244.6" y="135.368" width="10" height="499.579" class="chartlet-seq-activation"/></g><g class="chartlet-f chartlet-n-2 chartlet-f-1 chartlet-f-2"><rect x="395" y="248.105" width="10" height="72.947" class="chartlet-seq-activation"/></g><g class="chartlet-f chartlet-n-3 chartlet-f-1 chartlet-f-3"><rect x="545.4" y="438.211" width="10" height="46.421" class="chartlet-seq-activation"/></g><rect x="178.4" y="259.158" width="443.2" height="286.947" class="chartlet-seq-frame"/><rect x="178.4" y="259.158" width="27.62" height="16" class="chartlet-seq-tab"/><text x="184.4" y="271.158" text-anchor="start" class="chartlet-seq-tag">alt</text><text x="212.02" y="271.158" text-anchor="start" class="chartlet-seq-guard">[cached]</text><line x1="178.4" y1="336.105" x2="621.6" y2="336.105" class="chartlet-seq-branch"/><text x="186.4" y="350.105" text-anchor="start" class="chartlet-seq-guard">[not cached]</text><g class="chartlet-f chartlet-f-0 chartlet-f-1"><polyline points="99.2,135.368 236.6,135.368" class="chartlet-seq-message"><title>1. Reader → Item API: GET /items/42</title></polyline><polyline points="236.6,138.868 244.6,135.368 236.6,131.868 236.6,138.868" class="chartlet-seq-head"/><rect x="122.2" y="105.368" width="99.4" height="21" class="chartlet-diagram-chip"/><text x="171.9" y="119.368" text-anchor="middle" class="chartlet-diagram-chip-text">GET /items/42</text><circle cx="115.2" cy="135.368" r="8" class="chartlet-diagram-badge"/><text x="115.2" y="138.868" text-anchor="middle" class="chartlet-diagram-badge-text">1</text></g><g class="chartlet-f chartlet-f-1"><polyline points="254.6,181.789 272.6,181.789 275.225,182.164 277.1,183.289 278.225,185.164 278.6,187.789 278.6,191.789 278.225,194.414 277.1,196.289 275.225,197.414 272.6,197.789 262.6,197.789" class="chartlet-seq-message"><title>2. Item API → Item API: check token</title></polyline><polyline points="262.6,194.289 254.6,197.789 262.6,201.289 262.6,194.289" class="chartlet-seq-head"/><rect x="256.6" y="151.789" width="81.04" height="21" class="chartlet-diagram-chip"/><text x="261.6" y="165.789" text-anchor="start" class="chartlet-diagram-chip-text">check token</text><circle cx="278.6" cy="189.789" r="8" class="chartlet-diagram-badge"/><text x="278.6" y="193.289" text-anchor="middle" class="chartlet-diagram-badge-text">2</text></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><polyline points="254.6,248.105 387,248.105" class="chartlet-seq-message"><title>3. Item API → Cache: get item:42</title></polyline><polyline points="387,251.605 395,248.105 387,244.605 387,251.605" class="chartlet-seq-head"/><rect x="285.36" y="218.105" width="78.88" height="21" class="chartlet-diagram-chip"/><text x="324.8" y="232.105" text-anchor="middle" class="chartlet-diagram-chip-text">get item:42</text><circle cx="270.6" cy="248.105" r="8" class="chartlet-diagram-badge"/><text x="270.6" y="251.605" text-anchor="middle" class="chartlet-diagram-badge-text">3</text></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><polyline points="395,321.053 262.6,321.053" class="chartlet-seq-message chartlet-seq-reply"><title>4. Cache → Item API: hit</title></polyline><polyline points="262.6,317.553 254.6,321.053 262.6,324.553" class="chartlet-seq-head-open"/><rect x="311.28" y="291.053" width="27.04" height="21" class="chartlet-diagram-chip"/><text x="324.8" y="305.053" text-anchor="middle" class="chartlet-diagram-chip-text">hit</text><circle cx="379" cy="321.053" r="8" class="chartlet-diagram-badge"/><text x="379" y="324.553" text-anchor="middle" class="chartlet-diagram-badge-text">4</text></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><polyline points="400,391.789 262.6,391.789" class="chartlet-seq-message chartlet-seq-reply"><title>5. Cache → Item API: miss</title></polyline><polyline points="262.6,388.289 254.6,391.789 262.6,395.289" class="chartlet-seq-head-open"/><rect x="308.38" y="361.789" width="37.84" height="21" class="chartlet-diagram-chip"/><text x="327.3" y="375.789" text-anchor="middle" class="chartlet-diagram-chip-text">miss</text><circle cx="384" cy="391.789" r="8" class="chartlet-diagram-badge"/><text x="384" y="395.289" text-anchor="middle" class="chartlet-diagram-badge-text">5</text></g><g class="chartlet-f chartlet-f-1 chartlet-f-3"><polyline points="254.6,438.211 537.4,438.211" class="chartlet-seq-message"><title>6. Item API → Item store: SELECT item 42</title></polyline><polyline points="537.4,441.711 545.4,438.211 537.4,434.711 537.4,441.711" class="chartlet-seq-head"/><rect x="346.4" y="408.211" width="107.2" height="21" class="chartlet-diagram-chip"/><text x="400" y="422.211" text-anchor="middle" class="chartlet-diagram-chip-text">SELECT item 42</text><circle cx="270.6" cy="438.211" r="8" class="chartlet-diagram-badge"/><text x="270.6" y="441.711" text-anchor="middle" class="chartlet-diagram-badge-text">6</text></g><g class="chartlet-f chartlet-f-1 chartlet-f-3"><polyline points="545.4,484.632 262.6,484.632" class="chartlet-seq-message chartlet-seq-reply"><title>7. Item store → Item API: row</title></polyline><polyline points="262.6,481.132 254.6,484.632 262.6,488.132" class="chartlet-seq-head-open"/><rect x="382.88" y="454.632" width="34.24" height="21" class="chartlet-diagram-chip"/><text x="400" y="468.632" text-anchor="middle" class="chartlet-diagram-chip-text">row</text><circle cx="529.4" cy="484.632" r="8" class="chartlet-diagram-badge"/><text x="529.4" y="488.132" text-anchor="middle" class="chartlet-diagram-badge-text">7</text></g><g class="chartlet-f chartlet-f-1 chartlet-f-2"><polyline points="254.6,531.053 392,531.053" class="chartlet-seq-message"><title>8. Item API → Cache: set item:42, 5 min</title></polyline><polyline points="392,534.553 400,531.053 392,527.553" class="chartlet-seq-head-open"/><rect x="268.3" y="501.053" width="118" height="21" class="chartlet-diagram-chip"/><text x="327.3" y="515.053" text-anchor="middle" class="chartlet-diagram-chip-text">set item:42, 5 min</text><circle cx="270.6" cy="531.053" r="8" class="chartlet-diagram-badge"/><text x="270.6" y="534.553" text-anchor="middle" class="chartlet-diagram-badge-text">8</text></g><g class="chartlet-f chartlet-f-1 chartlet-f-4"><polyline points="254.6,588.526 692.8,588.526" class="chartlet-seq-message"><title>9. Item API → Change feed: item.read</title></polyline><polyline points="692.8,592.026 700.8,588.526 692.8,585.026" class="chartlet-seq-head-open"/><rect x="443.54" y="558.526" width="68.32" height="21" class="chartlet-diagram-chip"/><text x="477.7" y="572.526" text-anchor="middle" class="chartlet-diagram-chip-text">item.read</text><circle cx="270.6" cy="588.526" r="8" class="chartlet-diagram-badge"/><text x="270.6" y="592.026" text-anchor="middle" class="chartlet-diagram-badge-text">9</text></g><g class="chartlet-f chartlet-f-0 chartlet-f-1"><polyline points="244.6,634.947 107.2,634.947" class="chartlet-seq-message chartlet-seq-reply"><title>10. Item API → Reader: 200 OK</title></polyline><polyline points="107.2,631.447 99.2,634.947 107.2,638.447" class="chartlet-seq-head-open"/><rect x="146.86" y="604.947" width="50.08" height="21" class="chartlet-diagram-chip"/><text x="171.9" y="618.947" text-anchor="middle" class="chartlet-diagram-chip-text">200 OK</text><circle cx="228.6" cy="634.947" r="8" class="chartlet-diagram-badge"/><text x="228.6" y="638.447" text-anchor="middle" class="chartlet-diagram-badge-text">10</text></g><g class="chartlet-f chartlet-n-0 chartlet-f-0 chartlet-f-1"><circle cx="99.2" cy="17.5" r="4.5" class="chartlet-seq-actor-head"/><line x1="99.2" y1="22" x2="99.2" y2="29" class="chartlet-seq-actor"/><line x1="92.2" y1="24.5" x2="106.2" y2="24.5" class="chartlet-seq-actor"/><line x1="99.2" y1="29" x2="93.2" y2="35" class="chartlet-seq-actor"/><line x1="99.2" y1="29" x2="105.2" y2="35" class="chartlet-seq-actor"/><rect x="63.2" y="38" width="72" height="48" class="chartlet-seq-hit"><title>Reader</title></rect><text x="99.2" y="66.5" text-anchor="middle" class="chartlet-seq-label">Reader</text></g><g class="chartlet-f chartlet-n-1 chartlet-f-0 chartlet-f-1 chartlet-f-2 chartlet-f-3 chartlet-f-4"><rect x="207.1" y="40.5" width="85" height="48" class="chartlet-diagram-shadow"/><rect x="207.1" y="38" width="85" height="48" class="chartlet-seq-box chartlet-role-blue"><title>Item API – HTTP :8080</title></rect><text x="249.6" y="60" text-anchor="middle" class="chartlet-seq-label">Item API</text><text x="249.6" y="75" text-anchor="middle" class="chartlet-seq-sublabel">HTTP :8080</text></g><g class="chartlet-f chartlet-n-2 chartlet-f-1 chartlet-f-2"><polyline points="359,45.5 359,83.5 360.397,84.794 364.493,86 371.009,87.036 379.5,87.83 389.388,88.33 400,88.5 410.612,88.33 420.5,87.83 428.991,87.036 435.507,86 439.603,84.794 441,83.5 441,45.5 439.603,44.206 435.507,43 428.991,41.964 420.5,41.17 410.612,40.67 400,40.5 389.388,40.67 379.5,41.17 371.009,41.964 364.493,43 360.397,44.206 359,45.5 359,45.5" class="chartlet-diagram-shadow"/><polyline points="359,43 359,81 360.397,82.294 364.493,83.5 371.009,84.536 379.5,85.33 389.388,85.83 400,86 410.612,85.83 420.5,85.33 428.991,84.536 435.507,83.5 439.603,82.294 441,81 441,43 439.603,41.706 435.507,40.5 428.991,39.464 420.5,38.67 410.612,38.17 400,38 389.388,38.17 379.5,38.67 371.009,39.464 364.493,40.5 360.397,41.706 359,43 359,43" class="chartlet-seq-box chartlet-role-teal"><title>Cache – in memory</title></polyline><polyline points="359,43 360.397,44.294 364.493,45.5 371.009,46.536 379.5,47.33 389.388,47.83 400,48 410.612,47.83 420.5,47.33 428.991,46.536 435.507,45.5 439.603,44.294 441,43" class="chartlet-diagram-rim"/><text x="400" y="60" text-anchor="middle" class="chartlet-seq-label">Cache</text><text x="400" y="75" text-anchor="middle" class="chartlet-seq-sublabel">in memory</text></g><g class="chartlet-f chartlet-n-3 chartlet-f-1 chartlet-f-3"><polyline points="502.9,45.5 502.9,83.5 504.519,84.794 509.264,86 516.812,87.036 526.65,87.83 538.106,88.33 550.4,88.5 562.694,88.33 574.15,87.83 583.988,87.036 591.536,86 596.281,84.794 597.9,83.5 597.9,45.5 596.281,44.206 591.536,43 583.988,41.964 574.15,41.17 562.694,40.67 550.4,40.5 538.106,40.67 526.65,41.17 516.812,41.964 509.264,43 504.519,44.206 502.9,45.5 502.9,45.5" class="chartlet-diagram-shadow"/><polyline points="502.9,43 502.9,81 504.519,82.294 509.264,83.5 516.812,84.536 526.65,85.33 538.106,85.83 550.4,86 562.694,85.83 574.15,85.33 583.988,84.536 591.536,83.5 596.281,82.294 597.9,81 597.9,43 596.281,41.706 591.536,40.5 583.988,39.464 574.15,38.67 562.694,38.17 550.4,38 538.106,38.17 526.65,38.67 516.812,39.464 509.264,40.5 504.519,41.706 502.9,43 502.9,43" class="chartlet-seq-box chartlet-role-teal"><title>Item store – Postgres</title></polyline><polyline points="502.9,43 504.519,44.294 509.264,45.5 516.812,46.536 526.65,47.33 538.106,47.83 550.4,48 562.694,47.83 574.15,47.33 583.988,46.536 591.536,45.5 596.281,44.294 597.9,43" class="chartlet-diagram-rim"/><text x="550.4" y="60" text-anchor="middle" class="chartlet-seq-label">Item store</text><text x="550.4" y="75" text-anchor="middle" class="chartlet-seq-sublabel">Postgres</text></g><g class="chartlet-f chartlet-n-4 chartlet-f-1 chartlet-f-4"><rect x="653.3" y="36.5" width="103" height="48" class="chartlet-diagram-shadow"/><rect x="653.3" y="34" width="103" height="48" class="chartlet-seq-box chartlet-role-violet"/><rect x="649.3" y="40.5" width="103" height="48" class="chartlet-diagram-shadow"/><rect x="649.3" y="38" width="103" height="48" class="chartlet-seq-box chartlet-role-violet"><title>Change feed</title></rect><text x="700.8" y="66.5" text-anchor="middle" class="chartlet-seq-label">Change feed</text></g></svg><label class="chartlet-hotspot" id="chartlet-3cbfda263e8b31ae-hs-0" for="chartlet-3cbfda263e8b31ae-focus-0"></label><label class="chartlet-hotspot" id="chartlet-3cbfda263e8b31ae-hs-1" for="chartlet-3cbfda263e8b31ae-focus-1"></label><label class="chartlet-hotspot" id="chartlet-3cbfda263e8b31ae-hs-2" for="chartlet-3cbfda263e8b31ae-focus-2"></label><label class="chartlet-hotspot" id="chartlet-3cbfda263e8b31ae-hs-3" for="chartlet-3cbfda263e8b31ae-focus-3"></label><label class="chartlet-hotspot" id="chartlet-3cbfda263e8b31ae-hs-4" for="chartlet-3cbfda263e8b31ae-focus-4"></label></div><p class="chartlet-source">Source: Service handbook, request flow</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Reading an item through the cache</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><th scope="col">Fragment</th></tr></thead><tbody><tr><th scope="row">1</th><td>Reader</td><td>Item API</td><td>GET /items/42</td><td>call</td><td></td></tr><tr><th scope="row">2</th><td>Item API</td><td>Item API</td><td>check token</td><td>call</td><td></td></tr><tr><th scope="row">3</th><td>Item API</td><td>Cache</td><td>get item:42</td><td>call</td><td></td></tr><tr><th scope="row">4</th><td>Cache</td><td>Item API</td><td>hit</td><td>reply</td><td>alt [cached]</td></tr><tr><th scope="row">5</th><td>Cache</td><td>Item API</td><td>miss</td><td>reply</td><td>alt [not cached]</td></tr><tr><th scope="row">6</th><td>Item API</td><td>Item store</td><td>SELECT item 42</td><td>call</td><td>alt [not cached]</td></tr><tr><th scope="row">7</th><td>Item store</td><td>Item API</td><td>row</td><td>reply</td><td>alt [not cached]</td></tr><tr><th scope="row">8</th><td>Item API</td><td>Cache</td><td>set item:42, 5 min</td><td>asynchronous</td><td>alt [not cached]</td></tr><tr><th scope="row">9</th><td>Item API</td><td>Change feed</td><td>item.read</td><td>asynchronous</td><td></td></tr><tr><th scope="row">10</th><td>Item API</td><td>Reader</td><td>200 OK</td><td>reply</td><td></td></tr></tbody></table></details></figure></div>