How to adjust the size of mermaid graph in Obsidian

Description

在写上一篇 blog 的时候因为用到了 mermaid 来画流程图，但是在使用过程中发现了一个问题，就是 mermaid 画出来的流程图显示不全。

比如下面一段 mermaid 代码

在 Obsidian 中编辑的过程中显示效果如下：

右边的部分就不见了，并且在导出 pdf 的时候这部分也会不见。
查了一下 Obsidian 的论坛，查到这样一个帖子：如何调整mermaid的graph图的大小（所见即所得模式下），大概的解决思路就是通过修改 css 的方式来修改 mermaid 的格式。

Add css code

在 Obsidian > Preferences > 外观 > CSS代码片段

首先点击打开代码段文件夹的按钮，找到 CSS 代码段的存放目录

然后在 CSS 文件中添加如下代码片段：

.mermaid svg { 
	width: 100%; 
	height: auto; 
}

然后将代码片段按钮设置为 ON 即可生效

效果预览

修改后 mermaid 的显示效果如下，符合预期。