摘要：你是否遇到过在 Obsidian 中画了精美的 Mermaid 流程图，结果导出 PDF 时右边被无情截断，或者小图被强行拉伸模糊？这款新开发的插件帮你一键解决所有排版烦恼。

🤔 背景：由于"截断"引发的强迫症

作为一名重度 Obsidian 用户，我经常使用 Mermaid 来绘制流程图、时序图和甘特图。在屏幕上预览时一切都很完美，但当我试图通过 Export to PDF（或者是 Better Export PDF 插件）将笔记导出为 A4 文档分享给同事或打印时，灾难发生了：

  1. 宽度溢出：稍微复杂一点的横向流程图，右侧经常被 A4 纸边缘切断。

  2. 排版丑陋：图表默认靠左对齐，在宽大的文档中显得很不协调。

  3. CSS 局限：尝试过网上的 CSS 片段，虽然能强制缩放，但往往会导致一个新问题——原本很小的图标（比如简单的状态机）被强行拉伸到 100% 宽度，变得巨大且模糊。

为了彻底解决这个问题，我开发了 Mermaid Auto-Fit for PDF。

✨ 插件介绍

这是一个轻量级的 Obsidian 插件，专注于优化 Mermaid 图表在 PDF 导出 和 打印 场景下的表现。它不需要复杂的配置，安装即用。

核心功能

  • 📏 智能防截断 (Smart Resize) 这是本插件的核心逻辑。它不再粗暴地将所有图都设为 100% 宽度。

    • 针对大图：如果图表宽度超过页面（如 A4），它会自动等比缩小，确保完整显示，绝不截断。

    • 针对小图：如果图表本身很小，它会保持原始尺寸和清晰度，拒绝强制拉伸。

  • 🎯 自动居中 (Auto-Center) 利用 Flex 布局，强制所有 Mermaid 图表在 PDF 中水平居中。无论是大图还是小图，排版瞬间变得专业、整洁。

  • 🤝 完美兼容 Better Export PDF 针对社区最流行的导出插件 Better Export PDF 做了专门的 DOM 监听优化，确保在它生成的临时渲染窗口中样式依然生效。

🛠️ 技术实现

为什么普通的 CSS 搞不定？因为 Mermaid 生成的 SVG 往往带有硬编码的 width 和 height 像素属性。

这个插件不仅注入了 CSS，还使用 JavaScript 动态清洗了 DOM：

  1. 监听渲染事件。

  2. 移除导致锁死尺寸的 SVG 属性。

  3. 应用 max-width: 100% 限制上限，同时保留 width: auto 以适应小图。

📥 如何安装

目前插件已提交 Obsidian 官方审核，审核通过前你可以通过以下方式安装：

方法 1：手动安装（推荐）

  1. 访问 GitHub Release 页面：点击这里前往

  2. 下载最新版本的 main.js 和 manifest.json。

  3. 在你的 Obsidian 库中创建文件夹：.obsidian/plugins/mermaid-auto-fit/。

  4. 将文件放入，重启 Obsidian 并启用。

方法 2：使用 BRAT 安装

如果你安装了 BRAT 插件，直接添加我的仓库地址即可： iE-zhi/obsidian-mermaid-fit-center

🖥️ 使用演示

安装并启用后，无需任何设置。直接导出 PDF，你会发现：

  • 超长的流程图自动缩进来了。

  • 小小的状态图乖乖呆在中间，没有变模糊。

🔗 开源地址

如果你觉得这个插件帮到了你，欢迎在 GitHub 上点个 Star ⭐！

👉 GitHub 仓库：https://github.com/iE-zhi/obsidian-mermaid-fit-center