Whimsical

Provides programmatic diagram creation by generating Whimsical diagrams from Mermaid markup via an MCP endpoint.

javascript

29

GitHub Stars

javascript

Language

4 months ago

First Indexed

3 weeks ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

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

Whimsical MCP Server enables you to programmatically create Whimsical diagrams from Mermaid markup. It integrates with Whimsical's API to render diagrams and provides both a live diagram URL and a base64-encoded image for iterative client-side visualization.

How to use

You will run the Whimsical MCP Server locally or remotely and connect it to an MCP Client. The server accepts Mermaid markup generated by the client and returns two outputs: the live Whimsical diagram URL and a base64-encoded image for quick previews. To use it, configure your MCP Client to point at the server instance and invoke diagram generation from your client workflow.

Integration flow at a glance:

Ensure your MCP Client is configured to use the Whimsical MCP Server. 2) Provide Mermaid markup to the client; the client relays it to the server. 3) Receive the diagram URL and a base64 image to display and iterate on your markup.

How to install

Prerequisites: Node.js (12.x or newer) and npm or yarn. You will either install via Smithery for automatic client integration or perform a manual build from source.

Option A — Installing via Smithery (automatic for Claude Desktop):

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

Option B — Manual installation (from source):

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

# Install dependencies
yarn install

# Build the project
yarn build

After building, you will use the dist output when configuring an MCP client.

Configure your MCP Client to point to the server's runnable entry in the dist folder. Use the following example as a template to connect your client to the locally built server.

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

Additional notes

If you prefer a direct HTTP-based deployment, set up a remote MCP host using standard Node.js deployment practices and point your MCP Client to the hosted server URL when available.