flows · exemplos

A galeria do diagram-design, desenhada pelo flows#

A galeria do diagram-design tem 80 exemplos. Cada seção abaixo desenha um deles a partir de um fence @diagram (ou @chart look:editorial) e aponta para o original. Um teste compara cada desenho com o SVG da galeria, elemento por elemento, e só passa quando todos batem. Os exemplos animados da galeria entram aqui com motion:step: os itens chegam um a um, com controles. Uma seção por tipo, com a gramática explicada, fica em /@docs/showcase/diagram-design e /@docs/blocks/diagram.

01 · Architecture#

tipo: architecture · original

title: Content site in production
size: 1000x480
- reader px:40,240 128x64 input "Reader" "Browser" "EXT"
- cf px:220,240 144x64 external "Cloudflare" "Pages · cache" "EDGE" {num:01}
- astro px:416,240 160x64 focal "Astro Origin" "SSR + MDX" "ORIG" {num:02}
- mdx px:628,160 144x64 backend "MDX Bundle" "src/content/*.mdx" "BUN" {badge:32}
- cms px:628,320 144x64 store "Content CMS" "assets · og images" "CMS"
zone CONTENT: px:616,128 164x272
reader -> cf HTTPS {link from:272 to:272 mask:172,252,48 ty:262}
cf -> astro SSR {accent mask:368,252,48 ty:262}
astro -> mdx READ MDX {mask:632,240,60}
astro -> cms QUERY {mask:632,292,44}
cf -> reader RESP {dashed from:288 to:288 mask:172,278,32}
legend: focal=Focal / origin, backend=Backend / bundle, store=Store, input=Cloud, external=External, link=HTTP request, accent=Primary flow, dashed=Return / async
legend: 40, 180, 340, 436, 528, 636, 784, 900 {row:444 line:442}

01a · Architecture · data lake#

tipo: high-level · original

title: Open data lake · End-to-end stack
banner: zones
size: 1000x488
legend: focal=MinIO data lake (focal), node=Ingest · query tools, node=BI · notebooks · pipelines, query=Write-back path (batch), primary=Primary query path
legend: 40, 220, 400, 648, 820 {y:432 row:471 swatch:460 line:462}
# Stages
- Sources {px:4,32 160x200}
- Ingest {px:176,32 160x200}
- Data lake {px:380,32 184x160}
- Query {px:600,32 168x200 tx:688}
- Consume {px:804,32 164x280 tx:876}
---
# Sources
- App servers · Events · logs · legacy {px:16,60 136x56 badge:26 icon:legacy:72,66}
- Databases · CDC · exports · db {px:16,164 136x56 badge:26 icon:db:72,170}
---
# Ingest
- Apache NiFi · Route · transform {role:FLOW badge:28 px:188,60 136x56 icon:nifi:244,66 ty:42,54}
- Airflow · DAG scheduling {role:ORCH badge:28 px:188,164 136x56 icon:airflow-dd:244,170 ty:42,54}
---
# Data lake
- MinIO · Object store · S3-API {focal role:STORE badge:36 px:392,100 160x80 rx:8 icon:minio:460,108 ty:48,64}
---
# Query
- Trino · SQL · any format {role:QUERY badge:36 px:616,60 144x56 icon:trino-dd:676,66 ty:42,54}
- StarRocks · MPP · hot layer {role:OLAP badge:28 px:616,164 144x56 icon:starrocks:676,170 ty:42,54}
---
# Consume
- Superset · Dashboards {role:BI badge:18 px:816,60 136x56 icon:superset-dd:872,66 ty:42,54}
- JupyterLab · Exploration {role:NB badge:22 px:816,152 136x56 icon:jupyter-dd:872,158 ty:42,54}
- Python · Batch · ML {role:PROC badge:32 px:816,244 136x56 icon:python:872,250 ty:42,54}
---
App servers -> Apache NiFi {to:88 inset:1}
Databases -> Airflow {to:192 inset:1}
Apache NiFi -> MinIO {secondary from:80 to:120 via:358 inset:1}
Airflow -> MinIO {secondary from:200 to:160 via:358 inset:1}
MinIO -> Trino · SQL {from:128 to:88 via:584 inset:1,1 mask:586,102,28}
MinIO -> StarRocks {secondary from:152 to:188 via:584 inset:1,1}
Trino -> Superset {inset:1}
Trino -> JupyterLab {from:bottom to:top via:140}
StarRocks -> JupyterLab {from:180 inset:1}
StarRocks -> Python {from:bottom to:top via:240 arc:2:8,4}
Python -> MinIO · WRITE {query from:bottom to:bottom:472 via:320 mask:660,314,36}

01b · Import · draw.io#

tipo: architecture · original

title: Order platform — request path
look: drawio
size: 960x600
legend: focal=FOCAL, backend=SERVICE, store=STORE, input=CLIENT, link=HTTP CALL, dashed=ASYNC
legend: 120, 240, 376, 496, 616, 772 {y:512 row:532}
- web px:60,136 160x56 input "Web App"
- mobile px:60,224 160x56 input "Mobile App"
- gw px:360,176 200x64 focal "API Gateway" "single entry point"
- auth px:640,128 200x56 backend "Auth Service" "token check"
- orders px:640,224 200x56 backend "Orders Service" "order write"
- pg px:344,392 160x64 store "Postgres" "orders"
- obj px:528,392 160x64 store "Object Store" "archive"
- redis px:712,392 160x64 store "Redis" "sessions"
zone EDGE: px:40,96 200x224
zone CORE SERVICES: px:320,96 560x224
zone DATA: px:320,368 560x112
web -> gw HTTPS {link from:164 to:200 via:280 mask:228,144,44}
mobile -> gw HTTPS {link from:252 to:224 via:304 mask:228,232,44}
gw -> auth VERIFY {from:192 to:156 via:600 mask:568,172,44}
gw -> orders ROUTE {from:232 to:232 mask:568,212,44}
orders -> pg SQL {from:bottom:680 to:top:424 via:328 mask:536,308,32}
orders -> obj ARCHIVE {dashed from:bottom:760 to:top:608 via:352 mask:768,326,56}
auth -> redis CACHE {dashed from:right:156 to:top:856 mask:792,196,56}

01c · Secure paved road · animated#

tipo: architecture · original · animado

title: Secure Paved Road Architecture
look: chips
grid: off
size: 1160x620
legend: plain=Authorized Paved Road, accent=Blocked Bypass Attempt, backend=Paved Road Node, security=Attacker Node, focal=Firewall Blocked, chip=Action / Status Chip
legend: 40, 225, 425, 565, 690, 830 {row:588}
- dev px:60,96 200x72 backend "Developer Workstation" "Identity: dev_alice (mTLS)" {step:1}
- attacker px:60,325 200x72 security "Unauthorized Attacker" "Bypass Attempt (No Key)" {step:4}
- cicd px:350,96 340x72 backend "CI/CD Paved Road Pipeline" "Build: Signed Artifact & Policy Check" {step:1 tx:20}
- gate px:350,210 340x76 backend "Privileged Security Gate" "Policy: OPA Signature & Vulnerability Scan" {step:2 tx:20 ty:28}
- firewall px:350,325 210x72 focal "Boundary Firewall & WAF" "Status: × BLOCKED" {step:4 ty:30}
- audit px:350,435 340x72 store "Centralized Audit Log Service" "Storage: Immutable SIEM Audit Trail" {step:5 tx:20 ty:30}
- gateway px:780,96 320x72 backend "Production API Gateway" "Status: ADMITTED [TLS 1.3 Strict]" {step:3 tx:20}
- db px:780,210 320x76 store "Isolated Core Database" "Access: Paved Road Only (KMS Encrypted)" {step:3 tx:20 ty:28}
- soc px:780,435 320x72 backend "Security Operations Center" "Monitoring: Real-time Alerting Active" {step:5 tx:20 ty:30}
zone PUBLIC INGRESS ZONE: px:40,40 240x490
zone CORPORATE GOVERNANCE ZONE: px:330,40 380x490
zone ISOLATED PRODUCTION RUNTIME: px:760,40 360x490
dev -> cicd GIT PUSH {from:132 to:132 step:1 mask:275,104,60}
cicd -> gate PROVENANCE [SIGNED] {from:bottom:520 to:top:520 step:2 mask:440,178,160 h:20 rx:4}
gate -> gateway ✓ PASS {from:248 to:left:132 via:735 step:3 mask:702.5,181,65}
gateway -> db {from:bottom:940 to:top:940 step:3}
attacker -> firewall BYPASS {accent dashed from:361 to:361 step:4 mask:272,345,65 tx:304}
gate -> audit AUDIT LOGGED {from:bottom:620 to:top:620 step:5 mask:570,350,100 h:20}
firewall -> audit {dashed from:bottom:455 to:top:455 step:5}
audit -> soc {from:471 to:471 step:5}

01d · Architecture · containment#

tipo: architecture · original

title: The database is not in the subnet
size: 1000x704
legend: admin=Admin band, traffic=Traffic box, managed=Managed PaaS, endpoint=Private endpoint, compute=Workload
legend: 80, 220, 360, 500, 656 {y:640}
- sql px:80,80 160x64 managed "SQL" "managed" "DB"
- kv px:264,80 160x64 managed "Key Vault" "managed" "KV" {badge:24}
- app px:200,344 160x64 compute "Checkout API" "snet-app" "APP" {focal badge:32}
- pesql px:564,280 144x64 endpoint "PE · SQL" "snet-pe" "PE" {target:sql badge:24}
- pekv px:732,280 144x64 endpoint "PE · Vault" "snet-pe" "PE" {target:kv badge:24}
zone SUBSCRIPTION: px:40,24 920x600 {admin mask:108}
zone RESOURCE GROUP: px:56,56 888x552 {admin in:SUBSCRIPTION mask:116}
zone VNET-HUB: px:80,168 400x400 {traffic mask:64}
zone VNET-SPOKE: px:520,168 400x400 {traffic mask:80}
zone SNET-APP: px:104,208 352x336 {traffic in:VNET-HUB mask:64}
zone SNET-PE: px:544,208 352x336 {traffic in:VNET-SPOKE mask:56}
VNET-HUB <-> VNET-SPOKE PEERING {from:196 to:196 mask:468,176,64}
app -> pesql SQL:1433 {accent from:376 to:312 via:504 mask:400,356,72}
pesql -> sql PRIVATE {link dashed from:top to:bottom:160 via:152 mask:648,200,56}
pekv -> kv PRIVATE {link dashed from:top to:bottom:344 via:136 mask:816,200,56}

02 · Architecture delta#

tipo: architecture-delta · original

