Dev.to WebDev 🛠 Dev 👁 0 📖 4 min read

How to keep lots of Excalidraw diagrams without losing them

I use Excalidraw for almost everything: system design notes, interview prep, sketches for blog posts. And every few weeks I see someone post that they lost months of drawings. "Cleared my browser cache." "IT reset my wor

I use Excalidraw for almost everything: system design notes, interview prep, sketches for blog posts.
And every few weeks I see someone post that they lost months of drawings.
"Cleared my browser cache." "IT reset my work laptop." "Switched browsers and it's all gone."

This post explains why that happens and the ways to keep your drawings safe, from free and manual to fully automatic.

Why Excalidraw drawings disappear

excalidraw.com has no account and no server-side storage for your canvas.
Your current drawing lives in your browser's local storage, for that one site, in that one browser profile.

So your drawing is gone when:

  • you clear browsing data or cookies for the site,
  • you draw in a private window and close it,
  • your work laptop is wiped or replaced,
  • you open excalidraw.com in another browser or on another computer (it isn't lost, but it isn't there either).

There's also only one canvas.
Starting a new drawing means clearing or overwriting the old one, unless you saved it somewhere first.

Lost a drawing already? Try these first

Before anything else:

  1. Don't clear anything else. If the drawing is still in one browser, open it there and save it to a file right away (see below).
  2. Check your other browsers and profiles. Each has its own copy, so an old drawing may still be sitting in one of them.
  3. Search for old share links. If you ever clicked "Share" and sent a link, it looks like excalidraw.com/#json=.... Those drawings are stored on Excalidraw's servers, and the link still opens them. Search Slack, email and your notes for excalidraw.com/#json.
  4. Check exported images. A PNG or SVG exported with "Embed scene" turned on contains the whole drawing. Drag it back onto excalidraw.com and it opens as an editable scene.

Option 1: Save to a file (free, manual)

Use the menu, then Save to..., then Save to disk.
You get a .excalidraw file, which is plain JSON with everything in the drawing.
Open it later with Open or by dragging it onto the canvas.

In Chrome and Edge, after you save once, Excalidraw remembers the file and saves to it again with Ctrl+S (Cmd+S on a Mac).

Good: free, and the file is yours.
Not so good: you have to remember to do it, and you manage the files yourself.

Tip: when you export a PNG or SVG, turn on Embed scene.
Then the image you paste into docs is also a backup you can edit later.

Option 2: Keep drawings next to your code (VS Code)

The Excalidraw extension for VS Code edits .excalidraw files right in the editor.
Put your diagrams in the repo and they get versioned with git like everything else.
It also handles .excalidraw.svg and .excalidraw.png, which are images that stay editable.

Good: version history, and diagrams live next to the code they describe.
Not so good: only works where you have the repo, and it's awkward for quick sketches.

Option 3: Keep drawings in your notes (Obsidian)

The Excalidraw plugin for Obsidian stores drawings as files in your vault, and you can link and embed them in notes.
If you already use Obsidian, this is a great fit, and syncing the vault keeps drawings backed up.

Good: lots of features, drawings sit next to your notes.
Not so good: you need Obsidian, and its file format adds Markdown around the drawing.

Option 4: Excalidraw+ (paid)

Excalidraw+ is the official paid version from the Excalidraw team.
It gives you cloud storage, many scenes in a workspace, live collaboration and more.
If your team draws together, it's the obvious choice, and it funds the open source project.

Option 5: Scenedraw (free, saves to your Google Drive)

Full disclosure: I built this one.

I wanted the excalidraw.com experience, but with many drawings and no chance of losing them.
So Scenedraw is Excalidraw with a list of scenes, where each scene is a normal .excalidraw file in a folder in your own Google Drive.

  • Changes save to Drive automatically, so clearing your browser doesn't matter.
  • The files are yours: download them, back them up, or open them in plain Excalidraw.
  • Right-click any .excalidraw file in Google Drive and pick "Open with Scenedraw".
  • Share a link that opens a scene for anyone.
  • Each scene opens in its own tab.

It doesn't have live collaboration, so for teams Excalidraw+ is the better fit.

Which should you pick?

  • Draw now and then: save to disk, and export images with "Embed scene" on.
  • Diagrams for a codebase: VS Code extension, with files in git.
  • You live in Obsidian: the Obsidian plugin.
  • A team drawing together: Excalidraw+.
  • Lots of personal drawings you never want to lose: anything that writes real files somewhere backed up, whether that's Drive, git or a synced vault.

Whatever you choose, the rule is the same: don't let browser storage be the only copy.

If you've found another good setup, I'd love to hear it in the comments.

📰 Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.