Mermaid diagrams are rendering very small in the slide

[codyburleson]

Describe the bug

This could be my lack of understanding and not a bug, but my mermaid diagrams render tiny on the screen...

Samples to Reproduce

Code for my slide:

---

```mermaid
gantt
    dateFormat  YYYY-MM-DD
    title       Vietnam War Story

    section Deadlines
    First draft         : 2023-04-01, 2023-04-30
    Final draft         : 2023-05-01, 2023-05-31
    Final reviews/edit  : 2023-06-01, 2023-06-30
    Book layout         : 2023-07-01, 2023-07-31
    68th Annual Reunion : 2023-08-14, 2023-08-20

---

**Expected behavior**
In your documentation, they show rendering larger. I'd like the mermaid diagram to fill the slide.

[natsen]

I can confirm the same issue as well. I observe that the image size is correlated to the amount of text added to the graph nodes and edges.

The issue can be reproduced in obsidian advanced slides plugin using. The same specification renders correctly using the https://github.com/zjffun/reveal.js-mermaid-plugin html example.

 flowchart TD
            A[Start] --> B{Is it?};
            B -- Yes --> C[OK];
            C --> D[Obsidian advanced slides plugin is awesome];
            D --> B;
            B -- No ----> E[End];

while the same diagram renders well in the html example in reveal.js-mermaid-plugin so this issue is likely in obsidian advanced slides plugin

[majidaldo]

yup

[AlexLeoTW]

same here

a max-width was added automatically and this override any custom CSS rules... (the white border on the svg was added for demonstration purpose)

slide used:

---
```mermaid
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

---

[majidaldo]

this should be prioritized. mermaid is a big deal for presentations.

[razmser]

Same problem. Adding element annotation to stretch a diagram is a workaround that worked for me. <!-- element style="height: 100%;width: 100%;" -->

[GeoffreyMetais]

Great thanks for the workaround!

I've put it in my custom css 👍

.mermaid {
  height: 100%;
  width: 100%;
}

[murdos]

FYI I applied workaround described here, it would be really nice if the default CSS could include this :-)

[sjgknight]

Is this still an issue for some people/diagrams? (It seems to be for me). I've tried adding css, element annotation, and using mermaid frontmatter useWidth/useMaxWidth, but my diagrams are small, they seem to be taking up width but not height, and the fontSize is small.