Obsidian Stats logoObsidian Stats

Lumen Stage

by paddy
5
4
3
2
1
Score: 50/100
Install Code

Description

Obsidian plugin: pan, zoom, fit, reset, and fullscreen for Mermaid diagrams. Works with any theme.

Reviews

No reviews yet.

Stats

0
stars
73
downloads
0
forks
24
days
24
days
24
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
3
commits

Latest Version

1.0.2
24 days ago

Changelog

Changelog

1.0.2

Remaining community CSS lint.

  • Drop :has(); Live Preview embed padding is cleared by toggling .lmm-embed on the parent from TypeScript
  • Drop print !important; viewport height now uses --lmm-vh so print can override without inline height

1.0.1

Community review fixes. No interaction changes.

  • Replace el.style.* assignments with CSS classes and the official setCssStyles / setCssProps APIs so themes can override chrome
  • Drive pan/zoom with --tx / --ty / --scale custom properties instead of writing transform from JavaScript
  • Use instanceOf() for cross-window DOM checks (pop-out windows)
  • Remove unnecessary type assertions
  • Add a GitHub Actions release workflow that attests main.js, manifest.json, and styles.css

1.0.0

First engineered release of the independent Mermaid stage plugin.

See all version on GitHub

README file from

Github

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.

Sponsors