Skip to content

Changes to MockFlow, newest first.

Every change to MockFlow, newest first. Subscribe by RSS to follow along.

wireframepro

Android 17 wireframe UI kit for MockFlow

Android 17 wireframe UI kit for MockFlow

Now ideate and wireframe apps for Android 17 OS faster. With 150 ready-to-use components, this kit helps you quickly plan mobile app screens that follow the latest Android interface patterns.


android.png


Whether you are sketching early app ideas, building product flows, or creating detailed wireframes for development handoff, the Android 17 OS UI Kit gives you a complete set of native-style elements to bring your concepts to life.

The kit includes components across the following categories:

  1. Frames & Keypad

  2. Top navigation

  3. Bottom navigation

  4. Buttons

  5. Icons

  6. Notification & Widgets

  7. List & Popup

  8. Form elements

  9. Tabs & Loaders

  10. Page elements

  11. Other elements

  12. UI Screens

From app frames and navigation bars to forms, buttons, notifications, widgets, tabs, loaders, popups, and complete UI screens, this new kit provides everything needed to visualize Android app experiences with speed and clarity.


Before moving into high-fidelity design or development, it is important to map out your app structure and user flows in a native mobile format. With MockFlow's Android 17 OS UI Kit, teams can brainstorm layouts, iterate faster, and communicate app ideas more effectively — all without starting from a blank canvas.


Once you are done with Android wireframing you can either export to code with our integrated build-mode or use MCP server to integrate with Android Studio. If you want further prototype based refinements and animations you can export the wireframes to Figma directly.



Share :

2

Link to this change
boards

New! MockFlow Board Connectors: Brainstorm your data from tools like Slack, Jira, Notion, GitHub...

New! MockFlow Board Connectors: Brainstorm your data from tools like Slack, Jira, Notion, GitHub...

Bring data from the tools your team already uses onto a live MockFlow Board, then brainstorm it visually with Ask Mida AI on an infinite whiteboard. Connect Slack, GitHub, Notion, Jira, Linear, Google Drive, Gmail, Trello, Fathom and more.


Screenshot 2026-06-09 at 6.06.49 PM.png

Why this matters

connectors.gif


Some things are easier to think about when you can see them in a better way. A Jira sprint laid out as a mindmap. A Notion document opened up into a knowledge graph. Github code visualized as flowcharts.


Connectors take the data from a tool you already use and turn it into exactly that , a visual you can brainstorm on, right on your MockFlow Board with your teammates and AI agents.


 Just connect a tool, ask Mida AI in plain language, and it reads your live data and lays it out as visual board for better brainstorming.


 It's the fastest way to turn the data you already have into a picture you can think with.

What you can connect

Connect the tools your team uses every day, including:

  1.  Communication: Slack, Gmail, Microsoft Teams, Outlook

  2.  Project management: Jira, Linear, Trello, Asana

  3.  Docs and databases: Notion, Google Drive, Google Docs, Google Sheets, Airtable

  4.  Code: GitHub

  5.  Meetings and analytics: Fathom, Google Calendar, Google Analytics, Mixpanel, Amplitude, PostHog

  6.  CRM: HubSpot

We add new connectors regularly. For the current, complete list, visit mockflow.com/connectors.

How it works

1. Connect. Open the Connections panel in Ask Mida AI and link a tool in one click. Most connectors use secure OAuth and you authorize MockFlow directly with the tool. A few simply take an API key.


 2. Ask. Apply your connected tool, then type what you want in plain language for example, "Visualize my Notion document as a MindMap."


 3. Generate. Mida reads your live data and places real, editable components like sticky notes, mind maps, kanbans, flowcharts and more directly on your infinite canvas.


What you can do with it

 It's not about the data it's what you do once you can see it.


 A marketing manager asks Mida to "turn my Notion campaign brief into a mind map" and a long doc becomes a branching map of channels and messages her team can build on.


 A product manager asks to "show my current Jira sprint as a timeline" and walks into standup with one shared board instead of a list of tickets.


 An engineering lead asks to "show open GitHub PRs as a kanban" turning a wall of pull requests into a clear view of what's ready and what's stuck.


 A founder asks to "turn my Notion PRD into a structured board" making gaps and open questions obvious before engineering starts.


Security and privacy you can trust

  1. MockFlow doesn't store your raw data. Mida reads your data live to build each visual, then moves on we keep only your secure connection, never the contents of your messages, issues, or documents.

  2.  MockFlow doesn't train AI on your data. It's used only to fulfill your request.

  3.  SOC2 and ISO 27001 compliant infrastructure, hosted on AWS with firewalls, intrusion detection, and DDoS protection.

  4. Read-only and isolated per user and workspace — access is never shared across teams.

Get started

Connectors are available now inside Ask Mida AI on your MockFlow Board. Open the Connections panel, link your first tool, and ask Mida to brainstorm your data visually.


 Explore the full list at mockflow.com/connectors as we're adding more all the time.


Note Free Basic users have access to Slack and Trello connectors. All other connectors requires a paid MockFlow Board license.




  




Share :

0

Link to this change
boards

MockFlow Board for Microsoft Teams: Free AI-Powered Visual Collaboration inside MS Teams

Transform conversations into visuals with MockFlow Board for Microsoft Teams. Enjoy AI-powered visual brainstorming, flowcharts, and mind maps directly inside your workspace without switching apps.

MockFlow Board for Microsoft Teams: Free AI-Powered Visual Collaboration inside MS Teams

Now brainstorm visually inside Microsoft Teams to generate diagrams, mind maps, and flowcharts and more in your channels and meetings, without switching apps..

Your team's best ideas happen in conversation. But conversations are linear as they scroll, they get buried, and they rarely capture the full picture.

MockFlow Board for Microsoft Teams changes that by embedding a full AI-powered whiteboard directly inside the platform where your team already communicates, plans, and makes decisions.

No new tabs. No shared links to external tools. No context switching. Just open MockFlow Board inside Teams, and start thinking visually together.

ideaboard-ms-teams-8mb.gif

Visual Brainstorming Where Your Team Already Works

MockFlow Board integrates natively into Microsoft Teams as a first-class app. It lives inside your channels, your meetings, and your personal workspace. Whether you're in a sprint planning call or an async strategy thread, your visual workspace is always one click away.

Every board created inside Teams is a fully functional MockFlow Board canvas, complete with AI generation, real-time collaboration, and the full component library that includes flowcharts, mind maps, architecture diagrams, Kanban boards, customer journey maps, storyboards, documents, charts, and more

Asset-2.png

AI That Turns Conversations into Visuals

The real power of MockFlow Board inside Teams isn't just a whiteboard , it's an AI-powered whiteboard. Mida, MockFlow Board's built-in AI agent, generates structured visuals from natural language prompts in seconds.

Generate from text prompts:

- "Create a flowchart for our user onboarding process"

- "Draw an AWS architecture diagram for our payment microservice"

- "Build a mind map breaking down Q3 marketing strategy"

- "Map the customer journey from trial signup to paid conversion"

Instant format conversion:

- Turn a mind map into a structured flowchart

- Convert a brainstorming board into a Kanban with prioritized tasks

- Transform meeting notes into a timeline or Gantt chart

- Reshape a list of ideas into a knowledge graph


This means the AI does the heavy lifting of structuring ideas while your team focuses on thinking, deciding, and refining.


Three Deep Integration Points in MS Teams

1. Channel Tabs — Persistent Visual Workspaces

Pin MockFlow Board directly to any Teams channel as a tab. The board becomes a shared, always-accessible workspace for that channel , visible to everyone, editable by anyone with access.

2. Live in Meetings — Brainstorm in Real Time

Open MockFlow Board during any Teams meeting and collaborate on the canvas as a group, live. Every participant sees the board, every participant can contribute, and the AI is available to generate and transform visuals as the conversation unfolds.

3. Channel Updates — Visual Snapshots for Async Teams

Not every team works synchronously. For distributed teams across time zones, MockFlow Board lets you export whiteboard snapshots directly into Teams channels. Post a visual update — a diagram, a status board, a mind map as a rich visual message that everyone sees without opening another tool.

Getting Started

1. Go to the

https://marketplace.microsoft.com/en-gb/product/WA200010542

2. Click Add to Teams

3. Pin MockFlow Board as a tab in any channel, or access it from the personal apps sidebar

4. Sign in with your MockFlow account (or create a free one)

5. Start brainstorming — create a new board or open an existing MockFlow Board

For meetings, simply open the MockFlow Board app during any Teams call from the apps panel, select or create a board, and invite participants to collaborate in real time.

Availability

MockFlow Board for Microsoft Teams is available on all MockFlow plans. The integration works across Microsoft Teams desktop, web.




Share :

3

Link to this change
wireframepro

WireframePro MCP Server: Turn Any AI Assistant Into a Wireframing & Design-to-Code Engine

Discover WireframePro MCP Server, which integrates with AI assistants like Claude and VS Code to streamline wireframing and design-to-code processes. Enhance productivity with contextual wireframing and custom design skills for seamless design automation.

WireframePro MCP Server: Turn Any AI Assistant Into a Wireframing & Design-to-Code Engine

Draft wireframes from a prompt, generate them contextually from your existing code, specs, or requirement docs, and convert wireframes into code all from Claude, Cursor, VS Code, and any MCP-compatible AI assistant.  


Why this matters

WireframePro now speaks the Model Context Protocol (MCP) — Anthropic's open standard for connecting AI assistants to external tools. Any MCP-compatible AI client can now call WireframePro directly to render a wireframe, read a wireframe, and convert it to code, without ever leaving the assistant.

                                                                                                

And uniquely in our Desktop App edition, the workflow is two‑way:                                                               

 1. Prompt → Wireframe — describe a screen in natural language, and the AI builds it as an editable wireframe on your canvas (not a static image).           

            

 2. Wireframe → Code — point the AI at any existing canvas in your project and generate production‑ready React, Vue, Next.js, Tailwind, or plain HTML/CSS from it.

                                                                                                            

