mcpField
W
Whimsical MCP Server

Whimsical MCP Server

Local
github.com/BrockReeceMedia & Design46Updated 28w ago
Repository

About Whimsical MCP Server

A third-party MCP server that creates Whimsical diagrams from Mermaid markup generated by MCP clients such as Claude or Windsurf. It suits users who want diagrams produced directly within their AI client conversations.

Key features

  1. 01Create Whimsical diagrams from Mermaid markup
  2. 02Return diagram URL and base64 encoded image
  3. 03Allow clients to refine the original markup

Use cases

  1. 01Turn a system architecture description into a diagram during a conversation
  2. 02Review the generated image and revise the markup

MCP support

This project is an MCP server that exposes diagram creation to MCP clients, which call it with Mermaid markup.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "whimsical": {
      "command": "npx",
      "args": [
        "-y",
        "@smithery/cli"
      ]
    }
  }
}
Run commandnpx -y @smithery/cli

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npm@smithery/cli

Tools

No tool list yet

Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.

Details

From the project README

Whimsical MCP Server

Whimsical now has an official MCP server available here

A third-party Model Context Protocol (MCP) server that enables the creation of Whimsical diagrams agentically. 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.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.