CFR Mermaid Size

Resize Mermaid diagrams in Obsidian by dragging a corner handle, and align them left, center or right from the right-click menu.

The size is stored inside the diagram block itself, as a Mermaid comment. It survives re-renders, travels with the note through Sync and Git, and can be read or edited by hand.

Obsidian renders every Mermaid diagram at whatever size Mermaid computes, with no resize handle like the one images get. Zoom plugins let you zoom while you look, but nothing is remembered: reopen the note and the diagram is back where it started. This plugin remembers.

Install

From Obsidian — Settings → Community plugins → Browse → search for CFR Mermaid Size → Install → Enable.

Manually — download main.js, manifest.json and styles.css from the latest release, drop them into <your vault>/.obsidian/plugins/cfr-mermaid-size/, then enable the plugin in Settings → Community plugins.

Using it

Everything happens in reading view.

Resize — hover a diagram and a handle appears in its bottom-right corner. Drag it. On release, the width is written into the block as a percentage of the note width, between 10% and 100%.

Align — right-click (long-press on mobile) the diagram and pick Align left, Align center or Align right.

Undo — the same menu offers Clear desktop size / Clear mobile size when the current device has a size stored. It removes only that device's line. Deleting the line by hand does the same thing.

Menu labels follow the Obsidian interface language (English and Portuguese).

What ends up in the note

A diagram dragged to half width and pushed to the right looks like this:

```mermaid
%% cfr-size: 50 %%
%% cfr-align: right %%
flowchart LR
  A --> B
```

%% is Mermaid's own comment syntax, so the block renders exactly the same with or without the plugin installed — and uninstalling leaves nothing behind but a harmless comment.

Key	What it stores	When absent
cfr-size	width on desktop, 10–100% of the note width	natural size, on desktop
cfr-size-mobile	width on mobile, same range	natural size, on mobile
cfr-align	left or right, on every device	centered, the default

Sizes are a percentage of the note width rather than a pixel count, so a diagram keeps its proportion on any screen. Centering is the default, so cfr-align: center is never written — choosing Align center removes the line instead.

Desktop and mobile are independent

Half of a monitor is comfortable; half of a phone screen is unreadable. So each device keeps its own key and neither reads the other's: dragging on desktop touches only cfr-size, dragging on mobile touches only cfr-size-mobile.

The trade-off is deliberate. A diagram you sized on desktop opens at its natural size on mobile until you adjust it there. Independence and inheritance are opposites, and this plugin picks independence — the first version let mobile fall back to cfr-size, which meant resizing on the desktop silently changed the phone.

Limitations

• The handle and the menu are reading view features. In Live Preview and inside embeds, Obsidian does not tell the plugin where the block lives in the file; with no reliable position there is no safe way to write, so nothing is installed rather than risking a write to the wrong place. Both are still respected when the note is rendered.
• In editing view the right-click menu belongs to the editor, so alignment is not offered there.
• On mobile, a long press does not always fire a context menu event. When it does not, write the %% cfr-align: %% line by hand.
• Alignment has no visible effect at 100% width — there is no slack to shift into.

Design notes

Why the state lives in the note. The obvious alternative is a plugin data file keyed by note path plus block index. That breaks the moment you insert a block above, rename the note, or edit on two devices, and it hides the data from you. In the block, sync and version control come for free and the value stays readable.

Why edits never target a stale line. The block's position is resolved at the moment you click, never remembered from render time — a line number goes stale as soon as the file changes underneath (Sync, another window, another edit). Writes then go through Vault.process, which reads and writes atomically.

Development

Plain JavaScript, single file, no build step: edit main.js and reload Obsidian.

npm test   # node --test, no dependencies

The text-manipulation core (lerMarcas, gravarMarcas, tamanhoParaDispositivo, escolherIdioma) is pure and covered by 43 tests that run without Obsidian.

License

MIT