Whiteboard for developers

Draw the system before you build it.

Architecture, schemas, flows and the sprint on one shared board, drawn by AI or by the coding agent you already use.

Draw your system free Connect your coding agent

A whiteboard for developers is where the thinking around the code happens: how the services fit together, what the tables look like, which call fails first and what ships this sprint. MockFlow puts cloud architecture, ER and sequence diagrams, code, specs and sprint boards on one online whiteboard. AI draws a first version from a sentence, or Claude Code and Codex draw it from your repo, and the team reviews it together in one place.

From your repo

A system design whiteboard that reads your code.

Ask your coding agent in the terminal. The diagram lands on the board your team already has open.

Claude Code~/checkout

> Draw our cluster from k8s/

k8s/shop/checkout.yaml kind: Deployment

k8s/shop/svc.yaml kind: Service

k8s/data/pg.yaml kind: StatefulSet

Read 9 manifests in k8s/

Drew 3 namespaces and 8 objects

Checkout cluster

Claude Code~/checkout

> Map the monorepo's packages and who owns them

apps/ web api worker

packages/ ui sdk config

Read package.json in 6 packages

Read CODEOWNERS

Drew a tree of 9 nodes

Monorepo packages

Claude Code~/checkout

> Who owns which service and what calls what?

services/ api payments web

CODEOWNERS @payments-team @storefront

Read 5 services and CODEOWNERS

Found 5 calls and 3 owners

Drew a knowledge graph

Services and owners

Claude Code~/checkout

> Turn last night's incident log into a runbook

02:14 alert: checkout 5xx above 2%

02:19 rollback api v2.41

02:31 provider degraded, backup on

Read incident-0412.log

Drew a swimlane in 3 lanes

Checkout outage runbook

From manifests. Claude Code reads k8s/ and draws each namespace, service and deployment with Kubernetes icons.

From the repo layout. A tree diagram of apps and packages, with the owner of each from CODEOWNERS.

From the code and CODEOWNERS. A knowledge graph of services, teams and the calls between them.

From an incident log. A swimlane runbook with a lane for the on call engineer, the API and the payments provider.

Your agent reads files on your computer and never uploads them; only the drawing is saved. Prefer the board? Ask Mida, or use the AI cloud architecture generator, database diagram generator and sequence diagram generator.

Design reviews

An architecture diagram whiteboard for the whole team.

One picture of the system that everyone can point at, correct and keep.

Elena, a platform engineer, thinks through a system design at her desk beside two monitors

Draw our analytics pipeline from the dataflow/ jobs

Analytics pipeline

Claude Code Drew 5 services on Analytics pipeline

Elena maps the analytics pipeline before Friday’s review.

Claude Code draws it from the Dataflow job files, and the team comments on the real diagram instead of a screenshot. See Create a cloud architecture diagram.

Specs and sprints

The spec, the code and the sprint, beside the diagram.

A whiteboard for software teams keeps the decision next to the work it starts.

Retry policy spec

Retry policy for payments

Owner: Lucas · Status: In review

Goal

A slow payment provider never fails a checkout on the first error.

Rules

Retry charge() three times with exponential backoff.
Use the order id as the idempotency key.
After the third failure, page the on call channel.

Out of scope

Refunds keep their current flow.

retry.ts

1export async function retry(fn, tries = 3) {
2  for (let i = 1; i <= tries; i++) {
3    try { return await fn(); }
4    catch (err) {
5      if (i === tries) throw err;
6      // back off: 400ms, 800ms
7      await sleep(200 * 2 ** i);
8    }
9  }
10}

Sprint 12

To doReceipts queue alarmIdempotency keys

In progressAdd retry to charge()Split orders DB

DoneLoad test checkout

Release 2.4

TaskWeek 1Week 2Week 3

Retry and idempotencyLucas

Receipts queueSam

Load test and launchElena

SamSpec approved. I moved the alarm card into this sprint.Reply

Sam

Write it, show it, plan it.

A document for the spec, a code block with syntax highlighting, a kanban board and a Gantt chart for quick planning of the release.

Bring your own agent

Your agent, your credits.

The drawing runs on the AI subscription you already pay for, with no MockFlow AI credits.

Plugins for Claude Code and Codex

Stay in your terminal. The agent draws on the board open in your browser through MockFlow Bridge, and follow ups change the same drawing.

# in Claude Code
/plugin marketplace add mockflow/mockflow-claude-plugin
/plugin install mockflow@mockflow
# once per computer
npm i -g @mockflow/mockflow-bridge
mockflow-bridge

Set up the Claude Code plugin Set up the Codex plugin

MockFlow MCP for any coding tool

Create boards from Claude Code, Cursor, VS Code with Copilot or Codex, without a board open.

npm install -g @mockflow/ideaboard-mcp
mockflow-ideaboard-mcp login
mockflow-ideaboard-mcp
# then add it to your tool
claude mcp add --transport http -s user \
  mockflow-ideaboard http://localhost:21193/mcp

Connect MockFlow MCP MockFlow MCP

Every plan. Basic runs Claude Code through Bridge on one board with a daily number of free generations. Plus and Max include Bridge Pro: unlimited generations, several boards, other agents and reading a local folder. Max adds connected tools such as Jira. MockFlow Bridge on each plan

Recommended

Ready made for developers.

