Log in
WireframePro for Slack

Post UI mockups from Slack.

WireframeProAdd MockFlow WireframePro to your Slack account.

Follow the below steps on how to install, draw and share wireframes in Slack.

Install WireframePro app for Slack.

Click on the above 'Add to Slack' button to install WireframePro for your team.

Add to Slack

Use /wireframepro command to draw UI wireframes.

To start drawing wireframes, enter the command /wireframepro name-of-the-wireframe. After this command is executed you will receive a private Slack message with a link to the WireframePro Editor.

The /wireframepro command in Slack

Open editor to draw wireframe.

When the editor opens for the first time, it will ask you to connect your MockFlow account with Slack. If you do not have a MockFlow account, you can sign up for a free Basic Plan in the same page and connect to the editor.

In the editor, select the type of UI you want to draw. WireframePro provides components for a wide range of UI types such as iOS, Android, Web, Bootstrap, Material, WatchOS, Windows, MacOS etc.

Choosing a UI type in the WireframePro editor

Post wireframe image back to Slack.

After drawing, you can directly post the wireframe in image format back to the same Slack channel automagically.

A wireframe posted in a Slack channel

Your wireframes stay in MockFlow.

The wireframes that you create will be also available in your MockFlow.com account for later editing and collaboration.

Get started

Add WireframePro to Slack.

Install the app for your team and sketch UI ideas without leaving Slack.

Add to Slack
Support

Follow the below links on how to use the WireframePro editor or contact us at support@mockflow.com

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.