Free canvas: drag, relabel and sketch in Excalidraw

When to use the canvas

Mermaid lays diagrams out for you and the code is the single source of truth: changing a label, adding a step or flipping the direction all happen in the code, which is exactly why AI can generate it and why it re-flows cleanly. Sometimes you still want to arrange things by hand: nudge two nodes apart, circle something and write a note next to it, drop in a screenshot, or hand a sketch-style version to a colleague. Click "Canvas" in the top bar (on a phone: "Convert to free canvas…" in the Download panel) and the current diagram moves onto an Excalidraw whiteboard. You can also skip the code: “Open the canvas” on the home page opens a blank canvas (or the canvas saved on this device).

A one-way door: no syncing after the conversion

The conversion only goes one way. From then on the shapes on the canvas and the code in the editor live separate lives: editing the code, running an AI fix or switching themes leaves the canvas alone, and dragging or relabeling on the canvas does not flow back into the code. The code stays in the editor; "Back to code" takes you back at any time and the canvas is kept. To catch the canvas up with the latest code, use "Convert the editor code again" in the canvas menu (top left); that replaces the whole canvas.

The dialog spells this out before you click "Convert to canvas".

Which diagrams split into shapes

• Editable shapes: flowcharts, sequence diagrams, class diagrams, state diagrams and ER diagrams. Nodes, connectors and labels become separate shapes you can drag, relabel, delete or add to.
• One picture: Gantt charts, pie charts, mind maps, timelines and every other type, plus any of the five above that the converter cannot parse. These are rendered in your current theme and placed on the canvas as a single image you can position, resize and annotate next to, but not take apart. Chart-style diagrams were never meant to be dragged; the right move there is to change the data.

The dialog tells you which case applies before you convert; the actual result decides.

What you can do on the canvas

The canvas is Excalidraw (an MIT-licensed open-source whiteboard) embedded as is: selection, rectangles, ellipses, arrows, lines, text, freehand drawing, images and an eraser in the toolbar, all in a handwritten font (Chinese text uses the Xiaolai handwriting face). The menu in the top left offers: convert the editor code again, open an .excalidraw file, clear the canvas, canvas background, and shortcuts and help. The library panel on the right stores shapes you reuse often.

Saving and downloading

• Auto-saved on this device: canvas content lives in this browser, separate from the code, and is never uploaded, never part of cloud save and never part of a share link. After a refresh or after going back to the code, clicking "Canvas" again asks whether to open the existing canvas or convert the current code again.
• Over 4 MB does not fit: with many pasted images you will be warned; download the .excalidraw file to keep it and open it later from the menu.
• Downloads: "Download PNG" at the top right of the canvas, plus SVG (fonts embedded, so it stays handwritten elsewhere), PDF, Word, PowerPoint, copy PNG, and the .excalidraw file (Excalidraw's own format; reopen it to keep drawing). Scale and transparent / solid background options match single-diagram export. Exports always use the real colors as shown in light mode; the page's dark mode is only an on-screen inversion. Word and PowerPoint files carry no Mermaid source appendix because the canvas no longer has matching code.

FAQ

If I go back to the code and return, is the canvas still there?

Yes. The canvas stays on this device and the "Canvas" button shows a small dot while it has content. Clearing the canvas removes it.

Does the canvas change when I edit the code?

No; that is what the one-way door means. To sync, use "Convert the editor code again" in the canvas menu, which replaces the whole canvas.

Is canvas content uploaded?

No. Conversion and saving happen in the browser; Excalidraw's font files are served from this site, and the canvas calls no third-party service. "Browse libraries" in the library panel opens Excalidraw's public library site only when you choose to, and brings you back here after you pick one.

Does it work on a phone?

Yes. The entry is "Convert to free canvas…" in the Download panel and Excalidraw has its own small-screen toolbar; fine-grained dragging is still easier on a desktop.