Templates, apps, AI experts, agent skills and automations from the MockFlow library.

Diagrams

Database Schema DesignerDescribe your app and get a normalized database schema

Diagrams

Incident Response RunbookGenerate a step-by-step incident response plan with escalation paths and role assignments

Planning

Automations

All automation templates

GitHub Pull Requests to What's New Post automation template

GitHub Pull Requests to What's New PostEvery Friday, turn the pull requests merged in GitHub into a plain words "What's new this week" social post.Marketing and salesMax

Use this template

Linear Daily Stand-up Board automation template

Linear Daily Stand-up BoardEvery weekday morning, get a stand-up board of Linear issues done, in progress and blocked, posted to Slack.MeetingsMax

Use this template

Linear Sprint to Kanban Board automation template

Linear Sprint to Kanban BoardEvery Monday, get a kanban board of the current Linear cycle with each issue under its status, assignee and due date.ProductMax

Use this template

Plans

Free for side projects, ready for teams.

Basic is free forever for personal and nonprofit work. Compare plans.

Feature	Basic	Plus	Max
Cloud, ER, sequence and flowchart diagrams
Code blocks, documents, kanban and Gantt charts
People who can edit	1	As many as you add	As many as you add
AI credits each month	100	800 per editor	2,000 per editor
Your own agent through Bridge	Claude Code, daily limit	Unlimited, every agent	Unlimited, every agent
Agent reads a folder on your computer
Connected tools such as Jira, Notion and Slack
Wireframe to code with Build mode

More boards by role: designers, product managers, workshops and every team. Diagram pages: architecture diagrams, UML diagrams and AI whiteboard.

Questions

Developer whiteboard questions.

What is a whiteboard for developers?

A whiteboard for developers is a shared canvas for the work around the code: architecture diagrams, database schemas, sequence diagrams, specs and sprint boards. In MockFlow they sit on one board, AI or your own coding agent can draw them, and the team reviews them together.

Can I draw AWS, Azure, Google Cloud and Kubernetes diagrams?

Yes. Add a Diagram frame, pick a cloud type and describe the system, or drag provider icons from the shape library, such as AWS, Azure and Google Cloud packs. Cloud diagrams are included on every plan, and generating them with AI uses AI credits.

Can Claude Code or Codex draw on the board?

Yes. The MockFlow plugins for Claude Code and Codex draw on the board open in your browser through MockFlow Bridge, and they use no MockFlow AI credits. On Basic, Bridge runs Claude Code on one board with a daily number of free generations. Plus and Max remove the limit and add other agents.

Does MockFlow upload my code?

No. Your agent reads the files on your computer, and only the finished drawing is saved to your board. When you ask Mida on the board instead, letting Bridge read a local folder is part of Bridge Pro on Plus and Max.

Can I put code on the board?

Yes. The CodeBlock component shows code with syntax highlighting for languages such as Python, JavaScript, SQL, Java and Go, with light and dark themes, line numbers and a title bar. It is on every plan.

Can I plan sprints on the same board?

Yes, for quick planning. Kanban boards, Gantt charts, timelines and checklists sit beside the diagrams. On Max, Mida can also read connected tools such as Jira, Notion and Slack.

Can I turn a design into code?

Yes, on Max. Build mode in WireframePro converts a wireframe or part of it into HTML, React, Vue or native code, and Export for AI Prompt writes a prompt for tools such as Claude Code or Cursor.

Is the developer whiteboard free?

Yes. Basic is free forever with 4 projects, every diagram type, the CodeBlock component and 100 AI credits a month, for personal and nonprofit use. Plus and Max add editors, Bridge Pro and more AI.

Get started

Draw your next system on a board.

Draw your system free Connect your coding agent

No account needed

mockflow.com/new

Open a board in one click and sketch the system by hand. Sign up free to use AI, connect your agent and share the board.

Open a blank board

Draw the system before you build it.

A system design whiteboard that reads your code.

An architecture diagram whiteboard for the whole team.

Elena maps the analytics pipeline before Friday’s review.

The spec, the code and the sprint, beside the diagram.

Retry policy for payments

Goal

Rules

Out of scope

Write it, show it, plan it.

Your agent, your credits.

Plugins for Claude Code and Codex

MockFlow MCP for any coding tool

Ready made for developers.

Templates

Apps and games

AI experts

Agent skills

Automations

Free for side projects, ready for teams.

Developer whiteboard questions.

Draw your next system on a board.

Brainstorm visually with AI

Contact us

MockFlow brand

Brainstorm with MockFlow MCP

Welcome back

Faster ways in

Reset your password

Sign in with SSO

Draw the system before you build it.

A system design whiteboard that reads your code.

An architecture diagram whiteboard for the whole team.

Elena maps the analytics pipeline before Friday’s review.

The spec, the code and the sprint, beside the diagram.

Write it, show it, plan it.

Your agent, your credits.

Plugins for Claude Code and Codex

MockFlow MCP for any coding tool

Ready made for developers.

Templates

Apps and games

AI experts

Agent skills

Automations

Free for side projects, ready for teams.

Developer whiteboard questions.

Draw your next system on a board.

Brainstorm with MockFlow MCP Watch Video

Welcome back

Faster ways in

Reset your password

Sign in with SSO

Brainstorm with MockFlow MCP