The real unlock: contextual wireframing     

Since WireframePro now plugs into an AI agent that already has access to your codebase, specs, tickets, PRDs, API schemas, and design docs, the agent can do the  translation work for you and use WireframePro purely as the rendering surface. The MCP server is the bridge; the agent is the designer.

                                                                                                

 A few workflows that simply weren't possible before:


 - "Wireframe this PRD." Drop a product requirements doc into Claude or Cursor. The agent reads the entire spec, identifies every screen and state it implies, and renders a complete     

 multi‑screen wireframe set on your WireframePro canvas, already organized by user flow.


 - "Wireframe the settings page from our existing codebase." The agent reads your React/Vue source, understands the component tree and routing, and produces a wireframe that faithfully  reflects what ships in production today, ideal for audits, redesigns, and onboarding new designers.                                             


 - "Generate wireframes for every endpoint in this OpenAPI spec." The agent parses the schema, infers the CRUD screens each resource needs, and lays them out as a connected flow. What used to be a week of design work becomes a single prompt.     

                                                                

 - "Turn this Jira epic into a UI wireframe." The agent pulls the ticket, reads the acceptance criteria, drafts screens, and iterates with you in natural language all while the

 canvas updates live.   

                                                                                  

 - "Redesign our checkout to match our new brand guidelines." The agent reads your existing checkout code and your brand style guide, then renders a proposed redesign using a custom Design Skill that encodes your tokens.                                                                                


 - "Document this legacy app." Point the agent at an old codebase with no design files. It reverse‑engineers the UI into wireframes so the team finally has a visual source of truth to plan

 migrations against.                                                                                      

          

 The pattern is the same in every case: the AI agent does the heavy lifting of understanding context : code, docs, specs, tickets and WireframePro MCP is the tool it reaches for whenever  the output needs to be visual. You stop being the middleman between written requirements and visual design, and become the editor of an AI‑produced first draft.

                                                                                                

 This is why shipping MCP and especially the two‑way Desktop edition — is bigger than "another AI feature." It's a new category of design work: contextual, source‑aware wireframing, where  the distance between "a spec exists" and "a wireframe exists" drops from days to seconds.


Two ways to connect

We've shipped the MCP server across every WireframePro surface so teams can adopt it on their own terms.

                                                                                                

 1. Desktop App MCP — the full two‑way experience               


Built directly into the MockFlow Desktop App (macOS, Windows). Open any WireframePro project, register the local MCP endpoint in your AI client, and start designing:         

          

claude mcp add --transport http -s user mockflow-wireframepro http://localhost:21194/mcp                                                   

                                                                                                

 - Works offline — the MCP server runs locally, so your canvas, prompts, and generated code never leave your machine.               

                      

 - Both directions — this is the only edition that ships read_wireframe, enabling wireframe‑to‑code conversion.     

                                   

 - Live canvas rendering — wireframes appear on the active page of your open project in real time, so you can edit as the AI builds.     

                         

Best for: Product designers, UX teams, and engineering teams that want wireframe‑to‑code in a secure, local environment.                                  

                                                                                                

 2. CLI / npm MCP Server — for developer workflows


A standalone npm package for developers who live in their terminal and IDE:                                                                    

 npm install -g @mockflow/wireframepro-mcp         


mockflow-wireframepro-mcp login            


mockflow-wireframepro-mcp                                                      

                                                                                                

 OAuth‑based login to your MockFlow account; wireframes are saved to your cloud workspace so they're shareable with the rest of the team. Ideal for engineers scaffolding UIs from inside   

 Claude Code, Cursor, or VS Code Copilot. Developers who want to auto-generate wireframe designs as part of their process continously. Can be integrated part of the AI assistant based API.

       

 Supported AI clients

            

 WireframePro MCP works with every major MCP‑compatible assistant:

                                                                                                

 - Claude.ai and Claude Code

 - Cursor                                                                                           

 - VS Code + GitHub Copilot                                                                                  

 - OpenCode, Cline, and other MCP clients


Design Skills — teach your AI a design language

mcp-skill-help-video.gif


Out of the box, AI‑generated UI tends to look generic because the model has no opinion about visual style. Design Skills solve that: they're reusable style recipes your AI assistant loads  

 as agent skills, instructing it to render wireframes in a specific design language — Material, Fluent, iOS, Shadcn, Bootstrap, retro Windows 98 style, Cyberpunk UI and more. 


WireframePro MCP ships with a growing library of curated Design Skills, with new styles added regularly.


Screenshot 2026-04-15 at 11.17.00 PM.png


Custom Design Skills — your brand, your design system

Paid users can go a step further and author their own Design Skills that encode their company's brand guidelines or internal design system like tokens, typography, spacing, component library, voice and then instantly share them with their team. Once published, every designer, PM, and engineer on the team can load the skill inside their AI assistant and produce wireframes that match the house style on the first try, with zero manual styling.                                                               

 Browse the full catalog and learn how to publish a custom skill at https://mockflow.com/skills/wireframepro.     


 Business use cases


 Product Management


 - Turn a PRD or Jira ticket into a clickable wireframe in under a minute.  

 - Generate multiple screen variations during discovery without a designer in the loop.

 - Attach interactive mockups to specs so engineering estimates are grounded in visuals.                                                    

                                                                                                

 Software Engineering                                                                                     

                                                                                                

 - Scaffold a new feature UI straight from your IDE — Claude Code reads the ticket, calls render_wireframe, and you refine on canvas.                             

 - Point the AI at an existing wireframe and generate the React/Vue/Tailwind component tree that matches it — cutting UI implementation time dramatically.

 - Reverse‑engineer UIs from existing code — point the agent at a legacy screen and get a clean wireframe back, ready for redesign discussions.                        

 - Document API flows with render_flowchart and solution architectures with render_cloudarchitecture, all from the same assistant.                               

                                                                                                

 Design & UX Teams                                                                                       

                                                                                                

 - Use AI as a rapid ideation partner while keeping every output fully editable in WireframePro.  - Lock generated output to your design system via custom Design Skills.

 - Move seamlessly from hand‑sketched ideas to code‑ready specs without leaving the canvas.                                                  

                                                                                                

 Startups & Founders                                                                                      

                                                                                                

 - Go from idea → interactive mockup → shippable frontend code in a single working session.                                                  

 - Validate product concepts with investors and early users without hiring a designer.

                                                                                                

 Agencies & Consultancies                                                                                   

                                                                                                

 - Respond to RFPs with wireframes generated during the sales call itself.

 - Produce client‑ready deliverables — wireframe packs, user flows, and architecture diagrams — from a single prompt‑driven workflow.

                                                                                                

 Enterprise & Regulated Teams 


 - The Desktop App edition keeps every prompt, wireframe, and generated code local, meeting the security posture required in finance, healthcare, and government environments.         

 - Pair with an on‑prem Claude/Cursor setup for a fully air‑gapped design‑to‑code pipeline.

                                                                                                

 Education                                                                                                    

 - Teach UI/UX fundamentals by having students prompt, critique, and refine AI‑generated wireframes live in class.                                       

 - Use Design Skills to demonstrate the visual differences between Material, Fluent, and iOS design languages.


Plans & availability  

Basic plan: allows 10 tool calls for 30 minutes

Paid plan: allows 30 tool calls per minute


For more information visit:

https://mockflow.com/mcp/wireframepro

https://mockflow.com/skills/wireframepro




Share :

0

Link to this change
boards

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.

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

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

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


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 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

 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 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 — 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


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


Create Your Own Skills

Screenshot 2026-04-06 at 10.45.19 PM.png


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

Share :

0

Link to this change
boards

Transform Any Idea, Prompt, Document, or Image into a Multi-Visual Board with Mida AI

Discover how Mida AI and MockFlow Board convert ideas, documents, and images into organized visual workspaces. Generate multi-component boards like flowcharts, Kanban boards, and more with AI-powered automation.

Transform Any Idea, Prompt, Document, or Image into a Multi-Visual Board with Mida AI

MockFlow Board now introduces a powerful way to convert raw ideas, documents, and conversations into fully structured visual workspaces using AI.


With a single prompt, you can generate a complete multi-component board that includes flowcharts, Kanban boards, Gantt charts, mind maps, spreadsheets, calendars, and more, all automatically organized into a clean, structured layout.


Screenshot 2026-03-24 at 3.22.45 PM.png

How It Works

1. Describe, Paste, or Upload

Start with any type of input inside MockFlow Board:

  1. A short prompt such as planning a company trip or launching a product

  2. A long document such as a meeting transcript, PRD, or strategy notes

  3. An image such as handwritten notes, whiteboard captures, or screenshots

Mida AI supports large inputs and understands both structured and unstructured content.


Screenshot 2026-03-24 at 3.26.09 PM.png


2. AI Analysis and Planning

Mida analyzes your input and creates a structured plan for visualization:

  1. Detects intent to determine whether a single component or a multi-component board is needed

  2. Extracts key elements such as tasks, timelines, decisions, risks, and stakeholders

  3. Optionally enriches content using real-time web data when required

  4. Generates a curated plan with multiple visual components tailored to your input

Screenshot 2026-03-24 at 3.28.32 PM.png


3. Review and Customize

Before generating the board, you can review and refine the plan:

  1. Select or deselect individual components

  2. Modify the plan using natural language instructions

  3. Preview AI credit usage for advanced components

This ensures full control before generation.


4. Generate the Board

With one click, MockFlow Board generates all components and arranges them into a structured layout.


Each board is automatically organized using a bento-style grid, with balanced spacing, aligned sections, and a clear visual hierarchy. The result is a ready-to-use workspace that can be shared and edited collaboratively.


Screenshot 2026-03-24 at 3.31.46 PM.png


23 Visual Component Types Supported

Screenshot 2026-03-24 at 3.33.16 PM.png


Mida can generate a wide range of visual components within a single board:


Planning and Tracking

Kanban boards, Gantt charts, timelines, calendars, to-do lists


Brainstorming and Ideation

