whimsical MCP Server

Use This MCP server To

Generate system architecture diagrams from LLM Mermaid markup Create flowcharts and wireframes programmatically via Whimsical API Return diagram URLs and images for embedding in apps Iterate on diagram designs using base64 encoded images Automate visual documentation generation from textual context

README

Whimsical MCP Server

A Model Context Protocol (MCP) server that enables the creation of Whimsical diagrams programmatically. This server integrates with Whimsical's API to generate diagrams from Mermaid markup.

Demo

Here's an example of a complex system architecture diagram created using this MCP server and Claude - it shows the Model Context Protocol (MCP) architecture itself:

MCP Architecture

Features

Create Whimsical diagrams using Mermaid markup generated by the MCP Client (Claude, Windsurf, etc.)
Returns both the Whimsical diagram URL and a base64 encoded image to allow the Client to iterate on it's original markup

Installation

Installing via Smithery

To install Whimsical MCP Server for Claude Desktop automatically via Smithery:

npx -y @smithery/cli install BrockReece/whimsical-mcp-server --client claude

Manual Installation

# Clone the repository
git clone https://github.com/BrockReece/whimsical-mcp-server.git

# Install dependencies
yarn install

# Build the project
yarn build

Integration with MCP Client

Update the MCP Client's config to point to this repository's dist folder eg:

    {
        "mcpServers": {
            "whimsical": {
                "command": "node",
                "args": [
                    "/path/to/this/repo/whimsical-mcp-server/dist/index.js"
                ]
            }
        }
    }

License

This project is licensed under the MIT License.

whimsical-mcp-server FAQ

How does the Whimsical MCP Server create diagrams?

It converts Mermaid markup from LLM clients into Whimsical diagrams using Whimsical's API.

Can I get a visual preview of the diagrams?

Yes, the server returns a base64 encoded image along with the diagram URL for preview and iteration.

Is installation easy for MCP clients like Claude Desktop?

Yes, it supports automatic installation via Smithery for seamless integration.

What types of diagrams can be created?

Any diagram supported by Mermaid markup, including flowcharts, wireframes, and system architectures.

Does it support iterative diagram editing?

Yes, clients can update Mermaid markup and regenerate diagrams using the returned image and URL.

Is this server limited to a specific LLM provider?

No, it works with any MCP client generating Mermaid markup, including Claude, OpenAI, and Gemini.

How secure is the integration with Whimsical?

The server uses scoped API access to ensure secure and controlled diagram creation.

Can this server be used in automated documentation workflows?

Yes, it enables automated generation of visual documentation from textual model context.