# Order fulfilment, before and after
size: 336x480
legend: 24, 220, 416, 612, 808, 1004
preserved: Storefront · database · r1 · r5
# Before · Synchronous dispatch · v1
- storefront px:96,0 144x64 "Storefront" "web:v1"
- api px:96,96 144x64 "Orders API" "/orders · v1"
- legacy px:96,192 144x64 "Legacy dispatcher" "dispatcher:v1"
- worker px:8,304 144x64 "Fulfilment worker" "fulfilment:v1"
- db px:96,416 144x64 store "Orders database" "PostgreSQL"
note px:192,332 "Same worker," "moves right →"
storefront -> api HTTPS {id:r1 mask:176,72,92}
api -> legacy SUBMIT {id:r2 mask:176,168,92}
legacy -> worker DISPATCH {id:r3 from:bottom to:top via:280 mask:176,260,92}
worker -> db SQL {id:r5 from:bottom to:top via:392 mask:176,396,68}
# Changes · Four components · three relationships
- CHANGED api · Orders API v1 → v2
- REMOVED legacy · Retire legacy dispatcher
- ADDED queue · Introduce durable order queue
- MOVED worker · Fulfilment worker: left → right
- REWIRED r2 · Orders API: dispatcher → queue
- REMOVED r3 · Dispatcher → worker
- ADDED r4 · Queue → worker
# After · Queued fulfilment · v2
- storefront px:96,0 144x64 "Storefront" "web:v1"
- api px:96,96 144x64 "Orders API" "/orders · v2"
- queue px:96,192 144x64 store "Order queue" "durable · at-least-once"
- worker px:184,304 144x64 "Fulfilment worker" "fulfilment:v1"
- db px:96,416 144x64 store "Orders database" "PostgreSQL"
note px:16,332 "Same worker," "new placement."
storefront -> api HTTPS {id:r1 mask:176,72,92}
api -> queue SUBMIT {id:r2 mask:176,168,92}
queue -> worker DELIVER {id:r4 from:bottom to:top via:280 mask:68,260,92}
worker -> db SQL {id:r5 from:bottom to:top via:392 mask:92,396,68}
> IDs persist across snapshots. Dashed and dotted strokes encode change, not protocol.

03 · IT current-state#

tipo: it-state · original

# Retail reporting · current state
look: it-state
size: 960x500
legend: link=data flow, accent=pain-point, external=external, focal=bottleneck
legend: 80, 208, 372, 492 {y:440 row:460}
- pos px:36,80 216x56 backend "Point-of-Sale Exports" "nightly · CSV" {icon:file-dd}
- shop px:36,168 216x56 backend "Online Store Export" "orders · flat file" {icon:file-dd}
- prices px:36,256 216x56 external "Supplier Price Lists" "external · XLSX" {icon:file-dd}
- drive px:340,80 264x68 focal "Shared Drive" "no version control" "department folders" "" {icon:file-dd iy:20 ty:28}
- sheets px:340,232 264x72 backend "Spreadsheet Handoffs" "local workbooks · macros" "manual reconciliation" "" {icon:screen-dd ty:30,46,60}
- rdbms px:340,344 264x56 store "On-prem RDBMS" "inventory · finance" {icon:db-dd}
- portal px:704,80 208x60 focal "Reporting Portal" "manual refresh" {icon:screen-dd iy:20}
- email px:704,216 208x56 backend "Email Report Packs" "weekly · PDF" {icon:file-dd}
- managers px:704,344 208x56 external "Regional Managers" "12 store regions" {icon:users-dd}
zone COLLECTION: px:16,52 256x360
zone PROCESSING: px:292,52 360x360
zone DISSEMINATION: px:672,52 272x360
pos -> drive CSV {link from:108 to:108 mask:260,86,40}
shop -> drive EXPORT {link from:196 to:left:124 via:316 mask:260,174,52}
prices -> drive XLSX {link dashed from:284 to:left:140 via:332 mask:260,262,44}
drive -> sheets COPY {accent dashed from:bottom:472 to:top:472 mask:478,156,40}
sheets -> rdbms LOAD {from:bottom:472 to:top:472 mask:478,312,40}
sheets -> portal XLSX {accent from:268 to:top:808 via:662,64 mask:612,246,44}
portal -> email PDF {link from:bottom:808 to:top:808 mask:814,148,36}
email -> managers EMAIL {link dashed from:bottom:808 to:top:808 mask:814,280,48}

04 · Flowchart#

tipo: flowchart · original

title: Should you write this as a skill?
size: 1000x600
legend: 40, 220, 412, 604, 768
- start px:420,40 160x48 start "New workflow"
- step px:420,120 160x48 step "Do it manually once"
- d1 px:400,192 200x96 decision "Will you repeat | it >3 times?"
- oneoff px:720,216 160x48 end "One-off" "keep manual"
- d2 px:400,328 200x96 decision "Reusable across | projects?"
- note px:720,352 160x48 end "Project note" "project-scoped"
- skill px:420,464 160x56 end "Write a skill" "reusable + assets" {focal}
start -> step
step -> d1
d1 -> oneoff NO
d1 -> d2 YES
d2 -> note NO
d2 -> skill YES {accent}

04a · Import · Mermaid#

tipo: flowchart · original

# Request validation flow
size: 960x600
look: drawio
legend: 128, 240, 376, 472, 568
zone EDGE: px:40,80 200x336
zone CORE SERVICES: px:288,80 632x336
- web px:64,140 144x56 step "Web App" {input}
- mobile px:64,268 144x56 step "Mobile App" {input rx:8}
- gateway px:328,160 160x64 step "API Gateway" "single entry" {focal rx:8}
- token px:568,128 128x128 decision "Token | valid?"
- orders px:744,272 160x64 step "Orders Service" "order write"
- pg px:608,384 160x56 step "Postgres" "orders" {store}
web -> gateway REQUEST {from:right:168 to:left:168 label:240,148,56}
mobile -> gateway REQUEST {from:right:296 to:left:192 via:272 label:220,276,56}
gateway -> token VERIFY {accent from:right:192 label:504,172,48}
token -> orders YES {to:top:752 label:708,172,32}
token -> gateway NO {from:bottom to:bottom:480 via:344 stop:8 label:544,324,32}
gateway -> gateway RETRY {dashed from:top:408 to:right:176 via:512,128 label:432,108,48}
orders -> pg WRITES {from:bottom:752 to:top:688 via:360 label:696,340,48}

04b · Import · Excalidraw#

tipo: flowchart · original

# Lead intake flow
size: 960x600
look: drawio
legend: 128, 240, 376, 472, 568
zone CAPTURE: px:40,80 200x336
zone PIPELINE: px:288,80 632x336
- form px:64,140 144x56 step "Web Form" {input}
- csv px:64,268 144x56 step "CSV Import" {input rx:8}
- intake px:328,160 160x64 step "Intake API" "lead intake" {focal rx:8}
- valid px:568,128 128x128 decision "Valid | record?"
- sync px:744,272 160x64 step "CRM Sync" "dedupe + upsert"
- db px:608,384 160x56 step "CRM DB" "leads" {store}
form -> intake SUBMIT {from:right:168 to:left:168 label:240,148,56}
csv -> intake ROWS {from:right:296 to:left:192 via:272 label:220,276,56}
intake -> valid CHECK {label:504,172,48}
valid -> sync YES {to:top:752 label:708,172,32}
valid -> intake NO · FIX {dashed from:bottom to:bottom:480 via:344 stop:8 label:532,324,56}
sync -> db WRITE {from:bottom:752 to:top:688 via:360 label:696,340,48}

04c · Policy trace · animated#

tipo: flowchart · original · animado

# Where two policy evaluations first diverge
trace: Trace A · read-only | internal metrics request
trace: Trace B · sensitive write | restricted records request
- Identity bound · named principal required: pass, pass
- Internal audience · employees only: pass, pass
- Data class · restricted writes denied: pass, fail
- Human approval · required only for writes: skipped, not reached
- Deploy gate · all reached rules must pass: pass, not reached
outcome: Permitted, Denied · review
legend: 72, 176, 272, 564

05 · Sequence#

tipo: sequence · original

# Article request, cold cache
size: 1000x584
legend: 56, 188, 308, 476, 652
- Reader · Browser {kind:input tag:EXT}
- Cloudflare · Pages · cache {kind:external tag:EDGE}
- Astro Origin · SSR + MDX {focal tag:ORIG}
- Analytics · Beacon · async {kind:optional tag:ASY x:800}
Reader -> Cloudflare GET /ARTICLES/SLUG {link to:352}
activate Cloudflare
Cloudflare -> Astro Origin CACHE MISS · ORIGIN {from:352 mask:100}
activate Astro Origin
Astro Origin -> Astro Origin RENDER MDX {y:284 mask:72}
Astro Origin --> Cloudflare 200 · HTML + MAX-AGE {y:352 mask:96}
deactivate Astro Origin
Cloudflare -> Reader 200 · EDGE-CACHED {accent mask:192,96}
deactivate Cloudflare
Reader --> Analytics PAGEVIEW BEACON {mask:648,96}

05a · Sequence · OAuth#

tipo: sequence · original

# Bearer call with refresh
size: 960x720
legend: focal=Focal / success, fragment=Fragment, link=HTTP call, dashed=Return, async=Async open, accent=Headline
legend: 56, 200, 320, 448, 560, 696 {y:648 row:688 line:684}
- Client · SPA · SDK {kind:input tag:APP badge:32 x:160}
- Resource API · Bearer gate {focal tag:API badge:32 x:480 w:144}
- Auth · token · refresh {kind:backend tag:AUTH badge:36 x:800}
Client -> Resource API GET /RESOURCE + BEARER {link mask:248,128}
activate Resource API
alt [token valid]
Resource API -> Client 200 · BODY {accent to:168 mask:256,88}
deactivate Resource API {y:284}
else [else · 401]
Resource API --> Client 401 {y:368 from:476 to:168 mask:272,56}
activate Client {y:360}
Client -> Auth POST /TOKEN · REFRESH {link y:416 mask:408,128}
activate Auth {y:400}
Auth --> Client 200 · NEW ACCESS {y:456 to:168 mask:424,96}
deactivate Auth {y:464}
Client -> Resource API GET /RESOURCE · RETRY {link y:504 mask:248,112}
activate Resource API {y:496}
Resource API --> Client 200 · BODY {y:544 to:168 mask:256,88}
deactivate Resource API {y:560}
deactivate Client {y:560}
end
Client --> Auth AUDIT · ASYNC {async from:164 to:796 mask:424,96}

06 · State#

tipo: state · original

title: Article lifecycle
size: 1000x460
- s0 px:52,192 16x16 initial
- draft px:120,160 160x80 state "Draft" "unpublished" "STATE"
- review px:340,160 160x80 state "In Review" "awaiting approval" "STATE"
- published px:560,160 160x80 state "Published" "live on site" "STATE" {focal}
- archived px:560,300 160x100 terminal "Archived" "noindex · hidden | redirect retained" "STATE"
- end px:632,432 16x16 final
s0 -> draft CREATE {label:172,184,48}
draft -> review SUBMIT {label:288,184,48}
review -> published APPROVE {accent label:500,184,60}
published -> archived EXPIRE {label:612,264,56}
archived -> end PURGE {label:620,416,40}
review -> draft REJECT · REVISE {dashed from:top to:top label:276,92,80}

06a · State · lifecycle#

tipo: state · original