Mind maps, whiteboards, mood boards, voting boards


Data and Analysis

Charts, spreadsheets, tables, polls


Process and Architecture

Flowcharts, swimlane diagrams, cloud architecture diagrams, customer journey maps


Content and Design

Markdown documents, storyboards, graphic layouts, AI-generated visuals


Location and Interactive

Maps with pins, spinning decision wheels


The system selects the most relevant combination based on your input.


Built for Real Workflows

This feature is designed to support practical, everyday use cases across teams:


Meeting transcripts to action plans

Convert discussions into structured boards with tasks, timelines, and ownership


PRDs to project dashboards

Transform product documents into visual execution plans with timelines and tracking


Quick ideas to structured plans

Expand simple prompts into comprehensive multi-component workspaces


Images to organized boards

Convert handwritten notes or whiteboard photos into structured visual layouts

Intelligent Layout Engine

Generated components are automatically arranged using a layout system that:

  1. Organizes components into balanced rows based on size

  2. Optimizes spacing to reduce empty areas

  3. Maintains visual alignment for clarity

  4. Avoids overlap with existing board content

  5. Applies consistent styling with titles and color themes

Conversational Refinement

You can continuously refine your board using natural language:

  1. Add or remove components

  2. Replace one visualization with another

  3. Adjust focus areas such as marketing, product, or operations

Mida updates the board plan dynamically based on your instructions.

Availability

Multi-component board generation is now available in MockFlow Board for all paid plans. Some advanced component types may use additional AI credits, which are shown during the planning stage.

Share :

0

Link to this change
wireframepro

Multi-Screen AI in WireframePro — From One Prompt to a Complete Design Plan

Discover how Multi-Screen AI in WireframePro revolutionizes product ideation by detecting multi-screen intent and generating complete design plans, including wireframes, flowcharts, architecture, and database diagrams with MIDA.

Multi-Screen AI in WireframePro — From One Prompt to a Complete Design Plan

Available in:

Basic

WireframePro

MockFlow Board

Bundle plan

Ideating an entire product in WireframePro no longer means prompting one screen at a time. MockFlow AI now detects multi-screen intent, plans every wireframe, flowchart, architecture diagram, and database schema your project needs, and generates them all in one go.  


Now WireframePro intelligently understands the scope of your idea. When your prompt describes something that naturally requires multiple screens like an ecommerce website, a SaaS dashboard, or a mobile app , Mida (MockFlow Intelligent Design Assistant) automatically enters Plan Mode before generating anything. Instead of jumping straight to a single wireframe, it first thinks through what your project actually needs.


multi-page-9mb.gif


Plan Mode: AI That Thinks Before It Designs

When MIDA detects a multi-screen intent in your prompt, it pauses generation and presents a structured design plan with a curated list of 5 to 10 deliverables that a designer would typically produce for that project. This isn't limited to wireframe screens. MIDA plans across four types of design artifacts:


  1.  Wireframe Screens — the core UI pages your product needs (Homepage, Dashboard, Product Listing, Settings, Profile, etc.)

  2.  Flowcharts — process and workflow diagrams that map user journeys (Checkout Flow, User Onboarding, Approval Workflow)

  3.  Architecture Diagrams — system-level views of how things connect (Cloud Infrastructure, Microservices Layout, API Gateway)

  4.  Database Diagrams — entity relationship and schema diagrams that define the data layer (Table Structures, Entity Relationships)


The plan appears as an interactive checklist directly inside the Mida chat. Each item shows its name, a brief description, and a type badge so you can see  the mix of deliverables at a glance. You select what you want, deselect what you don't , giving you full control over what gets generated.


 Choose How Your Screens Are Laid Out

 Before generating, you can choose between two layout modes:


 - Separate Pages — each selected item is generated on its own WireframePro page, making it easy to organize and present as a multi-page project


 - Same Page — all selected items are placed side by side on a single canvas, useful for comparing screens or creating overview presentations


One Click, Consistent Ideation

Once you've reviewed the plan and made your selections, hit Generate. MIDA produces all selected wireframes, flowcharts, architecture diagrams, and   database schemas in one go. Every generated screen shares a unified design system , the same color palette, typography, navigation patterns, and component  styles carry across all pages, so your wireframes look like they belong to one product, not a patchwork of separate prompts.


Screenshot 2026-03-10 at 5.56.44 AM.png


Single-Screen Prompts Still Work Instantly

This new behavior is entirely automatic and contextual. Prompts that describe a specific screen — like "create a login page" or "design a pricing table"   continue to generate immediately, exactly as before. Plan Mode only activates when MIDA recognizes that your idea needs more than one screen to fully express.


Wireframing Is Ideation, Not Just Layout

The purpose of wireframing has always been to explore ideas quickly to figure out what a product needs before investing in high-fidelity design or code.


Multi-screen ideation in MockFlow with AI takes that further. Instead of wireframing one screen at a time and mentally tracking the bigger picture, you can now describe an entire concept and let MIDA map out the full scope with screens, flows, systems, and data , so you can focus on refining the idea rather than assembling the pieces.


Note: Multi-screen AI is available only on WireframePro and Bundle plans. Basic plan users can add additional flow diagram with generation.



Share :

0

Link to this change
wireframepro

Instantly Export MockFlow Wireframes as Native Figma Designs

Discover how the MockFlow Figma Plugin transforms wireframes into editable Figma designs. Preserve styling, structure, and layout for a seamless transition from ideation to execution. Ideal for design teams and freelancers aiming for efficiency.

Instantly Export MockFlow Wireframes as Native Figma Designs

Available in:

Basic

WireframePro

MockFlow Board

Bundle plan

The MockFlow Figma Plugin lets you export your WireframePro wireframes as editable Figma components, preserving styling, layer structure, and layout accuracy so your designs are ready to refine the moment they land in Figma.


5515f98d8201cb4a8b6ff56e7efe5d9a796a48d9.png


MockFlow WireframePro is built for speed helping teams sketch out ideas, validate layouts, and iterate on UI concepts faster than any high-fidelity tool allows. But when it's time to move from wireframe to polished design, Figma is where most teams go next.

                                                                          

 The MockFlow Figma Plugin bridges this gap. Wireframe components transfer to Figma with accurate styling, proper layer structure, and full visual fidelity — making the handoff from rapid wireframing to high-fidelity design seamless.


Why Wireframe in MockFlow and Design in Figma?


Screenshot 2026-02-27 at 6.33.14 PM.png


 The best design workflows separate ideation from execution. Wireframing is about exploring structure, flow, and content hierarchy — not pixel-perfect aesthetics. That's what MockFlow WireframePro excels at:


  1.  Speed over polish — Drag-and-drop wireframe components let you build screens in minutes, not hours

  2.  Built-in AI assistant (Mida) — Generate and modify wireframes using natural language prompts

  3.  UI packs for anything — Visualize for any device, any framework it provides professionally maintained UI packs for all

  4.  Zero learning curve — Purpose-built for wireframing, not adapted from a general design tool

  5.  Advanced components — MockFlow provides ready made components for datagrid, charts, dropdown, arrows, all easy to create and edit for your UI brainstorming


Once your wireframe structure is validated, export to Figma where your design team can apply brand styling, build interactions, and create production-ready prototypes.


When the Plugin Saves You Hours


Screenshot 2026-02-27 at 6.46.18 PM.png


Stakeholder Reviews That Turn Into Real Designs

Product managers wireframe screens in MockFlow during a sprint planning call. Once the team agrees on structure, one click exports everything to Figma — where the design team picks up with brand colors, typography, and interactions already roughed in. No redrawing from scratch.


Agency Teams With Parallel Workflows

A UX lead wireframes three layout options in MockFlow while the visual designer works on another project in Figma. When the client approves a direction, the wireframe transfers instantly — borders, fonts, shadows, gradients, charts, and all ready for the designer to refine without recreating components.


Freelancers Delivering to Figma-First Clients

Many clients expect Figma deliverables. MockFlow lets you ideate and iterate at wireframe speed, then export a structurally accurate Figma file that looks like it was built natively. Buttons, inputs, data grids, navigation bars, device frames — everything carries over with correct layer naming and hierarchy.


Remote Design Sprints and Workshops

Teams brainstorm UI layouts in MockFlow's collaborative editor. Participants who aren't designers can contribute meaningfully at the wireframe level. The winning concepts export to Figma where the design system is applied — no translation layer, no screenshot tracing, no

 miscommunication.


Non-Designers Who Need to Hand Off to Design Teams

Product owners, developers, and founders often know exactly what they want but aren't fluent in Figma. MockFlow's component library lets them express UI ideas clearly. The Figma export gives the design team an editable starting point with proper Figma primitives — not a flattened image.


Rapid Prototyping Across Large Projects

When you're wireframing 50+ screens for an enterprise app, rebuilding each one in Figma doubles the timeline. Export entire pages at once standard and sketchy components, charts, icons, SVGs, illustrations, images, and custom CSS styling all included.


How It Works


 1. Select components on your wireframe page (or export the entire page)

 2. Click Export to Figma from the settings or right click menu

 3. The wireframe data is copied to your clipboard

 4. Open the MockFlow plugin in Figma and paste


Each import places the wireframe at your current viewport position and as a separate frame.


No Credits. No Limits. Instant Export.


Figma export consumes no credits. Export your entire project — every page, every component — as many times as you need. There are no usage caps or throttling.


Works Offline in Desktop Apps


The Figma export is fully available in MockFlow's desktop applications with file mode and offline mode. Wireframe without an internet connection,  and export to Figma when you're ready to hand off.


Availability


The Export to Figma feature is available on paid MockFlow plans (WireframePro and Bundle) across web, desktop, and offline modes.


Download Plugin

Plugin is required for pasting the converted MockFlow Wireframe into Figma editor. Plugin just reads from your clipboard the copied design from MockFlow. There is no network access and requires no authentication and also it is very straightforward to use. Install plugin from here.


Share :

0

Link to this change
boards

Introducing "AI prompt box" as a whiteboard component along with 🍲 AI recipes

