drawspec gallery (inline profile, 99 of 99 drawn)

Every reference document through the current renderer. Look at it.

board-migration board
Docs migration — week 3To doWriting 1 / 3In review 3 / 2PublishedTroubleshooting+ 6 more pagesMartaGallery pageAnaTheming guideLuisEmbedding inMarkdownAnaMCP serverblocked on a decisionInstall guideCLI reference
board-onboarding board
A new hire's first fortnightBeforeDay oneWeek oneWeek twoCheck-inITLaptopshippedITAccountscreatedManagerWelcome andtourSet up thedevenvironmentthe step new hiresstall onFirst small fixmergedShadow anon-call shiftManagerThirty-minutecheck-inPilot cohortReading listsentBuddyassignedTeam lunchOwn a smallfeatureSurvey sentEveryoneAbove the line is what the first cohort gets; the rest waits for feedback.
board-retrospective board
Sprint 14 retrospectiveWent wellTo improveActionsRelease went out on theTuesdayPairing on the parserFlaky integration testsReviews waited two daysJoanQuarantine the three flakiesttestsAnaReview rota in the teamcalendar
board-story-map board
Borrowing a book, sliced into releasesFind a bookBorrow itReturn itSearch by titleSee if a copy is on theshelfBorrow at the desk with acardReturn at the deskFirst releaseSearch by authorReserve a copy that is outReminder before the duedateNextRecommendationsSelf-service kioskLater
chart-accent chart
The line the slide is aboutA chart series takes a role, so saying which series matters is the same sentence as saying which box matters. In the accent theme that role is drawn in colour and at the heavier weight; in the default theme it is drawn at the heavier weight alone, and the chart says the same thing.Q1Q2Q3Q420304050QuarterHours lost to incidentsPlatformService deskPayments3428221912141315
chart-area chart
How long the backlog would take to clearTwo bands of work stacked on each other across the year. The line along the top of each band is the data; the ground beneath it says how much of the whole that band accounts for.123456050100MonthDays of work leftKnownFound on the way
chart-bars chart
Where the tickets wentTwo teams' incident counts by quarter, side by side, and the backlog they left behind as an area under them.01234502040QuarterIncidentsPlatformService deskStill open3441282252475538121896
chart-brand-readings chart
Where the readings came fromBars in a derived brand theme: each series keeps its own fill pattern, and the brand's palette is laid over the patterns, so the chart still reads printed in greyscale. The brand's pale yellow was darkened by `drawspec theme from` until it read on a white page.Q1Q2Q3Q4010203040QuarterReadings, thousandsTide gaugesBuoysVolunteer reports4244434518212624691411
chart-complaints chart
Complaints per review roundThe corpus's complaint rate, by the round in which the diagram was reviewed.12340246Review roundDiagrams drawing a complaint (per ten)PlacementContent7.26.87.46.90.00.00.00.0
chart-responsibility chart
Who manages what, as you move up the stackThe shared-responsibility model is not a table: it is how much of each service model the customer is still holding. Three columns, each piled to the same total, and what the drawing says is the proportion.IaaSPaaSSaaS0255075100What you rentShare of the stack you manage (%)The providerYou
chart-stacked chart
Where the week wentBuild and run hours piled on each other quarter by quarter, against the capacity that was available for both.012345010203040QuarterHoursCapacityBuildRun202418151412202544424446
columns-before-after columns
What changedThe same diagram, authored two ways.Hand-written SVG, with every coordinate chosenby the author and reviewed by eyeA declarative document, with every coordinatederived and checked mechanically
columns-rise columns
The five stars of open dataTim Berners-Lee's scale: each star adds a condition to the one before it.★open licence★★structured★★★non-proprietary★★★★URIs★★★★★linkedEach star keeps everything the ones to its left require.
curve-burndown curve
How the sprint actually wentThe work left at the end of each day, against the straight line it would have followed if every day had been the same. The bulge is the day new work arrived.Days of the sprintWork leftIdealRealThe whole of itNew work arrives
curve-hype curve
How expectations moveGartner's hype cycle. There are no numbers behind this shape and no ticks on its axes: it names five places a technology passes through, in order.TimeExpectationsThe triggerPeak of inflated expectationsTrough of disillusionmentSlope of enlightenmentPlateau of productivity
curve-variance curve
Where a project has got toThree curves at one moment: what was planned to have been spent by now, what has been spent, and what has actually been earned. The two gaps are the point of the drawing — how far under the earned value is against what was spent, and how far behind it is against the plan — and neither of them is a point on the diagram.TimeCostPlannedSpentEarnedCost varianceSchedule varianceOne gap is measured down and the other along, which is why a span runs between two points rather than along an axis.
cycle-hub-flywheel cycle
Every click trains tomorrow's rankingA recommender's feedback loop. Items are ranked, shown, clicked or skipped, and the model is retrained nightly. The interaction log is what the loop turns around: the clicks are written to it and the retraining reads from it, so both are spokes to the middle rather than steps.writtenreadRank the candidate itemsShow the top tenUser clicks or skipsRetrain the model nightlyInteraction log
cycle-hub-oncall cycle
One on-call rotationA week on call, in the wheel theme. The pager is taken, pages are answered, the week is reviewed and what it found is fixed before the next handover. The runbook is what every rotation works from and writes back to, so it is the hub, joined to the step that updates it by a quiet spoke.Take the pagerAnswer the pagesReview the weekFix what the week foundThe team's runbook
cycle-hub-quality cycle
Plan, do, check, actThe improvement cycle of a quality standard: four steps that come round again, turning around the management system they improve. The system is not a fifth step, so it sits in the middle rather than on the ring.Plan: set objectives and targetsDo: run the processes as plannedCheck: measure against the targetsAct: correct and standardiseThe qualitymanagement system
cycle-review cycle
The review loopA change is drafted, reviewed, revised and merged, and what is learned feeds the next draft. One dashed shortcut goes back early: a revision that changed the shape of the thing is reviewed again rather than merged.if it changed shapeDraft the changeReview it against the planRevise on what the review foundMerge itRecord what the round taught
cycle-wheel cycle
The same four steps, with the going-round as the messageThe wheel theme draws a cycle's connectors as broad tapered ribbons. Nothing in the document changed — the arrows are appearance, so the theme decides them.Make itUse itCollect itMake it again
entities-enrolment entities
Who is enrolled in whatA logical model of course enrolment. A course runs as sections, one per term; a student enrols in a section, not a course. Departments live in another system, so they are drawn as outside this model and joined by dashed, non-identifying relations.DepartmentPKcodenameCoursePKcodetitlecreditsLecturerPKstaff numbernameSectiontermcapacityStudentPKstudent numbernameUQemailEnrolmentenrolled ongradeoffersemploysruns asteaches
entities-library entities
A library lends copies, not booksA conceptual model: four entities and the cardinality at each end of every relation. A book is the work; a copy is the thing on the shelf, and a loan is of one copy to one member.MemberPKmember numbernamejoined onBookPKISBNtitleauthorCopyPKbarcodeshelf markLoanlent ondue onreturned onis held asis lent inborrowsA book is the work; a copy is the thing on the shelf.
entities-orders entities
Orders, as storedA physical schema: three tables with their column types and keys. Each foreign key is drawn from its own column to the table it refers to, and deleting an order deletes its lines.customersPKiduuidUQemailtext…ordersPKiduuidFKcustomer_iduuidplaced_attimestamptzstatustextorder_linesFKorder_iduuidFKskutextquantityintegerunit_pricenumeric(10,2)on delete cascade
entities-shapes entities
Every shape can say its areaA class diagram: an interface, an abstract class realising it, two subclasses, and a picture made of shapes. Inheritance and realisation are drawn with a hollow triangle at the general end; composition with a diamond at the whole.«interface»Drawabledraw(canvas)«abstract»ShapeoriginPointarea() → floatmove(dx, dy)Circleradiusfloatarea() → floatRectanglewidthfloatheightfloatarea() → floatPictureadd(shape)total_area() → float
files-project files
A small web appThe source tree of a web app: components, an entry point, a linked utilities folder, tests and configuration.TSX…TSTSPDFJSONMDmy-appsrccomponentsButton.tsx12 moreindex.tsutils→ ../shared/utilstestsindex.test.ts+ addeddistdocsguide.pdf.gitignorepackage.json~ changedREADME.mdentry pointempty, git-ignored
files-text files
Where the docs liveA documentation site's layout, drawn as text and sorted with folders first.docs/├──assets/│├──logo.svg│└──…├──guide/│├──install.md│└──usage.md├──reference/#generated,donotedit└──index.md#thelandingpage
fishbone-backup fishbone
Why the backup finished at 09:40Audit table grew 4×after the logging changeNo retention on audit rowsDataBackup volume on slower storage tierNetwork shared with the reindex jobInfrastructureReindex moved to01:00 the same weekScheduleDuration alert only at 6 hGrowth trend not on any dashboardMonitoringNightly backupoverran its windowby 3 h 40 min
fishbone-flaky-ci fishbone
What makes CI fail without a code changeShared fixtures mutate stateSleeps instead of waitsTestsRunners differ in CPU countClock skew in containersEnvironmentLive calls to a sandbox APIDependencies1 in 12 runs failsand passes on retry
fishbone-late-orders fishbone
Why orders ship latePicking by order,not by zoneManual address checksMethodLabel printer jamsMachineBoxes out of stockSupplier ships shortMaterialPeak-seasontemps untrainedManpowerPromise date ignoresstock locationMeasurementCourier cut-offmoved earlierMilieuOrders ship afterthe promised dateCategories follow the 6M convention; any set of categories is allowed.
fishbone-signups fishbone
Why sign-ups fell after the redesignPhone numberbecame arequired fieldPassword rulesshown onlyafter an errorCaptcha onevery attemptFormPaid campaignpaused thesame weekSearch rankingunchangedTrafficSign-up buttonbelow the foldon phonesHero image adds1.2 s to loadPageTracking eventrenamed inthe releaseMeasurementPricing linkremoved fromthe headerCustomerlogos droppedTrustWeekly sign-upsdown 18 % since thenew landing pageDashed: investigated and ruled out. Bold: confirmed by the A/B rerun.
flow-accent flow
The same critical path, with colour doing the pointingThe accent theme. Colour marks the run with no slack in it and the box that ends the job; it says nothing a black-and-white printer would lose, because the weight already said it.Every hand-over is signed offBuild8 weeksDesign3 weeksHand over4 weeksApply for permits6 weeksSurvey the site3 weeks5 weeks of slack
flow-actor-handover flow
An incident, and whose each step isThe same four steps `flow-bands` draws, said the other way round. There a band names something running *alongside* the steps and does not attribute any of them; here `actor` names who performs each one. The difference is not decoration: a band's bar spans its members' extent, so an owner holding the first, second and fourth step would draw a bar straight across the third — claiming a step it does not perform. Ownership is a property of one box, not a span over several, which is why it is a field on the node.The incident ownerClosedThe on-call engineerContainedMonitoringDetectedThe on-call engineerTriagedThree owners across four steps, and the handovers are the two places the lead changes. Compare flow-bands , where thebars accompany all four and attribute none.
flow-actors flow
A release pipeline, and where it waits for a personFive steps, four of them automatic and one not, and that distinction is the whole reason to draw it. `actor` says who performs a step and is orthogonal to `role`: every box here is a plain `step`, because they are all the same kind of step — what differs is whose. Encoding ownership as a role would have cost the role, which is what made `decision` (a diamond, implying a branch that is not there) and `emphasis` (this matters, which is a different fact) both wrong.A release managerSign off the releaseCIBuild the artefactCIDeploy to productionCIDeploy to stagingCIRun the suiteThe actor is the box's lead, so the same words sit in the same place in every box and the odd one out is found by scanning onecolumn rather than by reading five labels.
flow-bands flow
An incident, and what runs alongside itFour steps read across the page, with two continuous activities beside them: keeping the reporter informed, which runs above, and recording what was done, which runs below. Neither contains the steps and neither contains the other — they are peers, and a band is how that is said. A group could not: a box sits inside one container or none, so two groups over the same four boxes would have to nest, which draws a hierarchy that is not there.ClosedContainedDetectedTriagedKeeping the reporter informedRecording what was doneA band accompanies its members; a group contains them. The bar spans what it names and the words sit outside it, so a longname never reaches back over the boxes.
flow-brand-release flow
Publishing next year's tide tablesA theme derived from a site's own stylesheet with `drawspec theme from`: its typeface, its corner radius and its stroke weight, and its accent on the one box and the path that matter. Every other line is still the page's ink.Within 5 cm of last year?Heights are above chart datumFit the harmonic constantsPull a year of gauge readingsPredict every high andlow waterPublish the tablesA hydrographer reviewsthe stationyesnoconstants corrected
flow-critical-path flow
The path that decides the dateA small project network. The heavy arrows are the critical path — the run of tasks with no slack, where a day lost is a day lost on the whole project.Build8 weeksDesign3 weeksHand over4 weeksApply for permits6 weeksSurvey the site3 weeks5 weeks of slack
flow-edge-roles flow
Every edge role, drawnThe seven roles a connector may take, each drawn between a pair of boxes: flow is the ordinary arrow; strong is the same relation at a heavier weight; link has no head at all and is the one role the default theme draws as a straight chord rather than routing; exchange has a head at both ends; weak is dashed with an open head; owns carries a diamond; and aside is dashed with no head, which is the pairing none of the other six could make. The head, the weight, the dash and the routing all follow from the role.asideand this belongs with itflowthen thislinkmerely associatedownsa part of itstrongthe path with no slackweaka soft dependencyexchangeboth waysAn author says what the relation is; whether it has a head is the theme's answer.
flow-groups flow
What a group is forA control plane holding four components, and two workers holding two each. The frames are the containers; the arrows cross them to reach the boxes inside — except the one that names a container, which stops on the frame's border because it is about the whole of it.The control planeA workerAnother workerIts agentIts agentThe API everything talks toThe controllersIts runtimeIts runtimeThe schedulerThe store of recordThe monitoring platformreads and writesassigns workassigns workwatches
flow-hub flow
What a post is defined byA post is the subject: the unit that contains it, the function that describes it, the cost centre it is charged to and the person who holds it are all defined by their relation to it. There is no sequence between them and no hierarchy — the four relations are peers, and the reading starts in the middle.The cost centreThe personThe postThe job descriptionThe unitcontainscharged toholdsdescribes
flow-inventory flow
What lives whereTwo racks and what is in each. Nothing happens after anything else here: the only relation is that a thing sits inside a container, and the drawing exists to show what belongs where.The control planeEvery worker nodeAPI serverCloud controllerNetwork pluginController managerStorage pluginNode agentNetwork proxyContainer runtimeSchedulerKey-value storeA set with no order is a shape, not a sequence — so it packs rather than ranks.
flow-mesh flow
Every leaf reaches every spineA spine-leaf fabric: three spine switches across the top, four leaf switches under them, and a link from each leaf to each of the spines. The crossings are the content — twelve links is what 'every leaf reaches every spine' looks like.Leaf 1Leaf 2Leaf 3Leaf 4Spine 1Spine 2Spine 3A link has no head and no direction, so the theme draws it as a chord rather than routing it.
flow-node-roles flow
Every node role, drawnThe seven roles a node may take, each drawn as the bundled default theme draws it: start and terminal are pills, with the terminal in a heavier line; a step is a plain rectangle; a decision is a diamond; emphasis is a rectangle at the heavier weight; a note has no outline at all; and a group is a dashed rectangle. An author names the role and the theme decides the shape, so a different theme draws this same document differently.decisiona question with named ways outemphasisthe one box that matters mostgroupa container, drawn around othersnotean aside, not part of theargumentstartwhere the diagram beginsstepthe ordinary box, and the defaultterminalwhere it endsSay what the box is, not what it looks like — the shape follows.
flow-retry flow
The nightly importThe vendor's export is fetched, checked and loaded into staging before it replaces the live table; a timeout and a deadlock are each retried in place.Do the row counts match?Fetch the vendor's exportLoad into stagingPage the data ownerSwap staging into liveyesnotimed out: retrydeadlock: retry
flow-status-failover flow
While the primary is downA runbook's topology during planned maintenance of the primary database, marked against normal running: the primary leaves, the replica is promoted, and the connection proxy is repointed. The applications do not change, which is the point of the proxy.Background jobsPrimary database− removedConnection proxy~ changedReplica, promoted to primary~ changedWeb application−+ writes− replication+ added~ changed− removedMarked against normal running.
flow-status-search flow
Search moves off the primary databaseA design document's proposal, drawn once as the target state with the change marked on it. Product search stops running full-text queries on the primary database: an indexer reads its change feed into a new search cluster, which the product service queries instead. The nightly re-index job goes away.Nightly re-index job− removedPrimary databaseAPI gatewayIndexer worker+ addedProduct service~ changedSearch cluster+ addedorders, stock+ queries+ change feed+−+ added~ changed− removed
flow-triage flow
Triaging a reportThe smallest flow that is still a flow: something arrives, one question is asked about it, and it goes one of two ways. The reference set's other flows are large on purpose — this one exists to be read whole.A report arrivesAsk for the documentSchedule a fixDoes it reproduce?yesno
flow-validation flow
Request validationAn incoming request is validated, then either queued for processing or rejected with a reason the caller can act on.Request arrivesEvery rejection is audited,including the reason givenIs the caller authorised forthis resource?Queue for processingRecord the outcomeagainst the request idReject with a reasonthe caller can act onIs the payload well formed?well formedmalformedauthorisedrefusednext request
funnel-innovation funnel
The innovation funnelMany ideas go in at the throat and few deployed solutions come out at the mouth. Between each pair of stages is a gate, where an idea is carried on, sent back, or stopped.gategategateMany ideasAssessed and chosenValidatedDeployed
gantt-critical-path gantt
Six activities, one critical pathA — designB — write the manualC — build the frameD — order partsE — fit the partsF — test051014DayHeavy bars have no float: delaying any of them delays the project.
gantt-migration gantt
Moving search to the new clusterPrepareProvision the clusterMoveMirror writes to bothBackfill historyShadow-read and compareCut reads overFinishRetire the old clustertoday0246810Week
gantt-semester gantt
A research methods module, term by termAutumn termLectures on study designWrite a research proposalProposal dueSpring termEthics reviewCollect dataAnalyse and write upFinal report duewinter breakSepOctNovDecJanFebMarMonth
gantt-upgrade gantt
Saturday's database upgradeOn-callAnnounce read-only modeDBATake and verify a backupDBAUpgrade the primaryDBARebuild replicasOn-callRun smoke testsOn-callLift read-only moderollback deadline02040608090Minutes after 02:00
journey-bug-report journey
Reporting a bug to usHits the bugSearches issuesFiles a reportWaits 3 weeksGets a fixignoredunsureheardThe wait is the whole problem: triage within a week is the proposed fix.
journey-first-week journey
The first week, as the new starter lives itDay 1Day 2Days 3–4Day 5lostneutralwelcomeDoesMeets the teamWaits for accountsReads the handbookShips a first changeNeedsA buddy to askAccess on day oneA first small taskFeedback on it
journey-outpatient journey
An outpatient visit, from the patient's sideReferredBookedArrivesWaitsConsultsTestsLeavesanxiousimpatientcalmreassuredDoesHears aspecialistis neededGets adate bytextChecks inSits for 50minutesTalksthroughthe resultsHas ablood testGets afollow-upletterWho or whatFamilydoctorBookingserviceKioskWaitingroomSpecialistLab nursePostCould improveShow thequeue ona screenSame-dayslot
journey-parking-permit journey
A parking permit, from the resident's sideFinds outAppliesProves addressPaysReceivesfrustrateduneasyneutralsatisfiedrelievedDoesGets a warningticketFills in the formUploads a utilitybillPays the annualfeeGets the digitalpermitWhereWindscreenCity websiteCity websitePaymentgatewayEmailFrictionAsked for thecar's registrationtwiceRejects phonephotos over 2 MB
lanes-disclosure lanes
From report to disclosureA runbook for a privately reported vulnerability: the reporter, the security team and engineering each hold their own steps, and the hand-offs between them are the arrows that cross a lane. The fix goes back to engineering while the reporter still finds it exploitable.ReporterSecurity teamEngineeringAcknowledges within 2working daysExplains why notPrepares a fix in aprivate branchReleases andpublishes the advisoryReports privatelyIs it avulnerability?Confirms the fixnoyesstill exploitable
lanes-expense lanes
Who touches an expense claimA design document's view of an expense claim, with a system as one of the parties: four lanes, a refusal that goes back to the employee, and a claim that ends in the payroll run.EmployeeManagerFinancePayrollsystemApproves?Checks againstpolicyCorrects theclaimAdds it to thenext payslipSubmits receiptsnoyes
lanes-onboarding lanes
A new hire's first week, preparedShort enough to read across the page, so the lanes run as rows. IT has two steps at once after the contract is signed, stacked in its one lane; the manager's two steps follow one another; everything meets on day one.People teamITManagerCreatesaccountsPicks abuddyShips alaptopWrites thefirst weekDay oneContractsigned
lanes-tender lanes
Open procedure, in outlineCourse notes on an open public tender. No `lanes` list is given, so the lanes come in the order their actors first appear: the authority that publishes, the bidders, and the committee that does most of the work in between.ContractingauthorityBiddersContractingcommitteeChecks theadministrativedocumentsAwards the contractProposes the awardPublishes the call fortendersScores the bids againstthe published criteriaSigns the contractSubmit sealed bidsthe winning bidderDeadlines vary by contract value; see the procurement act.
matrix-process matrix
What each phase producesFour phases across the top, each with the thing it hands on underneath it. The phases run left to right; each phase produces the output below it; and the last one returns to the first. The grid places the cells and the arrows say how they are related, which is what a table on its own cannot.PlanDoCheckActThe workWhat it hands onAgree what goodlooks likeMake the changeMeasure whathappenedKeep it or undo itCriteriaA changeA numberA decision
matrix-raid matrix
How a stripe is laid out across four disksOne row per RAID level, one column per disk. A cell says what that disk holds for one stripe: a block of data, a copy of one, or a parity block computed from the others. The fills say which kind, so the drawing still says it in black and white.Disk 1Disk 2Disk 3Disk 4RAID 0RAID 1RAID 5RAID 6ABCDAABBABCPABPQA block of this stripe's dataA copy of a block on another diskParity, computed from the blocks beside it
matrix-scale-ci matrix
Where CI fails, by service and weekThe share of continuous-integration runs that failed, per service per week. The numbers are the cells' text; the fill is the bucket the team put each number in, so the run of bad weeks on the billing service is visible before any number is read.Week 36Week 37Week 38Week 39Week 40authbillingsearchnotify1 %0 %3 %1 %1 %4 %14 %17 %12 %6 %0 %1 %1 %2 %0 %5 %3 %1 %11 %2 %raresometimesoftenRare: under 2 % of runs. Sometimes: 2 to 10 %. Often: over 10 %.
matrix-scale-risk matrix
Risks to the payments migrationA risk matrix: likelihood down the side, impact across the top, and each open risk written in the cell it was scored into. The cells are filled by how urgent that combination is, light to dark, so the corner that needs action now is the darkest wherever the eye lands.Minor impactModerate impactSevere impactLikelyPossibleRareDashboards lag a dayCard retries double-chargeLedger totals disagreeOld receipts reformattedRefunds queue for hoursWebhook signatures rejectedCurrency symbols misplacedSandbox keys expireProvider outage mid-switchAccept and watchMitigate this quarterMitigate before cut-over
matrix-scale-skills matrix
Who can cover what on the platform teamA skills matrix for planning on-call cover: people down the side, areas across the top, each cell filled by how far that person can go in that area, from learning to able to teach it. One cell is blank because nobody has assessed it yet; with no key written, the key lists the scale's own names in order.NetworkingDatabasesKubernetesObservabilityAnaLuisMartaTomáscan teachlearningcan leadcan assistcan assistcan teachlearningcan leadlearningcan leadcan teachnot assessedcan leadcan assistcan assistlearninglearningcan assistcan leadcan teach
pyramid-evidence pyramid
What a claim rests onEach level is only as good as the one beneath it.A decisionA measurementA method someone else could repeat
pyramid-top-heavy pyramid
What a claim has to surviveThe apex is the narrowest level and carries the longest sentence, which is the case the sizing has to answer.A finding nobodyhas managed torefute after tryinghard toReviewedMeasuredNoticed
quadrant-conflict quadrant
Five ways to handle a disagreementThomas and Kilmann's grid: how much you press your own concern against how much you accommodate the other's. No ticks — the directions are the point, not the numbers.How firmly you press your own concernHow far you go to meet theirsGive wayWork it out togetherSplit the differenceStep awayInsist
rings-scope rings
What is in scopeThe centre is fixed; the outer rings are where the arguments happen. The outermost ring names what it is and then says what that means; the two inside it only need naming, and are named the same way.Everything a theme canexpresstype, weight, shape, dash, fillThe nine diagramkindsOne document, oneSVGContinuous consultation and review sit outside every ring.
sankey-budget sankey
A town budget of €120 millionLocal taxes58 € millionState transfers47 € millionFees15 € millionBudget120 € millionPublic services41 € millionStaff46 € millionInvestment22 € millionDebt service11 € millionIllustrative figures for a town of 60,000.
sankey-cores sankey
64 reserved cores, by team and workloadSearch team40 coresPayments team24 coresAPIs34 coresBatch jobs14 coresReserved, idle16 cores
sankey-energy sankey
Where a data centre's 10 MW goGrid supply9.2 MWRooftop solar0.8 MWUPS and distribution7.4 MWCooling plant2.6 MWIT load6.8 MWConversion losses0.6 MWServers5.2 MWStorage0.9 MWNetwork0.7 MWHeat rejected outdoors2.6 MWCourse notes, power and cooling. Rounded figures for one hall at full load.
sankey-tickets sankey
1,000 tickets, by channel and outcomeEmail380 ticketsChat400 ticketsPhone220 ticketsAnswered by the help bot260 ticketsFirst line740 ticketsEngineering150 ticketsSolved930 ticketsDuplicate70 ticketsLast quarter's support tickets, from the channel they came in by to how they closed.
scatter-pareto scatter
Which initiatives are worth doing firstNine initiatives placed by their measured cost and expected impact. A quadrant would only say which quarter each sits in; a scatter's ticks let a reader read the actual numbers off it.24682468Cost (person-weeks)Impact (score)Cache the slow queryFix the flaky testTune the CI cacheAdd dark modeAdd SSORedesign onboardingRewrite the importerMigrate the databaseShip the mobile appCost in person-weeks; impact as a 0-10 score from the planning review.
sequence-checkout sequence
Placing an orderThe shop reserves the stock, asks the payment provider to charge the card, and learns the outcome later by webhook. A declined card releases the stock; an approved one sends the receipt and the shipping request at once.ShopperShop backendPaymentproviderStock serviceMailerplace the orderreserve 2 itemsreservedcharge 48.00payment declined200 OKrelease the itemscard declinedpayment approved200 OKsend the receiptship 2 itemsorder placedalt[card declined][card approved]parthe answer comes backby webhook
sequence-dns sequence
Resolving a name the first timeLaptopRecursiveresolverRoot server.org serverAuthoritativeserverwhere iswiki.example.org ?where iswiki.example.org ?ask the .org serverswhere iswiki.example.org ?ask ns1.example.orgwhere iswiki.example.org ?203.0.113.7cache it for the TTL203.0.113.7the next lookupstops hereNothing is cached yet, so the resolver walks the hierarchy from the top.
sequence-drain sequence
Draining a nodeOn-call engineerLoad balancerSchedulerNode web-3take web-3 out of rotation0 new connections to web-3cordon web-3stop one workloadstoppedanything still running?nothingloop[for each workload onthe node]wait for long requests:up to 2 min
sequence-upload sequence
A direct uploadThe API never sees the file's bytes. It hands out a short-lived upload address, the browser writes to the store directly, and the store tells a scanner, which tells the API whether the file may be used.BrowserAPIObject storeVirus scannerI want to upload report.pdfupload address, valid 5 minPUT the bytesstoreda new object arrivedreport.pdf is cleanreport.pdf is infecteddelete italt[scan passed][scan failed]Our account
stack-decisions stack
Where a decision is takenEach layer takes the decisions the one above it must not.The author says what the diagram meansThe theme decides what each semantic role looks likeThe tool decides every coordinate, line break and type size
states-brand-station states
What a tide station can be doingA state machine in a theme derived from a brand. The brand's accent marks the state that needs a person; the group frame and its dashes take the brand's muted grey, which they could lose in print and still be a group.Readings held backDriftingout of step with its neighboursGapno reading for an hourReportingevery six minutesRetiredAwaiting a visita technician is bookeda reading is missedcheck fails[10 cm off]24 hours suspectsite lostsensor replaced/ recalibrate
states-breaker states
When we stop calling the providerClosedcalls go throughHalf-openone trial callOpencalls fail fastcall fails[threshold reached]cool-down elapsestrial succeeds/ reset the counttrial failscall fails[under the threshold]/ count itThresholds are in breaker.toml ; the drawing names them, it does not restate them.
states-invoice states
What can happen to an invoiceIssuedAwaiting paymentDraftOverduePaidVoidWritten offsent to the customercancelleddue date passespayment matched90 days overdue[finance approves]every 7 days/ send a reminder
states-process states
The five states of a processBlockedExitedNewReadyRunningadmitteddispatchedwaits for I/Ocalls exit()time slice used upI/O completes
states-ticket states
The life of a support ticketA ticket is opened, worked until it is resolved, and closed once the customer agrees or a week passes; while it is being worked it is either under investigation or waiting on the customer.Being workedClosedInvestigatingOpennobody owns it yetResolveda fix is offeredWaiting on the customeran agent takes ita question is senta fix is foundthe customer agrees7 days passthe customer repliesthe fix fails3 days pass/ send a reminder
timeline-disaster timeline
What an outage costsThe same four moments, spaced by when they happened rather than evenly: the gap between the last backup and the failure is the data you lose, and the long stretch after it is the time you spend getting back. The clock runs under the line, and the named intervals under that — the maximum tolerable downtime is the recovery time and the work-recovery time together, which is what the two bars over one bar say.LastbackupIt failsSystemsbackWorkingagain02:0008:00Next day,08:00Next day,22:00Data lostRecovery timeWork recoveryMaximum tolerable downtime
timeline-rise timeline
Three degrees of going digital, by how deep the change cutsThe axis grows to the right: each degree changes more than the one before it. Above the line, what changes; below it, an example.Digitisingchanges the mediumDigitalisingchanges the channel of theprocessDigital transformationchanges the service model,the structure and the culturepaper → filecounter → onlinethe errand disappearsdepth of the change to the organisation
timeline-work timeline
How the work wentEach stage settled something the next one depended on. Above the line is what happened; below it is when.BriefSpecificationPlanFoundationKindsMarchAprilMayJune to JulyAugust
tree-compartments tree
A box that is a name over what belongs to itThe same lead-and-detail every label may carry, separated by a rule instead of by weight. A blank-free newline in `text` is the author saying these are two things; `[box] lead` is the theme saying what separates them, and this theme says a line. It is what a class, a record or a component is drawn as by hand — a name, a rule, and the things under it. Who performs a step is the same shape and has its own field: see `actor` and `flow-actors`, which puts the name in the lead so a document does not have to write it into the label.Card paymentlast four digitsschemePaymentreferenceamounttaken atRefundreversesreasonSettledno further change is possibleBank transfersort codecleared at
tree-decisions tree
Where a decision is takenWhich decisions belong to the author, which to the theme, and which to the tool.The author decidesWhere the lines breakEvery coordinateWhether it fits at allWhat the diagrammeansWhich semantic roleeach part hasA decision about thedrawingWhat a role looks likeThe theme decidesThe tool decidesWhich size each level isset at
tree-status-reorg tree
The platform group after the reorganisationAn organisation chart of the proposed platform group, with the change marked on the one chart rather than drawn as a before and an after. Build infrastructure is folded into a new developer-experience team, and site reliability takes over on-call tooling.Build infrastructure− removedCI runnersData platformDeveloper experience+ addedHead of platformOn-call tooling+ addedSite reliability~ changedWarehouse−++++ added~ changed− removed
treemap-bundle treemap
The 2.4 MB front-end bundleOur code520 kBDate handling330 kBUI components300 kBPolyfills190 kBEverything else150 kBCharting library910 kBThe charting library is used on one page.
treemap-disk treemap
Why /var is full on the build server/var/lib/docker111 GB/var/log15 GBBuild cache38 GBVolumes12 GBJournal9 GBApp logs6 GBOther4 GBDangling images61 GB
treemap-latency treemap
Where a checkout request's 480 ms goIn the database245 msIn the API115 msIn the browser105 msOrder insert55 msLock wait30 msPrice calculation70 msAuth check25 msSerialisation20 msTLS handshake60 msRendering45 msOther15 msInventory query160 msThe inventory query reads the whole table; an index is in review.
treemap-oncall treemap
212 on-call hours in the quarterCertificate renewals41 hoursReal incidents38 hoursFlapping health checks35 hoursAccess requests24 hoursDisk alerts74 hoursEvery disk alert was cleared by the same two commands.
venn-data-roles venn
Where a data engineer sitsAnalyticsengineeringPlatformengineeringMonitoringand SLOsDataengineeringSoftware engineeringData analysisOperations
venn-frameworks venn
Two frameworks, one breachNotify thesupervisoryauthoritywithin 72 hReport to thenational CERTKeep anincident recordData protectionregulationNational securityframework
venn-parity venn
Feature parity, honestlyAdmin consoleOffline editingPush alertsBulk exportViewing andcommentsWebDesktopMobile
venn-telemetry venn
What each signal can answerThe exact error textTrends overmonthsWhere thetime wentWhichrequestfailedp99 perendpointIs it brokenright now?LogsMetricsTracesTraces, outlined heavier, are the signal this quarter adds.