MockFlow inside your favorite tools.

Slack

1. Add MockFlow to SlackInstall the app and connect your MockFlow account.
2. Create a boardGenerate one with AI or start blank, right from a message.
3. Share in the threadBoard links unfurl with a thumbnail, and huddle notes turn into a board.

Microsoft Teams

1. Add to TeamsInstall MockFlow as a tab or a personal app.
2. Create and visualizeBuild flowcharts, mind maps, diagrams and wireframes without leaving Teams.
3. Brainstorm togetherPin a board as a channel tab so the whole team works on it live.

Google Meet

1. Install the add-onOpen Add-ons in Meet and search for MockFlow.
2. Connect your workspaceLog in to bring your MockFlow boards into the call.
3. Present and collaborateShare, edit and ideate together without leaving Meet.

Confluence

1. Install the add-onGet MockFlow from the Atlassian Marketplace.
2. Launch in the editorOpen MockFlow from the Elements or Insert menu.
3. Add your boardCreate or edit a board, then insert it into the page.

Jira

1. Open a taskMockFlow is available in every Jira task once installed.
2. Visualize the workCreate diagrams, flows and brainstorming boards from templates or AI.
3. Attach and collaborateEmbed the board in the task or share it as an image.

Trello

1. Add the Power-UpMockFlow appears on your cards as an action button.
2. Launch MockFlowOpen the board editor from any card.
3. Attach visualsExport diagrams, flowcharts and mind maps to the card as images.

Claude

1. Add a connectorIn Claude settings, open Connectors and add a custom connector.
2. Paste the MCP URLName it MockFlow and use https://app.mockflow.com/ideaboard/mcp.
3. Ask for a visualClaude draws flowcharts, mind maps and diagrams on a MockFlow board.

Codex

1. Add the pluginRun the two commands in your Codex terminal.
2. Pair your boardStart MockFlow Bridge and enter its pairing code in your open board.
3. Watch Codex drawMind maps, flowcharts and architectures appear live, with no MockFlow AI credits spent.

MockFlow Bridge

1. Install and runA small program for your own computer. Needs Node.js 18 or newer.
2. Pair with your boardEnter the pairing code it shows into your open board.
3. Let your own AI drawClaude Code, Codex, opencode or BridgeAI draws on your board. Local files stay on your machine.

Cursor

1. Install the extensionAdd a MockFlow board inside Cursor.
2. Brainstorm the projectGenerate flowcharts, cloud architectures and diagrams.
3. Plan before you codeSee the idea clearly before Cursor writes a line.

VS Code

1. Install the extensionLog in and describe your idea, diagram or architecture.
2. Generate a boardMockFlow AI builds the board from your prompt.
3. Export to your repoDownload the diagram or section as an image into your project.

Clippy for Chrome

1. Install ClippyAdd the Chrome extension and log in with your MockFlow account.
2. Pick a visualMind map, flowchart, diagram, kanban, timeline or moodboard.
3. Import to your boardKeep editing it in your MockFlow project.

Slack

1. /wireframepro commandOpen the wireframe editor right from Slack.
2. Connect MockFlowLog in, then pick a design or start a new one.
3. Post to channelAttach the design to the conversation.

Google Drive

1. Click NewOpen the wireframe editor from the New button, like any other doc.
2. Design UISketch UI ideas quickly in the editor.
3. Add to DriveExport the wireframe to Drive without leaving the app.

Clippy for Chrome

1. Install ClippyAdd the Chrome extension and log in with your MockFlow account.
2. Capture the pageClip the full page or just a region.
3. Pick what it becomesA wireframe, prototype, AI board, doc, image, bookmark or colour palette, all editable.

VS Code

1. Describe the ideaSay what you need and get the code.
2. Select what to convertThe full page or a selected part of the screen.
3. Import to VS CodeBring the code straight into your project.

Figma

1. Select a wireframeChoose Export to Figma from the right click menu or settings panel.
2. ConvertTurn the wireframe into Figma design format.
3. Paste in FigmaOpen the plugin, paste, and get clean, editable Figma layers.

Cursor

1. Pick a wireframeOpen the Cursor extension and select a wireframe project.
2. Export as a promptIn settings, click Export to Cursor.
3. Get real UIPress enter in Cursor chat and the wireframe becomes production UI.

Google Docs

1. Insert UI designOpen the wireframe editor from the add-ons menu.
2. Connect MockFlowLog in, then pick a project or create one.
3. Insert the designDrop it in at your cursor in the doc.

Office 365

1. Cloud or desktopOpen the wireframe editor inside Office on the web or desktop.
2. Create a designLog in and draw your UI.
3. Attach itInsert the design at your cursor in the document.

Microsoft Teams

1. Pin to a channelInstall MockFlow and pin it as a tab.
2. Visualize ideasDraw and share UI ideas in the channel.
3. Brainstorm togetherEveryone in the channel sees the pinned app.

Trello

1. Add the Power-UpMockFlow appears on your cards as an action button.
2. Launch MockFlowOpen the wireframe editor from a card.
3. Attach UI ideasExport designs to the card as images.

Confluence

1. Install the add-onGet MockFlow from the Atlassian Marketplace.
2. Launch in the editorOpen the wireframe app from the top menu.
3. Insert UI designsAdd designs to your wiki as part of the design doc.

Jira

1. Open a taskMockFlow appears inside every Jira task once installed.
2. Draw UI designsOpen the wireframe app and sketch.
3. Attach to the taskAs a live document or as an image.

Google Workspace

SSO with Google OpenID for Google Workspace business apps and Google accounts.

Okta

Built in support for the Okta identity cloud, approved and verified by the Okta team.

Azure

Single sign on with Microsoft Azure Active Directory for a smooth sign in.