Discover the AI Prompt Box, a revolutionary component for MockFlow Board, enabling collaborative AI generation and structured workflows. Enhance your team's productivity with pre-configured AI recipes and transparent AI-assisted processes.

Introducing "AI prompt box" as a whiteboard component along with 🍲 AI recipes

The AI Prompt Box brings AI as a component directly onto your MockFlow Board canvas. Add configurable AI generators tailored to specific tasks so every collaborator can use them and track prompts in context. With the recipe library, your team can instantly drop ready-made AI workflows onto any board.


Screenshot 2026-02-19 at 3.12.25 PM.png


From Personal AI Tool to Shared Canvas Component


Screenshot 2026-02-19 at 3.08.45 PM.png


Previously, AI generation in MockFlow Board was limited to individual use. A user would enter a prompt, select an output type, and generate content independently on the board. The new AI Prompt Box transforms this into a structured, collaborative experience.


A team lead or facilitator can configure the Prompt Box once by defining the output type, adding system-level instructions, and setting a guided placeholder. Once placed on the canvas, it becomes a shared AI component that any team member can use. Every prompt generates content directly on the shared board while preserving consistent configuration. MockFlow Board also tracks each interaction, providing clear visibility into who generated what and when. This makes the AI Prompt Box ideal for team brainstorming, standardized workflows, and transparent AI-assisted collaboration.


Configure Once, Enable Consistent AI Generation Across Your Team

Screenshot 2026-02-19 at 3.03.55 PM.png


Each AI Prompt Box can be configured to generate a specific type of output, enabling structured and repeatable AI workflows directly on your MockFlow Board canvas. It supports a wide range of formats, including flowcharts, tables, images, audio, video, and 3D models, as well as AI-powered MockFlow Board components such as Kanban boards, Gantt charts, Swimlane diagrams, and Cloud Architecture diagrams.

The Prompt Box offers flexible configuration options to ensure consistency, clarity, and control:

  1. AI Instructions — Define a system prompt of up to 2,000 characters to control how the AI responds. This allows you to enforce formatting standards, define output structure, and guide the AI toward specific goals or criteria.

  2. Output Type — Restrict the generator to a specific format so every output remains consistent and aligned with the intended workflow.

  3. Placeholder Text — Provide contextual guidance to help team members understand what to enter for best results.

  4. Model Selection — Allow users to choose their preferred AI model or lock the Prompt Box to a specific model for standardized output across text, image, audio, video, and 3D generation.

  5. Title Icon — Assign a distinct icon to each Prompt Box to improve visual identification and organization on the canvas.

This configuration ensures that teams can create reliable, reusable AI generators tailored to specific use cases while maintaining consistency across collaborative sessions.



Recipe Library : Launch Pre-Configured AI Workflows in One Click

Screenshot 2026-02-19 at 3.02.48 PM.png


Alongside the AI Prompt Box, MockFlow Board introduces the Recipe Library — a curated and continuously expanding collection of ready-to-use AI workflow templates. Each recipe includes a complete Prompt Box configuration, including the title, system instructions, output type, placeholder guidance, model preferences, and icon. Simply browse the library, click Add, and the AI Prompt Box is instantly placed on your canvas, fully configured and ready for use.

The library currently includes 30 professionally designed recipes across five categories:


Brainstorm

  1. Devil’s Advocate — Critically evaluate ideas before committing

  2. Competitor HQ Map — Visualize competitor headquarters on a map

  3. Name This Thing Board — Generate and evaluate product or feature names

  4. Movie Scene Storyboard — Create detailed cinematic scenes with dialogue and framing

  5. Comparison Showdown — Analyze two options with a structured side-by-side comparison

  6. Emoji Only Mindmap — Build visual mindmaps using emoji-based nodes

Diagrams

  1. Database Schema Designer — Generate normalized database schemas from app descriptions

  2. Decision Flowchart — Create structured yes/no decision trees

  3. Comic Storyboard — Convert story ideas into comic-style panels

  4. AWS, Azure, and Google Cloud Diagram Creators — Design cloud architecture diagrams using standard services

  5. Explain Simply Mindmap — Break down complex topics into beginner-friendly visuals

  6. Startup Idea Mindmap — Explore startup concepts, features, and opportunities

  7. Approval Workflow — Map structured approval and review processes

General

  1. Predict the Outcome — Make and track predictions collaboratively

  2. Trivia Quiz — Generate engaging quiz questions on any topic

  3. Sprint Mood Check — Capture team sentiment after sprint cycles

  4. Fortune Cookie Wheel — Generate random advice, quotes, or fun prompts

  5. Job Description Generator — Create structured job listings quickly

  6. Changelog Writer — Convert commits and notes into professional changelogs

  7. Recipe Cost Calculator — Estimate ingredient costs for any dish

  8. Icebreaker Wheel — Generate interactive icebreaker questions for meetings

Planning

  1. Travel Route Planner — Plan and visualize multi-city travel routes

  2. Weekly Study Plan — Create structured learning schedules

  3. Content Calendar — Generate organized monthly content plans

  4. Meeting Notes to Action Items — Convert notes into clear, actionable tasks

  5. PRD Document Creator — Generate structured product requirements documents

Media

  1. Business Stock Image Generator — Create professional business visuals

  2. Sketchy Image Generator — Generate hand-drawn style illustrations

The Recipe Library continues to grow, with new recipes regularly added to support more use cases, workflows, and industries. Future updates will also include community-contributed recipes, enabling teams to share and benefit from proven AI workflows created by others.



Generation History : Full Visibility into Team AI Activity


Every prompt submitted through an AI Prompt Box is automatically logged, including the team member’s name, timestamp, output type, and the exact prompt used. A generation count badge provides a quick overview of activity, while the detailed history panel allows owners to review all generations and jump directly to the corresponding output on the canvas.

This built-in tracking brings transparency and accountability to AI-assisted workflows, transforming AI generation into a structured, auditable, and collaborative team process.


Use Cases


 Product Teams Running Design Sprints

Product teams can place multiple AI Prompt Boxes on a single board, each configured for a specific output such as moodboards, flowcharts, or PRD documents. This enables team members to generate ideas and artifacts simultaneously on the shared canvas, accelerating sprint activities without relying on a single facilitator to operate the AI.


Engineering Teams Designing System Architecture

Engineering teams can use pre-configured recipes like AWS, Azure, or Google Cloud Diagram Creators to instantly generate architecture diagrams from simple descriptions. Combined with tools like the Database Schema Designer, teams can visualize infrastructure and data models in the same workspace, improving clarity during system planning.


Workshops and Brainstorming Sessions

Facilitators can prepare boards in advance by adding Prompt Boxes configured for specific exercises, such as Devil’s Advocate analysis, comparison evaluations, or creative mindmapping. Participants can immediately begin generating ideas when the session starts, ensuring productive and structured collaboration.


Marketing and Content Teams

Marketing teams can use Prompt Boxes to generate content calendars, visual assets, and campaign naming ideas in one unified space. Recipes like the Content Calendar, Business Stock Image Generator, and Name This Thing Board help teams rapidly develop and organize campaign materials directly on the canvas.


Educators and Trainers

Educators can use Prompt Boxes to simplify complex topics, generate quizzes, and create structured study plans. This allows instructors to focus on teaching and discussion while AI assists in producing supporting materials tailored to the session’s needs.


Agencies and Client Collaboration

Agencies can configure Prompt Boxes with client-specific instructions, brand tone, and formatting rules before sharing the board. Clients can then generate content that aligns with brand and project requirements, reducing revisions and accelerating feedback and approval cycles.


 What This Changes


AI generation was already a powerful capability in MockFlow Board. The AI Prompt Box transforms it into a fully collaborative workflow configured once, used by the entire team, and automatically tracked for transparency and accountability. Combined with the growing Recipe Library, teams can quickly deploy proven AI workflows and accelerate brainstorming, planning, and creation directly on the canvas.


The AI Prompt Box and Recipe Library are now available in MockFlow Board, enabling faster, more structured, and truly collaborative AI-assisted work.


Share :

0

Link to this change
boards

Brainstorm with the New Storyboard Component in MockFlow Board

Discover how the new Storyboard component in MockFlow Board transforms your whiteboard into a powerful visual planning tool. Streamline brainstorming, organize narratives, and collaborate efficiently with built-in AI and media management. Perfect for film, animation, marketing, and educational projects.

Brainstorm with the New Storyboard Component in MockFlow Board

The new Storyboard component in MockFlow Board turns your online whiteboard into a powerful visual planning workspace. You can now brainstorm narratives, map scenes, organize frames, and structure entire productions without switching tools. Whether you are planning a film, designing a product journey, or pitching a campaign concept, everything happens directly on your board.



hero-img (1).png


Storyboarding Without the Workarounds

If you have ever tried creating a storyboard in a traditional whiteboard tool, you know how frustrating it can be. Teams often drag rectangles into rows, manually align sticky notes, number frames one by one, and hope nothing shifts out of place. The result may look like a storyboard, but it behaves like disconnected shapes without structure, metadata, or export capabilities.


The Storyboard component eliminates that workaround. Instead of building from loose objects, you now work inside a structured storyboard system designed specifically for visual narratives. Frames belong to scenes. Metadata is built in. Media is organized properly. Exports are production ready.


This is not a workaround. It is a purpose-built storyboarding experience inside your whiteboard.


Why Storyboarding Belongs on a Whiteboard


Screenshot 2026-02-11 at 6.19.33 PM.png


Most dedicated storyboarding software lives separately from your brainstorming space. You ideate in one tool, design frames in another, and track production tasks somewhere else. Every switch slows momentum and breaks creative flow.


MockFlow Board changes that completely. Your team is already using sticky notes, mind maps, flowcharts, mood boards, and freeform sketches on an infinite canvas. Now you can move from a rough idea to a structured frame-by-frame storyboard without leaving the board.

Creative thinking and production planning finally happen in one continuous workspace.


Rich Media and Structured Metadata in Every Frame

