Mermaid.js: wide diagrams less readable

[thomas-mc-work]

Is your feature request related to a problem? Please describe.

Once a diagram rendered by mermaid.js gets wider, the font also gets smaller to fit into the layout. That makes it very hard to read to captions from a certain point. I know that this behavior is natural and not specific to the app. But still i think it would be nice to have a solution.

Describe the solution you'd like

I could think of several options:

• open a zoomed in view in-place
• open a zoomed in view in an overlay
• open a zoomed in view in a popup window

Now when I think about it: an additional link opening the source code in mermaid.live would also be nice. Just to tranfer the code into the native and advanced code editor. But it would lack a way back into the Collectives app which is probably confusing to most users.

Describe alternatives you've considered

Another option is to just render the 1:1 zoom level just in place and enlarge the layout. That'd probably blow it, depending on the diagram width. But maybe this would be accepted by the authors.

Additional context

Example diagram code:

flowchart TD
    subgraph "fa:fa-building site 1"
        nextcloud["☁️ Nextcloud"] --> vps1["fa:fa-server VPS 1"]
    end
    subgraph "fa:fa-building provider 1"
        zulip["🗪 Mattermost"] --> vps2["fa:fa-server VPS 2"]
    end
    subgraph "fa:fa-building provider 2"
        zulip2["🗪 Zulip"] --> vps3["fa:fa-server VPS 3"]
        stirling-pdf["🧰 Stirling-PDF"] --> vps3
    end
    subgraph "fa:fa-building provider 3"
        email[✉ E-Mail]
    end
    subgraph "fa:fa-building provider 4"
        email-lists[✉ Mailinglists]
    end
    subgraph "fa:fa-building agency"
        website[🌍 Website] --> vps4["fa:fa-server VPS 4"]
    end

The output:

[arnowelzel]

It would also help, if diagrams could be opened in a separate view like a kind of "lightbox" without any size limitation at all.

[mejo-]

@thomas-mc-work you can change the page width to full width in Collectives. The option can be found in the three-dot-menu right to the page title. Does this work for you?

[mejo-]

A new feature to open mermaid diagrams in a modal would need to be added to the Text app. There's already an issue there to track this: https://github.com/nextcloud/text/issues/6154

[thomas-mc-work]

you can change the page width to full width in Collectives. The option can be found in the three-dot-menu right to the page title. Does this work for you?

Yes, that helps a bit. Thank you for that hint. But it also changes the appearance of that whole site.