# MockFlow Board MCP Server: Bring MockFlow's Visual Brainstorming to Claude, Cursor, and Any AI Assistant

> Transform your AI assistant into a visual brainstorming powerhouse with the MockFlow Board MCP Server. Create flowcharts, mind maps, and more directly from AI tools like Claude, Cursor, and VS Code Copilot. Leverage MockFlow's tools seamlessly within your existing workflow.

Source: https://mockflow.com/changelog/ideaboard-mcp-server-bring-mockflows-visual-brainstorming-to-claude-cursor-and-any-ai-assistant

![MockFlow Board MCP Server: Bring MockFlow's Visual Brainstorming to Claude, Cursor, and Any AI Assistant ](https://assets.mockflow.com/docs/media/f4e41ac9deae7f8e8d8aca45.gif)

Turn any AI assistant into a visual brainstorming powerhouse. Create contextual flowcharts, mind maps, knowledge graphs, architecture diagrams, and more visualization types directly from Claude, Cursor, or VS Code Copilot without leaving your workflow or spending MockFlow AI credits.

The MockFlow Board MCP Server opens up MockFlow's full visual brainstorming toolkit to the AI assistants you already use every day. Instead of  switching to MockFlow to create a diagram, you can now ask Claude, Cursor, or VS Code Copilot to generate flowcharts, mind maps, storyboards, Gantt charts, architecture diagrams, customer journey maps, and more , all rendered as fully editable MockFlow Board projects.                                                                

          

MCP (Model Context Protocol) is an open standard created by Anthropic Inc; that lets AI assistants connect directly to external tools. Think of it as a universal plug that lets your AI talk to MockFlow. With the MockFlow Board MCP Server, your AI assistant gains specialized tools that go far beyond what text-based brainstorming can offer.

                                                                         

## **Why MCP Matters for Visual Brainstorming       **

MockFlow already has **Mida AI**, our built-in AI assistant that lives inside MockFlow Board. Mida generates, modifies, and transforms content directly on your canvas with full context of your project. It is the complete AI experience when you are working inside MockFlow, and it uses your plan's AI credits.                                                               

          

But the MCP Server solves a different problem. Many users brainstorm where they already are — in a terminal analyzing code, in an IDE reviewing  architecture, in a Claude chat discussing strategy, or working with local documents and datasets. The MCP Server brings MockFlow's

 powerful brainstorming components to those environments.                                                   

          

 The key advantages of using MockFlow Board via MCP:                                                 

  

**Contextual brainstorming** — Your AI can read local files, codebases, spreadsheets, meeting transcripts, PRDs, and datasets on your machine,  then visualize the insights directly. You never need to copy-paste or upload content to MockFlow.

**Use your own AI credits** — MCP uses your AI tool's credits (Claude, Cursor, Copilot), not your MockFlow plan's AI credits. This is especially  valuable for teams that want unlimited visual brainstorming without consuming their MockFlow allocation.   

                

**No context switching** — Stay in your terminal, IDE, or AI chat. The visualization appears as a shareable URL or renders directly on your open  MockFlow Board canvas (Desktop App).                                                        

**Full editability** — Every generated visualization is a real MockFlow Board component. Open it to edit, collaborate with your team, present, or export.

                                                                         

In short:  Mida AI is the full experience inside MockFlow. MCP brings MockFlow's visualization tools with powerful contextual engine to wherever your AI already is.  

![mcp-ideaboard.png](https://assets.mockflow.com/docs/media/7b80192cd87111e0da622772.webp)

## **What does it provide?**

While the component set in MockFlow Board is growing fast, currently it offers generations in these broad categories.

### **Flowcharts and Diagrams**

**render_flowchart — **Create flowcharts across 11 distinct diagram categories: default, sketchy hand-drawn, 3D isometric, bio/medical, circuit, piping and instrumentation (P&ID), UML, sketchy UML, cloud isometric, web layout, and mobile layout. Supports decision nodes, process steps, start/end terminators, and conditional branching.    **                                           **

**          **

**render_swimlane — **Cross-functional process flows with horizontal swim lanes for different actors, roles, or departments. Ideal for mapping  business processes that span multiple teams.

**                                                                         **

** render_database — **Entity-relationship diagrams with tables, columns, primary key and foreign key marking, and relationship arrows between tables. Describe your data model and get a proper ER diagram.

**                                                                         **

### **Brainstorming and Ideation**

**render_mindmap — **Hierarchical mind maps with balanced left-right branching, multi-level nesting, and emoji support. Perfect for breaking down complex topics, brainstorming features, or mapping knowledge areas.

**                                                                         **

**render_whiteboard — **Freeform brainstorming boards with sticky notes in pastel colors, sections for grouping, and text labels. Captures the feel of a physical whiteboard session.

**                                                                         **

** render_knowledgegraph — **Bubble network graphs (similar to Obsidian-style knowledge graphs) with weighted nodes and directed edges with labels. Visualize relationships between concepts, dependencies, or interconnected systems.

**                                                                         **

### ** Planning and Project Management                                                        **

  

 **render_kanban** — Project management boards with customizable columns, cards with priority levels, due dates, assignees, and color-coded labels. Columns use topic-relevant categories rather than generic statuses.

                                                                         

 **render_gantt** — Project timeline charts with phases, tasks, progress tracking (0-100%), start and end dates, dependencies between tasks, and  priority levels.

                                                                         

 **render_calendar** — Event calendars with support for timed events, all-day events, multiple event colors, and reminders.             

  

 **render_timeline** — Chronological event visualization in two modes: date-based (for real historical dates or project milestones) and label-based (for stages, phases, or abstract sequences).

                                                                         

### ** Data and Analysis**

** render_chart — **Eight chart types: pie, vertical bar, horizontal bar, line, area, scatter, bubble, and radar. Accepts CSV-formatted data with formula support.

**                                                                         **

** render_table — **Structured data tables with headers and flexible columns. Clean tabular output from any dataset.  **              **

**  **

** render_spreadsheet — **Full spreadsheets with formula support including SUM, AVERAGE, MAX, MIN, COUNT, IF, and ROUND. 

**                                                                         **

### ** Architecture and Infrastructure**

** render_cloudarchitecture — **Cloud infrastructure diagrams with native support for AWS, Azure, GCP, and Cisco service icons. Supports VPC and  subnet grouping, security group containers, and standard cloud architecture notation.

**                                                                         **

### ** Customer Experience and Storytelling**

** render_customerjourney — **Customer journey maps with stages, activities with icons, satisfaction metrics on a 0-4 emotion scale, experiences,  expectations, and pain points at each stage.

**                                                                         **

** render_storyboard — **Film and video storyboards with cinematic frame descriptions, camera angles, lighting notes, sequence numbers, metadata fields, and AI-generated cover images for each frame.

**                                                                         **

### ** Content and Geography**

** render_markdown — **Rich text documents with full Markdown syntax and optional AI-generated images via a prompt field.              

  

** render_map — **Geographic maps with location markers using GeoJSON coordinates and emoji markers.    **                    **

**          **

### ** Desktop Exclusive                                                               **

          

**layout_board** — After creating multiple visualizations, call this tool to automatically arrange them into a professional bento-box grid layout with a titled section wrapper. This is only available when using the MockFlow Desktop App or MockFlow Board for Mac, where the AI creates visuals directly on your open canvas.     

![mcp-ideaboard.gif](https://assets.mockflow.com/docs/media/ee356e40a2a85024a6dfcdf9.gif)

## **Four Ways to Connect**

The MockFlow Board MCP Server is available in four configurations, each designed for a different workflow.

 **1.** **Loginless** **Web** **MCP** **—** **Easiest:** **No** **Install,** **No** **Login**

 Add [https://app.mockflow.com/ideaboard/mcp](https://app.mockflow.com/ideaboard/mcp) as a connector in Claude.ai or ChatGPT. No installation, no MockFlow account, no setup. A new board is created for each visualization and you get a shareable URL.

 How to set up:

 1. Open Claude.ai → Settings → Connectors

 2. Paste: [https://app.mockflow.com/ideaboard/mcp](https://app.mockflow.com/ideaboard/mcp)

 3. Ask Claude to create a flowchart — done.

Best for: Managers, marketers, and anyone who uses Claude.ai or ChatGPT in the browser. No technical knowledge needed.

 **2.** **MockFlow** **Desktop** **App** **—** **Most** **Powerful:** **Direct** **on** **Canvas**

 Built into the MockFlow Desktop App. Your AI creates visuals directly on your open MockFlow Board canvas in real time — no URLs, no waiting. This is the most powerful option because it includes all tools plus the exclusive layout_board tool for bento grid layouts, and it works with both cloud projects and local file-mode (.board) projects.

 How to set up:

 1. Open the MockFlow Desktop App → open a MockFlow Board

 2. In Claude Code or Cursor, run: claude mcp add --transport http -s user mockflow-ideaboard http://localhost:21193/mcp

 3. Ask your AI to create any visualization — it appears directly on your canvas.

 Best for: Designers, product teams, and daily MockFlow users.

 **3.** **MockFlow Board** **for** **Mac** **(Standalone)** **—** **Native** **Mac** **Experience**

 The standalone [https://apps.apple.com/in/app/mockflow-ideaboard/id6751854527?mt=12](https://apps.apple.com/in/app/mockflow-ideaboard/id6751854527?mt=12) includes the same built-in MCP server as the full Desktop App. Get a dedicated, lightweight brainstorming application with full MCP support — including layout_board and direct-on-canvas rendering.  This is ideal if you want MockFlow Board as a focused visual thinking tool that does not use MockFlow servers and is fully offline. And also one-time payment.

 Available at: localhost:21193/mcp (same as Desktop App)

 Best for: Mac users who want a lightweight, focused brainstorming app with full AI integration.

 **4.** **CLI** **npm** **Package** **—** **For** **Developers:** **Saved** **to** **Your** **Account**

Install from npm, authenticate via browser (OAuth), and all boards are saved to your MockFlow account.

 How to set up:

 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 who want boards saved to their workspace.

## ** Works With Your Favorite AI Tools**

 The MockFlow Board MCP Server works with any MCP-compatible AI assistant:

 - [**Claude.ai**](Claude.ai) — Add as a connector in Settings → Connectors

 - **Claude** **Code** — Add via claude mcp add command

 - **Cursor** — Configure as an MCP server in settings

 - **VS** **Code** **Copilot** — Connect via MCP configuration

 - **ChatGPT** — Configure as an MCP server in settings

 - **OpenAI** **Codex** — Configure as an MCP server in settings

## **AI Recipes — Now Downloadable as Agent Skills**

One of the most powerful aspects of the MockFlow Board MCP Server is the **AI** **Skills** system. MockFlow Board's AI Recipes — the same pre-configured AI workflow templates available inside MockFlow Board's Recipe Library — can now be exported and downloaded as **Agent** **Skills** for Claude Code and other AI assistants.

###   

![Screenshot 2026-04-06 at 10.43.31 PM.png](https://assets.mockflow.com/docs/media/09239a467cc35571c48bf8a9.webp)

###   

### **What are AI Recipes?**

AI Recipes are curated, ready-to-use AI gen templates inside MockFlow Board. Each recipe is a fully configured AI Prompt Box that includes a title, system instructions, output type, placeholder guidance, model preferences, and an icon. Previously, these lived only inside MockFlow Board.

Now, any recipe can be exported as a skill file that your AI assistant understands natively.

### ** How Skills Work**

 Each skill is a lightweight configuration file (SKILL.md) that teaches your AI assistant how to use a specific MockFlow Board MCP tool for a specific task. Install a skill once, and it triggers automatically when your AI detects a matching intent. You can also invoke skills directly.

**For example, **with the Decision Flowchart skill installed, simply asking Claude Code "Should I use React or Vue for this project?" automatically triggers the skill, which calls render_flowchart to create a structured yes/no decision tree — no manual tool selection needed.

**Browse** **and** **Download** **from** [**https://mockflow.com/skills**](https://mockflow.com/skills)

### **Create Your Own Skills**

![Screenshot 2026-04-06 at 10.45.19 PM.png](https://assets.mockflow.com/docs/media/3cfc851c5fa1df196ec70a3f.webp)

You can also create custom skills inside MockFlow Board using the AI Prompt Box component. Configure a Prompt Box with your specific instructions, output type, and system prompt, then export it as a Claude Code skill. This means your team's custom brainstorming workflows — tailored to your industry, brand, or process — become reusable AI skills that any team member can install and use from their terminal or IDE.

## **Use Cases — MockFlow Board MCP for Every Team**

### ** Product Management**

 - Scan a PRD document on your machine and generate a sprint kanban board with prioritized tasks, assignees, and due dates

 - Convert meeting transcripts into structured mind maps of decisions, action items, and open questions

 - Create roadmap Gantt charts from project plans and track dependencies across workstreams

 - Map customer onboarding journeys directly from user research notes

### ** Software Engineering**

 - Analyze your codebase and generate architecture diagrams showing how services, databases, and APIs connect

 - Create ER diagrams from database migration files or schema definitions

 - Visualize authentication flows, CI/CD pipelines, or microservice communication as flowcharts

 - Generate AWS, Azure, or GCP infrastructure diagrams from Terraform files or deployment configs

### ** Design and UX**

 - Create customer journey maps from user interview transcripts

 - Generate storyboards for product walkthroughs, onboarding flows, or demo videos

 - Map cross-functional swimlane diagrams for design review processes

 - Build moodboards and brainstorming whiteboards from creative briefs

### ** Marketing and Strategy**

 - Turn campaign strategy documents into content calendars with scheduled dates and categories

 - Create customer journey maps for specific personas from research data

 - Generate competitive analysis charts and comparison tables from market research

 - Build mind maps from brand strategy documents to align teams on positioning

### ** Film and Media**

 - Generate cinematic storyboards from scripts with camera angles, shot types, and scene descriptions

 - Create shot lists as kanban boards organized by scene and priority

 - Build production schedules as Gantt charts with crew assignments and dependencies

 - Plan editorial calendars for content production pipelines

### ** Education and Research**

 - Convert lecture notes or textbooks into structured mind maps for study guides

 - Create flowcharts for scientific processes, algorithms, or historical decision trees

 - Generate quiz content and study plans from curriculum documents

 - Build knowledge graphs from research papers showing concept relationships

### ** Data Teams**

 - Visualize CSV files and datasets as charts, tables, or spreadsheets with calculated fields

 - Create geographic visualizations from location data

 - Generate timeline visualizations from event logs or historical data

 - Convert raw data into presentation-ready charts with eight visualization types

## **How MockFlow Board MCP Compares to Other Whiteboarding MCP Servers**

The whiteboarding MCP space is still emerging. Most available options are either generic drawing tools or text-based diagram renderers. MockFlow Board MCP is the first purpose-built visual brainstorming MCP server with specialized tools for each visualization type.

## **Get Started Now**

The MockFlow Board MCP Server brings MockFlow's visual brainstorming tools to wherever your AI already is. Brainstorm contextually, visualize your data contextually, and collaborate visually — all without leaving your workflow. MCP is available on free plans also but with rate limits.

For more information visit: [https://mockflow.com/mcp](https://mockflow.com/mcp) 

Share
                               :
                            

                        

			
					          		
			                              	0