Each storyboard frame supports:

  1. Cover image, video, or audio uploads directly from your media library

  2. Preset metadata fields such as Duration, Dialogue Text, Camera or Shot Type, Location, Action Notes, and SFX Audio

  3. Fourteen built-in shot types including Wide Shot, Close-Up, POV, Tracking, and more

  4. Custom metadata fields tailored to your production workflow

This structured approach ensures your storyboard behaves like a production document, not just a visual layout.


Generate and Refine Storyboards with Mida AI

gen-ai (1).png


The Storyboard component becomes even more powerful with Mida, MockFlow Board’s AI co-pilot.

With Mida, you can:

  1. Generate a complete storyboard from a single prompt by simply describing your story

  2. Modify and expand an existing storyboard with follow-up instructions

  3. Generate AI images for frames, characters, and scenes based on descriptions

  4. Convert your storyboard into other MockFlow Board components such as Kanban, Gantt, or Calendar to transition from creative planning to execution

The AI prompt bar includes options like Gen Images and Brand Guide integration, giving you full control over whether visuals are generated and how they align with your defined style.


ai-convert.png


Maintain Visual Consistency with Brand Guide


ai-images.png


The built-in Brand Guide ensures every storyboard maintains a consistent visual identity. You can define:

  1. Art style such as Sketch, Realistic, Anime, Comic, Minimalist, or Watercolor

  2. Color palette preferences

  3. Style notes and visual references

  4. Do and do not guidelines for creative direction

These settings feed directly into Mida’s AI image generation, so your visuals stay aligned with your project’s tone and aesthetic.



Import Scripts from Industry Standard Tools

If you already have a screenplay or script, importing it is simple. The Storyboard component supports:

  1. Fountain files

  2. Final Draft XML

  3. Celtx project files

  4. Plain text scripts

The parser automatically detects the format and converts scenes, dialogue, and action lines into storyboard frames. You can choose to replace your existing storyboard or merge imported scenes into your current board.


Export and Share with Production Teams

When your storyboard is complete, export options include:

  1. CSV

  2. JSON

  3. PDF

  4. Image ZIP

This makes it easy to hand off to production teams, share with stakeholders, or archive for future reference.


Built for Team Collaboration and Brainstorming

Every feature is designed for teamwork:

  1. Per-frame comments with user attribution

  2. Collaborator awareness so you always know who is contributing

  3. Read-only mode for reviewers

  4. Full undo and redo support

  5. Search functionality to filter frames, characters, and scenes

  6. Light and dark themes

  7. Focus Mode for distraction-free editing

This makes MockFlow Board one of the most collaborative online storyboard tools available today.


Who Is This For

  1. Film and video production teams can plan shots, manage characters, and map scenes before filming begins.

  2. Animation and motion design teams can sequence frames, define camera angles, and attach reference media.

  3. UX and product teams can map user journeys visually, with each frame representing a touchpoint and metadata capturing interaction details.

  4. Marketing and advertising teams can pitch campaign concepts visually and use AI to generate rapid storyboard drafts for clients.

  5. Game development teams can design cutscenes, define narrative beats, and generate AI-assisted concept art.

  6. Education and training teams can script instructional videos, import lesson scripts, and attach audio narration to each frame.


How to Get Started

  1. Open any MockFlow Board.

  2. Go to the Components panel and search for Storyboard.

  3. Drag the Storyboard component onto your board.

  4. Add frames manually or use the AI button to generate a storyboard from a prompt.

  5. Organize scenes, define characters, and customize your Brand Guide.

  6. Collaborate with your team and export when ready.


The Storyboard component brings structured visual storytelling directly into your online whiteboard. From early brainstorming to production-ready exports, everything happens in one connected workspace.


Your story starts here.

Share :

0

Link to this change
wireframepro

Export wireframes as AI visual prompt for agentic tools like claude code

Transform wireframes into optimized AI prompts for agentic tools like Claude Code. Simplify UI generation with MockFlow’s Export to AI Prompt feature, supporting Codex, Cursor, and more.

Export wireframes as AI visual prompt for agentic tools like claude code

Available in:

Basic

WireframePro

MockFlow Board

Bundle plan

Converting your wireframes into production-ready front-end code just got significantly easier with Export to AI Prompt. This new feature lets you transform any wireframe into a structured, optimized AI prompt that can be directly used in modern agentic coding tools such as Claude Code, Codex, Cursor, Lovable, Bolt, and Replit.


With a single click, you can copy the generated prompt and paste it into your preferred AI coding platform to generate high-quality, pixel-accurate UI code for your existing or new projects without rewriting lengthy text prompts or manually explaining design intent.


Faster and Simpler than MCP-Based Workflows

Unlike MCP server setups that require configuration, authentication, and additional infrastructure, Export to AI Prompt works instantly with no setup required. You simply select any part of your design, whether it’s a section, frame, or specific content block and click Export to AI Prompt.


The generated prompt already includes all the necessary design context: layout structure, visual hierarchy, component relationships, and branding details. This allows AI coding tools to understand exactly what needs to be built, resulting in more accurate and consistent output with far fewer iterations.


Because it’s a direct copy-paste workflow, there’s no ambiguity around which part of the design is being referenced, no need to manage external servers, and no learning curve. Even non-developers can easily convert wireframes into functional UI prototypes to validate how their designs will look in real applications.


Screenshot 2026-02-04 at 8.10.05 PM.png


Supported AI Coding Platforms

Although the exported prompt can be used with virtually any AI coding tool, MockFlow optimizes prompts based on the capabilities and limitations of popular platforms, such as context length and image handling.


For best results, we recommend Claude Code, as it supports larger context windows and delivers more consistent UI generation. Other supported platforms include Codex, Cursor, Lovable, Bolt, and Replit.


Screenshot 2026-02-04 at 8.11.36 PM.png


Ideal for Vibe Coding with Visual Prompts

Export to AI Prompt is especially powerful for teams practicing vibe coding where ideas are explored visually instead of through long text instructions.


With MockFlow’s rapid wireframing, you no longer need to describe interfaces in paragraphs of text and hope the AI interprets them correctly. Instead, you can directly draw your idea and let MockFlow generate a visual AI prompt enriched with layout data, component structure, and brand guidelines.


This eliminates the gap between what’s in your mind and what the AI produces, enabling faster experimentation, better alignment, and more predictable results.


IdeaBoard (1).png


Export AI Prompt vs Build Mode in WireframePro

WireframePro already includes Build Mode, which converts wireframes into production-ready front-end code using built-in credits from your subscription. Build Mode is primarily designed for non-developers, such as product managers and designers who want to quickly generate working UI code for demos, reviews, and stakeholder approvals.


Export to AI Prompt, on the other hand, is designed for teams and developers who are already using AI coding tools. It acts as a visual bridge between MockFlow and your existing development workflow, allowing you to bring precise design context into your AI environment and build directly inside your own codebase.


Availability

Export to AI Prompt is available on paid plans (WireframePro and Bundle).

It’s a major time-saver for building front-end UIs with AI, helping you reduce unnecessary prompt iterations, avoid misinterpretations, and lower overall AI usage costs by starting with a clear, visual, and structured design prompt from MockFlow.


Share :

0

Link to this change
boards

MockFlow Board for Google Meet : Real-Time Brainstorming Without Leaving Your Meeting

Enhance your Google Meet sessions with MockFlow Board's real-time brainstorming capabilities. Collaborate visually with whiteboards, diagrams, and AI-powered tools right inside your meetings.

MockFlow Board for Google Meet : Real-Time Brainstorming Without Leaving Your Meeting

Available in:

Basic

WireframePro

MockFlow Board

Bundle plan

MockFlow Board now runs natively inside Google Meet, turning your video calls into live brainstorming sessions where everyone can think visually together,  on the same canvas, without ever leaving the meeting.


Brainstorm Visually During Google Meet Calls

By combining MockFlow Board’s versatile whiteboard components with seamless Google Meet integration, you can turn everyday meetings into highly productive visual collaboration sessions. Use MockFlow Board to brainstorm and document cloud architectures, flow diagrams, storyboards, design moodboards, mind maps, customer journeys, and more all directly within your meeting.


The MockFlow Board is automatically shared with all participants and supports Google Sign-In for instant access. With real-time multi-user editing, everyone in the meeting can contribute simultaneously to the same whiteboard.


unnamed (1).png


Practical Use Cases

Imagine your next sprint planning meeting. Instead of reading tickets aloud, your team opens a Kanban board in MockFlow Board and drags priorities around in real time. Or your engineering lead sketches an AWS cloud architecture diagram on the canvas while walking the team through a migration plan, allowing everyone to annotate, question, and refine it instantly.

Running a product discovery session? Drop a customer journey map onto the board and let the team add pain points using sticky notes as the discussion unfolds. Need to break down a complex feature? Start a mind map and watch it grow organically as teammates branch out ideas together.

These aren’t activities you do after the meeting. They happen during the meeting , because MockFlow Board lives right inside Google Meet, not in another tab or screen share.


AI-Powered Brainstorming with Mida

Bring AI into your meetings with Mida, your built-in brainstorming co-pilot. Ask Mida to visualize your ideas instantly generate diagrams, structures, and layouts directly on the board as your discussion evolves.


How It Works: Getting Started

  1. Install the app from the Google Workspace Marketplace:

  2. https://workspace.google.com/marketplace/app/mockflow_ideaboard/162227401569

  3. Open any Google Meet session.

  4. Click the Activities panel (puzzle icon) and select MockFlow Board.

  5. Sign in with your Google or MockFlow account.

  6. Choose an existing board or create a new one.

  7. The board opens on the main stage everyone can now brainstorm together in real time.

Availability

MockFlow Board for Google Meet is available on all plans, including the free Basic plan. Business plan users get unlimited boards and higher collaborator limits for larger teams.



Share :

0

Link to this change
wireframepro

Improved Generation and New AI Features in WireframePro Mida

