Log in
AnnotatePro

Annotate UI screenshots.

Mark up screenshots, highlight the details that matter, make designs interactive and share them for feedback.

An annotated UI screenshot in AnnotatePro

Designed for annotation.

Easily illustrate screenshots and get feedback.

The AnnotatePro editor

Highlight or hide any part of the design.

Censor content in a UI with pixelate or blur fx. Use spotlight and zoom fx to highlight parts of the design.

Zoom

Censor

Blur spot

Pixelate

Spotlight

Stickers for every note.

Find and use annotation stickers as shapes, speech bubbles, stamps, signs, etc... all within the editor.

The AnnotatePro sticker store

Animated icons that draw the eye.

Capture user attention by using animated components.

Animated annotation icons

Make designs interactive.

Pop up content like text, images, videos and slideshows when people interact with the design.

Interactive pop up content on an annotated design

Collaboration enabled.

Share privately with permissions, or create a public link for wider sharing.

Sharing an annotation with permissions
Get started

Start annotating your screenshots.

Open AnnotatePro in your MockFlow account and share your first annotated design.

Support

Learn how to use the AnnotatePro editor in the support portal, or contact us at support@mockflow.com.

MCPBrainstorm with MockFlow MCP

Add MockFlow as an MCP connector in Claude, Cursor, or any MCP-compatible AI assistant to generate flowcharts, mindmaps, architecture diagrams, and 16 types of visualizations.

Desktop App MCP Powerful
CLI Web MCP Developer
Loginless Web MCP Easiest

Built into the MockFlow Desktop App. AI creates visuals directly on your open canvas — no URLs, no waiting.

1
Open Desktop App → open a MockFlow project
2
In Claude Code / Cursor, run:
claude mcp add --transport http -s user mockflow-ideaboard http://localhost:21193/mcp
3
Ask: "Create a flowchart for..."

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

Download Desktop App →

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

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.

npm Package →

Add MockFlow as a connector in Claude.ai or ChatGPT. No installation, no account required. A new board is created and you get a shareable URL.

1
Open Claude.ai → Settings → Connectors
2
Paste this URL: https://app.mockflow.com/ideaboard/mcp
3
Ask Claude to create a flowchart — done!

Best for: Managers, marketers, anyone using Claude.ai or ChatGPT in the browser.

Welcome back

Don't have an account? Sign up

Faster ways in

Sign in with an account you already use.