526互联

obsidian修改CSS解决mermaid图显示不全问题

发布时间 2024-01-10 08:48:30作者: liqinglucky

原文地址：https://www.cnblogs.com/liqinglucky/p/obsidian-css.html

在日常使用中，记笔记经常需要画图。在markdown文件中可以使用mermaid画流程图，时序图。使用了obsidian后发现在mermaid时序图比较大的时候显示不全，不能随着窗口宽度改变图片大小。尤其是有时需要将笔记导出成pdf给别人时，pdf里的mermaid图只显示一半导致交流效果不好。

这个问题困扰了我很久，最近在网上发现可以通过修改CSS的方式设置mermaid图的显示宽度。比如：修改CSS给mermaid加横向滑动条方法
但由于我除了在obsidian里看mermaid，还需要导出PDF格式的文档，所以我更需要一个能让mermaid图跟随窗口宽度改变的效果。下面是修改CSS使得mermaid宽度保持100%缩放在页面里的方法。

一 添加CSS代码

1、 依次点击：obsidian设置 >> 外观 >> 页面最底端 CSS代码片段 >> 打开代码段文件夹

2、 新建mermaid.css文件并添加代码
参考：如何调整mermaid的graph图的大小（所见即所得模式下） - 疑问解答 - Obsidian 中文论坛

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

说明：
width：保持mermaid svg图片的宽度
height：保持高度。不添加时图片上下间距会太大。

3、 在外观界面打开CSS代码片段mermaid按钮生效

设置好后，obsidian里的所有mermaid图都保持100%缩放比例跟随窗口动态改变。

二 测试效果

流程图测试代码：

sequenceDiagram
    autonumber
    A->>B: Request
    B->>C:Request
    rect rgb(191, 223, 255)
    Note right of C: message  
    C->>D:Request
    D->>C:Response
    end
    
    rect rgb(191, 223, 255)
    Note right of D: message
    D->>+E: Request
    E->>-D: Response
    end
    
    rect rgb(191, 223, 255)
    Note right of D: message
    A-->>F:Request
    F-->>A:Response
    end

1、obsidian整个窗口效果：
改变窗口大小，图片能跟随改变。

sequenceDiagram autonumber A->>B: Request B->>C:Request rect rgb(191, 223, 255) Note right of C: message C->>D:Request D->>C:Response end rect rgb(191, 223, 255) Note right of D: message D->>+E: Request E->>-D: Response end rect rgb(191, 223, 255) Note right of D: message A-->>F:Request F-->>A:Response end

2、导出成pdf效果：
导出成pdf后，图片能显示全。

三 总结

虽然在使用中，使用mermaid的场景通常是画一些特定专业的图，比如类图，时序图这些有逻辑规律的图。通过修改代码实时渲染表达效率更高。mermaid通过代码画图给我的感觉更轻量，代码跟markdown都是文本，当然这点对一个画图工具来说并不重要。并且我的日常使用中很多需要画图的时候，都是使用Excalidraw这样的画图插件取代了，关键还是看哪种画图方式更方便画。
另外我也试过mermaid的饼图，甘特图发现并不存在图片显示不全的问题。这种mermaid图自动缩放的效果未来也可能会被obsidian做成默认设置，就不需要用户自己去修改CSS了。