Log in
WireframePro symbols

Consistent UI with Symbols.

Improve component reusability by making updates to a component just once and seeing the changes applied everywhere it is used.

Maintain UI consistency with Symbols

Reuse UI parts and save time.

Avoid creating your components again by using Symbols. Whether it is Tabbar, sidebar, modal dialog, create them as symbols and reuse them with design consistency.

Reuse UI parts and save time

Full control over every instance.

Edit the source, adjust a single instance, or break the link when you need to.

Override Symbol instances

Override symbol instances

You can override specific symbol instances. For example you can make a dialog-box symbol to be taller in a particular page without affecting its other styles.

Powerful Symbol editor

Powerful symbol editor

Create new or edit existing symbols using the symbol editor which is as powerful as the main editor. Once edited, you have the option to save its changes without applying to any instance or update all instances in this project.

Reset or Detach Symbols

Reset or detach symbols

Overridden symbol styles can be reset in a click and also Symbols can be detached from its main origin to prevent updates.

Wireframe smarter with Symbols.

Using the symbol component pack, create your list of symbols for the project. Maintain design consistency, provide UI modularity and save time by creating and using symbols.

Wireframe Smarter with Symbols
Get started

Design once, reuse everywhere.

Symbols are built into WireframePro, the wireframing tool inside MockFlow.

Try it now

Tell Mida the screen you have in mind and it drafts the wireframe for you.

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.