# MockFlow

> MockFlow is an AI-powered online visual collaboration platform for product, design and development teams, combining wireframing (WireframePro) and whiteboarding (IdeaBoard) in a single workspace. It is used by designers, developers, product managers, startups, agencies, and educators to move from idea to design-ready specs without switching tools.

MockFlow's two core products are WireframePro, a dedicated UI wireframing and prototyping editor, and IdeaBoard, an infinite-canvas whiteboard for brainstorming, diagramming, and visual thinking. WireframePro is built for speed — drag-and-drop UI components, AI wireframe generation, multi-screen AI ideation (describe a whole concept and get its screens, flows, and data mapped out), and one-click export of finished wireframes to native editable Figma layers, front-end code (React, Vue, Tailwind, HTML), or a structured AI coding prompt for tools like Claude Code and Cursor. IdeaBoard is a component-rich canvas for sticky notes, moodboards, mind maps, flowcharts, kanban boards, storyboards, customer journey maps, and architecture diagrams. Both products are powered by Mida, MockFlow's built-in AI assistant, and support real-time collaboration with live cursors, comments, reactions, voice and video feedback, and presentation mode. The platform serves over 2 million users and is ISO 27001 and SOC 2 certified. Paid plans start at $108/user/year (billed annually); a permanent free tier is available.

Key products: WireframePro (wireframing, prototyping, design handoff, export to Figma / code / AI prompt), IdeaBoard (whiteboarding, sticky notes, moodboards, flowcharts, mind maps, kanban, storyboards, diagrams), Mida AI Assistant, AI Design Tools, UI Kits, Design Documentation, MCP Connectors for Claude, Cursor and ChatGPT.

Common use cases: wireframing websites, web apps and mobile apps; creating interactive prototypes; exporting wireframes to Figma, front-end code, or AI coding prompts; generating flowcharts and architecture diagrams with AI; running remote brainstorming sessions; producing design specs and handoff documentation; connecting MockFlow to AI assistants via MCP.

## Products

