Post UI ideas in Confluence.

WireframeProAdd MockFlow WireframePro to your Atlassian Confluence account.

Follow the below steps on how to install, draw and post wireframes in Confluence.

Install the add-on

Install WireframePro add-on for Confluence.

Click on the above 'Install to Confluence' button to install WireframePro add-on to your Confluence instance from Atlassian Marketplace. After installation, start free 30-day trial of WireframePro add-on for your team.

WireframePro add-on in the Atlassian Marketplace

Open any page created in Confluence to attach wireframes.

After installation, click on 'Insert more content' button. This section contains the option to open WireframePro within Confluence.

The Insert more content button in Confluence
WireframePro listed in the Confluence insert menu

Open editor to draw wireframe.

On clicking the "MockFlow WireframePro" app, it opens the editor within Confluence.

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... or select from your existing wireframe projects already created by your team.

Choosing a UI type in the WireframePro editor

Attach drawn wireframe image to your Confluence page.

After drawing the wireframe, you can directly attach the wireframe in image format to the current Confluence page by clicking 'Post to wiki' button.

Posting a wireframe to the Confluence page

List of uploaded wireframe images.

The uploaded wireframe images will also be available in 'Insert files and images' section, which can be accessed for further usages.

Wireframe images in the Confluence Insert files and images section
Get started

Add WireframePro to Confluence.

Install from the Atlassian Marketplace and start a free trial for your team.

Support

Learn how to use the WireframePro editor in the support portal and video tutorials, 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.