Sizing and Centering a Flowchart

[cajund]

Hi there,

I'm using the mermaid-string wrapper in my VueJs app, and having some trouble with display. I don't believe this is related to that code, but it may be. I'm also having a great deal of trouble locating how to control the CSS passed into mermaid - as using the browser's developer tools shows me exactly what is happening.

I have a simple flowchart:

computed: {
  network_map() {
    let toReturn = "flowchart LR"
    toReturn += "\n  AA[Start1] --> B(Middle) --> C[End1]\n  D[Start2] --> B --> E[End2]\n  B --> F[End3]"
    return toReturn
  }
}
...
<div class="mx-auto border w-2/3">
    <VueMermaidString :value="network_map" :options="{ theme: 'neutral', 'themeVariables': {'fontFamily': 'Helvetica Neue, sans-serif'}}" />
</div>

But it renders off center within my wrapping <div>.

It appears there is a max-width property on the <svg> that I can't seem to override. Is there a configuration that I can pass in to your code to get this rendering properly?

Thanks for your help!