Whimsical Plugin

Create Whimsical flowchart diagrams programmatically using Mermaid markup. Generate beautiful flowcharts directly from your AI assistant.

Features

• Create flowcharts from raw Mermaid graph markup
• Simplified flowchart creation with JSON nodes and edges
• Returns both diagram URL and base64 image data
• No API key required

Quick Start

cd pets/whimsical
npm run quickstart

Available Tools

whimsical-create-diagram

Create a flowchart using raw Mermaid graph markup.

"Create a diagram from: graph TD; A[Start] --> B[Process] --> C[End]"

Parameters:

• mermaidMarkup: Mermaid graph syntax (e.g., graph TD; A-->B)
• title: Diagram title

whimsical-create-flowchart

Create flowcharts with a simplified node/edge JSON format.

"Create a flowchart showing user login flow with Start, Validate, Success, and Failure nodes"

Parameters:

• title: Diagram title
• direction: TD (top-down), LR (left-right), BT (bottom-top), RL (right-left)
• nodesJson: JSON array of nodes with id, label, and optional shape
• edgesJson: JSON array of edges with from, to, and optional label

Node shapes: rect, round, diamond, circle

Example Usage

Using Raw Mermaid Markup

Create a flowchart from this mermaid:
graph TD
    A[Start] --> B{Is Valid?}
    B -->|Yes| C[Process]
    B -->|No| D[Error]
    C --> E[End]
    D --> E

Using JSON Format

Create a flowchart titled "User Authentication" with:
- Nodes: Start (circle), Login Form (rect), Validate (diamond), Dashboard (round), Error (rect)
- Edges: Start->Login Form, Login Form->Validate, Validate->Dashboard (success), Validate->Error (failure)

Response Format

All tools return JSON with:

{
  "success": true,
  "message": "Flowchart created successfully",
  "fileUrl": "https://whimsical.com/...",
  "imageUrl": "https://...",
  "generatedMermaid": "graph TD...",
  "image": {
    "base64": "...",
    "mimeType": "image/png"
  }
}

Limitations

• Only flowcharts (Mermaid graph syntax) are supported
• Sequence diagrams, mind maps, and other diagram types are not supported by the Whimsical API

No API Key Required

This plugin uses Whimsical's public API endpoint for diagram generation. No authentication is needed.

Mermaid Syntax Reference

For flowcharts, use Mermaid graph syntax:

graph TD
    A[Rectangle] --> B(Rounded)
    B --> C{Diamond}
    C -->|Yes| D((Circle))
    C -->|No| E[End]

Directions:

• TD or TB: Top to bottom
• BT: Bottom to top
• LR: Left to right
• RL: Right to left

Node shapes:

• [text]: Rectangle
• (text): Rounded rectangle
• {text}: Diamond
• ((text)): Circle

For more details, see the Mermaid Flowchart documentation.