Discover the upgraded AI features in WireframePro MIDA, offering enhanced UI wireframe generation with contextual styling and guided screenshot conversion for seamless design workflows.

Improved Generation and New AI Features in WireframePro Mida

Brainstorming user interfaces with AI just got a major upgrade in WireframePro MIDA (MockFlow Intelligent Design Assistant). With reference styling, contextual generation, and a smarter screenshot-to-wireframe workflow, MIDA now helps you create faster, more consistent UI wireframes for websites and apps.


Smarter, More Conversational Mida

MIDA is now faster, more responsive, and more natural to interact with. You can describe your ideas conversationally and watch them turn into structured wireframes in seconds.

You can now start generation in multiple ways using the new Plus (+) button inside the MIDA input box—making it easier to explore, refine, and iterate on designs without breaking your flow.


Refer Existing Wireframes

You can now generate new screens based on an existing wireframe for visual and structural consistency.

There are two ways to use this:

  1. Right-click any selected area or wireframe and choose “Create like this.”

  2. Inside MIDA, select “Refer existing wireframe” before entering your prompt.

This ensures that newly generated pages match the branding, layout style, and content patterns of your existing designs.

For example, if you already have a landing page, you can quickly generate a pricing page that follows the same visual language and data style.


Screenshot 2026-01-27 at 10.14.24 PM.png


Consistent Styling Across Screens

Creating multi-screen wireframes with the same color palette and visual style is now easier than ever.

Enable the “Current style” option in the MIDA input box, and all generated wireframes will inherit the colors and styling from the existing designs on the page. This keeps your flows visually cohesive while still letting you iterate rapidly.


Guided Screenshot to Wireframe

The Reference Screenshot feature has been upgraded and fully integrated into MIDA.

Earlier, this was a standalone conversion tool. Now, you can:

  1. Upload a screenshot

  2. Then guide MIDA on how to generate from it

For example, you can ask it to:

  1. Add more users or data

  2. Modernize the theme

  3. Adjust layout or structure

This turns screenshot conversion into a flexible, AI-guided design workflow instead of a one-click static output.



Why Generate Wireframes with AI Instead of Full Code?

AI-generated wireframes let you move faster while staying focused on design intent.

They:

  1. Are quicker to generate and iterate, saving time and credits

  2. Focus only on the frontend experience, without code complexity

  3. Are easy to edit and refine using WireframePro’s editor

This makes wireframes the perfect frontend blueprint before you move into vibe coding or full development.








Share :

1

Link to this change
wireframepro

Export Wireframes as Interactive PDF with Clickable Navigation

Learn how to export MockFlow wireframes as interactive PDFs with clickable links and navigation. Enhance stakeholder reviews and share prototypes seamlessly without external dependencies.

Export Wireframes as Interactive PDF with Clickable Navigation

Available in:

Basic

WireframePro

MockFlow Board

Bundle plan

Export MockFlow wireframes as Interactive PDF documents with clickable page links, internal

 navigation, and web links. Share interactive prototypes without external dependencies. Unlike static exports, Interactive PDFs allow reviewers and stakeholders to experience your wireframes in a more realistic, connected, and meaningful way.


Why Interactive PDF Export Matters

Wireframes serve as more than conceptual sketches, they're essential UI requirement documents that guide frontend development. Sharing, reviewing, and archiving them effectively is a critical part of the product development workflow.


MockFlow WireframePro already supports exporting wireframes in multiple formats, each designed for a specific purpose:

  1. Static PDF – for simple viewing and documentation

  2. Images – for quick sharing

  3. Specs Mode – for developer handoff

  4. PowerPoint (PPT) – for presentations

  5. Word (DOC) – for detailed project documentation

With this release, we’re adding a powerful new option: Interactive PDF Export.


 Key Benefits


 - No external dependencies — Works offline in any PDF reader

 - Preserves navigation — Page links, hotspots, and web links remain clickable

 - Easy sharing — Attach to emails, upload to cloud drives, or embed in documentation

 - Better stakeholder reviews — Reviewers experience the flow, not just static screens


 How to Create an Interactive PDF


 1. Open Export Options from the left sidebar

Screenshot 2026-01-17 at 10.37.42 AM.png


 2. Select "Interactive PDF" as the export format

 3. Add pages to include in the document


Screenshot 2026-01-17 at 10.37.52 AM.png


 4. Toggle link annotations visibility (optional blue highlight rectangles)

 5. Click Export and download your interactive wireframe


Wireframes are not just conceptual drawings but also act as requirement documents for UI. This is why exporting wireframes is important to share and archive for better frontend process. MockFlow supports this by enabling to export wireframes in multiple formats - static pdf, image, specs, ppt, doc. Each as its own use cases. like specs for developers, ppt for quick presentations in meetings, docs - for futher documentation using MS word. Now this release adds one more export type - "Interactive PDF". this preserves the navigation between pages, internal links and also links to external webpages. Which means it gives an wholesome interactive wireframe in a PDF document without any external servers or dependencies. Now easily share interactive wireframes as PDF in email attachments, cloud drives and more.

Availability

This feature is available exclusively to:

  1. WireframePro license users

  2. MockFlow Bundle license users


Sample PDF: http://cdn.mockflow.com/changelogfiles/interactivepdf_example.pdf


With Interactive PDF Export, WireframePro takes one more step toward making wireframe sharing, collaboration, and documentation smoother than ever.

Start exporting smarter today!


Share :

0

Link to this change
wireframepro

Auto-Generated Style Guide for Wireframes in Specs Mode

Discover how WireframePro's Specs mode simplifies design handoff by auto-generating style guides from your wireframes. Effortlessly transition from concept to implementation with structured visual documentation, ideal for developers and designers.

Auto-Generated Style Guide for Wireframes in Specs Mode

WireframePro now makes design handoff even easier with auto-generated style guides inside Specs mode. Your wireframes can automatically produce a structured style guide based on the colors, fonts, icons, and images used in your design, ready to be reviewed or exported for development.


This enhancement bridges the gap between early-stage wireframes and implementation-ready design documentation, without requiring extra setup or manual work.


From Wireframe to Style Guide — Automatically

Traditionally, teams start with a brand or style guide and then create wireframes based on those rules. In real-world workflows, however, wireframes often come first.

Wireframes are usually created early in the product lifecycle, often by product managers, founders, or non-designers who are focused on layout, flow, and functionality rather than visual styling. As the wireframe evolves into a more detailed and high-fidelity version, colors, fonts, and visual elements naturally start taking shape.


WireframePro now flips the traditional process by automatically generating a style guide from the wireframe itself. Instead of manually documenting styles afterward, Specs mode analyzes your design and extracts:

  1. Colors used across the wireframe

  2. Font families and text styles

  3. Icons and images

  4. Common visual patterns

This gives you a clear, structured overview of the visual system emerging from your wireframe.


Screenshot 2026-01-02 at 6.02.07 PM.png


The above screenshot , shows nvidia.com homepage converted to wireframe using chrome extension and then its style guide extracted.


Why This Is Useful

The auto-generated style guide helps in multiple real-world scenarios:

  1. Simpler developer handoff – Developers get a ready reference of styles used in the wireframe.

  2. Better collaboration – Designers and engineers can quickly align on visual decisions.

  3. Clarity for evolving designs – As wireframes become more detailed, the style guide updates automatically.

  4. Ideal for non-designers – Teams can focus on ideas first, without worrying about formal style systems upfront.

  5. Faster transition to high-fidelity designs – The extracted styles act as a foundation for UI refinement.

Instead of manually documenting design tokens, WireframePro turns your working wireframe into a usable style reference instantly.


How to Auto-Generate the Style Guide

Generating the style guide is simple:

  1. Open your wireframe in WireframePro

  2. Switch to Specs mode (available in both Editor and View modes)

  3. The system automatically generates a complete style guide based on your wireframe

You’ll see a structured overview of colors, typography, icons, and other visual elements used — just like the example shown in the screenshot above.

No setup, no configuration, and no manual tagging required.


Export Formats Supported

The auto-generated style guide can be exported in multiple developer-friendly formats:

  1. CSS Variables – Ideal for web projects

  2. JSON (Design Tokens) – Useful for design systems and tooling

  3. Tailwind Config – Perfect for Tailwind CSS–based workflows

  4. These exports help teams directly plug design values into their codebase, reducing back-and-forth and speeding up implementation.


What’s Coming Next

This is just the beginning. Upcoming improvements to the auto-generated style guide will include:

  1. Editing and refining styles directly inside the style guide

  2. Applying updated styles back to the wireframe

  3. More control over tokens and grouping

  4. Expanded export options

The goal is to make the style guide not just a reference, but an active part of the design workflow.


The Auto-Generated Style Guide in WireframePro turns your wireframes into living design documentation helping teams move faster from concept to implementation, with clarity and consistency built in.

Share :

1

Link to this change
boards

Create, Brainstorm 3D Models in MockFlow Board – Games, Objects, Film & More

Discover how MockFlow Board enhances brainstorming with 3D models for games, film, and design. Use AI to create and collaborate on interactive 3D objects, transforming ideas into reality.

Create, Brainstorm 3D Models in MockFlow Board – Games, Objects, Film & More

When whiteboard is digital, why restrict brainstorming to just sticky notes and images. There are many industries out there that use 3D designs. MockFlow Board now makes it easy to create, brainstorm with 3D objects (with AI) helping in ideation of games, interior designs, film , 3d print and more...


Whether you’re shaping early game concepts, visualizing product designs, or experimenting with film props and environments, MockFlow Board now gives your ideas real depth.


Screenshot 2025-12-22 at 2.42.31 PM.png

A New Dimension to Brainstorming

Brainstorming with 3D models adds an entirely new layer to visual thinking. You can now combine interactive 3D objects with everything you already use in MockFlow Board: sections, drawings, diagrams, notes, comments, reactions, images, and checklists.


This opens up powerful new use cases. You can build flow diagrams using 3D objects to explain iterations or transformations, create mood boards enriched with 3D assets for design inspiration, or plan projects visually by grouping 3D objects within sections and tracking progress through checklists. Teams can collaborate more clearly, align faster, and move from abstract ideas to tangible concepts right at the ideation stage.


