Paste Mermaid code as a diagramCopied!Link to this section

You can paste Mermaid code directly into a Whimsical board as an editable flowchart or sequence diagram. This is handy for bringing in diagrams from docs, GitHub, or anywhere else you've got Mermaid code.

To paste Mermaid code:

1. Copy your Mermaid code from wherever it lives.
2. In a Whimsical board, hit Command + V (Mac) or Control + V (PC) - We’ll automatically recognize the Mermaid syntax and render it as a diagram.

Whimsical supports both flowcharts (graphs), and sequence diagrams for import.

Copy a diagram as MermaidCopied!Link to this section

You can export any flowchart or sequence diagram back out as Mermaid code for use with GitHub, Notion, GitLab, or other tools that render Mermaid code.

To copy a diagram as Mermaid code:

1. Select the flowchart or diagram you want to export.
2. Right-click the selection and choose Copy as Mermaid from the context menu.
3. Paste the Mermaid code wherever you need it.

The exported code preserves the color and styles of your shapes and connectors.

Nodes are output in topological order, so the code flows in the same direction as your diagram. This ensures compatibility with how tools like GitHub use text ordering to influence layout.

Horizontal and vertical layoutsCopied!Link to this section

Mermaid supports multiple flow directions, and Whimsical honors all of them when you paste or generate a diagram:

• TB top to bottom (TD “top down” is also supported)
• LR left to right
• RL right to left
• BT bottom to top

To get a horizontal diagram, just make sure your Mermaid code specifies the direction. For example, with "flowchart LR" at the top of your code:

If you're generating a flowchart with Whimsical AI, you can specify the layout direction in your prompt. For example, "Create a left-to-right flowchart of the user onboarding process."

SubgraphsCopied!Link to this section

Subgraphs let you group related nodes together inside a larger flowchart. In Whimsical, subgraphs map to grouped and nested shapes, so the visual hierarchy in your Mermaid code carries over directly into your board.

Subgraphs are supported across all three Mermaid workflows:

• Pasting — subgraphs in pasted Mermaid code are rendered as grouped shapes on the board
• AI generation — Whimsical AI and coding agents can include subgraphs in generated flowcharts
• Copy as Mermaid — grouped shapes on your board are exported as subgraphs in the Mermaid output

Supported Mermaid syntaxCopied!Link to this section

Here’s a reference for the Mermaid syntax Whimsical supports when importing or generating diagrams.

Flowchart node shapesCopied!Link to this section

• [text] - Rectangle
• {text} - Diamond (decision)
• ([text]) - Pill / stadium
• ((text)) - Circle / ellipse
• {{text}} - Hexagon
• [(text)] - Cylinder

Connectors and edgesCopied!Link to this section

• —> - Arrow
• —>|Label| - Labeled arrow
• =⇒ - Thick arrow
• ←→ - Bidirectional arrow
• -.- - Dashed line; -.→ - Dashed arrow
• x—x - Diamond endpoints
• o—o - Circle endpoints
• ~~~ - Invisible edge (rendered as a normal connector)
• A & B —> C & D - Multi-node connections

Styling nodes and connectorsCopied!Link to this section

• classDef className fill:#hex,stroke:#hex - Define a style class
• :::className - Apply a class inline to a node (requires a matching classDef)
• linkStyle 0,1,2 stroke:#hex - Color specific connectors (0-based index)
• linkStyle 3 stroke:#hex,stroke-dasharray:5 5 - Dashed connector

Sequence diagramsCopied!Link to this section

• participant Alice - Define a participant
• Alice→>Bob: message - Solid arrow
• Bob—>>Alice: response - Dashed arrow

Use coding agents to build Mermaid diagrams with the MCPCopied!Link to this section

If you use a coding agent like Claude, Cursor, or Windsurf, you can connect it to Whimsical via the Whimsical MCP server. Then your coding agent can generate Mermaid diagrams and build them directly in your Whimsical workspace, without any copying and pasting.

This is a powerful tool to generate architecture diagrams, flowcharts, or sequence diagrams from code, specs, or prompts. For example, you could ask your coding agent to:

• "Generate a flowchart of this authentication flow and add it to my Whimsical board"
• "Create a sequence diagram of the API calls in this file"
• "Map out the data model from this schema as a flowchart in Whimsical"

To try it out, check out the related articles 👇