# Newsletter publication lifecycle
size: 1000x520
grid: off
look: lifecycle
zone WAIT / RECOVERY: px:24,44 952x120
zone PRIMARY PHASES: px:24,188 952x200 {open}
zone TERMINAL OUTCOMES: px:24,400 952x104
- s0 px:28,250 12x12 initial
- draft px:64,220 150x72 state "Draft" "content exists"
- editing px:244,220 150x72 state "Editing" "owner revises"
- scheduled px:424,220 150x72 state "Scheduled" "send time set"
- sending px:604,220 150x72 state "Sending" "provider active"
- sent px:800,220 150x72 state "Sent" "delivery complete" {focal icon:final}
- approval px:334,68 150x72 wait "Approval" "editor decision" "WAIT" {badge:34}
- retry px:604,68 150x72 wait "Delivery Retry" "attempt 1 of 3" "RECOVERY" {badge:52}
- cancelled px:424,416 150x72 terminal "Cancelled" "stopped by owner" "TERMINAL" {badge:54}
- failed px:674,416 150x72 terminal "Failed" "retries exhausted" "TERMINAL" {badge:54}
s0 -> draft NEW {label:27,238,32}
draft -> editing WRITE {label:215,238,28}
editing -> approval SUBMIT {from:top:319 to:bottom:369 via:176 label:326,158,48}
approval -> scheduled APPROVE {from:bottom:449 to:top:499 via:176 label:448,158,56}
scheduled -> sending START {label:575,238,28}
sending -> sent DELIVER {accent label:760,238,34}
sending -> retry ERROR {dashed from:top:649 to:bottom:639 via:176 label:620,158,46}
retry -> sending RETRY {dashed from:bottom:719 to:top:709 via:188 label:700,180,42}
scheduled -> cancelled CANCEL {from:bottom:499 to:top:499 label:474,350,52}
retry -> failed EXHAUSTED {from:left to:top:749 via:584,380 label:588,362,66}

07 · ER#

tipo: er · original

title: Content platform · data model
- Author px:60,160 200x160
  - id · uuid {pk}
  - handle · text
  - name · text
  - bio · text
  - site_url · text
- Article px:400,120 240x240 {focal}
  - id · uuid {pk}
  - title · text
  - slug · text · unique
  - body_mdx · text
  - published_at · timestamp
  - author_id · uuid {fk}
  - status · enum
  - og_image · text · url
- Tag px:780,120 200x128
  - id · uuid {pk}
  - slug · text · unique
  - name · text
  - description · text
- ArticleTag px:780,280 200x96 {join}
  - article_id · uuid {fk}
  - tag_id · uuid {fk}
