Diagrams · checked 2026-10-14

Can I vibecode Whimsical?

YES· one-shottable

A diagram editor for one person is well within one agent session: React Flow supplies pan, zoom, draggable nodes and connectors that follow shapes, and the rest is shape palettes, text editing, a mind-map layout and export. Whimsical's speed comes from keyboard-driven node creation and tidy auto-layout, which are ordinary editor code. You give up co-editing in real time, docs embedded in boards and its AI generators. If you only need diagrams, Excalidraw and draw.io are free and already exist.

$12/moprice per seat

$144you'd save a year

one sittingbuild time

—people replaced it

Before you start

What you need on hand.

DifficultyIntermediate · Some system setup or keys.

TimeAbout an hour for the first version

Claude Code, Codex or CursorAny of them can run the prompt.
Node.js 22A recent LTS release is enough; the prompt installs everything else.
Your Whimsical flowcharts as Mermaid textRight-click a flowchart and choose Copy as > Mermaid; other board types export as images.

Before you buildWhimsical Free caps creation at 50 board objects a month, which a regular user hits quickly. Excalidraw and draw.io have no such cap.

1. Install one agent: Claude Code, Codex, Cursor.
2. Make an empty folder and open it in the agent.
3. Paste the prompt below, press enter, and answer its questions as it builds.

The prompt

Build me a personal diagram editor to replace Whimsical. Requirements:

- Node.js 22 + TypeScript: a React front end built with Vite, using
  `@xyflow/react` (React Flow) for the canvas. `npm start` serves it on
  http://localhost:4900.
- Storage: one JSON file per board in ./boards/<name>.board.json (nodes, edges,
  viewport), written by a small Fastify API with an atomic write (temp file,
  then rename) one second after the last edit. A board list page with rename,
  duplicate and delete.
- Flowchart mode: a palette of process, decision, terminator, data and note
  shapes plus plain text labels; edge labels, arrowheads, and step, smooth and
  straight connector types. Connectors stay attached when shapes move or resize.
- Mind-map mode: Tab adds a child, Enter adds a sibling, Delete removes a
  branch, Space collapses it. Lay out with `d3-hierarchy` (tidy tree) and
  animate the change.
- Wireframe kit: button, input, checkbox, image placeholder, header, list item,
  card and browser-frame shapes in grey, snapping to an 8 px grid.
- Editing basics: box-drag multi-select, copy and paste, align and distribute,
  undo and redo (100 steps), double-click to edit text, arrow keys to nudge.
- Export: PNG at 2x with `html-to-image`, SVG, and Mermaid text for flowcharts
  (a Copy as Mermaid button). Search boards by title and content.
- A dark theme that follows prefers-color-scheme.
- Single user. No accounts, no telemetry, local-first.
- Out of scope: real-time co-editing, comments, docs embedded in boards, AI
  generation, mobile apps.
- README: setup, where boards live, how to back them up (copy ./boards) and a
  table of keyboard shortcuts.

Opens your agent with the prompt filled in, you press enter. Or copy it and paste it into an empty folder.

Share on X

Max MiskowSponsoredAI agents, automations and MVPs, built for your company.Visit site ›

Then keep going

Next prompts, same folder.

The first prompt builds the core. Run these one at a time in the same folder to grow it into your own Whimsical.

Add auto-layout to the diagram editor in this folder. Requirements:

- A Tidy button that lays out the selected shapes, or the whole board, with `elkjs` in a layered, top-to-bottom direction; a toggle switches to left-to-right.
- Keep manually pinned shapes where they are.
- Animate the move over 250 ms and make it one undo step.
- Edge labels must not overlap nodes after layout; add a test that checks it on a 20-node chart.
- Update the README.

Add a Mermaid importer to the diagram editor in this folder. Requirements:

- A Paste Mermaid dialog that parses flowchart syntax (TD and LR, node shapes, labelled edges, subgraphs) with `mermaid`'s parser and creates the matching shapes and connectors.
- Lay the result out with the tidy-tree or `elkjs` layout and open it as a new board.
- Unsupported syntax produces a list of skipped lines instead of an error.
- Update the README.

Add documents to the diagram editor in this folder. Requirements:

- A doc is a Markdown file in ./docs/ edited with a split view and a live preview.
- A line such as ![[board-name]] renders that board as a live, read-only SVG inside the preview, and clicking it opens the board.
- Export a doc to Markdown with boards as PNG files in an assets folder, and to a single HTML file with SVGs inline.
- Update the README.

Add read-only sharing to the diagram editor in this folder. Requirements:

- A Share button writes a self-contained HTML file with the board as inline SVG, pan and zoom, and no external requests.
- Optionally publish it to ./share/<random-token>.html and serve that folder separately on port 4901, disabled unless SHARE_ENABLED=true in .env.
- Regenerating a share replaces the file; Revoke deletes it.
- Update the README with how to put the share folder behind a tunnel.

