Whiteboard MCP

AI-powered whiteboard for Claude Code and other MCP-compatible AI agents. Draw diagrams, flowcharts, and sketches through natural language.

Quick Start

Add to your MCP configuration:

{
  "mcpServers": {
    "whiteboard": {
      "command": "npx",
      "args": ["-y", "whiteboard-mcp"]
    }
  }
}

Then ask your AI agent to draw something:

"Draw me an architecture diagram with a web client, API gateway, and database"

The AI calls open_canvas to launch the whiteboard in your browser, then uses drawing tools to create diagrams in real-time.

Features

• 30+ MCP tools — rectangles, ellipses, diamonds, lines, arrows, freehand, text, images
• One-call diagrams — create_flowchart generates complete auto-laid-out diagrams from a graph definition
• Smart arrows — connect_shapes creates arrows that bind to shapes and update when moved
• Full interactive UI — draw, select, move, resize with mouse. Keyboard shortcuts for everything
• Export — PNG, SVG, JSON. Save and load your work
• Preferences — background colors, grid toggle, snap-to-grid, snap-to-shapes

Tools

Drawing

draw_rectangle draw_ellipse draw_diamond draw_line draw_arrow draw_freehand add_text add_image

Diagrams

add_labeled_box connect_shapes create_flowchart

Manipulation

move_element resize_element update_element delete_elements duplicate_elements bring_to_front send_to_back

Canvas

open_canvas clear_canvas set_viewport set_canvas_background toggle_grid undo redo

Export

take_screenshot save_png save_svg save_json load_json export_json export_svg

Query

get_canvas_info get_elements find_elements

License

Proprietary. See LICENSE file.

Contact

[email protected]