# 统一图表阅读体验

> Mermaid 与本地 PlantUML 共用查看器、源码导出与按需加载。

---

LLMS 索引： [llms.txt](/zh/llms.txt)

---

> [!NOTE] OINK 1.4.0 已接受
> 统一图表查看、源码导出与按需加载随 1.4.0 发布，行为归属组件、架构与浏览器打印契约。

## 背景 {#context}

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

## 范围 {#scope}

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

## 行为与边界 {#behavior}

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

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

## 兼容性 {#compatibility}

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

## 实现与验收 {#acceptance}

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

## 决策记录 {#decisions}

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

---

反链：

- [决策](/zh/docs/design/decisions/)