An Obsidian plugin that renders LaTeX math formulas inside Excalidraw drawings.
Type $$...$$ (or $...$) into a text element and the plugin turns it into a
crisp, scalable math image — right on the interactive canvas, fully movable like
any other element, and included when you export the drawing to SVG/PNG.
- Inline & display math —
$E = mc^2$and$$\int_0^1 x^2\,dx$$. - Mixed text and math —
Hydrogen ($$1e^-$$, $$1p^+$$)renders as a single line, text and formulas sharing one baseline. - Auto-render — write math in a text element, click away, and it renders automatically (within ~1 s).
- Double-click to edit — double-click a rendered formula to turn it back into editable text; click away and it re-renders.
- Dark mode aware — formulas follow Excalidraw's canvas theme automatically.
- Self-healing — if a formula's image ever loses its file reference, it is rebuilt automatically.
- Vector output — formulas are rendered as self-contained SVG via MathJax, so they stay sharp at any zoom and export cleanly.
- The Obsidian Excalidraw plugin must be installed and enabled. Excalidraw Math hooks into its API.
- Download
main.js,manifest.jsonandstyles.css(build them yourself — see below — or grab them from a release). - Copy the three files into a new folder in your vault:
<your-vault>/.obsidian/plugins/excalidraw-math/ - In Obsidian, open Settings → Community plugins, reload the plugin list, and enable Excalidraw Math.
npm install
npm run build # outputs main.js
# for development with auto-rebuild on save:
npm run dev- In an Excalidraw drawing, add a text element.
- Type a formula using standard Obsidian math syntax:
- Inline:
$a^2 + b^2 = c^2$ - Display:
$$\frac{\mathrm{d}}{\mathrm{d}x} e^x = e^x$$ - Mixed:
Energy: $$E = mc^2$$
- Inline:
- Click somewhere else — the text is replaced by a rendered math image.
- To edit a formula again, double-click it. It becomes an editable text element; change it and click away to re-render.
You can also trigger rendering manually via the command palette: “Excalidraw Math: Render math in active Excalidraw”.
| Setting | Description |
|---|---|
| Auto-render | Automatically render $$ text elements (polls the canvas). |
| Font size | Base font size for rendered formulas. |
| Formula color | CSS color for formulas, or auto to use a dark color that Excalidraw inverts in dark mode. |
The plugin watches the active Excalidraw scene. When it finds a text element
containing math, it renders the formula(s) to a self-contained SVG using
MathJax (SVG output, vector glyphs — no font
dependencies), and swaps the text element for an image element pointing at that
SVG. The original source text is kept in the element's customData so it can be
restored for editing.
Inspired by zsviczian/excalidraw-mathjax. Built on top of the excellent Obsidian Excalidraw plugin.
MIT