Claude Code draws. Your team sees it.
Ask Claude Code in your terminal and it draws architecture, flows and screens on a MockFlow board, using your own Claude plan.
> /mockflow:draw the cloud architecture from our Terraform files in infra/ Reading infra/main.tf, infra/network.tf, infra/services.tf Drawing on your MockFlow board ✓ Cloud architecture is on the board > █
A whiteboard Claude Code can draw on.
The MockFlow plugin for Claude Code lets Claude draw mind maps, flowcharts, architecture diagrams and wireframes on the MockFlow board open in your browser, while you keep working in the terminal.
Anything with a shape to it, such as how a system fits together, where a flow branches or what the screens should be, lands on a board your team can open, instead of scrolling past as text.
- Drawn from your code. Claude Code runs in your project, so it reads the code and files first and the drawing matches them.
- Changes in place. Follow ups such as “Add a Blocked column to that kanban board” change the item already on the board.
- Reads the board too. Move, delete or add items yourself, and Claude continues from what is there now.
Why give Claude Code a whiteboard?
In a terminal, an architecture or a flow is a wall of text that scrolls away and only you can see. On a MockFlow board it becomes a diagram the whole team can open, correct and discuss, next to the specs and wireframes it belongs to. Claude does the thinking on your own plan, so drawing costs no MockFlow credits, and your code never leaves your computer.
How to set up Claude Code with MockFlow.
You need Node.js 18 or newer, Claude Code and a MockFlow account. You pair each computer once. Full steps in the setup guide.
- Install the plugin in Claude Code.
/plugin marketplace add mockflow/mockflow-claude-plugin /plugin install mockflow@mockflow
- Install and start MockFlow Bridge.
npm i -g @mockflow/mockflow-bridge mockflow-bridge
Run it in another terminal window and leave it open. - Pair your board.Open your board, open Mida, click Connect on the Connect your local agent strip and enter the pairing code from the Bridge window.
- Ask Claude Code to draw.
Read the migrations in db/ and lay out the entity relationships
The drawing appears on the board you are looking at.
MidaWhat Claude Code can draw.
Ask in your own words. Claude picks the right kind of item, so you do not need to know what MockFlow calls it. These prompts come from the MockFlow docs.
Mind maps
“Make a mind map of how the payments module is structured”
Cloud architecture
“Draw the cloud architecture from our Terraform files in infra/”
Database diagrams
“Read the migrations in db/ and lay out the entity relationships”
Wireframes
“Wireframe the notification settings screen from docs/notifications.md”
Flowcharts
“Draw the checkout flow described in docs/checkout-spec.md as a flowchart”
Kanban boards
“Make a kanban board of the open TODO comments in this project”
Timelines
“Build a timeline of what happened from these log excerpts”
Thinking it through
“I am thinking about a subscription tier for small teams, help me think it through visually”
Two commands help when you need them: /mockflow:draw makes sure the result goes on the board and not into the terminal as text, and /mockflow:connect checks Bridge, its connection and the board pairing.
Your code stays on your computer.
Claude Code reads your files where they are. With Bridge Pro you can also share one folder, so Mida on the board can turn code, specs, notes and transcripts into boards.
- Nothing is uploaded. Files are read on your computer. Only the finished drawing is saved to your board.
- Read only. The agent reads the shared folder and never edits, creates or deletes files in it.
- One folder, your choice. Start Bridge with
--workspaceand a path. By default it can read no files at all Plus - Or attach one file. Attach a PDF or document to a message in Mida. It goes to your agent, not to MockFlow.
$ mockflow-bridge --workspace ~/Projects/northwind-store ● File access on Mida can read ~/Projects/northwind-store
Plugin, Bridge or MCP?
Three ways to connect Claude Code and MockFlow. Pick by where you want to work.
| Question | Plugin for Claude Code | Bridge, from Mida | MockFlow MCP |
|---|---|---|---|
| Where you ask | In Claude Code, in your terminal | In Mida, on the board | In Claude Code, Cursor, VS Code or Codex |
| Where the result goes | The board open in your browser | The board you are on | A board in your MockFlow account |
| Who does the thinking | Claude Code | Claude Code, or another agent on Plus and Max | Your AI tool |
| MockFlow AI credits | None | None | None |
| Limits | Basic: one board, a daily number of free generations. Plus and Max: no daily limit | Basic: 5 items every 30 minutes. Plus: 30 a minute. Max: 60 a minute | |
| Set up | Plugin guide | Bridge guide | MCP guide |
Your team works on the same board.
What Claude draws is an ordinary MockFlow board. Nobody else needs the plugin, a terminal or Claude Code.
Comment and correct
Teammates open the board in the browser, move items, fix labels and comment on the diagram Claude drew.
Review it in a meeting Plus
Start a call on the board and present it live, so everyone follows your view through the architecture.
Design from it
A wireframe Claude drew can go on to a designer in WireframePro, beside the flow it came from.
How developers use it.
The most common ways teams put Claude Code and a board together.
Map a codebase
Lucas joins a team and asks for a mind map of the payments module. The team corrects it on the board at the first stand up, and new joiners start from it.
Review a design before a change
Elena asks Claude to lay out the entity relationships from the migrations before a schema change, then shares the board in the review.
Plan a feature
Sam asks for a wireframe of the notification settings screen from the spec, and a flowchart of the flow behind it, side by side.
Turn documents into boards
Olivia shares a folder of specs and interview notes and gets a flowchart of the process and a mind map of the themes.
Free to start, unlimited on Plus.
The plugin works on every plan, and Bridge never uses MockFlow AI credits. Plus and Max include Bridge Pro. Compare plans
| Feature | Basic | Plus | Max |
|---|---|---|---|
| AI agents | Claude Code | Claude Code, Codex, opencode, BridgeAI and others | Claude Code, Codex, opencode, BridgeAI and others |
| Generations | A daily number of free generations | Unlimited | Unlimited |
| Boards connected at once | One | Several | Several |
| Read files on your computer | |||
| Read connected tools, such as Jira, Notion or Slack | |||
| MockFlow AI credits used | None | None | None |
Good to know before you start.
Bridge runs on your computer, so a few things work differently from MockFlow AI. Details in Limitations of MockFlow Bridge.
Same computer
Bridge connects to a board open on the computer it runs on, while its window is open.
Only for you
Teammates on the same board keep using MockFlow AI unless they run Bridge too.
Media uses credits
AI images, video, sound and 3D models still come from MockFlow AI and use credits.
One request at a time
Each board runs one request on your agent at a time. Wait for it to finish, or stop it.
Start from something ready.
Skills, templates and guides for drawing code on a board.
Agent skills
Mobile app backend architecture and Sprint retro table, from the agent skills catalog.
Diagram templates
Entity relationship diagram and Data flow diagram level 1, or the database diagram generator.
Guides
What you can do with Bridge, choose the AI behind Bridge, and MockFlow MCP for other AI tools.
Claude Code and MockFlow questions.
Credits, privacy, plans, setup and your team.
Does it use my MockFlow AI credits?
Does MockFlow upload my code?
What can Claude Code draw on the board?
Is it free?
Can my team see the board without Claude Code?
What do I need to set it up?
Can I use it from Claude on the web?
How is this different from Claude Whiteboards?
A full whiteboard in one click. Share the link and anyone joins. Boards last 24 hours, so sign up to keep one.
Brainstorm with MockFlow MCP 