Author ||--o{ Article WRITES
Article ||--o{ ArticleTag TAGGED {from:320 to:328 label:716 card-from:646,316 card-to:760,324}
Tag ||--o{ ArticleTag {card-to:872,268}

08 · Timeline#

tipo: timeline · original

title: Product launch · fourteen months
years: 2026=680
- Feb 2025 · First post
- Apr 2025 · Design v1 {x:240}
- Sep 2025 · Design v2 · typography pass
- Jan 2026 · Design v3 · complexity budget {major x:740}
- Apr 2026 · Schematic skill · eight diagram types {major now}
> Spacing is proportional to real elapsed time.

09 · Swimlane#

tipo: swimlane · original

# Publishing an article
legend: 40, 132, 268, 444, 608
lanes: Author, Reviewer, Editor, CI / CD
- Draft MDX · src/content/… {lane:Author}
- Open PR · gh pr create {lane:Author}
- Review content · fact-check · voice {lane:Reviewer w:140}
- Polish copy · style · line edits {lane:Editor w:140 x:500}
- Approve merge · squash · main {lane:Editor w:140}
- Build · astro build {lane:CI w:80 x:680}
- Deploy · cloudflare pages {lane:CI focal}
Draft MDX -> Open PR
Open PR -> Review content HANDOFF {to:520 mask:528,140,60}
Review content -> Polish copy REVISE {dashed mask:52}
Polish copy -> Approve merge
Approve merge -> Build DEPLOY TRIGGER {accent mask:80}
Build -> Deploy

10 · Quadrant#

tipo: quadrant · original

title: Content ideas · Impact × Effort
x: Low effort → High effort
y: Low impact → High impact
quadrants: Do first | Major projects | Quick wins | Avoid
legend: focal=Start tomorrow, item=Candidate project
legend: 52, 192, 336
- Schematic skill v4 {px:220,140 focal}
- Update changelog {px:320,200}
- Design v4 refresh {px:620,140}
- New publication {px:760,180}
- Fix footer link {px:260,320}
- Update OG tags {px:360,380}
- Rewrite build pipeline {px:640,380}
- Port to Nuxt {px:780,320}
> Position is the signal. Colour is reserved for the single action item.

10a · Quadrant · consultant#

tipo: quadrant · original

title: Workplace 2030 · Remote × AI automation
x: Human → AI
y: In-person → Remote
legend: focal=Headline bet, item=Candidate future
legend: 40, 160, 304
- Distributed humans
  Async-first, global hiring,
  Slack-heavy. Human-centric
  workflows, low AI leverage.
- Agent teams {focal}
  Humans orchestrate; AI
  handles the routine layer.
  Small, high-leverage teams.
- Office classic
  Return-to-office mandates,
  manual work. Techlash
  prolongs the status quo.
- In-person + AI
  Smart offices, AI-augmented
  staff. Physical presence is
  the moat, AI is the lever.
> Every cell is named. The axes carry the range; the coral quadrant carries the commitment.

11 · Radar#

tipo: radar · original

title: Storage backends · Capability radar
axes: Small-file handling, Large-object reads, Write throughput, Operational simplicity, Iceberg integration
max: 10
legend: 40, 220, 344, 424, 608
- MinIO · recommended · 9,8,9,9,9 {focal}
- Amazon S3 · 6,10,9,5,8
- Ceph · 7,7,7,4,6
- Google Cloud Storage · 6,9,8,6,7
> One coral. Position is the signal — color reserved for the recommended option.

12 · Polar#

tipo: polar · original

title: Request demand by UTC window
unit: % of daily peak
max: 100
- 00–03 · 32
- 03–06 · 18
- 06–09 · 24
- 09–12 · 58
- 12–15 · 100 {focal}
- 15–18 · 82
- 18–21 · 76
- 21–24 · 45
> Illustrative normalized workload profile

13 · Loop#

tipo: loop · original

title: The self-improving loop
- Shared memory · one record, every loop
---
- Capture · signals in / intake {spoke:SIGNALS}
- Research · evidence pulled
- Decide · human approves {focal}
- Act · work ships {spoke:OUTCOMES label:460,464}
- Measure · outcomes logged
- Learn · playbook updated

13a · Loop · terminal#

tipo: loop · original

title: The self-improving loop
grid: off
baseline: +0.5
- Shared memory · one record, every loop {text:337.5}
---
- Capture · signals in / intake {spoke:SIGNALS label:530,199,52,17}
- Research · evidence pulled
- Decide · human approves {focal}
- Act · work ships {spoke:OUTCOMES label:457,463,58,17}
- Measure · outcomes logged
- Learn · playbook updated

14 · Nested#

tipo: nested · original

title: The Project Guidance Hierarchy
- ~/.claude/ (global)
- ~/vault/ (notes) {mask:148}
- /business
- /marketing
- /project · PROJECT GUIDANCE · inherits every level above
> structure IS the index
> no imports, no configuration

15 · Tree#

tipo: tree · original

title: Claude Code skill taxonomy
tier: TIER 0 · ROOT
tier: TIER 1 {y:224}
tier: TIER 2 {y:324}
legend: focal=Root · focal, backend=Category branch, store=Leaf skill
- Skills {tag:ROOT}
  - Design · ui · visual · ux {tag:CAT}
    - polish · align · space · rhythm {x:60}
    - critique · hierarchy · density
  - Engineering · ship · review · test {tag:CAT}
    - review · pre-land diff · sql
    - ship · merge · deploy · verify
  - Research · investigate · analyze {tag:CAT}
    - investigate · root cause · evidence
> Orthogonal connectors only. Coral marks the root — every branch descends from one idea.

15a · Tree · block decomposition#

tipo: tree · original

# Payment gateway block decomposition
node: 160x52
pitch: 140
spread: 200
legend: none
bus: 50
connectors: parent
badge-y: 6
name-y: 30
- Payment Gateway · request → settlement {id:PAY-001 y:40 badge:46}
  - Card Authorization · card → token {id:PAY-001-01 badge:62}
  - Fraud Screening · token → score {id:PAY-001-02 badge:62}
  - Settlement Ledger · release → ledger {id:PAY-001-03 badge:62}

16 · Org chart#

tipo: org-chart · original

title: Agent team org chart
legend: focal=front door, backend=pod / owner, optional=needs setup / gap
- Athena · @athena · route ambiguous work {tag:FRONT}
  - Growth · ads · analytics {tag:POD}
    - Media Buyer · Google · Meta {drop:120}
    - Maximo · offers · strategy {drop:280}
  - Content · email · blog · SEO {tag:POD}
    - Rory · copy · newsletter {drop:440}
  - Commerce · shopify · CRO {tag:POD}
    - Porter · Shopify admin {drop:600}
    - Atlas · theme · APIs {drop:760}
  - Systems · agents · runtime {tag:POD}
    - Hermes · Paperclip health {drop:920}
> Setup gaps stay visible: specialists without Slack bots · approval gates · backend name mismatches

17 · Layers#

tipo: layers · original

title: AI app stack · Where the work actually happens
top: Abstraction
bottom: Silicon
- UI surface · chat, editor, canvas {tag:L5}
- Agent harness · tools, memory, loop {focal tag:L4}
- Prompt layer · system, few-shot, caching {tag:L3}
- SDK / client · auth, retries, streaming {tag:L2}
- Model weights · opus, sonnet, haiku {tag:L1}
> The harness is where most product differentiation actually lives — tools, memory, and the loop that stitches model calls into useful work.

18 · Exploded axonometric#

tipo: exploded · original

# App stack · Three layers, one product
focal: layer
- Interface · web app, mobile {r:12}
- Logic · api, workers, queue {focal r:12}
- Data · postgres, object store {r:12}
> Logic is where the product decisions live; the other two layers are swappable.

18a · Exploded · phone#

tipo: exploded · original

# Phone teardown · What sits under the glass
lift: 160
- Display · oled, cover glass {h:6 w:140 d:280 r:24 face:screen}
- Battery · li-ion cell {h:8 w:120 d:132 r:6 x:10 y:136 level:1 face:cell}
- Logic board · soc, cameras {focal h:4 w:124 d:104 r:4 x:8 y:8 level:1 face:chips}
- Housing · aluminium frame {h:20 w:140 d:280 r:24 kind:housing face:ports}

18b · Exploded · unboxing#

tipo: exploded · original

# Unboxing · What you see, in the order you see it
lift: 180
- Lid · printed sleeve {h:28 w:186 d:186 r:6 x:-3 y:-3 closed:48 face:logo}
- Speaker · the product {focal h:60 w:92 d:92 shape:cylinder x:36 y:52 level:2 closed:9 face:grille well:4}
- Cable · usb-c, 1 m {h:14 w:32 d:32 r:4 x:138 y:40 level:2 closed:9 face:coil}
- Insert · moulded pulp {h:12 w:168 d:168 r:2 x:6 y:6 face:wells}
- Box · rigid board {h:72 w:180 d:180 r:4 x:0 y:0 kind:housing}

18c · Exploded · AI agent stack#

tipo: exploded · original

# AI agent stack · What sits under the prompt
k: 0.75
focal: layer
- Interface · chat or terminal {h:10 w:160 d:160 r:10 face:terminal}
- Agent harness · claude code, codex {h:16 w:160 d:160 r:10 face:pins}
- Skills · markdown playbooks {focal h:12 w:160 d:160 r:10 face:cards}
- Tools · clis, apis, mcp, scripts {h:14 w:160 d:160 r:10 face:pads}
- Secrets vault · scoped service token {h:24 w:128 d:128 r:8 x:16 y:16 face:lock}
> Skills are plain files the agent reads before it acts. Swap the harness or the model and they still work.

18d · Exploded · keyboard#

tipo: exploded · original

# Mechanical keyboard · Five layers under your fingers
lift: 116
- Keycaps · pbt, 51 keys {h:9 w:206 d:78 r:2 x:11 y:11 face:keys closed:19}
- Switches · mechanical, linear {focal h:9 w:204 d:76 r:1 x:12 y:12 face:switches closed:10}
- Plate · steel, one cutout per key {h:3 w:216 d:88 r:3 x:6 y:6 face:cutouts closed:12}
- PCB · hot-swap sockets {h:4 w:216 d:88 r:3 x:6 y:6 face:sockets}
- Case · aluminium tray {h:22 w:228 d:100 r:6 kind:housing}

18e · Exploded · phone, animated#

tipo: exploded · original · animado

# Phone teardown · What sits under the glass
lift: 160
- Display · oled, cover glass {h:6 w:140 d:280 r:24 face:screen}
- Battery · li-ion cell {h:8 w:120 d:132 r:6 x:10 y:136 level:1 face:cell}
- Logic board · soc, cameras {focal h:4 w:124 d:104 r:4 x:8 y:8 level:1 face:chips}
- Housing · aluminium frame {h:20 w:140 d:280 r:24 kind:housing face:ports}

18f · Exploded · unboxing, animated#

tipo: exploded · original · animado

# Unboxing · What you see, in the order you see it
lift: 180
- Lid · printed sleeve {h:28 w:186 d:186 r:6 x:-3 y:-3 closed:48 face:logo}
- Speaker · the product {focal h:60 w:92 d:92 shape:cylinder x:36 y:52 level:2 closed:9 face:grille well:4}
- Cable · usb-c, 1 m {h:14 w:32 d:32 r:4 x:138 y:40 level:2 closed:9 face:coil}
- Insert · moulded pulp {h:12 w:168 d:168 r:2 x:6 y:6 face:wells}
- Box · rigid board {h:72 w:180 d:180 r:4 x:0 y:0 kind:housing}

18g · Exploded · AI agent stack, animated#

tipo: exploded · original · animado

# AI agent stack · What sits under the prompt
k: 0.75
focal: layer
- Interface · chat or terminal {h:10 w:160 d:160 r:10 face:terminal}
- Agent harness · claude code, codex {h:16 w:160 d:160 r:10 face:pins}
- Skills · markdown playbooks {focal h:12 w:160 d:160 r:10 face:cards}
- Tools · clis, apis, mcp, scripts {h:14 w:160 d:160 r:10 face:pads}
- Secrets vault · scoped service token {h:24 w:128 d:128 r:8 x:16 y:16 face:lock}
> Skills are plain files the agent reads before it acts. Swap the harness or the model and they still work.

18h · Exploded · keyboard, animated#

tipo: exploded · original · animado

# Mechanical keyboard · Five layers under your fingers
lift: 116
- Keycaps · pbt, 51 keys {h:9 w:206 d:78 r:2 x:11 y:11 face:keys closed:19}
- Switches · mechanical, linear {focal h:9 w:204 d:76 r:1 x:12 y:12 face:switches closed:10}
- Plate · steel, one cutout per key {h:3 w:216 d:88 r:3 x:6 y:6 face:cutouts closed:12}
- PCB · hot-swap sockets {h:4 w:216 d:88 r:3 x:6 y:6 face:sockets}
- Case · aluminium tray {h:22 w:228 d:100 r:6 kind:housing}

19 · Axonometric plan#

tipo: axonometric-plan · original

# Level 3 office · Where the team actually sits
cell: 1
grid: 360x240
- Open office · 24 desks 1,1 220x146 {door:east:50-78,south:60-92,south:180-204 tag:112,124}
- Meeting room · 12 seats 221,1 140x106 {focal door:south:290-318 tag:68,88}
- Kitchen · café, lockers 221,107 140x134 {door:west:160-188 tag:54,108}
- Lobby · reception 1,147 170x94 {door:south:40-76 tag:96,68}
- Booth · 1 person 171,147 50x94 {tag:22,60}
# Open office
- Desk 25,29 44x24 {kind:desk h:10}
- Desk 85,29 44x24 {kind:desk h:10}
- Desk 145,29 44x24 {kind:desk h:10}
- Desk 25,85 44x24 {kind:desk h:10}
- Desk 85,85 44x24 {kind:desk h:10}
- Desk 145,85 44x24 {kind:desk h:10}
# Meeting room
- Table · 12 seats 247,31 84x40 {kind:table h:10}
# Kitchen
- Counter 331,113 18x116 {h:16}
- Lockers 251,151 48x40 {kind:crate h:14}
# Lobby
- Reception desk 29,169 64x16 {h:14}
> Walls cut at desk height so every room reads from one view; the meeting room is the one under discussion.

19a · Axonometric plan · campus#

tipo: axonometric-plan · original

# North campus · Three phases, six buildings
plate: site
cell: 2
grid: 210x150
- Academic · phase 1 1,1 210x72 {step:1 tag:none}
- Housing · phase 2 1,85 100x66 {step:2 tag:none}
- Sports · phase 3 111,85 100x66 {step:3 tag:none}
# Academic
- Library · phase 1 16,16 45x40 {kind:building h:40 focal tag:roof}
- Labs · phase 1 121,13 45x24 {kind:building h:64 tag:roof}
- Parking · phase 3 176,13 27x48 {kind:building h:16 step:3 tag:27,48}
- Road 1,73 210x12 {kind:road}
- Road 99,1 12x150 {kind:road}
- Tree 16,60 10x10 {kind:tree step:0}
- Tree 41,60 10x10 {kind:tree step:0}
- Tree 66,60 10x10 {kind:tree step:0}
- Tree 126,60 10x10 {kind:tree step:0}
- Tree 146,60 10x10 {kind:tree step:0}
- Tree 163,60 10x10 {kind:tree step:0}
- Tree 88,8 10x10 {kind:tree step:0}
- Tree 88,28 10x10 {kind:tree step:0}
- Tree 88,48 10x10 {kind:tree step:0}
# Housing
- Dorm A · phase 2 16,94 70x14 {kind:building h:44 tag:100,14}
- Dorm B · phase 2 16,121 70x14 {kind:building h:44 tag:40,14}
- Tree 88,96 10x10 {kind:tree step:0}
- Tree 88,118 10x10 {kind:tree step:0}
- Tree 88,138 10x10 {kind:tree step:0}
# Sports
- Sports hall · phase 3 125,95 72x42 {kind:building h:28 tag:roof}
> The library opens in phase 1 and anchors the quad; housing and sport follow as enrolment grows.

19b · Axonometric plan · coffee shop#

tipo: axonometric-plan · original

# Corner coffee shop · From the door to a seat
cell: 1
grid: 360x260
- Entrance · door, queue 101,87 96x174 {open door:south:150-190 tag:48,84 step:2}
- Espresso bar · order, pickup 1,87 100x174 {focal open tag:42,142 step:1}
- Seating · 22 seats 197,87 164x174 {tag:56,64 step:3}
- Kitchen · back of house 1,1 256x86 {door:south:30-64 tag:46,60 step:0}
- Restroom · 1 stall 257,1 104x86 {door:south:290-322 tag:40,50 step:0}
# Entrance
- Post 116,124 6x6 {kind:post}
- Post 116,156 6x6 {kind:post}
- Post 116,188 6x6 {kind:post}
- Post 116,220 6x6 {kind:post}
# Espresso bar
- Fridge 11,97 22x22 {h:30}
- Espresso machine 11,123 22x40 {kind:crate h:26}
- Grinder 11,167 22x14 {h:28}
- Pastry case 11,185 22x24 {kind:crate h:16}
- Order counter 79,101 16x40 {kind:table h:20}
- Pickup counter 79,145 16x68 {h:16}
# Seating
- Table 211,103 24x24 {kind:table r:12}
- Table 279,103 24x24 {kind:table r:12}
- Table 211,175 24x24 {kind:table r:12}
- Table 279,175 24x24 {kind:table r:12}
- Communal table 207,217 100x20 {kind:table}
- Window bench 331,101 18x140 {h:8}
# Kitchen
- Shelving 13,13 52x14 {kind:rack h:34}
- Range 85,13 40x24 {h:18}
- Prep table 137,13 28x18 {kind:table h:16}
- Pass counter 101,49 96x18 {kind:table h:14}
# Restroom
- Sink 265,13 24x14 {kind:crate h:16}
- Toilet 321,13 20x24 {h:12}
> Every customer passes the espresso bar twice, once to order and once to pick up, so it sits beside the door.

19c · Axonometric plan · warehouse#

tipo: axonometric-plan · original

# Fulfillment floor · Dock to dock
cell: 1
grid: 460x300
focal: zone
wall: south:6-454
- Receiving · 3 dock doors 1,1 96x300 {open:dashed door:west:30-70,west:120-160,west:210-250 tag:74,174 step:1}
- Storage · 6 racks 97,1 210x196 {open:dashed tag:108,162 step:1}
- Pick zone · carts, flow rack 97,197 210x104 {open:dashed tag:158,76 step:2}
- Packing · 3 stations 307,1 74x300 {focal open:dashed tag:32,262 step:2}
- Shipping · 3 dock doors 381,1 80x300 {open:dashed door:east:40-80,east:130-170,east:220-260 tag:44,186 step:3}
# Receiving
- Dock 7,31 12x40 {kind:dock}
- Dock 7,121 12x40 {kind:dock}
- Dock 7,211 12x40 {kind:dock}
- Pallet 37,37 28x28 {kind:crate h:14}
- Pallet 37,127 28x28 {kind:crate h:18}
- Pallet 37,217 28x28 {kind:crate h:12}
# Storage
- Rack 111,21 84x14 {kind:rack h:52}
- Rack 215,21 84x14 {kind:rack h:52}
- Rack 111,73 84x14 {kind:rack h:52}
- Rack 215,73 84x14 {kind:rack h:52}
- Rack 111,125 84x14 {kind:rack h:52}
- Rack 215,125 84x14 {kind:rack h:52}
# Pick zone
- Flow rack 111,215 188x14 {kind:rack h:24}
- Cart 123,243 16x24 {kind:crate h:14}
- Cart 163,243 16x24 {kind:crate h:14}
- Cart 203,243 16x24 {kind:crate h:14}
# Packing
- Station 319,31 36x44 {kind:desk h:14}
- Station 319,111 36x44 {kind:desk h:14}
- Station 319,191 36x44 {kind:desk h:14}
- Conveyor 363,21 10x216 {h:8}
# Shipping
- Pallet 393,47 28x28 {kind:crate h:20}
- Pallet 393,137 28x28 {kind:crate h:16}
- Pallet 393,227 28x28 {kind:crate h:22}
> Goods move left to right; packing is where most orders wait, so it gets the accent.

19d · Axonometric plan · campus, animated#

tipo: axonometric-plan · original · animado

# North campus · Three phases, six buildings
plate: site
cell: 2
grid: 210x150
- Academic · phase 1 1,1 210x72 {step:1 tag:none}
- Housing · phase 2 1,85 100x66 {step:2 tag:none}
- Sports · phase 3 111,85 100x66 {step:3 tag:none}
# Academic
- Library · phase 1 16,16 45x40 {kind:building h:40 focal tag:roof}
- Labs · phase 1 121,13 45x24 {kind:building h:64 tag:roof}
- Parking · phase 3 176,13 27x48 {kind:building h:16 step:3 tag:27,48}
- Road 1,73 210x12 {kind:road}
- Road 99,1 12x150 {kind:road}
- Tree 16,60 10x10 {kind:tree step:0}
- Tree 41,60 10x10 {kind:tree step:0}
- Tree 66,60 10x10 {kind:tree step:0}
- Tree 126,60 10x10 {kind:tree step:0}
- Tree 146,60 10x10 {kind:tree step:0}
- Tree 163,60 10x10 {kind:tree step:0}
- Tree 88,8 10x10 {kind:tree step:0}
- Tree 88,28 10x10 {kind:tree step:0}
- Tree 88,48 10x10 {kind:tree step:0}
# Housing
- Dorm A · phase 2 16,94 70x14 {kind:building h:44 tag:100,14}
- Dorm B · phase 2 16,121 70x14 {kind:building h:44 tag:40,14}
- Tree 88,96 10x10 {kind:tree step:0}
- Tree 88,118 10x10 {kind:tree step:0}
- Tree 88,138 10x10 {kind:tree step:0}
# Sports
- Sports hall · phase 3 125,95 72x42 {kind:building h:28 tag:roof}
> The library opens in phase 1 and anchors the quad; housing and sport follow as enrolment grows.

19e · Axonometric plan · coffee shop, animated#

tipo: axonometric-plan · original · animado

# Corner coffee shop · From the door to a seat
cell: 1
grid: 360x260
- Entrance · door, queue 101,87 96x174 {open door:south:150-190 tag:48,84 step:2}
- Espresso bar · order, pickup 1,87 100x174 {focal open tag:42,142 step:1}
- Seating · 22 seats 197,87 164x174 {tag:56,64 step:3}
- Kitchen · back of house 1,1 256x86 {door:south:30-64 tag:46,60 step:0}
- Restroom · 1 stall 257,1 104x86 {door:south:290-322 tag:40,50 step:0}
# Entrance
- Post 116,124 6x6 {kind:post}
- Post 116,156 6x6 {kind:post}
- Post 116,188 6x6 {kind:post}
- Post 116,220 6x6 {kind:post}
# Espresso bar
- Fridge 11,97 22x22 {h:30}
- Espresso machine 11,123 22x40 {kind:crate h:26}
- Grinder 11,167 22x14 {h:28}
- Pastry case 11,185 22x24 {kind:crate h:16}
- Order counter 79,101 16x40 {kind:table h:20}
- Pickup counter 79,145 16x68 {h:16}
# Seating
- Table 211,103 24x24 {kind:table r:12}
- Table 279,103 24x24 {kind:table r:12}
- Table 211,175 24x24 {kind:table r:12}
- Table 279,175 24x24 {kind:table r:12}
- Communal table 207,217 100x20 {kind:table}
- Window bench 331,101 18x140 {h:8}
# Kitchen
- Shelving 13,13 52x14 {kind:rack h:34}
- Range 85,13 40x24 {h:18}
- Prep table 137,13 28x18 {kind:table h:16}
- Pass counter 101,49 96x18 {kind:table h:14}
# Restroom
- Sink 265,13 24x14 {kind:crate h:16}
- Toilet 321,13 20x24 {h:12}
> Every customer passes the espresso bar twice, once to order and once to pick up, so it sits beside the door.

19f · Axonometric plan · warehouse, animated#

tipo: axonometric-plan · original · animado

# Fulfillment floor · Dock to dock
cell: 1
grid: 460x300
focal: zone
wall: south:6-454
- Receiving · 3 dock doors 1,1 96x300 {open:dashed door:west:30-70,west:120-160,west:210-250 tag:74,174 step:1}
- Storage · 6 racks 97,1 210x196 {open:dashed tag:108,162 step:1}
- Pick zone · carts, flow rack 97,197 210x104 {open:dashed tag:158,76 step:2}
- Packing · 3 stations 307,1 74x300 {focal open:dashed tag:32,262 step:2}
- Shipping · 3 dock doors 381,1 80x300 {open:dashed door:east:40-80,east:130-170,east:220-260 tag:44,186 step:3}
# Receiving
- Dock 7,31 12x40 {kind:dock}
- Dock 7,121 12x40 {kind:dock}
- Dock 7,211 12x40 {kind:dock}
- Pallet 37,37 28x28 {kind:crate h:14}
- Pallet 37,127 28x28 {kind:crate h:18}
- Pallet 37,217 28x28 {kind:crate h:12}
# Storage
- Rack 111,21 84x14 {kind:rack h:52}
- Rack 215,21 84x14 {kind:rack h:52}
- Rack 111,73 84x14 {kind:rack h:52}
- Rack 215,73 84x14 {kind:rack h:52}
- Rack 111,125 84x14 {kind:rack h:52}
- Rack 215,125 84x14 {kind:rack h:52}
# Pick zone
- Flow rack 111,215 188x14 {kind:rack h:24}
- Cart 123,243 16x24 {kind:crate h:14}
- Cart 163,243 16x24 {kind:crate h:14}
- Cart 203,243 16x24 {kind:crate h:14}
# Packing
- Station 319,31 36x44 {kind:desk h:14}
- Station 319,111 36x44 {kind:desk h:14}
- Station 319,191 36x44 {kind:desk h:14}
- Conveyor 363,21 10x216 {h:8}
# Shipping
- Pallet 393,47 28x28 {kind:crate h:20}
- Pallet 393,137 28x28 {kind:crate h:16}
- Pallet 393,227 28x28 {kind:crate h:22}
> Goods move left to right; packing is where most orders wait, so it gets the accent.

20 · Venn#

tipo: venn · original

title: Good design · Desirable × Feasible × Viable
- Desirable · People want it
- Feasible · We can build it {label:340,386}
- Viable · Business sustains {label:660,386}
Desirable & Feasible & Viable: Shippable · The sweet spot {focal}

21 · Pyramid#

tipo: pyramid · original

title: Content pyramid · what compounds
left: Rarer · fewer · compounds ↑ {y:216}
legend: focal=Apex — rarest, highest leverage, layer=Supporting layer — the volume work
legend: 40, 280, 560
- Flagship book · every 3–5 years {focal side:the_apex x:656 y:112}
- Long-form guides · quarterly · 4,000+ words {side:~4/yr x:716}
- Essays · weekly · 800–1,500 words {side:~48/yr x:776}
- Short posts · daily · ~200 words {side:~240/yr}
> The base funds the apex. The apex defines the base.
> Layer width is honest: narrower = rarer shipping cadence.

22 · Bar#

tipo: bar · original

title: Sprint velocity · 8-sprint view
---
# desc: Bar chart showing story points delivered across sprints S1 through S8, with Sprint 5 as the record high.
# legend: Sprint 5 · record high; Other sprints {x:220}
sprint,story points
S1,72
S2,88
S3,95
S4,78
S5,110
S6,102
S7,85
S8,93

23 · Waterfall#

tipo: waterfall · original

title: Cloud budget bridge · FY25 → FY26
focal: Storage tiering
---
# desc: Waterfall chart bridging the FY25 cloud budget of 240 thousand dollars a month to the FY26 plan of 236, through headcount growth, reserved-instance savings, new ML workloads, and storage tiering — the largest saving.
# legend: Start / end total; Cost added {x:200}; Cost removed {x:340}; Storage tiering · largest saving {x:480}
item,cloud spend · $k / mo
FY25 base,240
Headcount,+64
Reserved inst.,-38
ML workloads,+22
Storage tiering,-52
FY26 plan,

24 · Treemap#

tipo: treemap · original

title: World population · six continents
whole: world
others: Other continents
legend: 40, 240, 516
- Asia · 4.78B {focal share:59.04 x:40 y:40 w:532 h:380}
- Africa · 1.48B {share:18.29 x:576 y:40 w:252 h:252}
- Europe · 0.75B {share:9.23 x:832 y:40 w:124 h:252}
- North America · 0.61B {share:7.52 x:576 y:296 w:208 h:124}
- South America · 0.43B {share:5.35 x:788 y:296 w:148 h:124}
- Oceania · 0.05B {share:0.56 x:940 y:296 w:16 h:124}
> Area = population · Our World in Data continents (UN WPP) · mid-2023 · 8.09B total · parts rounded, may not sum

24a · Marimekko#

tipo: treemap · original

title: One pipeline on one runner is a fifth of all CI time
layout: marimekko
unit: min
legend: 40, 248, 320, 396, 500
- web
  - Linux · 2140
  - macOS · 380
  - Windows · 620
- api
  - Linux · 2460
  - Windows · 340
- mobile
  - Linux · 420
  - macOS · 1980 {focal}
- infra
  - Linux · 1120
  - Windows · 280
- docs
  - Linux · 260
> Width = pipeline share · Height = runner share within pipeline · Area = share of all CI minutes · 30 days · 10,000 min · Illustrative figures

25 · Heatmap#

tipo: heatmap · original

title: The week payments went dark
focal: payments,S4
---
# columns: Sprint
# suffix: %
# callout: Regression
# source: Illustrative CI failure rates · not a measured registry
# legend: payments · S4 · 47% — deploy regression (now fixed)
# note: Non-focal scale: 1–9% · single ink ramp · accent is editorial, not a data range
# desc: Heatmap of CI failure rate by service and sprint; payments service spiked to 47% in sprint 4 due to a deploy regression, recovered to 4% by sprint 6; billing carries the highest baseline failure rate at 9% in sprint 3.
service,S1,S2,S3,S4,S5,S6
auth,4,5,6,3,2,2
payments,3,4,5,47,6,4
api-gateway,2,3,4,2,1,1
billing,5,7,9,6,4,3
notifications,1,2,2,2,1,1

26 · Line#

tipo: line · original

title: Weekly signups · Organic leads the growth
focal: Organic
---
# unit: Signups / week
# desc: Line chart showing weekly signups from organic, direct, and referral channels across weeks W1 through W8.
# legend: Organic · focal; Direct {x:200}; Referral {x:316}
week,Organic,Direct,Referral
W1,120,80,45
W2,135,82,52
W3,148,88,48
W4,162,90,60
W5,155,86,55
W6,178,92,68
W7,195,95,62
W8,210,98,75

26a · Line · slopegraph#

tipo: line · original

title: One service went the other way
focal: Recommender
---
# layout: slopegraph
# unit: p95 response time, ms
# scale: 100-550
# desc: Slopegraph of p95 response time by service before and after a caching layer, on one shared 100-to-550-millisecond scale; four services got faster and the recommender got slower, crossing three of them.
# source: P95 response time in ms, lower is better · same 100-550 scale on both axes · illustrative figures, not a measured release
# legend: Recommender · focal, the only regression; Other services · strongest tone was slowest before {x:320}
state,Search,Catalog,Checkout,Auth,Recommender
Before,512,376,291,154,238
After,208,164,143,121,431

26b · Line · ridgeline#

tipo: line · original

title: Checkout is slow in two different ways
focal: checkout-api
---
# layout: ridgeline
# unit: Share of requests · 1% = 2.4px on every ridge
# amplitude: 2.4
# x-axis: Request latency (ms), bin lower edge
# suffix: ms
# desc: Ridgeline chart of request-latency distributions for five services over one week; each ridge is the share of that service's requests falling in 40-millisecond bins, drawn on one shared amplitude scale, and checkout-api carries a second peak past 300 milliseconds that none of the other four show.
# source: Share of each service's own requests per 40 ms bin · 1% = 2.4px on every ridge · unsmoothed · illustrative figures
# legend: checkout-api · focal, second peak past 300 ms; Other services · strongest tone is the fastest median {x:360}
latency,static-cdn,auth-api,search-api,checkout-api,report-export
0,0,0,0,0,0
40,26,6,1,1,0
80,34,28,9,6,1
120,21,36,22,17,3
160,11,18,27,21,7
200,5,7,19,14,12
240,2,3,11,8,17
280,1,1,6,6,19
320,0,1,3,7,16
360,0,0,1,9,12
400,0,0,1,7,9
440,0,0,0,4,4
480,0,0,0,0,0

26c · Line · streamgraph#

tipo: line · original

title: Where the extra build minutes went
focal: End-to-end
markers: W08=End-to-end passes unit
---
# layout: streamgraph
# unit: Build minutes per week
# suffix: min
# desc: Streamgraph of weekly CI build minutes by pipeline across twelve weeks, stacked on a symmetric baseline so the envelope height reads as the total; the end-to-end suite grows from 12 to 118 minutes a week and passes the unit suite in week eight, while the docs pipeline pauses to zero in weeks five and six.
# source: Build minutes per week by pipeline · weekly buckets · symmetric baseline, envelope height = weekly total · illustrative figures, not a measured project
# legend: ; {x:264}; {x:424}; {x:624}; Docs · 76 min · paused {x:784}
week,Docs,Integration,Unit,End-to-end,Lint
W01,8,34,58,12,12
W02,9,36,60,15,12
W03,7,38,62,19,13
W04,6,42,61,26,12
W05,0,44,64,34,13
W06,0,47,66,45,14
W07,5,49,65,58,13
W08,7,52,68,72,14
W09,8,54,70,85,14
W10,8,56,69,96,15
W11,9,59,72,108,15
W12,9,61,74,118,16

26d · Line · bump#

tipo: line · original

title: The default everyone stopped choosing
focal: legacy-http
---
# layout: bump
# unit: Rank by weekly downloads · 1 = most
# desc: Bump chart ranking six internal packages by weekly downloads across four quarters; legacy-http slides from first to sixth while fetch-kit takes the top rank in the second quarter and keeps it.
# source: Ranked by weekly downloads, ties keep prior order · same measure every quarter · illustrative figures, not a measured registry
# legend: legacy-http · focal, first to sixth in a year; Other packages · opacity records the Q1 order {x:320}
quarter,authx,fetch-kit,queuelib,logfmt,schema-gen,legacy-http
Q1,2,3,4,5,6,1
Q2,3,1,5,4,6,2
Q3,3,1,5,2,6,4
Q4,2,1,4,3,5,6

27 · Gantt#

tipo: gantt · original

title: Q2 product launch · 12-week plan
weeks: 12
axis: April | May | June
legend: focal=Design review · critical gate, task=Task, phase=Phase
---
# DISCOVERY
- Market research · W1..W3
- User interviews · W2..W4
---
# DESIGN {h:120}
- Wireframes · W4..W6
- Prototype · W5..W8
- Design review · W8..W9 {focal label:GATE}
---
# LAUNCH {h:88}
- Development · W7..W11
- Beta testing · W10..W12

28 · Scatter#

tipo: scatter · original

title: Deploy frequency vs. lead time · 12 teams
focal: Platform
---
# y-scale: 24 by 6
# trend: 168,103 900,388
# tick-label: 6 {y:324}
# guides: High lead time; Low lead time
# legend: Platform team · best performer; Engineering team {x:244}; Trend {x:416}
# desc: Scatter plot showing twelve engineering teams by deploy frequency and lead time, with Platform in the best-performing quadrant.
team,deploys per week,lead time (days)
Team A,2,20
Team B,4,18
Team C,4,16
Team D,6,14
Team E,8,12
Team F,8,10
Team G,10,8
Team H,12,6
Team I,12,10
Team J,16,4
Platform {x:830 y:357},18,3
Team L,20,2

28a · Scatter · bubble#

tipo: scatter · original

title: The biggest risk is not the slowest service
focal: Payments
---
# y-scale: 4 by 1
# label-mask: 64
# source: P95 vs error rate, bubble area ∝ requests per second · both axes start at zero · illustrative figures, not measured services
# legend: Payments · focal, highest error rate at near-peak traffic; Service · faintest fill is the largest bubble {x:648}
# desc: Bubble chart of nine services by p95 latency and error rate on zero-based axes, bubble area proportional to requests per second; Payments carries near-peak traffic at the highest error rate.
service,"p95 latency, ms","error rate, %",requests per second
Gateway {label},85,0.5,900
Payments {y:108},260,2.8,760
Auth,140,0.9,620
Catalog,180,0.7,540
Search,320,1.1,480
Media,230,1.4,330
Recommender,420,1.6,210
Notifications,95,2.2,150
Reports {y:356},460,0.9,60

28b · Scatter · beeswarm#

tipo: scatter · original

title: The median hides the tail
focal: req-4c1f
---
# layout: beeswarm
# x-scale: 440 by 100
# label-mask: 60
# source: One dot = one request · value axis 0–440 ms, linear from zero · vertical spread is packing, not a value · illustrative figures, not measured traffic
# legend: req-4c1f · focal, the slowest request in the window; request · vertical offset is packing only {x:648}
# desc: Beeswarm of 138 per-request latency samples for one checkout endpoint on a shared linear value axis from zero; vertical spread is packing only and carries no value, and three requests past 380 ms form the p99 tail.
request,"per-request latency, ms"
,52
,53
,55
,56
,60
,61
,61
,67
,69
,73
,76
,76
,77
,80
,80
,82
,82
,83
,84
,84
,84
,85
,85
,86
,87
,88
,88
,88
,89
,89
,90
,90
,90
,91
,94
,95
,99
,99
,99
,103
,103
,105
,105
,106
,106
,106
,106
,106
,107
,107
,108
,109
,110
,110
,110
,113
,114
,114
,115
,115
,116
,117
,117
,117
,118
,118
,119
,120
,122
,123
,123
,127
,127
,127
,127
,128
,131
,132
,135
,137
,141
,143
,145
,145
,146
,148
,150
,151
,152
,152
,153
,155
,155
,157
,157
,161
,162
,164
,174
,182
,187
,189
,190
,194
,195
,195
,196
,196
,197
,201
,204
,206
,207
,214
,215
,217
,219
,225
,229
,233
,233
,238
,249
,255
,256
,264
,268
,277
,280
,283
,285
,286
,289
,289
,312
req-77d3,388
req-09aa,402
req-4c1f,431

29 · High-Level#

tipo: high-level · original

title: High-level architecture · End-to-end stack
cluster: Kubernetes {px:164,40 832x336 icon:kubernetes-dd}
legend: external=External source · outside cluster, cluster=Kubernetes boundary, focal=Focal component (MinIO), primary=Primary data path, trigger=Orchestration trigger
legend: 40, 252, 436, 648, 808
# Stages
- Data sources
- Ingestion
- Storage
- Transformation & Analysis
- Visualization
---
# Sources {px:4,40 152x336}
- WEB · Census · Survey · Admin · web {px:12,60 132x64 badge:22 icon:world-dd}
- FTP · Census · Business · ftp {px:12,140 132x64 badge:22 icon:upload-dd}
- DB Connection · CDC · SQL · API · db {px:12,220 132x64 badge:22}
- Legacy System · Trade data · legacy {px:12,304 132x64 badge:22}
---
# Ingestion
- Orchestration / Workflow Automation · (Apache Airflow) {bar px:176,52 808x44 icon:airflow-dd:950,58 tx:564}
- Apache NiFi · Collect · route · transform {role:COLL badge:30 px:176,112 152x80 icon:nifi:240,118 ty:42,54}
---
# Storage
- Trino · SQL · data virtualization {role:VIRT badge:28 px:372,104 160x72 icon:trino-dd:440,110 ty:42,54}
- MinIO / S3 · Object store · S3-API {focal role:STORE px:372,208 160x80 rx:8 icon:minio:440,214 ty:44,60}
---
# Transformation & Analysis
- Data Modeling · Notebook · Python · R {role:ANLZ px:600,144 164x80 icon:jupyter-dd:670,150 ty:42,54}
---
# Visualization
- Dashboards · Superset · reports {role:DASH badge:28 px:820,144 152x80 icon:superset-dd:884,150 ty:42,54}
---
# Cross-cutting
- Identity Manager · (Active Directory) {px:4,388 992x40 icon:vpn-dd}
---
WEB -> Apache NiFi {from:bottom:128 to:132}
FTP -> Apache NiFi {to:172}
DB Connection -> Apache NiFi {to:bottom:204}
Legacy System -> Apache NiFi {to:bottom:228}
Orchestration / Workflow Automation -> Trino, Data Modeling, Dashboards
Apache NiFi -> Trino {from:140}
Apache NiFi -> MinIO / S3 {from:164 via:352}
Trino -> MinIO / S3
MinIO / S3 -> Trino {query legend:off}
Trino -> Data Modeling {to:168 via:564}
MinIO / S3 -> Data Modeling {to:200 via:564}
Data Modeling -> Dashboards

29a · High-Level / Parametric#

tipo: high-level · original

title: High-level architecture · Vertical Orchestration + Security
size: 1000x600
masks: off
cluster: Kubernetes {icon:kubernetes-dd}
legend: external=External · outside cluster, cluster=Kubernetes boundary, focal=Focal (storage hub), primary=Primary path, trigger=Orchestration trigger, query=Query read-back
legend: 40, 232, 404, 552, 680, 836 {y:496}
# Stages
- Data sources
- Ingestion
- Storage
- Transform
- Visualization
- Orchestration
- Security
- Observability
---
# Sources
- PostgreSQL · CDC · SQL · API · db {badge:22 icon:db:62,66}
- SFTP drop · Batch · landing · ftp {badge:22 icon:upload-dd:62,146}
- Web forms · Survey · admin · web {badge:22 icon:world-dd:62,226}
- Legacy system · Trade · mainframe · legacy {badge:22 icon:legacy:62,306}
---
# Ingestion
- Orchestration / Workflow Automation · (Apache Airflow) {bar icon:airflow-dd:914,58}
- Apache NiFi · Collect · route · transform {role:COLL badge:30 icon:nifi-dd ty:46,58}
---
# Storage
- Trino · SQL · data virtualization {role:VIRT badge:28 icon:trino-dd ty:46,58}
- MinIO / S3 · Object store · S3-API {focal role:STORE badge:36 rx:8 icon:minio ty:46,60}
---
# Transform
- Notebooks · Jupyter · Python · R {role:ANLZ badge:32 icon:jupyter-dd ty:46,58}
---
# Visualization
- Superset · Dashboards · reports {role:DASH badge:28 icon:superset-dd ty:46,58}
---
# Cross-cutting
- Identity Manager · (Keycloak · LDAP · OIDC) {icon:keycloak-dd}
- Monitoring & Observability · (Prometheus · Grafana · Loki) {icon:chart-dd}
---
PostgreSQL -> Apache NiFi {from:bottom:168 to:132}
SFTP drop -> Apache NiFi {to:172}
Web forms -> Apache NiFi {to:bottom:236}
Legacy system -> Apache NiFi {to:bottom:260}
Orchestration / Workflow Automation -> Apache NiFi, Trino, Notebooks
Apache NiFi -> Trino {from:148 to:148}
Apache NiFi -> MinIO / S3 {from:176 via:388}
Trino -> MinIO / S3 {query head:dim from:480 to:480}
MinIO / S3 -> Notebooks {via:580 arc:1:4,8}
Notebooks -> Superset

30 · Process#

tipo: process · original

# Order fulfillment across four teams
steps: Order, Verify, Allocate, Pick, Pack, Pay, Receive, Close
legend: 208, 300, 392, 496 532, 576 612, 656 692, 736 780, 832 | 220, 328, 428, 552, 688, 856 | 200, 360
- Customer · CUS {lane}
- Place order · cart → order · storefront {step:1 out:DB}
- Receive shipment · receipt → confirmed · delivery portal {step:7 in:TB out:WB}
---
- Support · SUP {lane}
- Verify order · order → cleared · service desk {step:2 in:DB out:DB}
- Close order · confirmed → closed · service desk {step:8 in:WB}
---
- Warehouse · WHS {lane}
- Allocate stock · order → pick list · inventory system {step:3 in:DB out:LS focal}
- Pick items · list → picked · handheld scanner {step:4 in:LS out:LS}
- Pack order · picked → shipment · packing station {step:5 in:LS out:FL}
---
- Finance · FIN {lane}
- Capture payment · shipment → receipt · payment gateway {step:6 in:FL out:TB}
Place order -> Verify order
Verify order -> Allocate stock
Allocate stock -> Pick items
Pick items -> Pack order
Pack order -> Capture payment
Capture payment -> Receive shipment
Receive shipment -> Close order

31 · Medallion#

tipo: medallion · original

title: Five-tier e-commerce analytics medallion
example: E-commerce example
# Raw · raw-commerce
- tool · NiFi ingest
- format · JSON · Parquet
- writer · Data Engineer
- example · clickstream events
- example · order records
---
# Anonymized · anon-commerce
- tool · Trino SQL
- format · Iceberg · partitioned
- writer · Data Engineer
- example · session pseudonyms
- example · masked customer IDs
---
# Staging · staging-commerce
- tool · Trino · notebooks
- format · Iceberg · cleaned
- writer · Data Scientist
- example · joined order facts
- example · validated event rows
---
# Aggregated · analytics-marts {focal}
- tool · Trino INSERT
- format · Iceberg · metrics
- writer · Data Scientist
- example · daily conversion rate
- example · revenue by channel
---
# Archive · archive-commerce {cold}
- tool · Object storage lifecycle
- format · Cold tier · immutable
- writer · Data Engineer
- example · retained clickstream
- example · closed order snapshots
---
Raw -> Anonymized MASK IDS
Anonymized -> Staging CLEAN + JOIN
Staging -> Aggregated AGGREGATE
Aggregated -> Archive LIFECYCLE {lifecycle}
---
# Paths
- SQL PATH · Trino INSERT INTO … SELECT · filter · join · aggregate — repeatable transforms
- NOTEBOOK PATH · Python notebooks on object storage · explore · validate · model — interactive analysis

32 · Data flow#

tipo: data-flow · original

# Role-scoped analytics data flow
steps: Ingest, Store, Transform, Analyze, Publish
legend: 180, 272, 360, 468, 568 | 180, 252, 332, 404, 500 | 180, 324, 460
legend: FL=Dashboard
legend-rows: 17, 38, 60
legend-key: 164 end
- Data engineer · ENG {lane}
- Capture Events · shop events → batch · NiFi ingest {step:1 in:LS out:DB}
- Land Records · events · orders · Object storage {sub:2 step:2 in:DB out:DB}
---
- Data scientist · SCI {lane}
- Clean & Model · raw → trusted table · Trino · notebooks {step:3 in:DB out:TB focal}
- Curate Metrics · conversion · revenue · Trino SQL {sub:2 step:4 in:TB out:TB}
---
- Analytics analyst · ANL {lane}
- Publish Dashboard · metrics → decisions · BI workspace {step:5 in:TB out:FL}
Capture Events -> Land Records
Land Records -> Clean & Model · raw table {accent label:392,65,48}
Clean & Model -> Curate Metrics
Curate Metrics -> Publish Dashboard {link}

32a · Fan-in queue · animated#

tipo: data-flow · original · animado

# Fan-in Queue and Bottleneck Analysis
size: 1160x620
- INGRESS SOURCES {px:40,40 240x510 rx:8 zone at:60,72}
- Web Client App · Rate: 4 req/sec (Steady) {px:60,96 200x72 rx:6 at:76,128,148}
- Mobile Native API · Rate: 3 req/sec (Steady) {px:60,196 200x72 rx:6 at:76,228,248}
- Payment Webhooks · Rate: 8 req/sec (Spike) {px:60,296 200x72 rx:6 at:76,328,348}
- Legacy ERP Batch · Rate: 12 req/sec (Spike) {px:60,396 200x72 rx:6 at:76,428,448}
- Central Ingress Queue Buffer · Capacity: 5 slots (Bounded FIFO) {px:340,150 370x320 rx:8 zone at:360,182,200}
- Slot 1: req_web_8019 [GET /api] {px:360,216 265x36 rx:4 at:372,239 step:1}
- Slot 2: req_mob_4412 [POST /auth] {px:360,260 265x36 rx:4 at:372,283 step:1}
- DEPTH · 2/5 {px:635,216 60x212 rx:4 zone at:665,300,330 anchor:middle step:1}
- Slot 3: req_pay_9920 [WEBHOOK] {px:360,304 265x36 rx:4 accent at:372,327 step:2}
- Slot 4: req_erp_1044 [BATCH] {px:360,348 265x36 rx:4 focal at:372,371 step:2}
- Slot 5: req_erp_1045 [FULL] {px:360,392 265x36 rx:4 focal at:372,415 step:2}
- FULL · 5/5 · WARN {px:635,216 60x212 rx:4 focal at:665,290,325,355 anchor:middle step:2}
- 429 Rate Limiter & Overflow Sink · Status: 429 Backpressure (19 req/sec Shed) {px:760,50 350x85 rx:6 focal at:780,82,104 step:3}
- Constrained Worker Service · Instance: Worker-Node-01 · Service Capacity: 8 req/sec max · Status: PROCESSING [FIFO] {px:760,215 350x130 rx:6 at:780,246,268,290,312 step:4}
- Downstream Database & Core API · Result: 200 OK Admitted Traffic Stream (8 req/sec) {px:760,410 350x85 rx:6 zone at:780,440,464 step:4}
- System State: Controlled Equilibrium · Worker Protected · Backpressure Active {px:340,490 370x64 rx:6 at:360,516,536 step:5}
- Admitted Flow {from:40,584 to:65,584 at:73,588}
- High Ingress {from:165,584 to:190,584 accent at:198,588}
- 429 Backpressure {from:285,584 to:310,584 accent trigger at:318,588}
- Normal Slot {px:430,577 16x12 rx:2 at:452,588}
- Capacity Warn {px:540,577 16x12 rx:2 accent at:562,588}
- Overflown (429) {px:660,577 16x12 rx:2 focal at:682,588}
- Queue Depth Badge {px:790,577 16x12 rx:2 zone at:812,588}
Web Client App -> Central Ingress Queue Buffer {from:260,132 via:316,132,316,234 to:340,234 step:1}
Mobile Native API -> Central Ingress Queue Buffer {from:260,248 via:292,248,292,278 to:340,278 step:1}
Payment Webhooks -> Central Ingress Queue Buffer {from:260,332 to:340,332 accent step:2}
Legacy ERP Batch -> Central Ingress Queue Buffer {from:260,432 via:300,432,300,366 to:340,366 accent step:2}
Central Ingress Queue Buffer -> 429 Rate Limiter & Overflow Sink {from:525,150 via:525,92 to:760,92 accent trigger step:3}
Central Ingress Queue Buffer -> Constrained Worker Service {from:710,280 to:760,280 step:4}
Constrained Worker Service -> Downstream Database & Core API {from:935,345 to:935,410 step:4}

33 · DP integration#

tipo: dp-integration · original

title: Generic data platform integration topology
icon-ids: bare
legend: title=Type key
legend: 128, 296, 492, 640, 824
# Sources
- CRM · db · customer records
- POS exports · file · daily CSV batches
- Event stream · stream · near-real-time events
---
# Platform · Data platform
- Orchestrator · schedules · retries · lineage {bar role:DAG badge:32}
- Object storage · versioned data objects {focal role:STORE x:400 badge:44} | Query engine · federated SQL access {focal role:SQL x:656 badge:32}
---
# Consumers
- BI tool · chart · dashboards · reports
- Notebooks · notebook · Python · exploration
- Partner API · api · scoped data products
---
# Footer
- Identity provider · key · SSO · service identities · policy groups {mask:548,420,32}
- Centralized logging · log · platform events · audit trail · retention {mask:636,420,32}
---
CRM -> Object storage REST {mask:252,104,44}
POS exports -> Object storage CSV {mask:272,192,48}
Event stream -> Object storage EVENTS {mask:248,280,56}
Object storage -> Query engine READ {mask:48}
Query engine -> BI tool JDBC {mask:856,168,48}
Query engine -> Notebooks KERNEL {mask:872,192,56}
Query engine -> Partner API HTTPS {mask:856,216,56}
Orchestrator -> Object storage, Query engine

34 · DP security matrix#

tipo: dp-security-matrix · original

# Data platform access matrix
legend: focal=partner read boundary
legend: 96, 200, 304, 408, 504
- Data Engineer · GRP-DATA-ENG
- Data Scientist · GRP-DATA-SCI
- Analyst · GRP-ANALYST
- Administrator · GRP-ADMIN
- External Partner · GRP-PARTNER
---
# Object storage · S3
- Write {level:rw}
- Read {level:read}
- None {level:none}
- Admin {level:full}
- None {level:none}
---
# Query engine · SQL
- Write {level:rw}
- Read {level:read}
- Read {level:read}
- Admin {level:full}
- Read {level:read}
---
# Notebooks · PY
- Write {level:rw}
- Write {level:rw}
- None {level:none}
- Admin {level:full}
- None {level:none}
---
# BI tool · DASH
- Write {level:rw}
- Read {level:read}
- Write {level:rw}
- Admin {level:full}
- Read · shared dashboards {focal}
---
# Orchestrator · DAG
- Write {level:rw}
- Read {level:read}
- None {level:none}
- Admin {level:full}
- None {level:none}

35 · Sankey#

tipo: sankey · original

title: CI compute budget · a month of pipeline minutes
columns: BUDGET | TEST STAGE | OUTCOME
unit: min
legend: flow=Flow · stage routing, accent=Flaked path · reruns, node=Node · stage total {x:420}
- CI minutes -> Unit tests 5200
- CI minutes -> E2E 4000
- CI minutes -> Build 2000
- CI minutes -> Lint 800
- Unit tests -> Flaked 800 {accent}
- Unit tests -> Passed 4400
- E2E -> Flaked 200 {accent}
- E2E -> Passed 3800
- Build -> Passed 800
- Build -> Failed 1200
- Lint -> Passed 400
- Lint -> Failed 400
> Two coral ribbons — flaky reruns burn ~8% of the monthly CI budget. {x:600}

36 · Fishbone#

tipo: fishbone · original

title: Checkout p99 latency · Root-cause fishbone
effect: Checkout p99 latency | 4x for 90 minutes
# Deploy
- canary skipped
- config drift
# Data
- index missing on orders.created_at {focal}
- table 3x forecast
# Runtime
- connection pool cap 20
- GC pauses
# Observability
- no p99 alert
- dashboard sampled at 5m
# People
- on-call handover mid-incident

37 · Wardley map#

tipo: wardley · original

title: AI assistant product · Wardley map
- Answer in the flow of work {px:420,92}
- Chat UI {px:620,124}
- Agent orchestration {px:420,156}
- Eval harness {px:220,188}
- Vector store {px:620,220}
- LLM API {px:680,252}
- GPU compute {px:820,284}
- Object storage {px:820,316 anchor:start}
Answer in the flow of work -> Chat UI
Chat UI -> Agent orchestration
Agent orchestration -> Eval harness
Agent orchestration -> Vector store
Agent orchestration -> LLM API
Vector store -> Object storage
LLM API -> GPU compute
Eval harness -> LLM API
Agent orchestration =>
> One coral. Position along evolution is the signal — the arrow marks what's about to commoditise.

38 · Kanban#

tipo: kanban · original

# Platform team board
---
# Backlog
- API rate limiting · AVA-201 · priya
- Terraform module cleanup · AVA-205 · leo
- Onboarding docs refresh · AVA-209 · maya
---
# In progress · WIP 3
- Postgres 16 upgrade · AVA-118 · sam {blocked}
- K8s node pool migration · AVA-142 · priya
- Auth token rotation · AVA-150 · leo
- Observability dashboards · AVA-161 · dara
---
# Review · WIP 3
- Feature flag cleanup · AVA-176 · nadia
- Vendor SSO integration · AVA-183 · sam {waiting}
---
# Done {done}
- Log retention policy · AVA-090 · leo
- CI cache warmup · AVA-097 · maya

39 · User journey#

tipo: journey · original

# Trial to paid: the first week
persona: New trial user
legend: 40, 220, 384
---
# Sign up
- Create workspace · signup form {mood:high}
---
# First run
- Import first dataset · onboarding wizard {mood:neutral}
---
# Invite team
- Add 3 teammates · email invite {mood:high}
---
# Hit the limit
- Export blocked mid-report · in-app modal {mood:low}
pain: No warning at 80%
pain: Pricing page is 3 clicks away
---
# Upgrade
- Pick annual plan · billing page {mood:neutral}

40 · Deployment#

tipo: deployment · original

# Checkout · deployment
size: 1040x416
- cf px:64,156 160x84 external "Cloudflare" "edge-cache @ v1.2" "CDN" {badge:32}
- ingress px:304,80 232x84 backend "ingress" "nginx-ingress @ v1.11" "POD" {badge:32}
- app px:304,196 232x116 backend "app" "checkout-api @ v2.4.1" "sidecar-otel @ v0.9" "POD" {badge:32 count:x3}
- rds px:624,80 192x84 focal "rds-primary" "postgres @ 16.2" "MANAGED" {badge:64}
- replica px:624,212 192x84 store "rds-standby" "postgres @ 16.2" "MANAGED" {badge:64}
zone EDGE: px:40,40 208x280 {head:left mask:48}
zone PROD / EU-WEST-1: px:280,40 280x280 {head:left mask:140}
zone DATA: px:600,40 240x280 {head:left mask:40}
cf -> ingress HTTPS:443 {link from:196 to:left:120 via:296 mask:224,176,64}
ingress -> app HTTP:8080 {mask:428,174,64}
app -> rds TLS:5432 {link from:252 to:120 mask:588,180,64}
rds -> replica WAL STREAM {dashed accent mask:728,182,72}
legend: focal=Focal / primary, backend=Infra node, store=Store / standby, external=Managed / CDN, link=Cross-zone, dashed=Replication, plain=In-zone call
legend: 40, 180, 320, 460, 600, 740, 880 {row:380 line:376}

41 · Dependency graph#

tipo: dependency · original

title: TypeScript monorepo dependency graph
- web "web" "apps/web" "APP"
- admin "admin" "apps/admin" "APP"
- api "api" "services/api" "SVC"
- ui-kit "ui-kit" "packages/ui-kit" "PKG"
- shared-types "shared-types" "packages/shared-types" "PKG"
- db "db" "services/db" "SVC"
- tokens "tokens" "packages/tokens" "PKG"
- utils "utils" "packages/utils" "PKG"
- zod external "zod" "v3.23 · npm" "EXT"
web -> api
web -> ui-kit {side:left}
admin -> ui-kit
admin -> api {side:right nohop:600}
api -> shared-types
api -> db
ui-kit -> shared-types
ui-kit -> tokens
db -> shared-types
shared-types -> utils {y:408}
shared-types -> zod {y:396}
utils -> shared-types {cycle}
> Badges show fan-in — a tree can't express convergence.

42 · UML class#

tipo: uml-class · original

title: Payments domain · UML class diagram
size: 980x664
- PaymentMethod px:420,40 360x100 {interface focal}
  - + authorize(amount: Money): AuthResult
  - + capture(ref: String): void
- Card px:380,240 200x120
  - - number: String
  - - expiry: Date
  - - cvv: String
- BankTransfer px:660,240 200x100
  - - iban: String
  - - accountHolder: String
- PaymentService px:40,60 280x80
  - + charge(order: Order): Receipt
- Order px:60,420 200x120
  - - id: String
  - - placedAt: Date
  - - total: Money
- OrderLine px:380,420 200x120
  - - sku: String
  - - qty: Int
  - - price: Money
- Customer px:660,420 200x120
  - - id: String
  - - name: String
  - - email: String
Card ..|> PaymentMethod
BankTransfer ..|> PaymentMethod
PaymentService ..> PaymentMethod USES {label:368}
Order "1" *-- "1..*" OrderLine
Order "0..*" --> "1" Customer {from:bottom to:bottom card-from:164,548}

43 · Story map#

tipo: story-map · original

# Reporting, first release
- Find the data · Search datasets / Preview rows
- Build the report · Pick columns / Add a chart
- Share it · Send a link
- Trust it · Check freshness
---
# MVP
- Keyword search · RPT-101 · 3pt {activity:1}
- Table + one chart · RPT-102 · 5pt {activity:2}
- Public link · RPT-103 · 2pt {activity:3}
- Last-updated stamp · RPT-104 · 1pt {activity:4}
---
# RELEASE 2
- Saved filters · RPT-110 · 3pt {activity:1}
- Scheduled email · RPT-112 · 5pt {activity:3}
- Row-level permissions · RPT-114 · 3pt {activity:4 risk}
---
# LATER
- Natural-language query · RPT-120 · 8pt {activity:1}
- Alerting on anomalies · RPT-121 · 5pt {activity:4}

44 · Database schema#

tipo: db-schema · original

title: Commerce schema · public + billing
size: 1080x560
- public.customers px:40,80
  - id · uuid {pk}
  - email · text {unique not-null}
  - created_at · timestamptz {not-null}
- public.orders px:400,40
  - id · uuid {pk}
  - customer_id · uuid {fk:customers.id restrict not-null}
  - status · text {not-null}
  - total · numeric(12,2) {not-null}
  - placed_at · timestamptz {not-null}
  index: idx_orders_customer_id
  index: idx_orders_status
- public.order_items px:400,320
  - id · uuid {pk}
  - order_id · uuid {fk:orders.id cascade not-null label:572,274,88}
  - product_id · uuid {fk:products.id restrict not-null via:716 label:724,252}
  - qty · integer {not-null}
  - unit_price · numeric(12,2) {not-null}
- public.products px:760,40
  - id · uuid {pk}
  - sku · text {unique not-null}
  - name · text {not-null}
  - price · numeric(12,2) {not-null}
  - + 3 more columns
  index: uq_products_sku
- billing.invoices px:760,368
  - id · uuid {pk}
  - order_id · uuid {fk:orders.id restrict not-null via:692 label:644,440}
  - issued_at · timestamptz {not-null}

45 · Service blueprint#

tipo: service-blueprint · original

# Trial to paid — what the customer never sees
size: 1280x720
legend: backstage=Backstage layer, focal=Focal cell · timeout
- Sign up
- Activate
- Hit the limit
- Upgrade
- First invoice
---
# Evidence
- Welcome email
- Product UI
- Paywall
- Checkout form
- PDF invoice
---
# Customer
- Create account
- Use product
- Retry payment
- Pick plan
- Read bill
---
# Frontstage
- Welcome
- In-app nags
- Pay modal
- Checkout
- Receipt
---
# Backstage
- CRM write
- Usage meter
- dunning-job timeout · dunning-job · 4h {focal}
- Tax calc
- Ledger
---
# Support
- Email
- Analytics
- Card processor
- —
- GL