What you lose

Real-time collaboration with shared cursors
Docs and boards in one workspace, with embeds between them
AI generation of flowcharts, mind maps and wireframes from a prompt
Version history, share links and guest access
Integrations with other work tools and the desktop apps

Why people still pay

Pro removes the free plan's caps of 50 board objects and 50 doc blocks a month, strips the watermark from exports and keeps 90 days of history. Sharing is cheap too: viewers and guests are free, so only the people who edit boards take a seat. People who diagram daily also value a tool that stays out of the way.

Moatexecution polish collaboration

Do the math

Whimsical or your own copy?

Seats

Over

Your usage

Count my time3h ×$/h

Whimsical, 1 yr$144

Your own copy, 1 yr$8running + build session

You keep$137pays for itself in the first month

Estimate · Runs on your machine with no services to pay for. The build is token usage on your agent plan.

Leaving Whimsical

Take your data, then cancel.

1 · Take your data out of Whimsical

1Boards: open the file, choose Share > Export and pick Board (one image) or Frames (one PNG per frame) at 1x or 2x. For a PDF use Share > Print and Save as PDF.
2SVG: select objects, right-click and choose Copy as > SVG, or add /svg to the end of the board's address.
3Flowcharts and sequence diagrams: right-click and choose Copy as > Mermaid. This is the only export that keeps editable structure.
4Docs: Share > Export gives a Markdown file.
5The help pages we read describe no bulk or whole-workspace export, so export file by file.

2 · Cancel Whimsical

1Only workspace admins can do this. Open Billing from the workspace name at the top left, click Manage plan next to your plan and choose Cancel plan.
2Review the Free plan limits and the end date, then click Downgrade to confirm.
3Your plan's benefits last until the end of the billing cycle you paid for, and Resume plan undoes the cancellation before then.

Files and content are kept after cancelling, but Free limits apply: 50 board objects and 50 doc blocks created a month, 7 days of history and watermarked exports.
Export finished boards without the watermark before the paid period ends.
If you added editors since the last invoice, a final invoice follows: at the end of the subscription on monthly plans and a month after cancelling on annual ones.
The cancellation article doesn't mention refunds; ask through Whimsical's Contact us page.

Checked 2026-10-14 against Whimsical's docs: 1, 2, 3

The escape hatch

Don't feel like building it? These are already free.

draw.ioOpen sourceApache-2.0 diagramming tool with a large shape library; use it in the browser, as a desktop app or from Docker.★ 8.8k · active Oct 2026 · docker to self-host
Web, Windows, macOS, LinuxVisit ↗ExcalidrawOpen sourceMIT-licensed hand-drawn style whiteboard for diagrams and wireframes that you can embed or host yourself.★ 134k · active Oct 2026 · docker to self-host
WebVisit ↗PenpotOpen sourceMPL-2.0 design platform for UI mockups and prototypes, built for self-hosting.★ 61k · active Oct 2026 · docker to self-host
WebVisit ↗

All 5 free alternatives to Whimsical ›

The numbers

Whimsical pricing

Plan	Monthly	Annual, per month	What you get
Free	$0	$0	50 board objects and 50 doc blocks created a month, 5 MB per file and 1 GB of storage, 7-day version history, watermark on exports, 10 AI credits per member.
Pro	$12	$10	Unlimited board objects and doc blocks, 1 GB per file and 100 GB of storage, 90-day version history, no export watermark.
Business	$24	$20	Everything in Pro plus private teams, SAML single sign-on, SCIM, 10 GB per file with 2 TB of storage and unlimited version history.

Free tier: 50 board objects and 50 doc blocks a month, 1 GB of storage, 7 days of history and a watermark on exports.
Billing: Monthly or annual (annual saves 17%), charged per editor. Viewers and guests are free on every plan. Nonprofits get 20% off.
Hidden costs: Only editors count as seats. Extra AI credits are sold on every plan; the pricing page gives no price for them or the credit allowance on paid plans.
Source: whimsical.com

Also on the list

Miro$10/mo · WhiteboardsKINDA

Figma$20/mo · DesignNOT REALLY

Canva$18/mo · DesignKINDA

Questions

Whimsical, briefly

Not answered here? Tell us and we'll add it.

Ask a question ›

Free allows 50 board objects and 50 doc blocks a month, with watermarked exports and 7 days of version history.

Yes. An AI coding agent such as Claude Code, Codex or Cursor can build a usable personal version in one session with the prompt on this page, running on your own machine.

About $12 a month on the Pro plan per seat, $144 a year (checked 2026-10-14).

Real-time collaboration with shared cursors; Docs and boards in one workspace, with embeds between them; AI generation of flowcharts, mind maps and wireframes from a prompt; Version history, share links and guest access; Integrations with other work tools and the desktop apps. If any of those matter to you, keep paying.