如何调整mermaid的graph图的大小（所见即所得模式下）

也在搜这个问题，不知道是否已得到解决……
英文论坛里有给出方案，亲测有效，进行一个搬（不妥删）
问就是以前用过，后来重开了个css就给忘了……

svg[id^="m"][width][height][viewBox] {
    width: 400px;
    height: auto;
}

↑保留比例将宽度定为400，比如要限制高度的话两个互换就行

一些变体：

svg[id^="m"][width][height][viewBox] {
    width: 80%;
    height: auto;
}

↑宽度为当前窗口宽度的80%

svg[id^="m"][width][height][viewBox] {
    min-width: 350px;
    max-width: 600px;
    width: 80%;
    height: auto;
}

↑宽度最小350px最大600px

另外布局也可以改：

div.mermaid {
    text-align: center;
}

center可以替换为left或right

我遇到了相同的问题，看了csdn的 Obsidian 插入Mermaid图太大的解决办法_obsidian mermaid-CSDN博客，里面的这个可以使用，不懂原理，直接css片段了

/======== optionnal mermaid style below ========/
.markdown-source-view.mod-cm6 .cm-content > [contenteditable=false] {
overflow: auto;
}

body.resizable-mermaid .mermaid {
resize: both;
overflow: auto;
position: relative;
}

:is(.markdown-preview-section,.markdown-rendered) .mermaid,
.markdown-source-view.mod-cm6 .cm-scroller .mermaid {
letter-spacing: 0;
}

.markdown-source-view.mod-cm6 .mermaid svg {
margin: 0 auto;
display: block;
}

.mermaid .label {
font-family: var(–mermaid-font-family) !important;
color: var(–text-normal) !important;
}

.mermaid .label text {
fill: var(–background-primary-alt) !important;
}

.mermaid .node:not([class*=“id”]) rect:not([style*=“fill”]):not([style*=“stroke”]),
.mermaid .node:not([class$=“id”]) circle:not([style*=“fill”]):not([style*=“stroke”]),
.mermaid .node:not([class$=“id”]) ellipse:not([style*=“fill”]):not([style*=“stroke”]),
.mermaid .node:not([class$=“id”]) polygon:not([style*=“fill”]):not([style*=“stroke”]),
.mermaid .node:not([class$=“id”]) path:not([style*=“fill”]):not([style*=“stroke”]) {
fill: var(–background-primary) !important;
}

.mermaid .node .label {
text-align: center !important;
}

.mermaid .node.clickable {
cursor: pointer !important;
}

.mermaid .arrowheadPath {
fill: var(–text-faint) !important;
}

.mermaid .edgePath .path,
.mermaid .flowchart-link {
stroke: var(–text-faint) !important;
}

.mermaid .edgeLabel {
background-color: var(–background-primary) !important;
text-align: center !important;
}

.mermaid .edgeLabel rect {
opacity: 0 !important;
}

.mermaid .cluster rect {
fill: var(–background-primary-alt) !important;
stroke: var(–text-faint) !important;
}

.mermaid .cluster text {
fill: var(–background-primary) !important;
}

/* Sequence Diagram variables */
.mermaid .actor {
stroke: var(–text-accent) !important;
}

.mermaid .actor-line {
stroke: var(–text-muted) !important;
}

.mermaid .messageLine0 {
stroke-dasharray: none !important;
stroke: var(–text-muted) !important;
}

.mermaid .messageLine1 {
stroke-dasharray: 2, 2 !important;
stroke: var(–text-muted) !important;
}

.mermaid #arrowhead path,
.mermaid #crosshead path {
fill: var(–text-muted) !important;
stroke: var(–text-muted) !important;
}

.mermaid .sequenceNumber {
fill: var(–background-primary) !important;
}

.mermaid #sequencenumber,
.mermaid .messageText {
fill: var(–text-muted) !important;
}

.mermaid .labelBox {
stroke: var(–text-accent) !important;
fill: var(–background-secondary-alt) !important;
}

.mermaid .labelText,
.mermaid .labelText>tspan,
.mermaid .loopText,
.mermaid .loopText>tspan {
fill: var(–text-muted) !important;
stroke: none !important;
}

.mermaid .loopLine {
stroke-dasharray: 2, 2 !important;
stroke: var(–text-accent) !important;
fill: var(–text-accent) !important;
}

.mermaid .note {
stroke: var(–text-normal) !important;
fill: var(–mermaid-seq-dia-color) !important;
}

.mermaid .noteText,
.mermaid .noteText>tspan {
fill: var(–text-normal) !important;
stroke: none !important;
}

/* Gantt chart variables */
.mermaid .activation0,
.mermaid .activation1,
.mermaid .activation2 {
fill: var(–background-secondary) !important;
stroke: var(–text-accent) !important;
}

/** Section styling */
.mermaid .mermaid-main-font {
font-family: var(–mermaid-font-family) !important;
}

.mermaid .section {
stroke: none !important;
opacity: 0.3 !important;
}

.mermaid .section0 {
fill: var(–text-faint) !important;
}

.mermaid .section2 {
fill: var(–text-accent) !important;
}

.mermaid .section1,
.mermaid .section3 {
fill: var(–text-muted) !important;
opacity: 0.15 !important;
}

.mermaid .sectionTitle0,
.mermaid .sectionTitle1,
.mermaid .sectionTitle2,
.mermaid .sectionTitle3 {
fill: var(–text-normal) !important;
}

.mermaid .sectionTitle {
text-anchor: start !important;
font-size: 15px !important;
font-weight: bold;
line-height: 14px !important;
font-family: var(–mermaid-font-family) !important;
}

/* Grid and axis */
.mermaid .grid .tick {
stroke: var(–text-muted) !important;
opacity: 1 !important;
shape-rendering: crispEdges !important;
}

.mermaid .grid .tick text {
font-family: var(–mermaid-font-family) !important;
font-size: 13px;
}

.mermaid .grid path {
stroke-width: 0 !important;
}