进入设置 > 外观 > 向下滚动到 CSS 代码片段 > 点击右侧的文件夹图标，打开 snippets 文件夹。
在 snippets 文件夹中创建一个包含所需 CSS 的 CSS 文件，然后保存该文件（文件必须具有 “.css” 扩展名）。
css代码
对齐所有的 Mermaid 图表，可以在你的 obsidian.css 文件中添加以下代码（你也可以将 "center" 替换为 "left" 或 "right"）：
div.mermaid {
text-align: center;
}调整 Mermaid 图表的宽度和高度
调整宽度和高度稍微复杂一些，但以下方法有效：
简化的 CSS 方法
感谢 @smcllns 提供的更简单的解决方案，用以下代码替代更复杂的选择器：
.mermaid svg {
width: 400px;
height: auto;
}示例代码
以下示例将 Mermaid 图表的宽度设置为 400px，同时保持宽高比：
svg[id^="m"][width][height][viewBox] {
width: 400px;
height: auto;
}其他变体
- 宽度为当前窗口宽度的 80%：
svg[id^="m"][width][height][viewBox] {
width: 80%;
height: auto;
}- 最小宽度为 350px，最大宽度为 600px：
svg[id^="m"][width][height][viewBox] {
min-width: 350px;
max-width: 600px;
width: 80%;
height: auto;
}解决方案背后的步骤
使用 Ctrl+Shift+I（Windows 系统）打开 Obsidian 的开发者工具，进入预览模式。检查 Mermaid 图表元素，发现其 id属性是随机生成的，所有id均以字母 “m” 开头，例如：
<svg id="me4c26fffe5bb1328" ...>由于 id属性在站点发布后会改变，不能用特定的id作为 CSS 的目标。搜索后找到一个解决方法：可以通过以下格式匹配 id属性以某字符串开头的 HTML 元素：
element_name[attribute_name^="starting_string"] { *desired code changes here* }在本例中，HTML 元素是 svg，属性名称是id，起始字符串是 “m”，代码如下：
svg[id^="m"] { *desired code here* }为了更具体，添加了 [width]、[height]和[viewBox]选择器，因为 Mermaid 图表的这些属性始终存在：
svg[id^="m"][width][height][viewBox] { *desired code here* }注意
此方法主要在 Mermaid 流程图中测试过，其他 Mermaid 图表类型可能需要进一步验。
mermaid 语法：https://mermaid.js.org/syntax/flowchart.html
