如何调整mermaid的graph图的大小(所见即所得模式下) |
您所在的位置:网站首页 › 流程图太大 › 如何调整mermaid的graph图的大小(所见即所得模式下) |
我遇到了相同的问题,看了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 |