统一图表阅读体验
统一图表查看、源码导出与按需加载随 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 发布。