flows · exemplos
diagram-design no flows#
A skill diagram-design desenha 45 tipos de diagrama à mão, em SVG. Esta página desenha cada um a partir de texto, na própria página e nas cores do tema: um fence @diagram por tipo, e um @chart look:editorial para os gráficos. Cada seção aponta para o exemplo original da galeria. A lista é o manifesto config/diagram_design.yml, e um teste compara cada desenho com o SVG da galeria, elemento por elemento. Os 80 exemplos da galeria, um por um, com os animados em movimento: /@docs/showcase/diagram-design-gallery.
01 · Architecture#
diagram-design: architecture · fence @diagram type:figure · galeria 01 · 01b · 01c · 01d · fiel: a geometria do exemplo, número a número
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"
- astro px:416,240 160x64 focal "Astro Origin" "SSR + MDX" "ORIG"
- mdx px:628,160 144x64 backend "MDX Bundle" "src/content/*.mdx" "BUN"
- 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}
cf -> astro SSR {accent}
astro -> mdx READ MDX
astro -> cms QUERY
cf -> reader RESP {dashed from:288 to:288}02 · Architecture delta#
diagram-design: architecture-delta · fence @diagram type:figure · galeria 02 · fiel: a geometria do exemplo, número a número
# Order fulfilment, before and after
cols: 3
# Before · Synchronous dispatch · v1
- storefront 2,1 "Storefront" "web:v1"
- api 2,2 "Orders API" "/orders · v1"
- legacy 2,3 "Legacy dispatcher" "dispatcher:v1"
- worker 1,4 "Fulfilment worker" "fulfilment:v1"
- db 2,5 store "Orders database" "PostgreSQL"
storefront -> api HTTPS
api -> legacy SUBMIT {id:r2}
legacy -> worker DISPATCH
worker -> db SQL
# After · Queued fulfilment · v2
- storefront 2,1 "Storefront" "web:v1"
- api 2,2 "Orders API" "/orders · v2"
- queue 2,3 store "Order queue" "durable · at-least-once"
- worker 3,4 "Fulfilment worker" "fulfilment:v1"
- db 2,5 store "Orders database" "PostgreSQL"
storefront -> api HTTPS
api -> queue SUBMIT {id:r2}
queue -> worker DELIVER
worker -> db SQL
> IDs persist across snapshots. Dashed and dotted strokes encode change, not protocol.03 · IT current-state#
diagram-design: it-state · fence @diagram type:figure · galeria 03 · fiel: a geometria do exemplo, número a número
# Retail reporting · current state
size: 960x500
- pos px:36,80 216x56 input "Point-of-Sale Exports" "nightly · CSV" "SRC"
- shop px:36,168 216x56 input "Online Store Export" "orders · flat file" "SRC"
- prices px:36,256 216x56 external "Supplier Price Lists" "external · XLSX" "EXT"
- drive px:340,80 264x68 focal "Shared Drive" "no version control" "FS"
- sheets px:340,232 264x72 backend "Spreadsheet Handoffs" "manual reconciliation" "XLS"
- rdbms px:340,344 264x56 store "On-prem RDBMS" "inventory · finance" "DB"
- portal px:704,80 208x60 focal "Reporting Portal" "manual refresh" "WEB"
- email px:704,216 208x56 backend "Email Report Packs" "weekly · PDF" "PDF"
- managers px:704,344 208x56 external "Regional Managers" "12 store regions" "USR"
zone COLLECTION: px:16,52 256x360
zone PROCESSING: px:292,52 360x360
zone DISSEMINATION: px:672,52 272x360
pos -> drive CSV {link}
shop -> drive EXPORT {link from:196 to:left:124 via:316}
prices -> drive XLSX {link dashed from:284 to:left:140 via:332}
drive -> sheets COPY {dashed}
sheets -> rdbms LOAD
sheets -> portal XLSX {from:268 to:top:808 via:662,64}
portal -> email PDF {link}
email -> managers EMAIL {link dashed}04 · Flowchart#
diagram-design: flowchart · fence @diagram · galeria 04 · 04a · 04b · 04c · fiel: a geometria do exemplo, número a número
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}05 · Sequence#
diagram-design: sequence · fence @diagram · galeria 05 · 05a · fiel: a geometria do exemplo, número a número
# 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}06 · State machine#
diagram-design: state · fence @diagram · galeria 06 · 06a · fiel: a geometria do exemplo, número a número
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:72,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}07 · ER / data model#
diagram-design: er · fence @diagram · galeria 07 · fiel: a geometria do exemplo, número a número
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#
diagram-design: timeline · fence @diagram · galeria 08 · fiel: a geometria do exemplo, número a número
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#
diagram-design: swimlane · fence @diagram · galeria 09 · fiel: a geometria do exemplo, número a número
# 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 -> Deploy10 · Quadrant#
diagram-design: quadrant · fence @diagram · galeria 10 · 10a · fiel: a geometria do exemplo, número a número
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.11 · Radar / Spider#
diagram-design: radar · fence @diagram · galeria 11 · fiel: a geometria do exemplo, número a número
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 chart#
diagram-design: polar · fence @diagram · galeria 12 · fiel: a geometria do exemplo, número a número
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 profile13 · Loop#
diagram-design: loop · fence @diagram · galeria 13 · 13a · fiel: a geometria do exemplo, número a número
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 updated14 · Nested#
diagram-design: nested · fence @diagram · galeria 14 · fiel: a geometria do exemplo, número a número
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 configuration15 · Tree#
diagram-design: tree · fence @diagram · galeria 15 · 15a · fiel: a geometria do exemplo, número a número
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.16 · Org chart#
diagram-design: org-chart · fence @diagram · galeria 16 · fiel: a geometria do exemplo, número a número
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
- Maximo · offers · strategy
- Content · email · blog · SEO {tag:POD}
- Rory · copy · newsletter
- Commerce · shopify · CRO {tag:POD}
- Porter · Shopify admin
- Atlas · theme · APIs
- Systems · agents · runtime {tag:POD}
- Hermes · Paperclip health
> Setup gaps stay visible: specialists without Slack bots · approval gates · backend name mismatches17 · Layer stack#
diagram-design: layers · fence @diagram · galeria 17 · fiel: a geometria do exemplo, número a número
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#
diagram-design: exploded · fence @diagram type:figure · galeria 18 · 18a · 18b · 18c · 18d · 18e · 18f · 18g · 18h · fiel: a geometria do exemplo, número a número
# App stack · Three layers, one product
axis: Assembly order ↓
- 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.19 · Axonometric plan#
diagram-design: axonometric-plan · fence @diagram type:figure · galeria 19 · 19a · 19b · 19c · 19d · 19e · 19f · fiel: a geometria do exemplo, número a número
# Level 3 office · Where the team actually sits
grid: 9x6
axis: North ↑
- Open office · 24 desks 1,1 5x3 {door:east:2,south:2,south:5}
- Meeting room · 12 seats 6,1 4x2 {focal door:south:2}
- Kitchen · café, lockers 6,3 4x4
- Lobby · reception 1,4 4x3 {door:south}
- Booth · 1 person 5,4 1x3
# Open office
- Desk 1,1 {kind:desk h:10}
- Desk 3,1 {kind:desk h:10}
- Desk 5,1 {kind:desk h:10}
- Desk 1,3 {kind:desk h:10}
- Desk 3,3 {kind:desk h:10}
- Desk 5,3 {kind:desk h:10}
# Meeting room
- Table · 12 seats 7,1 2x1 {kind:table h:10}
# Kitchen
- Counter 9,3 1x4 {h:16}
- Lockers 7,5 {h:14}
# Lobby
- Reception desk 1,5 2x1 {h:14}
> Walls cut at desk height so every room reads from one view; the meeting room is the one under discussion.20 · Venn#
diagram-design: venn · fence @diagram · galeria 20 · fiel: a geometria do exemplo, número a número
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 / funnel#
diagram-design: pyramid · fence @diagram · galeria 21 · fiel: a geometria do exemplo, número a número
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 chart#
diagram-design: bar · fence @chart · galeria 22 · fiel: a geometria do exemplo, número a número
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,9323 · Waterfall#
diagram-design: waterfall · fence @chart · galeria 23 · fiel: a geometria do exemplo, número a número
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#
diagram-design: treemap · fence @diagram · galeria 24 · 24a · fiel: a geometria do exemplo, número a número
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 sum25 · Heatmap#
diagram-design: heatmap · fence @chart · galeria 25 · fiel: a geometria do exemplo, número a número
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,126 · Line chart#
diagram-design: line · fence @chart · galeria 26 · 26a · 26b · 26c · 26d · fiel: a geometria do exemplo, número a número
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,7527 · Gantt#
diagram-design: gantt · fence @diagram · galeria 27 · fiel: a geometria do exemplo, número a número
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..W1228 · Scatter plot#
diagram-design: scatter · fence @chart · galeria 28 · 28a · 28b · fiel: a geometria do exemplo, número a número
title: Deploy frequency vs. lead time · 12 teams
focal: Platform
---
# y-scale: 24 by 6
# trend: 168,103 900,388
# 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,229 · High-Level#
diagram-design: high-level · fence @diagram · galeria 29 · 29a · 01a · fiel: a geometria do exemplo, número a número
title: High-level architecture · End-to-end stack
cluster: Kubernetes {px:164,40 832x336}
# Stages
- Data sources
- Ingestion
- Storage
- Transformation & Analysis
- Visualization
---
# Sources {px:4,40 152x336}
- WEB · Census · Survey · Admin · web {px:12,60 132x64}
- FTP · Census · Business · ftp {px:12,140 132x64}
- DB Connection · CDC · SQL · API · db {px:12,220 132x64}
- Legacy System · Trade data · legacy {px:12,304 132x64}
---
# Ingestion
- Orchestration / Workflow Automation · (Apache Airflow) {bar px:176,52 808x44}
- Apache NiFi · Collect · route · transform {role:COLL px:176,112 152x80}
---
# Storage
- Trino · SQL · data virtualization {role:VIRT px:372,104 160x72}
- MinIO / S3 · Object store · S3-API {focal role:STORE px:372,208 160x80 rx:8}
---
# Transformation & Analysis
- Data Modeling · Notebook · Python · R {role:ANLZ px:600,144 164x80}
---
# Visualization
- Dashboards · Superset · reports {role:DASH px:820,144 152x80}
---
# Cross-cutting
- Identity Manager · (Active Directory) {px:4,388 992x40}
---
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 -> Dashboards30 · Process#
diagram-design: process · fence @diagram · galeria 30 · fiel: a geometria do exemplo, número a número
# 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 order31 · Medallion#
diagram-design: medallion · fence @diagram · galeria 31 · fiel: a geometria do exemplo, número a número
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 analysis32 · Data flow#
diagram-design: data-flow · fence @diagram · galeria 32 · 32a · fiel: a geometria do exemplo, número a número
# Role-scoped analytics data flow
steps: Ingest, Store, Transform, Analyze, Publish
- 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}
Clean & Model -> Curate Metrics
Curate Metrics -> Publish Dashboard {link}33 · DP integration#
diagram-design: dp-integration · fence @diagram · galeria 33 · fiel: a geometria do exemplo, número a número
title: Generic data platform integration topology
# 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}
- Object storage · versioned data objects {focal role:STORE x:400} | Query engine · federated SQL access {focal role:SQL x:656}
---
# 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
- Centralized logging · log · platform events · audit trail · retention
---
CRM -> Object storage REST
POS exports -> Object storage CSV
Event stream -> Object storage EVENTS
Object storage -> Query engine READ
Query engine -> BI tool JDBC
Query engine -> Notebooks KERNEL
Query engine -> Partner API HTTPS
Orchestrator -> Object storage, Query engine34 · DP security matrix#
diagram-design: dp-security-matrix · fence @diagram · galeria 34 · fiel: a geometria do exemplo, número a número
# 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#
diagram-design: sankey · fence @diagram · galeria 35 · fiel: a geometria do exemplo, número a número
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#
diagram-design: fishbone · fence @diagram · galeria 36 · fiel: a geometria do exemplo, número a número
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-incident37 · Wardley map#
diagram-design: wardley · fence @diagram · galeria 37 · fiel: a geometria do exemplo, número a número
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#
diagram-design: kanban · fence @diagram · galeria 38 · fiel: a geometria do exemplo, número a número
# 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 · maya39 · User journey#
diagram-design: journey · fence @diagram · galeria 39 · fiel: a geometria do exemplo, número a número
# 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 · Service blueprint#
diagram-design: service-blueprint · fence @diagram · galeria 45 · fiel: a geometria do exemplo, número a número
# 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
- —
- GL41 · Deployment#
diagram-design: deployment · fence @diagram type:figure · galeria 40 · fiel: a geometria do exemplo, número a número
# Checkout · deployment
size: 1040x416
- cf px:64,156 160x84 external "Cloudflare" "edge-cache v1.2" "CDN"
- ingress px:304,80 232x84 backend "ingress" "nginx-ingress v1.11" "POD"
- app px:304,196 232x116 backend "app ×3" "checkout-api v2.4.1" "POD"
- rds px:624,80 192x84 focal "rds-primary" "postgres 16.2" "MANAGED"
- replica px:624,212 192x84 store "rds-replica" "postgres 16.2" "MANAGED"
zone EDGE: px:40,40 208x280
zone PROD / EU-WEST-1: px:280,40 280x280
zone DATA: px:600,40 240x280
cf -> ingress HTTPS:443 {link from:196 to:120 via:296}
ingress -> app HTTP:8080
app -> rds TLS:5432 {link from:252 to:120 via:580}
rds -> replica WAL STREAM {dashed accent}42 · Dependency graph#
diagram-design: dependency · fence @diagram · galeria 41 · fiel: a geometria do exemplo, número a número
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}
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.43 · UML class#
diagram-design: uml-class · fence @diagram · galeria 42 · fiel: a geometria do exemplo, número a número
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}44 · Story map#
diagram-design: story-map · fence @diagram · galeria 43 · fiel: a geometria do exemplo, número a número
# 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}45 · Database schema#
diagram-design: db-schema · fence @diagram · galeria 44 · fiel: a geometria do exemplo, número a número
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}