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

您所在的位置:网站首页 图片宽度太大了怎么调整比例 如何调整mermaid的graph图的大小(所见即所得模式下)

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

2024-04-15 09:36| 来源: 网络整理| 查看: 265

我遇到了相同的问题,看了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; }



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3