CFR Mermaid Size

Resize Mermaid diagrams in Obsidian by dragging, and align them left, center, or right. The size is stored inside the diagram block itself, so it survives re-renders, travels with the note through sync and Git, and works on any device.

Obsidian renders Mermaid diagrams at whatever size Mermaid computes, and offers no resize handle like it does for images. Existing zoom plugins let you zoom while you look, but nothing is remembered — reopen the note and the diagram is back to where it started.

How it works

Hover a diagram in reading view: a handle appears in the bottom-right corner. Drag it. When you release, the size is written into the block:

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

Right-click the diagram to align it:

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

%% is Mermaid's own comment syntax, so the diagram renders exactly the same with or without this plugin.

The keys

Sizes are a percentage of the note width, not pixels, so a diagram keeps its proportion on any screen.

Desktop and mobile are independent

Half of a monitor is comfortable; half of a phone screen is unreadable. Each device stores its own size and neither can see the other's: dragging on desktop touches only cfr-size, dragging on mobile touches only cfr-size-mobile.

The deliberate trade-off: a diagram you sized on desktop starts at its natural size on mobile until you adjust it there. Independence and inheritance are opposites — this plugin picks independence.

To clear a size, right-click (or long-press) the diagram and choose Clear desktop size / Clear mobile size. It removes that device's line only. You can also delete the line by hand.

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 makes the data invisible to you. Keeping it in the block means sync and version control come for free, the value is readable and editable by hand, and uninstalling the plugin leaves nothing but a harmless Mermaid comment.

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

Where the handle does not appear. In Live Preview and inside embeds, Obsidian does not give the plugin the block's position in the file. Without a position there is no safe way to write, so the handle is not installed at all rather than risking a write to the wrong place.

Install

Not in the community plugin store yet. To install manually:

1. Download main.js, manifest.json and styles.css from the latest release
2. Put them in <your vault>/.obsidian/plugins/cfr-mermaid-size/
3. Enable CFR Mermaid Size in Settings → Community plugins

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) is pure and covered by 43 tests that run without Obsidian.

Known limitations

• The context menu is a reading view feature. In editing view the right-click menu belongs to the editor.
• On mobile, a long press may not fire a context menu event. If it does not, write the %% cfr-align: %% line by hand.
• Alignment has no visible effect on a diagram at 100% width — there is no slack to shift into.

License

MIT