Sizing and Centering a Flowchart

[cajund]

Hi there,

Not sure if this is something that you can help with, or something for the larger Mermaid community.

I'm using your wrapper in my VueJs app, and having some trouble with display. 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 - great tool, BTW!

[dword-design]

@cajund What you could do is set a class to the mermaid string component and then use this style:

<vue-mermaid-string class="mermaid" :diagram="..." />

.mermaid svg {
  margin-left: auto;
  margin-right: auto;
}

The svg is a block, so it should work.

If it's possible to specify a class or attributes to put on the svg, we could pass it through but I haven't found any.