Screenshot 2025-12-22 at 2.29.56 PM.png


Advanced 3D Viewer Built for Whiteboarding

Unlike generic 3D viewers, MockFlow Board’s 3D viewer is built from the ground up specifically for whiteboarding and collaborative ideation. It’s fast, lightweight, and focused on the interactions that matter most during brainstorming.


You can auto-rotate a model for continuous viewing or switch to a fixed view that allows manual rotation, panning, and zooming. A wireframe mode is available for clearer inspection of structure and form, especially useful during early concept reviews. For focused exploration, models can be viewed instantly in full screen using the F key while interacting with them.


Create 3D Objects with AI

MockFlow Board doesn’t just let you import 3D models, it also helps you create them from scratch using AI. You can upload any 3D model in the popular GLB format, or skip imports altogether and start ideating directly in 3D.


Screenshot 2025-12-22 at 2.31.09 PM.png


There are two AI-powered creation options. You can generate a 3D object from a text prompt—something as simple as "Make a Christmas tree" and see a model appear instantly. Alternatively, you can convert an existing image into a 3D object (as long as the image meets basic quality requirements for good results).


These features use your existing MockFlow Board AI credits, which can be topped up anytime, making it easy to experiment freely during brainstorming sessions.


Built for 3D-Driven Ideas

With native 3D brainstorming, MockFlow Board is now ideal for planning games, interior layouts, film concepts, manufacturing ideas, product prototypes, and any creative workflow that benefits from thinking in three dimensions. You can quickly explore early, imperfect ideas in 3D, refine them collaboratively, and evolve them visually without leaving your whiteboard.


In addition to native models, MockFlow Board also supports embedded viewers from platforms like Sketchfab, giving you even more flexibility to work with existing 3D content.

This update brings depth, clarity, and speed to visual ideation helping teams move from imagination to form, faster than ever.


Click to view example.



Share :

1

Link to this change
boards

ChatGPT app for MockFlow Board - now visualize without AI limits or signups

Discover the new ChatGPT app for MockFlow Board, a revolutionary tool that turns ChatGPT into a visual brainstorming companion. Create mind maps, flowcharts, and more without AI limits or signups. Perfect for seamless mobile and web integration.

ChatGPT app for MockFlow Board - now visualize without AI limits or signups

The new MockFlow Board ChatGPT app transforms ChatGPT from a text-only conversational assistant into a fully visual brainstorming companion. Instantly create mind maps, flowcharts, architecture diagrams, customer journey maps, spreadsheets, documents, and more directly inside your existing ChatGPT interface. No MockFlow account, no AI credit limits, and no setup required.


Screenshot 2025-12-11 at 2.37.23 PM.png


Getting Started

You likely need just one step:

  1. Open ChatGPT.

  2. Click Explore GPTs on the left sidebar.

  3. Search for "MockFlow Board".

  4. Start chatting - no MockFlow login required, and no generation limits from our side.

Within seconds, ChatGPT will be able to output visuals instead of plain text.


Screenshot 2025-12-11 at 2.27.20 PM.png


How It Works

Once installed, the MockFlow Board action becomes available on all official ChatGPT apps in web, iOS, and Android.

  1. MockFlow Board provides a list of sample topics to try.

  2. You can also simply ask: “What can you do?” for a full capability overview.

  3. When you request something like: “Draw a flowchart for the payment process”,

  4. the MockFlow Board Visual API instantly generates the diagram and returns it to ChatGPT in a consistent, high-quality visual format.

This happens seamlessly in a few seconds everything stays inside your ChatGPT window.


Screenshot 2025-12-11 at 2.30.11 PM.png

Why Not Just ChatGPT?

ChatGPT is exceptional at generating text, summaries, code, and even images.

But for structured visuals like flowcharts, mind maps, architecture diagrams, and brainstorming boards, native output formats are limited.


MockFlow Board fills this gap by offering:

  1. High-precision, purpose-built diagram rendering

  2. Consistent formatting across all visual types

  3. Editable and export-friendly outputs

You can compare the difference yourself by asking ChatGPT the same request with and without the MockFlow Board app installed.


Screenshot 2025-12-11 at 2.53.49 PM.png


Can I Edit the Visuals?

Absolutely.

Every visual: flowcharts, user journeys, maps, brainstorm boards, flowcharts, cloud architecture diagrams and whatever supported is provided in two forms:

  1. A static image returned inside ChatGPT

  2. An editable, login-free demo project in MockFlow Board

Just click the “Edit” link to modify, refine, or export the visual.

No account is needed unless you want to save the board permanently to your MockFlow workspace.


Note: Login-less demo projects remain active for 24 hours and are deleted automatically afterward.


Screenshot 2025-12-11 at 2.55.12 PM.png


How ChatGPT Enhances Brainstorming in MockFlow Board

Beyond visualization, ChatGPT’s built-in capabilities supercharge your brainstorming workflow:

Voice-Driven Diagram Creation

Use ChatGPT’s voice mode to create visuals hands-free:

“Create a customer journey map for a food delivery app.”

Memory-Powered Iterations

ChatGPT remembers your conversation, so refining diagrams is effortless:

“Convert this bar chart into a table.”

“Expand the flowchart to include a manual review step.”

Brainstorm Using Your Files

Upload PDFs, study notes, PRDs, or documents and instantly convert them into structured MockFlow Board visuals like mind maps or workflows.

Mobile-Native Visualization

Use MockFlow Board seamlessly in ChatGPT for iOS or Android perfect for brainstorming on the go.


Pricing — Will I Be Charged?

No.

The ChatGPT app for MockFlow Board is 100% free to use.

  1. No generation limits

  2. No AI credits consumed by MockFlow Board

  3. No signup required

  4. Optional MockFlow login only if you want collaboration or advanced features

If you love the experience, we simply ask that you share the MockFlow Board ChatGPT app with your friends, colleagues, and teams.


Install Now

👉 https://chatgpt.com/g/g-69359f625c208191bb28a24be729cd79-mockflow-ideaboard



About MockFlow Board

MockFlow Board is a next-generation AI-powered whiteboard tool designed for visual thinkers. If you're coming from legacy brainstorming tools like Miro or Mural, MockFlow Board offers a faster, cleaner, and AI-first approach to mind mapping, flowcharting, and collaborative ideation.








Share :

0

Link to this change
boards

Now reshape, modify and transform your ideas with MockFlow Board AI

Discover how MockFlow Board AI's latest update enhances your brainstorming process with AI-driven transformations. Modify and convert ideas effortlessly across various formats.

Now reshape, modify and transform your ideas with MockFlow Board AI

The latest MockFlow Board update brings powerful new AI driven transformations that let you reshape your ideas across formats with ease. Whether you want to turn a simple todo list into a structured mindmap, convert a data table into a document, or refine an existing component using a prompt- MockFlow Board AI now adapts to the way you think and work.


MockFlow Board has always offered a wide range of components for brainstorming, from basic stickies and documents to advanced diagrams like architecture maps and customer journeys. With AI, many of these can be generated or enriched instantly, for example, creating a mindmap for a social media plan or generating an AWS architecture diagram for a Netflix-like service. AI is not a requirement in MockFlow Board, but a creative accelerator that helps you ideate faster and get unblocked quickly.


Today’s release takes this one step further. You can now seamlessly reshape your concepts, update visual content, and transform ideas across formats all in a single click. Below is a look at what's new and how it elevates your brainstorming workflow.


Modify with AI

Use Modify with AI to enhance, refine, or clean up existing components without rebuilding them manually. Select any supported component — such as Maps, Documents, Tables, Lists, Stickies and open the Modify with AI option in the quick toolbar.

Enter a prompt describing what you want to change. Examples include:

  1. “Summarize this document.”

  2. “Add more locations to this map.”

  3. “Remove duplicate rows from this spreadsheet.”

MockFlow Board AI intelligently updates the selected component while preserving its structure.


Convert with AI

Screenshot_2025-12-04_at_8.24.03_PM-removebg-preview.png


This feature unlocks an entirely new way to think visually. Convert with AI allows you to re-express the same idea in a different format offering fresh perspectives and new creative directions without starting from scratch.


Choose from a variety of supported output formats, including:

  1. Flowcharts

  2. Architecture diagrams

  3. Brainstorm clusters

  4. Moodboards

  5. Mindmaps

  6. Documents

For example, turn a long document into a flowchart, convert a table into a chart, or reshape a brainstorm group into a detailed technical model. It’s an effortless way to explore ideas through multiple lenses.


When converting between formats, you can also add an optional prompt to guide the AI and shape the output in a specific way. Once the new format is generated, MockFlow Board automatically draws a connection line from the original component to the transformed one, clearly indicating the relationship between the source and its new visualization.


Screenshot 2025-12-04 at 8.40.37 PM.png

Use case scenarios:

  1. As in the hero example, a PRD document for a new CRM app can be instantly reshaped into a mindmap, an architecture diagram, or a customer journey — all in a click.

  2. Restructure any document with simple prompts, whether you need a translation, a summary, or a complete transformation.

  3. Convert a checklist into a clear process-oriented flowchart for easier execution and review.

  4. Turn a spreadsheet containing geo-tagged data into an interactive location-based map visualization.


Share :

0

Link to this change
wireframepro

WireframePro Chrome Ext Update — Now wireframe redesigns faster

Discover the latest WireframePro Chrome Extension update featuring a refreshed UI and powerful multi-screen generation for faster, smoother wireframe redesigns. Now available free for all plans.

WireframePro Chrome Ext Update — Now wireframe redesigns faster

We’ve introduced a major upgrade featuring a redesigned interface and multi-screen generation. Converting existing UI into editable wireframes is now faster, smoother, and better aligned with real-world product design workflows.

chrome-ext (2).gif

What’s New

A Refreshed Minimal UI

