Connect MockFlow to Claude.
Create flowcharts, wireframes, mind maps and more, directly from Claude.ai or Claude Code.
Two ways to connect Claude to MockFlow.
Use Claude.ai in the browser with no install, or Claude Code in the terminal with boards saved to your account.
Claude.ai (browser)
Add MockFlow as a connector in Claude.ai. No installation, no login required. Boards are created in the cloud and you get a shareable URL back.
Best for managers, strategists and anyone who uses Claude.ai in the browser.
Claude.ai setupClaude Code (terminal)
Install the MockFlow MCP npm package and connect through the CLI. OAuth login in the browser. Boards are saved to your MockFlow account.
Best for developers using Claude Code in the terminal.
Claude Code setupClaude.ai setup in the browser.
Add MockFlow as a connector in Claude.ai, with no installs and no login.
Open Claude.ai and go to Settings
Click the gear icon or navigate to your account settings.
Click on Connectors
Navigate to the Connectors section in the settings panel.
Click Add connector
Click the "Add connector" button to add a new MCP server.
Enter the MCP URL
Paste the MockFlow MCP URL into the connector URL field:
https://app.mockflow.com/ideaboard/mcp
Start creating
Open a new conversation and ask Claude to create a flowchart, mind map, kanban board or any other visual.
Claude Code setup in the terminal.
Install the npm package, log in through the browser, and add it to Claude Code.
MockFlow Boards
Brainstorming, diagrams, charts.
# Install the MockFlow MCP package npm install -g @mockflow/ideaboard-mcp # Log in: opens your browser for secure OAuth login mockflow-ideaboard-mcp login # Start the MCP server mockflow-ideaboard-mcp # Add to Claude Code claude mcp add --transport http -s user mockflow-ideaboard http://localhost:21193/mcp
Target a specific design space: mockflow-ideaboard-mcp --space=YOUR_SPACE_ID
WireframePro
Wireframes, design-to-code.
# Install the WireframePro MCP package npm install -g @mockflow/wireframepro-mcp # Log in: opens your browser for secure OAuth login mockflow-wireframepro-mcp login # Start the MCP server mockflow-wireframepro-mcp # Add to Claude Code claude mcp add --transport http -s user mockflow-wireframepro http://localhost:21194/mcp
Target a specific design space: mockflow-wireframepro-mcp --space=YOUR_SPACE_ID
Ready made skills for Claude Code.
Install skills that teach Claude Code when and how to use MockFlow tools automatically. Browse the Recipe Library for more, or create your own with the AI Prompt Box in MockFlow.
# Install a skill mkdir -p ~/.claude/skills/mockflow-decision-flowchart # Copy SKILL.md from github.com/mockflow/ideaboard-mcp/skills/ # Then just ask naturally: "Should I use React or Vue?" # Claude auto-creates a decision flowchart on MockFlow
What you can ask Claude to create.
Once MockFlow is connected, ask in plain language and Claude draws it on a board.
"Create a flowchart for the user registration process."
"Create an AWS architecture diagram for a serverless app."
"Create a kanban board for our product launch."
"Create a wireframe for a login page with social login."
"Read the current wireframe and convert to React."
"Create a mind map about machine learning concepts."
More MCP guides and packages.
Set up MockFlow in your other AI tools, or get the open source packages from npm.
Paste this into Claude.ai as a connector and ask for a flowchart.
https://app.mockflow.com/ideaboard/mcp
Brainstorm with MockFlow MCP 
