A hand-placed grid of rectangular blocks where the 2-D arrangement itself carries the meaning. Reach for it when you want precise control over columns, spans, and nesting instead of automatic layout.
block Web Service Architecture
tag Layer as l
Edge blue
Service green
Data orange
[Clients] l: Edge
[Browser][Mobile][CLI][Backend] l: Service
[Auth][Orders][Inventory][Billing][Data] l: Data collapsed
[Postgres][Redis]
Boxes and Lines
boxes-and-lines
General-purpose components wired together with the layout handled for you. Boxes carry status colors and connect to their neighbors — the workhorse for system and component sketches.
boxes-and-lines Pirate Fleet Command
tag Status as s
Operational green
Damaged orange
Sunk red
Building blue default
heat Crew red green
show-valuesactive-tag Status
Flagship s: Operational,heat:120->[Harbor Defenses]-> IntelNetwork
[Harbor Defenses]
FortCannon s: Operational,heat:40-> Watchtower
Watchtower s: Operational,heat:12
SeaMines s: Building,heat:6
IntelNetwork s: Operational,heat:35-> SpyRing
-> SignalFlags
SpyRing s: Operational,heat:18->[Harbor Defenses]
SignalFlags s: Damaged,heat:8
C4
c4
Documents software architecture in the C4 style — people, systems, containers, and their interactions across zoom levels. Built to explain how a system fits together for mixed technical and non-technical readers.
c4 Pirate Treasure Map System
solid-filltag Scope as sc
Crew blue
External gray
Captain is a person description: Commands the fleet and plans raids
TreasureMap is a system description: Tracks buried treasure locations and raid intelligence
-Views treasure locations-> Captain
-Sends raid alerts [carrier pigeon]-> Lookout
containers
ChartRoom is a container description: Interactive sea chart with treasure markers,tech: Parchment
-Queries treasure data [secret code]-> Vault
Vault is a container description: Encrypted treasure ledger and coordinates,tech: Iron Chest
-Reads/writes [quill and ink]-> TreasureLog
TreasureLog is a container description:"Stores locations, guard counts, and loot inventories",tech: Leather-Bound Tome
Lookout is an external description: Crow's nest spotter on allied ships, sc: External
~Relays sightings to~> Captain
deployment
Flagship
container ChartRoom
container Vault
SecretCave
container TreasureLog
Class
class
Models object-oriented structure — classes with their attributes, methods, and inheritance or interface relationships. The go-to for capturing a type hierarchy or domain model.
class Ship Class Hierarchy
interface Vessel
+ sail(): void
+ anchor(): void
abstract Ship implements Vessel
# name: string
# crew: number
+ getName(): string
Galleon extends Ship
- cannons: number
+ fire(): void
Sloop extends Ship
- speed: number
+ flee(): void
enum ShipType
Galleon
Sloop
Frigate
Ship
-> ShipType has type
Entity Relationship
er
Describes a database schema as entities, their columns and keys, and the cardinality of the relationships between them. Reach for it when the data model is what you need to communicate.
er Pirate Fleet
ships
id intpk
name varchar
ship_type varchar
cannons int1-aboard-* crew_members
1-1 captains
1-carries-* treasure
captains
id intpk
name varchar
ship_id intfk
bounty int?-frequents-1 ports
*-has-1 crew_members
crew_members
id intpk
name varchar
ship_id intfk
role varcharnullable
treasure
id intpk
name varchar
value int
ship_id intfk,nullable
ports
id intpk
name varchar
region varcharunique1-docks-* ships
Flowchart
flowchart
Shaped nodes and labeled arrows that trace a process or decision path from start to end. The default choice when you need to show steps, branches, and outcomes.
flowchart Mutiny Resolution
direction-tb[Sail] Set sail under the captain
{Trouble?} Discontent in the crew?
[Hold] Hold steady, stay loyal
{Vote} Crew vote called
[Mutiny] Seize the ship
[Maroon] Maroon the captain
[New] Elect a new captain
(Sail)->(Trouble?)(Trouble?)-No->(Sail)(Trouble?)-Yes->(Vote)(Vote)-Stay->(Hold)(Vote)-Mutiny->(Mutiny)(Mutiny)->(Maroon)(Maroon)->(New)(New)->(Sail)(Hold)->(Sail)
Infrastructure
infra
Maps service and infrastructure topology with live operational metrics on each node — request rates, cache-hit ratios, latency. For showing how traffic moves through a running system.
infra Pirate Communication Network
tag Fleet as f
Blackbeard red
Bonny purple
Rackham blue
Edge
rps:200-> SignalFlags
SignalFlags f: Blackbeard
description: Flag semaphore relay — ship-to-ship messaging
latency-ms:30000-> Flagship
-> ScoutShip
Flagship f: Blackbeard
description: Command vessel — decrypts and routes all intelligence
instances:1max-rps:50latency-ms:5000-> CarrierPigeons
-> RumRunner
ScoutShip f: Bonny
description: Fast sloop for reconnaissance
instances:2max-rps:30latency-ms:8000-> Flagship
CarrierPigeons f: Rackham
description: Long-range bird relay — messages to allied ports
buffer:100drain-rate:12retention-hours:72-> TavernNetwork
[Allied Ports]instances:3
TavernNetwork f: Rackham
description: Dockside tavern informants across the Caribbean
max-rps:20latency-ms:86400000
RumRunner f: Bonny
description: Smuggler supply line— moves coded messages in rum barrels
concurrency:4duration-ms:172800000-> TavernNetwork
Sequence
sequence
Shows how participants exchange messages over time, ordered top to bottom. The standard for tracing a request, protocol, or interaction between services or actors.
version-control Feature Branch Workflow
main
Initial commit
Add README
develop from main
Set up CI
Add test suite
feature/login from develop
Login form
Form validation
develop
merge feature/login
Address review notes
main
merge develop tag: v1.0.0
Hotfix typo type: highlight
Wireframe
wireframe
A low-fidelity screen layout built from stock UI elements — inputs, buttons, nav, checkboxes. For sketching an interface before any pixels are designed.
wireframe Pirate Crew Portal
[Header]
The Jolly Roger Crew Hub
nav
Dashboard active
Treasure Map
Ship Log
Crew Roster
[Main]# Ahoy, Captain!
Next Raid Target [Port Royal]
Estimated Loot [5000 doubloons] readonly
{The Revenge | The Serpent | The Phantom}<x> Load extra cannons
<> Fly false colors
(*) Full crew
() Skeleton crew
(Set Sail!)(Abort Mission) ghost
---
New to piracy? (Read the Code) ghost
Data 11
Arc
arc
Maps weighted connections across a set of entities, drawn as arcs along a baseline or wrapped into a circular chord layout. Best when the pattern of links — who connects to whom, and how strongly — is the story.
Compares a value across categories using length — the most direct way to read which is bigger. Grouped and stacked series handle multi-dimension comparisons.
function Cannonball Trajectories by Elevation
x-label Distance (meters)y-label Height (meters)x0 to 25015 degrees blue:-0.001*x^2+0.27*x30 degrees green:-0.002*x^2+0.58*x45 degrees red:-0.003*x^2+0.75*x
Heatmap
heatmap
A grid of cells shaded by value, revealing patterns and hotspots across two dimensions at a glance. For dense matrices where color makes the structure pop.
heatmap Pirate Activity by Sea Region
columns Jan, Feb, Mar, Apr, May, Jun
// label value1, value2, ...
Caribbean 545345
Atlantic 232432
Mediterranean 321234
Indian Ocean 454543
South China Sea 123212
West Africa 334354
Line
line
Connects data points to show how a value moves over a continuous axis — the default for trends over time. Multiple series and shaded eras are supported.
line Ship Speed Over Voyage
series Knots
x-label Day
y-label Speed
era Day 1-> Day 3 Rough Seas red
era Day 3-> Day 7 Fair Winds blue
Day 18
Day 210
Day 37
Day 412
Day 59
Day 611
Day 76
Pie
pie
Splits a whole into proportional slices so relative share is immediately visible. Best for a handful of categories that sum to a meaningful total; add a hole for a doughnut.
pie Crew Roles Distribution
solid-fill//no-percent//no-value
Sailors 45
Gunners 20
Marines 15
Officers 8
Specialists 7
Cooks & Surgeons 5
Polar Area
polar-area
Compares categories as wedges of equal angle but varying radius around a circle. A rounder alternative to a bar chart when you want values arranged radially.
Plots several metrics on axes radiating from a center, tracing a shape that profiles strengths and weaknesses. For comparing entities across the same dimensions.
scatter Pirate Captains
x-label Ruthlessness
y-label Treasure
[Caribbean] red
Blackbeard 908500
Calico Jack 553200
Anne Bonny 702800
Henry Morgan 8512000
Charles Vane 754100[Atlantic] blue
Black Sam Bellamy 609200
Bartholomew Roberts 8811000
Edward Low 955500
Stede Bonnet 301800[Indian Ocean] green
Henry Every 8014000
William Kidd 656800
Thomas Tew 507200
Slope
slope
Connects two points in time with one line per item, making rises, falls, and rank changes jump out. For before-and-after comparisons across many items.
slope Pirate Fleet Strength:1715 vs 1725period17151725
Blackbeard red 404
Bartholomew Roberts blue 1252
Charles Vane orange 202
Anne Bonny green 815
Calico Jack purple 186
Treemap
treemap
Nested rectangles sized by value, showing both hierarchy and proportion in one dense view. For breaking a total down into categories and subcategories.
mindmap Product Strategy
tag Priority as p
High red
Medium yellow
Low green
tag Department as d
Engineering blue
Design purple
Marketing orange
Research d: Marketing
User Interviews p: High
Surveys description: Quarterly NPS survey
Focus Groups
Competitor Analysis d: Engineering
Feature Matrix
Pricing Review
Development p: High, d: Engineering
MVP Features
Auth System
description: Handle login, signup, OAuth flows
Dashboard
Nice-to-haves p: Low,collapsed: true
Dark Mode
Export PDF
Go-to-Market d: Marketing
Launch Plan
Blog Post
Demo Video description:2-min product walkthrough
Cycle
cycle
Arranges stages in a closed loop where the last step feeds back into the first. For recurring processes and continuous frameworks like OODA or PDCA.
cycle The Pirate Raid Cycle
solid-fill
Scout blue
Spot merchant vessels from afar
Pursue green
Raise the colors, trim the sails
Board orange
Swing across and seize the deck
Celebrate red
Divide the spoils, then repair
Journey Map
journey-map
Charts a person's experience across the stages of a process, plotting emotional highs and lows as a continuous curve. For finding pain points and opportunities in a service.
journey-map A Cabin Boy's First Voyage
solid-fillpersona Squidlips Sam color: blue
Greenhorn cabin boy, first time at sea
Sworn to the crew but quietly terrified
[Signing On]
Sign the articles score:4,emotion: Hopeful
description: Captain reads the code aloud — pay shares, no women aboard, lights out at 8[The Tempest]
Caught in a squall off the reef score:1,emotion: Terrified
pain: Two crewmates lost overboard before dawn
thought: Maybe the merchant fleet wasn't so bad after all
Dawn, and she still floats score:3,emotion: Relieved
[The Prize]
Strike the colors score:5,emotion: Triumphant
description: Heavy with silver from the Veracruz mines
[Homecoming]
Bury a share on the island score:5,emotion: Proud
thought: Three doubloons hidden where only he can find them
Back to the Rusty Anchor score:4,emotion: Content
opportunity: Next time he signs on as a full hand, not a boy
Map
map
Renders data on a real geographic map — shaded regions, points of interest, and routes. For anything where location is the organizing dimension.
map The Brethren's Caribbean
tag Port as p
Home Port red
Friendly green
Spanish Prize orange
tag Passage as l
Open Sea blue
Coastal Run teal
poi Kingston p: Home Port,size:120poi Havana p: Spanish Prize,size:90poi Santo Domingo p: Friendly,size:70route Kingston
~weigh anchor~> Havana l: Open Sea
~raid the galleons~> Santo Domingo l: Coastal Run
~careen & resupply~> Kingston l: Open Sea
Funnel
funnel
Shows how a quantity narrows through sequential stages, exposing where the biggest drop-offs happen. The standard for conversion and pipeline analysis.
org The Dread Fleet
solid-fillsub-node-label Crew
show-sub-node-counttag Rank as r
Sailor blue
Captain red
FirstMate orange
Quartermaster yellow
Bosun green
Gunner teal
Jester cyan
Swab purple
tag Ship as s
Revenge blue
Serpent green
Phantom purple
tag Status as st
Loyal green
Turncoat red
NewRecruit yellow
Blackbeard r: Captain, s: Revenge
Anne Bonny r: FirstMate
[Gun Deck]
Cannonball Pete r: Gunner
Smokey Jack r: Gunner, st: NewRecruit
Powder Meg r: Swab, st: NewRecruit
[Boarding Party]
Cutlass Jim r: Bosun
Red Mary
One-Eyed Dan st: Turncoat
Calico Rackham r: Quartermaster
[Cargo Hold]
Barnacle Bob
Slippery Sal st: Turncoat
Long John r: FirstMate, s: Serpent
[Rigging Crew]
Monkey Fist r: Bosun
Pegleg Pete
Crow Jane
[Navigation]
Stargazer Quinn r: Quartermaster
Compass Rose st: NewRecruit
Pyramid
pyramid
Stacks layers from a narrow apex to a wide base, encoding rank, foundation, or proportion. For tiered models where each level rests on the one below.
pyramid Pirate Crew Hierarchy
solid-fill
Captain purple
Final word on heading and plunder,
keeper of the ship's charter.
Quartermaster blue
Second-in-command, arbitrates
disputes, divvies the booty.
Boatswain & Gunner green
Keep the rigging tight and
the cannons ready.
Able Seamen yellow
Haul lines, swab decks,
and stand watch.
Powder Monkeys orange
Ferry shot and charges to the guns
during a broadside.
Quadrant
quadrant
Places items in a 2x2 grid defined by two axes, sorting them into four labeled zones. The classic for prioritization and positioning frameworks.
quadrant Crew Performance Assessment
x-label Low Skill, High Skill
y-label Low Loyalty, High Loyalty
top-right Promote green
top-left Train yellow
bottom-left Maroon red
bottom-right Watch Closely purple
Quartermaster 0.90.95
Navigator 0.850.8
Gunner 0.70.6
Surgeon 0.80.75
Boatswain 0.60.85
Cook 0.40.9
New Recruit 0.20.5
Troublemaker 0.650.2
Spy 0.80.1
Ring
ring
Concentric rings radiating from a core, each layer a widening sphere of scope or influence. For nested-context models where distance from center means reach.
ring Captain's Sphere of Influence
solid-fill
Captain red
Final word on heading and plunder,
keeper of the ship's charter.
Quartermaster orange
Second-in-command, arbitrates disputes and divvies the booty
Crew yellow
Deckhands, gunners, and powder
monkeys aboard the ship.
Allied Crews green
Loose alliances kept by oath
or shared bounty in fair seas.
The Open Sea blue
Weather, currents, and rival
flags beyond any captain's reach.
Sankey
sankey
Traces quantities as flowing bands whose width encodes volume as they split and merge across stages. For following where a total goes, step by step.