The extension interface has been redesigned from the ground up with a clean, distraction-free layout. The new popup overlay sits neatly on top of the webpage without blocking the content you’re working with. It maintains all previously available capabilities now in a more lightweight, responsive experience that feels noticeably snappier.

Multi-Screen Capture and Conversion

Previously, screens had to be converted one at a time, a slow workflow, especially for larger products. With this update, you can now select and convert multiple screens or sections in a single session. Import them as editable wireframes into one page or generate multiple pages automatically.

Free for All Plans

The WireframePro Chrome Extension is now available without any usage limits, regardless of your plan. Simply

install it and start converting live websites or apps into editable wireframes—instantly.

Build better wireframes. Iterate faster. Design smarter directly from the web.


Share :

1

Link to this change
wireframepro

Live Presentations 2.0 in MockFlow — In-Sync View, Voice Support & Greater Control

Discover Live Presentations 2.0 in MockFlow for seamless remote wireframing and brainstorming. Enjoy in-sync navigation, voice support, and improved control for collaborative design reviews.

Live Presentations 2.0 in MockFlow — In-Sync View, Voice Support & Greater Control

Available in:

Basic

WireframePro

MockFlow Board

Bundle plan

Enhance remote wireframing and brainstorming sessions with the all-new Live Present 2.0. This upgrade brings seamless in-sync navigation, built-in audio, easier access, and improved presentation flow for collaborative work.


What is Live Presenting in MockFlow?

Live Presenting allows you to share your wireframes or whiteboards with stakeholders such as clients, teammates, or investors in real time. Instead of screen sharing, everyone views the same project directly inside MockFlow, just as if they were gathered around the same screen. No downloads, installations, or browser extensions are required, collaborators simply open the shared link and join.


Screenshot 2025-11-21 at 12.34.07 PM.png


Easier access and joining experience

Starting a live presentation is now simpler. In both WireframePro and MockFlow Board, open the Collaboration menu and select Live Present from the top bar.

When collaborators have the project open or join midway they receive a visual alert with an audio chime, similar to an incoming call. One click on Accept brings them into the presentation instantly.


Clearer presentation state indicators

Live Present 2.0 introduces improved visual cues across the workspace. The header updates dynamically to show that a presentation is active, with separate states for presenters and audience. Hovering over the title provides more information about the session, ensuring every member understands whether they’re presenting or watching.


Screenshot 2025-11-21 at 12.34.39 PM.png


In-sync navigation

Once the session begins, the presenter controls navigation. Every scroll, zoom level, page change, or interaction is synchronized automatically across all viewers.

MockFlow adjusts positioning based on different screen resolutions and display densities so everyone sees the same content in the same way. This makes walkthroughs, non-linear navigation in MockFlow Board, and multi-page wireframe reviews fluid and intuitive.


Built-in audio and optional video

Live Presentations now start with the microphone enabled by default to keep presentations natural and conversational. Presenters can mute audio at any time and switch to in-app chat if needed.

Optional video can also be enabled from the collaboration bar to allow participants to see and hear the presenter, making remote sessions feel more personal and interactive.


A more connected and intuitive way to present

Live Present 2.0 delivers an upgraded remote collaboration experience that makes design reviews, brainstorming, and walkthroughs feel effortless and in-person — without screen sharing or meeting setup friction. This feature is available now for all paid plans in WireframePro and MockFlow Board.




Share :

0

Link to this change
Earlier changes
10 Nov 2025Now create Non-Linear Presentations with Interactions in MockFlow Board1 Nov 2025Enhanced Data Editor for Charts in WireframePro22 Oct 2025New maps component with AI for Whiteboard7 Oct 2025Express Beyond Text: Add Video and Voice Comments in MockFlow Ideaboard24 Sep 2025Introducing Mini-Mode in WireframePro: A Smarter, Faster Way to Wireframe16 Sep 2025MockFlow Board launches as an offline whiteboard app, work seamlessly without servers9 Sep 2025New Keyboard Shortcuts for Faster Wireframing and Whiteboarding in MockFlow29 Aug 2025Generate dashboards, analytics, chart based wireframes with AI26 Aug 2025Bring Your Whiteboard to Life with Custom Backgrounds in MockFlow Board13 Aug 2025New: Visual prompting for generating code in Visual Studio5 Aug 2025Introducing the Android 16 UI Kit for Wireframing – Now Available1 Aug 2025MockFlow Board now adds free whiteboarding directly inside Atlassian Trello30 Jul 2025Free UI kits for MacOS 26, iPadOS 26, and watchOS 26 now available in MockFlow23 Jul 2025Create Documents the Visual Way with the New Docs Component27 Jun 2025Introducing AI toolbox for brainstorming in MockFlow Board20 Jun 2025Free wireframe kit for ideating iOS 26 liquid glass apps for iPhone16 Jun 2025Wireframe UI kit for Tailwind v4 released for websites and webapps10 Jun 2025New in Build Mode: Select framework version during code export3 Jun 2025MockFlow Board File mode - makes whiteboard data on-premise and git-integrated20 May 2025New! Build mode - Convert wireframes into production code19 Feb 2025New Minimap in the Editor for Effortless Navigation7 Feb 2025Now experience Dark Mode in MockFlow Dashboard and Editor26 Nov 2024Updated UI kit for Android to version 1514 Nov 2024Now track team activity in Design Spaces30 Oct 2024AI Feature series 4: Convert Website/Webapp to Wireframes18 Oct 2024AI Feature series 3: Whiteboard to Wireframe10 Oct 2024AI Feature series 2: Screenshot to Wireframe7 Oct 2024AI Feature series: Text to Wireframe8 Sep 2024Update: Real-Time Call Alerts for Video Meetings in MockFlow2 Sep 2024New Wireframing UI Kit for shadcn/ui: 190+ Components24 Jul 2024Copy and Paste Component Styles in Wireframe Editor16 Jul 2024Speed Up Your Wireframing with Symbols8 Jul 2024Now track all activities within your project20 Jun 2024Wireframe iPhone apps with iOS 18 UI Kit18 Jun 2024Feature Update: Mark Design Feedback as Resolved10 Jun 2024Introducing "Docs" mode for UI design28 May 2024Update: Visually Suggest Design Changes, Not Just Comments27 Mar 2024Get your wireframes reviewed and rated by AI12 Feb 2024Improved insights for DesignSpace6 Feb 2024Update: Create Sketchy UI Flows, Flowcharts, and Diagrams26 Jan 2024Now brainstorm apps for Apple Vision Pro11 Jan 2024New UI kit for drawing sketchy mobile interfaces19 Dec 2023Launching Flow App for Flowcharts, Diagrams, and More29 Nov 2023Introducing new "Flow mode" in WireframePro23 Oct 2023Wireframe UI kit for MacOS 14 Sonoma is now available22 Sep 2023MockFlow New AI Update: Generate Color Palettes with Prompts18 Sep 2023Wireframe UI Kits for iPhone iOS 17 & iPadOS 17 Now Available12 Sep 2023Introducing "AI Co-pilot" for brainstorming UI6 Sep 2023Wireframe UI kit for Shopify Polaris29 Aug 2023Introducing Illustration Packs in MockFlow WireframePro21 Aug 2023Wireframe UI kit for Microsoft Fluent 2 Design System18 Aug 2023New layout for SiteMap app - "PageFrame"15 Aug 2023New UI Pack for brainstorming AI based software4 Aug 2023Generate sitemaps for any website type with AI28 Jul 2023Launching our next iteration of MockFlow Dashboard7 May 2023Now create BYOC components in MockFlow with AI12 Apr 2023New UI Style for Wireframes: Block UI Pack4 Apr 2023Update: OTT UI Packs for Web & Mobile Media Apps18 Mar 2023New UI Pack for Brainstorming Apps with AWS Amplify27 Feb 2023New UI Pack for Brainstorming Slack Apps20 Feb 2023New Powerup: Replace Wireframe Placeholders with Real Images15 Feb 2023Check out our new Video Promo about MockFlow 🎉13 Feb 2023Updated Desktop UI Packs for Windows 11 & macOS Ventura6 Feb 2023New Powerup: AI Text Content Generation for Wireframes10 Jan 2023Introducing PrevJS: Simple Static Builder from MockFlow28 Nov 2022Redesigned MockStore: UI Kits, Templates & Powerups13 Sep 2022New Tailwind v3 UI Pack: 150+ Wireframe Components19 Jul 2022New Placeholder UI Packs for Images and Logos12 Jul 2022UI Pack for iPadOS 16 has been released7 Jul 2022Introducing Component level themes in MockFlow27 Jun 2022iOS 16 UI pack for iPhone is now available in MockFlow13 Apr 2022Build your Customer Journey Map inside MockFlow!7 Mar 2022MockFlow partners with Mobile UX London14 Feb 2022Now On-board designs and UI for your stakeholders13 Jan 2022Now Build Your Own Component (BYOC) in MockFlow27 Dec 2021Introducing live embed for UI drawings29 Nov 2021Android 12 component UI pack now available in MockStore23 Nov 2021Secure your wireframe project links with pass key15 Nov 2021Know CSS? Now style wireframes with css code29 Oct 2021🎉 📉 Introducing analytics for design space20 Oct 2021Updated Chart Components: 8 Types in Regular & Sketchy21 Jun 2021Power-up Shortcuts - Now access related powerups at the right places19 May 2021Turn UI designs to product mockups with Frames Powerup14 May 2021Bringing centralised Two-Factor Authentication for teams3 May 2021New! Safeguard .wire design files with password protection26 Apr 2021Now localize your UI with i18n internationalization powerup11 Mar 2021Identify WCAG accessiblity issues with this new Powerup17 Feb 2021New Powerup to manage and export "Design Tokens" for UI3 Feb 2021SpellChecker Powerup: With this new addon correct spelling mistakes in wireframe14 Jan 2021New UI Pack for wireframing Data grids and tables
Was this page helpful?

Sign in to MockFlow

The same account you use in the app and on the API.

Forgot your password?
or
Continue with GoogleContinue with Microsoft