Gallery

A whiteboard is the same data structure whatever you're drawing. Here are five genuinely different boards — an architecture, a storyboard, a wireframe, an incident analysis, a sprint board — each a single superlore-canvas spec, each a typed graph the MCP can read.

1 · Cloud architecture — a URL shortener

The SRS test: a real request-path architecture with tiers, datastores, a key-generation service, a cache, and an async analytics pipeline. Connectors are routed by ELK so they weave between tiers instead of cutting through them.

An agent over the MCP can answer "what does the redirect service depend on?" straight from the depends-on edges — cache, then DynamoDB on a miss — without reading the picture.

2 · Product storyboard — onboarding

A row of scene frames (each a column: the shot + its caption) — a video script / onboarding walkthrough you can read left to right.

3 · UI wireframe — mobile dashboard

The layout regions are the screen: a column shell with a header row, a KPI grid, an activity column, and a tab-bar row. No coordinates.

4 · Incident analysis — checkout p99 regression

A column from symptoms to fix, with a live StatGrid of the blast radius, hypotheses on a sticky wall, and the root cause called out. Each note is typed data the MCP can read.

5 · Brainstorm — a growth jam

layout: "free" + sketch: true for a hand-drawn ideation board: a central goal with ideas radiating out, stickies and a margin note.

6 · Hand-drawn accents — where they're needed

A real brainstorm isn't all hand-drawn or all crisp — it's a clean structure with marker on top of it: a circled bet, a stuck-on sticky, a scribbled arrow. Set hand: true on the elements that want it (and outline: true for a "circle this" ring); leave the rest crisp.

Six boards, one component, one knowledge model. Author once; humans get the whiteboard, agents get the graph.