Sharing a (crude version) of an Excalidraw integration i built

jjkavalam · October 20, 2025, 7:53am

Please see the quick demo below:

CleanShot 2025-10-20 at 15.44.51

The implementation involves a TiddlyWiki plugin that defines a new content type.
It also expects a local Excalidraw instance to be running (the code for this instance is also provided)

For mode details and the code:

github.com

jjkavalam/TiddlyWiki5-excalidraw/blob/master/DIAGRAMMING.md

# Diagramming with Excalidraw (Footype Demo)

This repository includes a demo integration of TiddlyWiki with a local Excalidraw editor. It lets you edit diagrams in-place and stores them as SVG-with-embedded-scene in the tiddler’s text.

- Storage format: tiddler type `application/x-foo`, text = full SVG (with embedded Excalidraw scene)
- Editing flow: open modal → edit in Excalidraw iframe → Export to SVG → auto save & close
- Demo edition: `editions/footypedemo`

## 1) Prerequisites

- Node.js 18+ and npm
- macOS or Linux recommended (Windows should work, too)

## 2) Start the local Excalidraw app

The demo expects a local Excalidraw instance running at `http://localhost:5188/`.

- Build Excalidraw bundle (optional if you’ll run dev server):

```sh

This file has been truncated. show original

Please note that, this is very unpolished (e.g. i have not bothered to rename the content type into something more sensible than foo), but i believe the essentials are there.

Feel free to take it remix it as you wish.

If anyone does take it up and make a polished version of it, i will be really happy if you could share as well.