mermaid.render renders classDiagrams with viewBox="-820 -820 3116 2828" style="max-width: 3116px;" irrespective of config

[mayank1513]

Description

I am trying to convert markdown to docx and there are some mermaid diagrams. Many of them behave inconsistently. Some are shifted outside the svg bounds, etc.

I could fix some by using bbox. But there are some, e.g., classDiagrams, that have very tiny fonts.

See - https://github.com/md2docx/mermaid/

Is there a way to render diagrams consistently?

Steps to reproduce

classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
class Animal{
+int age
+String gender
+isMammal()
+mate()
}

const { svg } = await mermaid.render(mId, code);

Screenshots

source - classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
class Animal{
+int age
+String gender
+isMammal()
+mate()
}

svg

<style>#m5904050b-be43-4d3f-916a-5eb563c3913b{font-family:sans-serif;font-size:16px;fill:#333;}@Keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@Keyframes dash{to{stroke-dashoffset:0;}}#m5904050b-be43-4d3f-916a-5eb563c3913b .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#m5904050b-be43-4d3f-916a-5eb563c3913b .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#m5904050b-be43-4d3f-916a-5eb563c3913b .error-icon{fill:#552222;}#m5904050b-be43-4d3f-916a-5eb563c3913b .error-text{fill:#552222;stroke:#552222;}#m5904050b-be43-4d3f-916a-5eb563c3913b .edge-thickness-normal{stroke-width:1px;}#m5904050b-be43-4d3f-916a-5eb563c3913b .edge-thickness-thick{stroke-width:3.5px;}#m5904050b-be43-4d3f-916a-5eb563c3913b .edge-pattern-solid{stroke-dasharray:0;}#m5904050b-be43-4d3f-916a-5eb563c3913b .edge-thickness-invisible{stroke-width:0;fill:none;}#m5904050b-be43-4d3f-916a-5eb563c3913b .edge-pattern-dashed{stroke-dasharray:3;}#m5904050b-be43-4d3f-916a-5eb563c3913b .edge-pattern-dotted{stroke-dasharray:2;}#m5904050b-be43-4d3f-916a-5eb563c3913b .marker{fill:#333333;stroke:#333333;}#m5904050b-be43-4d3f-916a-5eb563c3913b .marker.cross{stroke:#333333;}#m5904050b-be43-4d3f-916a-5eb563c3913b svg{font-family:sans-serif;font-size:16px;}#m5904050b-be43-4d3f-916a-5eb563c3913b p{margin:0;}#m5904050b-be43-4d3f-916a-5eb563c3913b g.classGroup text{fill:#9370DB;stroke:none;font-family:sans-serif;font-size:10px;}#m5904050b-be43-4d3f-916a-5eb563c3913b g.classGroup text .title{font-weight:bolder;}#m5904050b-be43-4d3f-916a-5eb563c3913b .nodeLabel,#m5904050b-be43-4d3f-916a-5eb563c3913b .edgeLabel{color:#131300;}#m5904050b-be43-4d3f-916a-5eb563c3913b .edgeLabel .label rect{fill:#ECECFF;}#m5904050b-be43-4d3f-916a-5eb563c3913b .label text{fill:#131300;}#m5904050b-be43-4d3f-916a-5eb563c3913b .labelBkg{background:#ECECFF;}#m5904050b-be43-4d3f-916a-5eb563c3913b .edgeLabel .label span{background:#ECECFF;}#m5904050b-be43-4d3f-916a-5eb563c3913b .classTitle{font-weight:bolder;}#m5904050b-be43-4d3f-916a-5eb563c3913b .node rect,#m5904050b-be43-4d3f-916a-5eb563c3913b .node circle,#m5904050b-be43-4d3f-916a-5eb563c3913b .node ellipse,#m5904050b-be43-4d3f-916a-5eb563c3913b .node polygon,#m5904050b-be43-4d3f-916a-5eb563c3913b .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#m5904050b-be43-4d3f-916a-5eb563c3913b .divider{stroke:#9370DB;stroke-width:1;}#m5904050b-be43-4d3f-916a-5eb563c3913b g.clickable{cursor:pointer;}#m5904050b-be43-4d3f-916a-5eb563c3913b g.classGroup rect{fill:#ECECFF;stroke:#9370DB;}#m5904050b-be43-4d3f-916a-5eb563c3913b g.classGroup line{stroke:#9370DB;stroke-width:1;}#m5904050b-be43-4d3f-916a-5eb563c3913b .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#m5904050b-be43-4d3f-916a-5eb563c3913b .classLabel .label{fill:#9370DB;font-size:10px;}#m5904050b-be43-4d3f-916a-5eb563c3913b .relation{stroke:#333333;stroke-width:1;fill:none;}#m5904050b-be43-4d3f-916a-5eb563c3913b .dashed-line{stroke-dasharray:3;}#m5904050b-be43-4d3f-916a-5eb563c3913b .dotted-line{stroke-dasharray:1 2;}#m5904050b-be43-4d3f-916a-5eb563c3913b #compositionStart,#m5904050b-be43-4d3f-916a-5eb563c3913b .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#m5904050b-be43-4d3f-916a-5eb563c3913b #compositionEnd,#m5904050b-be43-4d3f-916a-5eb563c3913b .composition{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#m5904050b-be43-4d3f-916a-5eb563c3913b #dependencyStart,#m5904050b-be43-4d3f-916a-5eb563c3913b .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#m5904050b-be43-4d3f-916a-5eb563c3913b #dependencyStart,#m5904050b-be43-4d3f-916a-5eb563c3913b .dependency{fill:#333333!important;stroke:#333333!important;stroke-width:1;}#m5904050b-be43-4d3f-916a-5eb563c3913b #extensionStart,#m5904050b-be43-4d3f-916a-5eb563c3913b .extension{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#m5904050b-be43-4d3f-916a-5eb563c3913b #extensionEnd,#m5904050b-be43-4d3f-916a-5eb563c3913b .extension{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#m5904050b-be43-4d3f-916a-5eb563c3913b #aggregationStart,#m5904050b-be43-4d3f-916a-5eb563c3913b .aggregation{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#m5904050b-be43-4d3f-916a-5eb563c3913b #aggregationEnd,#m5904050b-be43-4d3f-916a-5eb563c3913b .aggregation{fill:transparent!important;stroke:#333333!important;stroke-width:1;}#m5904050b-be43-4d3f-916a-5eb563c3913b #lollipopStart,#m5904050b-be43-4d3f-916a-5eb563c3913b .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#m5904050b-be43-4d3f-916a-5eb563c3913b #lollipopEnd,#m5904050b-be43-4d3f-916a-5eb563c3913b .lollipop{fill:#ECECFF!important;stroke:#333333!important;stroke-width:1;}#m5904050b-be43-4d3f-916a-5eb563c3913b .edgeTerminals{font-size:11px;line-height:initial;}#m5904050b-be43-4d3f-916a-5eb563c3913b .classTitleText{text-anchor:middle;font-size:18px;fill:#333;}#m5904050b-be43-4d3f-916a-5eb563c3913b :root{--mermaid-font-family:sans-serif;}</style>

Animal

+int age

+String gender

+isMammal()

+mate()

Duck

Fish

Zebra

Code Sample

const { svg } = await mermaid.render(mId, mermaidCode);

Setup

• Mermaid version: ^11.6.0
• Browser and Version: [ Firefox] - latest

Suggested Solutions

No response

Additional Context

No response

[mayank1513]

this is how it renders on playground and this is what I expect as svg output from mermaid.render()