跳转到主要内容

统一图表阅读体验

Mermaid 与本地 PlantUML 共用查看器、源码导出与按需加载。
OINK 1.4.0 已接受

统一图表查看、源码导出与按需加载随 1.4.0 发布,行为归属组件、架构与浏览器打印契约。

背景

此前 Mermaid 已有平移和缩放弹窗,但页面打开时就加载引擎,并为弹窗再次渲染 SVG。 此前本地 PlantUML 在页面打开时加载两份引擎,仅支持横向滚动。两者都保留作者源码。

范围

共用现有弹窗与样式,提供查看、复制源码和下载独立 SVG。图表距离视口不超过 320px 时才加载大型引擎并渲染。不改变库版本、PlantUML 服务端模式、其他图表 家族、CLI,也不改变普通使用者仅依赖 Hugo 的构建要求。

行为与边界

一个轻量调度器在主线程串行调度两个引擎,每个引擎只加载一次。隐藏或宽度为零 的容器等待显示。主题切换使旧结果失效;已打开的查看器保留阅读位置。查看器复用 已渲染快照,支持触控平移与双指缩放、滚轮、键盘、适应窗口、Escape、焦点恢复 及减少动态效果偏好。错误后仍可查看源码。复制和导出报告失败;下载仅报告已发起。

PlantUML 始终通过 Blob 图片展示,SVG 不进入页面 DOM。导出的 SVG 内含样式, 移除主动内容,并拒绝依赖外部资源。不会下载 include、主题或可选库。浏览器 打印同步显示已渲染图片或可读源码,因为 beforeprint 无法等待异步引擎。 独立 Print、Markdown 和 RSS 保留既有源码回退。

兼容性

不增加配置项或构建步骤。本地 PlantUML 仍需显式启用,显式端点沿用旧渲染器。 没有 IntersectionObserver 时,限频的滚动与尺寸检查执行相同可见性判断。 禁用 JavaScript 或资源受阻时保留源码。

实现与验收

从 assets/js/mermaid.js 抽取共用调度与查看逻辑,保留引擎适配器和弹窗 partial。 更新归属输出检查器、运行时测试、真实中英文文档和浏览器测试。验证同页多图、 宽图、隐藏标签页与折叠区、快速主题切换、错误、资源受阻、源码准确性、独立导出、 触控、键盘、无障碍及打印。比较改造前后的请求。

决策记录

  • 2026-10-25:初始有限设计。保留主线程串行执行和 Blob 隔离;立即打印时, 未渲染图表显示源码。本地实现与图表浏览器验收已完成,完整站点验证随交付证据 记录,相关行为随 OINK 1.4.0 发布。