Lumen Stage

An Obsidian plugin that turns rendered Mermaid diagrams into a small stage: pan, zoom, fit, reset, and a lightweight fullscreen overlay.

It works with any theme. Lumen Glass is an optional skin, not a dependency. The theme only styles the .lmm-* classes this plugin creates. The plugin only uses Obsidian CSS tokens, so other themes keep a quiet header band over a flush figure.

The theme works without this plugin. This plugin works without the theme.

Interaction

• Drag the canvas to pan
• Ctrl / Cmd + wheel zooms toward the pointer
• Ordinary wheel movement scrolls the note
• Click the diagram, or Full, for a lightweight overlay
• Header flairs: zoom, Fit, Reset, Full
• Esc or the dimmed backdrop closes the overlay
• Command: Open first Mermaid diagram fullscreen

The chrome is a silent 36px header band with text flairs. There is no drafting grid and no floating instrument toolbar.

Internal class names stay on the lmm-* prefix so existing Lumen Glass scoped styles keep matching.

Install

This plugin is not on the community list yet. Install it locally:

1. Copy this folder into <vault>/.obsidian/plugins/lumen-stage/, or symlink it there while developing.
2. Run npm install and npm run build if main.js is missing.
3. Enable Lumen Stage under Settings → Community plugins.

Reload the plugin after a rebuild. Obsidian reads manifest.json, main.js, and styles.css from that folder.

Independent use

No Lumen Glass, Style Settings, or other companion plugin is required. On a stock theme you still get pan, zoom, fit, reset, and fullscreen. Live Preview also drops the extra embed pad around an enhanced diagram so the stage is not wrapped in a second shell.

If you do use Lumen Glass, the theme replaces the fallback chrome with its code-block header band and diagram surface. That skin is opt-in by installing the theme; it is not compiled into this plugin.

Development

Requires Node.js 20 or later.

npm install
npm run build
npm run check

• npm run build typechecks, then bundles src/ into main.js with esbuild
• npm run check typechecks and validates manifest, versions, and CSS token rules
• npm run dev watches src/ and rebuilds with an inline sourcemap

Edit TypeScript under src/. Do not hand-edit main.js. After a build, reload the plugin in Obsidian.

License

Lumen Stage is available under the MIT License.