Obsidian 插入Mermaid图太大的解决办法

        mermaid图进通过一行行命令就可以自动生成流程图、序列图、类图、git图等图表，大大节省了绘制这类图的时间，官方的在线编辑器大概长这样：

Online FlowChart & Diagrams Editor - Mermaid Live Editor

目前obsidian已经原生支持了几乎所有的mermaid图类型，但是如果画的图太大了就会超出范围，显示不完：

最近偶然发现新版blue topaz主题能够通过给插入的图添加横向滚动条的方式让图显示完全，所以找到主题文件夹中的theme.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;
}

经过摸索发现这一段放在另一个主题的theme.css（我用的是neuborder）中可以使得另一个主题也支持插入的图横向滚动，解决了问题。

注意：里面所有代码的缩进都是顶格，我的习惯是放在文件的末尾。

另一个方法是调整宽度让画出的图随页面自动缩放：

如何调整mermaid的graph图的大小（所见即所得模式下） - 疑问解答 - Obsidian 中文论坛

但是这么做的话简单的图放大太多，复杂的图又缩得太小，这种图又不好缩放，就不用这个方法了。

由于obsidian的更新，上述方法不一定好用了，但是excalidraw支持插入mermaid图，所以改为插入excalidraw，把mermaid图放进excalidraw里面解决。