- [MockFlow Home](https://mockflow.com/): Platform homepage covering WireframePro and IdeaBoard capabilities, AI features, integrations, and how teams use MockFlow across the product design process.
- [WireframePro](https://mockflow.com/wireframepro/): AI-powered wireframing and prototyping tool for designing websites, apps, and dashboards with pre-built UI components, interactive prototyping, and one-click export to editable Figma layers, front-end code (React, Vue, Tailwind, HTML), or a structured AI coding prompt.
- [IdeaBoard](https://mockflow.com/ideaboard/): Infinite-canvas AI whiteboard for team brainstorming with sticky notes, moodboards, mind maps, flowcharts, kanban boards, storyboards, customer journey maps, and architecture diagrams, plus real-time collaboration — live cursors, comments, emoji reactions, voice and video feedback, and built-in presentation mode.
- [MockFlow AI](https://mockflow.com/ai/): Overview of all AI-powered features across wireframing, diagramming, documentation, and content generation, driven by Mida, MockFlow's built-in AI assistant.
- [Desktop App](https://mockflow.com/desktop/): Offline-capable desktop application for Mac and Windows with MCP server integration for AI assistants.
- [Templates](https://mockflow.com/templates/): 1,000+ customisable templates for wireframes, flowcharts, sitemaps, brainstorming boards, and IdeaBoard projects across web, mobile, and enterprise categories.
- [UI Kits Store](https://mockflow.com/uikits/): 150+ downloadable UI kits for iOS, Android, Tailwind, Material Design, Salesforce, SAP, and more — installable directly in WireframePro.
- [Pricing](https://mockflow.com/pricing/): Plan comparison — Free (forever); WireframePro ($168/user/year or $19/user/month); IdeaBoard ($108/user/year or $12/user/month); MockFlow Suite, both products bundled ($204/user/year or $24/user/month); plus a 10-Day Pass for short-term access. All paid plans include AI credits.
- [Enterprise](https://mockflow.com/enterprise/): Scalable, centralised platform for enterprise teams with user management, SSO, and advanced security.
- [Integrations](https://mockflow.com/integrations/): Full list of integrations including Slack, Google Drive, Microsoft Teams, Jira, Figma, and SSO providers.
- [Connectors](https://mockflow.com/connectors/): Pull data from Slack, Jira, GitHub, Google Drive, HubSpot, and other tools into IdeaBoard for AI-powered visual brainstorming.
- [Security](https://mockflow.com/security/): Details of MockFlow's security practices — AWS hosting, SSL/HTTPS, SOC 2, ISO 27001, 2FA, and data encryption.
- [About](https://mockflow.com/about/): Company overview, products, brand assets, and media information.
- [MCP Connectors](https://mockflow.com/mcp/): How to connect MockFlow's tools to Claude, Cursor, VS Code, and other AI assistants via Model Context Protocol.
- [Resources](https://mockflow.com/resources/): Articles and guides covering UI design patterns, the UI design process, and visual collaboration best practices.

## WireframePro Features

- [Wireframe Editor](https://mockflow.com/wireframing/wireframe-editor/): Clean, fast wireframing editor with functional shortcuts, layers panel, focus mode, and high performance for large projects.
- [UI Components](https://mockflow.com/wireframing/ui-components/): Library of 100+ native wireframe components including forms, charts, data grids, annotations, and layout builders.
- [UI Kits](https://mockflow.com/wireframing/ui-kits/): Pre-built UI packs for websites, web apps, iOS, Android, desktop, and enterprise systems to accelerate wireframing.
- [Symbols](https://mockflow.com/wireframing/symbols/): Reusable UI components that maintain design consistency across pages while allowing individual instance overrides.
- [Design Assets](https://mockflow.com/wireframing/design-assets/): Built-in library of icons, illustrations, images, shapes, Google Fonts, and cloud storage integrations.
- [Prototyping](https://mockflow.com/wireframing/prototyping/): Create interactive UI prototypes with events, actions, and dynamic effects directly within the wireframe editor.
- [Design Collaboration](https://mockflow.com/wireframing/design-collaboration/): Permission-based sharing, password-protected previews, built-in team chat, and video conferencing for wireframe projects.
- [Version History](https://mockflow.com/wireframing/wireframe-version-history/): Page-level version history to log, compare, and revert wireframe changes over time.
- [AI Design](https://mockflow.com/wireframing/ai-design/): AI features inside WireframePro for generating wireframes, UI content, colour palettes, and design documentation from prompts.
- [Design Documentation](https://mockflow.com/design/design-documentation/): Integrated documentation editor for creating project briefs, handoff guidelines, and design checklists linked to wireframe components.
- [Export & Handoff](https://mockflow.com/mockflow-to-figma/): Export finished wireframes to native, editable Figma layers (frames, text, and shapes with styling and hierarchy preserved — no flattened images); to production-ready front-end code (React, Vue, Tailwind, HTML) via Build Mode; to a structured AI coding prompt ready to paste into agentic tools like Claude Code, Codex, Cursor, Lovable, Bolt, and Replit; or to image, PDF, and interactive PDF that preserves prototype interactions.

## AI Tools

- [Create Wireframes with AI](https://mockflow.com/ai/create-wireframes-with-ai/): Generate editable wireframes from text descriptions, screenshots, sketches, or URLs instantly — or use multi-screen AI ideation to map an entire concept's screens, flows, systems, and data from a single prompt.
- [Create Flowcharts with AI](https://mockflow.com/ai/create-flowcharts-with-ai/): Turn plain-language descriptions into editable flowcharts, architecture diagrams, user flows, and UML diagrams — focused on speed for technical and business teams.
- [AI Flowchart Maker](https://mockflow.com/ai/flowchart-maker/): Standalone diagram tool with smart AI detection that automatically selects the right diagram type and domain-specific icon set (biology, circuit, P&ID, UML) from a single text prompt.
- [Generate Sitemaps with AI](https://mockflow.com/ai/generate-sitemaps-with-ai/): Create editable sitemaps and information architecture maps from text prompts for websites and apps.
- [Generate UX Docs with AI](https://mockflow.com/ai/generate-ux-docs-with-ai/): Generate structured UX documentation templates — briefs, checklists, handoff guides — from simple prompts.
- [Mindmap with AI](https://mockflow.com/ai/mindmap-with-ai/): Convert ideas, documents, or meeting notes into structured visual mind maps using AI.
- [Storyboard with AI](https://mockflow.com/ai/storyboard-with-ai/): Generate visual storyboard scenes and frames from text descriptions for creative and UX workflows.
- [User Flow Diagram Generator](https://mockflow.com/ai/user-flow-diagram-generator/): AI-powered tool that generates UX navigation flows with screens, actions, and decision points — ideal for mapping app interactions from a text prompt.
- [Create UI Content with AI](https://mockflow.com/ai/create-ui-content-with-ai/): Generate UI text, visuals, colour palettes, translations, data tables, and components directly inside the design editor.
- [Calendar with AI](https://mockflow.com/ai/calendar-with-ai/): Generate visual calendars and timelines from natural language descriptions for project roadmaps and scheduling.
- [Kanban with AI](https://mockflow.com/ai/kanban-with-ai/): Convert project descriptions into organised Kanban boards with columns, task cards, and priorities using AI.
- [Poll with AI](https://mockflow.com/ai/poll-with-ai/): Generate engaging polls and visual surveys with auto-generated images for collaborative team decision-making.
- [Spinning Wheel with AI](https://mockflow.com/ai/spinning-wheel-with-ai/): Create interactive spinning wheels for randomised decision-making and team engagement during brainstorming sessions.
- [Spreadsheet with AI](https://mockflow.com/ai/spreadsheet-with-ai/): Describe your data needs and get structured spreadsheets with headers, sample data, formulas, and automatic calculations on the whiteboard.
- [Markdown with AI](https://mockflow.com/ai/markdown-with-ai/): Generate richly formatted markdown documents — project briefs, meeting notes, reports — with AI on a collaborative whiteboard.
- [Timeline with AI](https://mockflow.com/ai/create-timelines-with-ai/): Create visual timelines with events, dates, and images from text descriptions for project milestones and historical overviews.
- [Customer Journey Map with AI](https://mockflow.com/ai/customer-journey-with-ai/): Generate detailed customer journey maps with stages, touchpoints, emotions, and satisfaction curves from text prompts.
- [Maps with AI](https://mockflow.com/ai/maps-with-ai/): Create interactive maps with AI-placed markers and contextual icons for geographic planning and location-based brainstorming.
- [Convert Meeting Transcript to Visual Board](https://mockflow.com/ai/convert-meeting-transcript-to-visual-board/): Upload a meeting transcript (PDF or markdown) and AI extracts tasks, decisions, timelines, and stakeholders into an editable visual whiteboard.
- [Knowledge Graph with AI](https://mockflow.com/ai/create-knowledge-graph-with-ai/): Generate visual knowledge graphs that map entities and relationships from text for research and brainstorming.

## AI Diagram Generators

- [Biology Diagram Generator](https://mockflow.com/ai/biology-diagram-generator/): Create cell structures, metabolic pathways (Krebs cycle), DNA replication, food webs, and anatomy diagrams with scientifically accurate icons and labels.
- [Data Flow Diagram Generator](https://mockflow.com/ai/data-flow-diagram-generator/): Map how information moves through a system — processes, data stores, external entities, and directional arrows — with professional, sketchy, or 3D isometric styles.
- [Decision Tree Generator](https://mockflow.com/ai/decision-tree-generator/): Build branching decision trees for customer support routing, risk assessment, medical triage, product configuration, and troubleshooting guides.
- [Circuit Diagram Generator](https://mockflow.com/ai/circuit-diagram-generator/): Produce schematics with IEEE/IEC-standard symbols for resistors, transistors, op-amps, and ICs — supporting amplifier, power supply, digital logic, and Arduino/Raspberry Pi projects.
- [Organization Chart Generator](https://mockflow.com/ai/organization-chart-generator/): Create company hierarchies, department structures, matrix organisations, and governance layouts with auto-arranged reporting lines.
- [Process Flowchart Generator](https://mockflow.com/ai/process-flowchart-generator/): Describe a business process and get a complete flowchart with decision diamonds, yes/no branches, parallel paths, loops, and merge points — all auto-generated.
- [P&ID Diagram Generator](https://mockflow.com/ai/p-and-id-diagram-generator/): Generate piping and instrumentation diagrams with ISA-standard valve, vessel, and pump symbols plus proper instrument tags (e.g., TT-101, FCV-102) for chemical, oil & gas, HVAC, and pharma processes.
- [Workflow Diagram Generator](https://mockflow.com/ai/workflow-diagram-generator/): Visualise task sequences, team handoffs, and approval chains across departments — focused on who does what and when rather than procedural logic.
- [Swimlane Diagram Generator](https://mockflow.com/ai/swimlane-diagram-generator/): Generate colour-coded lane diagrams that show responsibilities and handoffs across roles or departments for onboarding, procurement, development, and compliance processes.
- [Sequence Diagram Generator](https://mockflow.com/ai/sequence-diagram-generator/): Create UML sequence diagrams with actor lifelines and chronological message flows for API documentation, microservices interactions, OAuth/JWT auth flows, and system design.
- [Database Diagram Generator](https://mockflow.com/ai/database-diagram-generator/): Generate ER diagrams with table structures, column data types, primary/foreign key indicators, and one-to-many or many-to-many relationships for e-commerce, SaaS, CMS, and healthcare schemas.
- [Cloud Architecture Generator](https://mockflow.com/ai/cloud-architecture-generator/): Describe your infrastructure and get a multi-provider architecture diagram — AI auto-detects the cloud provider from keywords and applies official service icons with brand-accurate colours.
- [AWS Architecture Diagram Generator](https://mockflow.com/ai/aws-architecture-diagram-generator/): Generate AWS diagrams with 50+ service icons (EC2, Lambda, S3, RDS, DynamoDB), colour-coded VPC/subnet structures, and multi-AZ and multi-region layouts.
- [Azure Architecture Diagram Generator](https://mockflow.com/ai/azure-architecture-diagram-generator/): Generate Azure diagrams with official Microsoft icons, VNet layouts, and support for hybrid architectures via ExpressRoute, VPN, and Azure Arc.
- [Google Cloud Architecture Diagram Generator](https://mockflow.com/ai/google-cloud-architecture-diagram-generator/): Generate GCP diagrams with Google's four-colour icon system covering Compute Engine, BigQuery, Cloud Run, Pub/Sub, Vertex AI, and Anthos hybrid setups.
- [Oracle Cloud Architecture Diagram Generator](https://mockflow.com/ai/oracle-cloud-architecture-diagram-generator/): Generate Oracle Cloud Infrastructure diagrams with OCI compute, storage, database, and networking service icons.
- [Cisco Network Diagram Generator](https://mockflow.com/ai/cisco-network-diagram-generator/): Generate network topology diagrams with Cisco device icons (ISR, Catalyst, Nexus, Meraki, ASA/Firepower), colour-coded layers, and protocol-labelled connections for campus, data centre, and WAN designs.
- [Kubernetes Architecture Diagram Generator](https://mockflow.com/ai/kubernetes-architecture-diagram-generator/): Generate K8s cluster diagrams with pods, deployments, services, ingress controllers, PVCs, and namespace groupings — supporting EKS, AKS, GKE, and Istio service mesh layouts.
- [SAP Architecture Diagram Generator](https://mockflow.com/ai/sap-architecture-diagram-generator/): Generate SAP landscape diagrams covering S/4HANA, BTP, HANA Cloud, and integration middleware with proper tier separation for Dev/QA/Prod environments and RISE migrations.

## Use Cases

- [Website Wireframing](https://mockflow.com/design/wireframepro/website/): Design website wireframes with drag-and-drop editors, responsive layout templates, and platform-specific UI kits for landing pages, SaaS sites, and e-commerce.
- [Mobile App Wireframing](https://mockflow.com/design/wireframepro/mobile_app/): Wireframe iOS and Android mobile apps with platform-specific UI components, gesture prototyping, and device-frame previews.
- [User Flow Diagrams](https://mockflow.com/design/flowchart/userflow_diagram/): Landing page for UX teams to build user flow diagrams with templates, real-time collaboration, and export — broader than the AI-only generator tool.
- [Architecture Diagrams](https://mockflow.com/design/flowchart/architecture_diagram/): Build software, cloud (AWS, Azure, GCP), and system architecture diagrams with built-in icon libraries.
- [Process Mapping](https://mockflow.com/design/flowchart/process_mapping_software/): Create process flow diagrams, BPMN diagrams, and swimlane charts with templates, collaboration features, and AI generation.
- [UML Diagrams](https://mockflow.com/design/flowchart/uml_diagram/): Create UML diagrams with built-in shape libraries, real-time collaboration, and offline desktop app support.
- [For Agencies](https://mockflow.com/agencies/): How MockFlow helps creative agencies manage client work, wireframe fast, and deliver design specs in one workspace.
- [For Startups](https://mockflow.com/startups/): Startup-specific plan ($99 for 6 months) and how MockFlow helps early-stage teams move from idea to product quickly.
- [For Remote Teams](https://mockflow.com/remotework/): How MockFlow supports distributed product teams with async and real-time collaboration across wireframing and brainstorming.
- [For Education](https://mockflow.com/education/): MockFlow's tools and plans for students and teachers learning UI/UX design and visual thinking.
- [For Freelancers](https://mockflow.com/freelance-designers/): How independent UI/UX designers use MockFlow to wireframe, present concepts, and deliver client work.
- [Wireframe Examples](https://mockflow.com/wireframe-examples/): Gallery of customisable wireframe templates for mobile apps, web apps, websites, dashboards, and SaaS products.
- [Flowchart Examples](https://mockflow.com/flowchart-examples/): Gallery of customisable flowchart templates across architecture diagrams, process flows, UML diagrams, and user flows.
- [IdeaBoard Examples](https://mockflow.com/ideaboard-examples/): Gallery of customisable IdeaBoard templates for diagrams, architecture, planning, meetings, and brainstorming.
- [What is Wireframing](https://mockflow.com/what-is-wireframing/): Comprehensive reference page explaining wireframing — definition, types, best practices, and its role in product design.

## Blog — Wireframing

- [What is a Wireframe](https://mockflow.com/blog/what-is-wireframe): Covers wireframe definition, fidelity levels, creation process, and best practices for 2026.
- [Wireframing Basics for Beginners](https://mockflow.com/blog/wireframing-basics-for-beginners): Practical introduction to wireframing components, process, and tools for first-time wireframers.
- [How to Create a Wireframe — Step-by-Step Guide](https://mockflow.com/blog/M2SfIXX5Kh-How-to-Create-a-Wireframe-A-detailed-Step-by-Step-Guide): Detailed walkthrough of the wireframing process from user goals to design handoff.
- [Why is Wireframing Important](https://mockflow.com/blog/why-is-wireframing-important): Explains the business and design case for wireframing before development begins.
- [Low-Fidelity Wireframes in Product Design](https://mockflow.com/blog/MGLzhxpHYob-Why-are-low-fidelity-wireframes-important-in-product-design): Covers what low-fidelity wireframes are, their benefits, limitations, and when to use them vs high-fidelity.
- [Wireframe vs Mockup vs Prototype](https://mockflow.com/blog/Wireframe-vs-Mockups-vs-Prototypes): Explains the distinctions between wireframes, mockups, and prototypes and when to use each.
- [Wireframing vs Prototyping](https://mockflow.com/blog/wireframing-vs-prototyping): Covers the differences, benefits, and tools for wireframing and prototyping in the product design process.
- [Website Wireframes — Comprehensive Guide](https://mockflow.com/blog/website-wireframes-a-comprehensive-guide): In-depth guide to creating, structuring, and iterating on website wireframes.
- [How to Choose the Perfect Wireframing Tool](https://mockflow.com/blog/how-to-choose-the-perfect-wireframing-tool): Criteria and comparison of ten wireframing tools including MockFlow, Figma, and Balsamiq.

## Blog — UX & Product Design

- [What is Product Design](https://mockflow.com/blog/what-is-product-design): End-to-end guide to product design — process, challenges, and how it differs from UX and UI design.
- [Design Thinking Process Steps](https://mockflow.com/blog/design-thinking-process-steps): Step-by-step breakdown of the design thinking process and the role of wireframing within it.
- [Information Architecture — Beginner's Guide](https://mockflow.com/blog/information-architecture-a-beginners-guide): Covers IA principles, design process, practical examples, and benefits for digital products.
- [UX User Flow Best Practices](https://mockflow.com/blog/ux-user-flow-best-practices): Eight principles for designing effective user flows that guide people through digital products.
- [Steps to Build a UX Strategy](https://mockflow.com/blog/steps-to-build-ux-strategy): Eight-step framework for crafting a UX strategy aligned with business objectives and user needs.
- [UI Design Principles](https://mockflow.com/blog/ui-design-principles): Nine UI design principles — clarity, hierarchy, consistency, accessibility — for building usable interfaces.
- [UI Design System](https://mockflow.com/blog/ui-design-system): Explains design system components, benefits, real-world examples, and implementation steps.

## Blog — Alternatives & Comparisons

- [Miro Alternatives](https://mockflow.com/blog/miro-alternatives): Ten whiteboarding and collaboration tools compared, with MockFlow IdeaBoard recommended for AI-assisted diagramming and real-time teamwork.
- [Lucidchart Alternatives](https://mockflow.com/blog/lucidchart-alternatives): Ten diagramming tools evaluated by use case — visual collaboration, free options, enterprise, and technical diagrams — with MockFlow leading the AI-assisted category.
- [Excalidraw Alternatives](https://mockflow.com/blog/excalidraw-alternatives): Eight whiteboarding tools for teams that have outgrown basic sketching and need collaboration, templates, AI support, and integrations.
- [Visio Alternative](https://mockflow.com/blog/visio-alternative): Eight modern alternatives to Microsoft Visio for teams seeking browser-based editing, AI-assisted workflows, and easier collaboration.
- [FigJam Alternatives](https://mockflow.com/blog/figjam-alternatives): Eight whiteboarding tools compared for teams needing more advanced features, integrations, and security than FigJam offers.
- [Microsoft Whiteboard Alternative](https://mockflow.com/blog/microsoft-whiteboard-alternative): Eight alternatives evaluated for teams needing offline support, AI diagram generation, and richer collaboration features.
- [Mural Alternatives](https://mockflow.com/blog/mural-alternatives): Eight digital whiteboarding platforms compared on simplicity, affordability, and ease of use for visual collaboration.
- [Zoom Whiteboard Alternative](https://mockflow.com/blog/zoom-whiteboard-alternative): Eight standalone whiteboard tools for teams that need a dedicated collaboration canvas beyond Zoom's built-in offering.
- [Best Flowchart Software](https://mockflow.com/blog/best-flowchart-software): Eight flowchart tools compared for creating process diagrams, decision trees, and workflows — MockFlow ranked as top overall pick.
- [Best Architecture Diagram Tools](https://mockflow.com/blog/best-architecture-diagram-tools): Eight tools evaluated for building software, cloud, and system architecture diagrams with team collaboration.

## Blog — Collaboration & Tools

- [Best Design Collaboration Tools](https://mockflow.com/blog/best-design-collaboration-tools): Comparison of the top ten design collaboration tools for 2026, categorised by function in the design process.
- [Best Whiteboarding Tools](https://mockflow.com/blog/best-whiteboarding-tools): Reviews ten AI-powered whiteboarding platforms including MockFlow, Miro, and FigJam.
- [Best Brainstorming Tools](https://mockflow.com/blog/best-brainstorming-tools): Compares twelve brainstorming tools across visual whiteboards, mind mapping, facilitation, and async documentation categories.

## Optional

- [MCP for WireframePro](https://mockflow.com/mcp/wireframepro/): Setup guide for the WireframePro MCP server — two-way workflow for generating wireframes from AI prompts and exporting designs to React or Vue code.
- [MCP for IdeaBoard](https://mockflow.com/mcp/ideaboard/): Setup guide for the IdeaBoard MCP server — generate flowcharts, mind maps, kanban boards, and more from Claude, Cursor, or VS Code.
- [MCP for Claude](https://mockflow.com/mcp/claude/): Step-by-step setup guide for connecting MockFlow to Claude via Model Context Protocol.
- [MCP for VS Code](https://mockflow.com/mcp/vscode/): Step-by-step setup guide for connecting MockFlow to VS Code via Model Context Protocol.
- [MCP for Cursor](https://mockflow.com/mcp/cursor/): Step-by-step setup guide for connecting MockFlow to Cursor via Model Context Protocol.
- [Whiteboard for Google Meet](https://mockflow.com/whiteboard-for-google-meet/): How to use MockFlow IdeaBoard as a shared whiteboard during Google Meet calls.
- [Glossary](https://mockflow.com/glossary/): Definitions of 75+ UX, UI, and design terms used across MockFlow's products and documentation.