Log in
WireframePro components

Wireframe friendly components.

Unlike other tools, Components in MockFlow is not just limited to text, images and shapes.

Wireframe friendly components

Native components to speed up wireframing.

Buttons, forms, navigation, menus, tabs, dialogs and much more, ready to drag onto your wireframe.

Native components to speed up wireframing

Components for real product screens.

Annotate, visualize data and lay out tables without drawing them by hand.

Annotation components

Annotation components

MockFlow provides various components to annotate UI drawings like notes, arrows, brackets, callout, tooltips...

Charts for visualization

Charts for visualization

Now wireframing business dashboards takes less time as MockFlow provides all kinds of mockup charts like Area, Bar, Line, Gauge... with only the right set of features.

DataGrids

Data grids

Data tables or grids are essential part when it comes to wireframing web apps. With Advanced DataGrid component, it takes less time to achieve the desired result.

Layout builder, sketchy style, freehand and connectors.

Crank out a UI layout in minutes with layout builder. Use Sketchy components to depict hand-drawn wireframe effect. Use Connectors to create UI flows.

  • Layout builder. A full page layout in minutes.
  • Sketchy style. A hand drawn wireframe effect.
  • Connectors. Link screens into UI flows.
Layout Builder, Sketchy style, Freehand, Connectors
Get started

Drag, drop and start wireframing.

Every component is built into WireframePro, the wireframing tool inside MockFlow.

Try it now

Tell Mida the screen you have in mind and it drafts the wireframe with these components.

MCPBrainstorm with MockFlow MCP

Add MockFlow as an MCP connector in Claude, Cursor, or any MCP-compatible AI assistant to generate flowcharts, mindmaps, architecture diagrams, and 16 types of visualizations.

Desktop App MCP Powerful
CLI Web MCP Developer
Loginless Web MCP Easiest

Built into the MockFlow Desktop App. AI creates visuals directly on your open canvas — no URLs, no waiting.

1
Open Desktop App → open a MockFlow project
2
In Claude Code / Cursor, run:
claude mcp add --transport http -s user mockflow-ideaboard http://localhost:21193/mcp
3
Ask: "Create a flowchart for..."

Best for: Designers, product teams, daily MockFlow users.

Download Desktop App →

Install from npm, log in via browser (OAuth), and boards are saved to your MockFlow account.

1
npm install -g @mockflow/ideaboard-mcp
2
mockflow-ideaboard-mcp login
3
mockflow-ideaboard-mcp

Best for: Developers using Claude Code, Cursor, or VS Code Copilot.

npm Package →

Add MockFlow as a connector in Claude.ai or ChatGPT. No installation, no account required. A new board is created and you get a shareable URL.

1
Open Claude.ai → Settings → Connectors
2
Paste this URL: https://app.mockflow.com/ideaboard/mcp
3
Ask Claude to create a flowchart — done!

Best for: Managers, marketers, anyone using Claude.ai or ChatGPT in the browser.

Welcome back

Don't have an account? Sign up

Faster ways in

Sign in with an account you already use.