Draw and post UI ideas in Jira.

WireframeProAdd MockFlow WireframePro to your Atlassian Jira account.

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

Install the add-on

Install WireframePro add-on for Jira.

Click on the above 'Install to Jira' button to install WireframePro add-on to your Jira 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 issue created in Jira to attach wireframes.

After installation, a new section for WireframePro will appear in all Jira issues automatically. This section contains the button to open the WireframePro editor within Jira.

The WireframePro section in a Jira issue

Open editor to draw wireframe.

On clicking the "Add Wireframe" button, it opens the editor within Jira.

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.

iOSAndroidWebBootstrapMaterialwatchOSWindowsmacOS
The Add Wireframe button in a Jira issue
Choosing a UI type in the WireframePro editor

Attach drawn wireframe image to your Jira issue.

After drawing the wireframe, you can directly attach the wireframe in image format to the current Jira issue.

Note: The image is added to the attachments section in the issue, so the issue page has to be reloaded to view the attachment.

Attaching a wireframe to a Jira issue

Check attached wireframe images in your Jira issue.

The wireframe images are posted to the attachments section of the Jira issue.

Wireframe images in the Jira issue attachments
Get started

Add WireframePro to Jira.

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.