Skip to content

Feature Request: Change Mermaid useMaxWidth default to true #1904

@gjouret

Description

@gjouret

In MPreview.bundle/index.html, the loadMemaid() function initializes Mermaid with useMaxWidth: false:

var config = {
    startOnLoad: true,
    theme: mermaidTheme,
    flowchart: {
        useMaxWidth: false,
        htmlLabels: true
    }
};

This causes Mermaid diagrams to render at their intrinsic pixel size, which for complex diagrams means they overflow the preview container or render too small to read comfortably. Setting useMaxWidth: true makes diagrams scale to fit the available container width, which is the more useful default for a notes app.

Proposed change

Change useMaxWidth: false to useMaxWidth: true in MPreview.bundle/index.html.

Ideally, this setting should also respect Mermaid's per-diagram %%{init}%% directive syntax, so users can override on a per-diagram basis. For example:

```mermaid
%%{init: {"flowchart": {"useMaxWidth": false}} }%%
flowchart LR
    A --> B
```

Current workaround

Users can manually edit the installed app bundle:

sed -i '' 's/useMaxWidth: false/useMaxWidth: true/' \
  /Applications/FSNotes.app/Contents/Resources/MPreview.bundle/index.html

This change is lost on every FSNotes update.

Environment

  • FSNotes version: current (tested with bundled Mermaid 11.12.2)
  • macOS

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions