如何在 OnUML 中将 PlantUML 导出为 PNG 或 SVG

··Updated ·7 min read
plantumlpngsvg导出onuml

要在 OnUML 中导出 PlantUML 图表或继续编辑它,请先确定你需要哪种结果:

  • 直接从 OnUML 下载渲染后的 PNG 或 SVG 图表。
  • 需要日后继续在线编辑时,保存完整的 OnUML 项目。
  • 他人只需查看图表时,创建公开分享链接。
  • 使用当前浏览器工作期间,保留一份临时浏览器草稿。

OnUML 提供 PlantUML 实时预览、PNG 和 SVG 下载、浏览器本地草稿、云端项目保存及公开分享功能。目前不支持直接将 PlantUML 图表导出为 PDF。

为生成 PlantUML 预览或导出文件,OnUML 会将编码后的源代码发送到其配置的 PlantUML 渲染服务。请勿在 PlantUML 源代码中输入密码、API 密钥、访问令牌、私有端点或机密架构信息。

要点总结

  • 如果想粘贴源代码、检查预览并立即下载 PNG 或 SVG,请使用 PlantUML 快速编辑器。
  • 如果需要 AI 生成、语法修复、项目保存、多个图表标签页或分享功能,请使用完整的 OnUML 编辑器。
  • PlantUML 源代码在 OnUML 编辑器中始终可编辑;PNG 和 SVG 是渲染后的输出。
  • 未保存的编辑器草稿存储在当前浏览器中,不应将其视为永久备份。
  • 如果希望 OnUML 将图表保存在云端,请登录并保存项目。

选择合适的 OnUML 工作流

你的需求应使用的 OnUML 操作结果
将图表放入聊天、议题或文档选择 PNGplantuml-diagram.png
在不同尺寸下保持文字和线条清晰选择 SVGSVG 图表文件
下次打开 OnUML 后继续编辑登录并选择 Save云端项目
让他人查看当前图表选择 SHARE公开分享链接
在同一浏览器中保留临时草稿不保存项目,继续工作浏览器本地草稿

方式一:从快速编辑器下载 PNG 或 SVG

这种最快捷的工作流不需要在本地安装 Java 或 PlantUML。

  1. 打开 OnUML PlantUML 在线编辑器。
  2. 用自己的源代码替换 PlantUML source 面板中的示例。
  3. 等待 Diagram preview 面板更新。
  4. 选择 Download PNG 或 Download SVG。
OnUML 快速编辑器显示 PlantUML 源代码、实时图表预览以及 Download SVG 和 Download PNG 按钮
从快速编辑器导出 下载 SVG 或 PNG 渲染图表时,让 PlantUML 源代码和实时预览同时保持可见。

源代码发生变化后,编辑器会短暂等待再更新预览。如果下载按钮处于禁用状态,请等待预览完成,或修正提示的 PlantUML 错误。

需要广泛的图片兼容性时使用 PNG;用于网站、文档、缩放或任何可能调整图表尺寸的场景时使用 SVG。

方式二:从完整的 OnUML 编辑器导出

图表属于更完整的工作流时,请使用完整编辑器。

  1. 打开完整的 OnUML 编辑器。
  2. 选择 PlantUML 作为图表类型。
  3. 输入提示词或编辑 PlantUML 源代码。
  4. 确认渲染预览正确。
  5. 在预览工具栏中选择 PNG 或 SVG。

AI 语法修复是一项需要登录并消耗额度的功能。手动编辑和预览 PlantUML 无需运行本地修复工具。

导出 PlantUML PNG 时,OnUML 会请求渲染后的 PNG,并将其放在白色背景上。如果远程 PNG 请求失败,编辑器会尝试根据当前 SVG 预览生成 PNG。

SVG 导出会下载当前渲染的 PlantUML 预览。由于 SVG 是矢量格式,通常更适合技术文档和响应式页面。

OnUML 草稿与项目保存有何不同

工作期间,完整编辑器会将当前草稿保存在浏览器存储中。这有助于在同一浏览器内恢复工作,但浏览器存储可能被清除,无法替代持久的云端项目。

需要长期保存时:

  1. 登录 OnUML。
  2. 在完整编辑器中创建或编辑 PlantUML 图表。
  3. 选择 Save。
  4. 为项目设置一个有意义的标题。
  5. 继续编辑已保存的项目。

项目创建后,OnUML 会自动保存后续图表变更,并在编辑器中显示云端保存状态。如果自动保存报告失败或冲突,请先解决该状态再关闭页面。

请根据图表选择合适的持久化级别:

  • 当前浏览器中的临时工作使用浏览器草稿。
  • 需要持续在线编辑、使用 AI 工作流和分享时,将项目保存在 OnUML 中。

不发送文件,如何分享

如果他人只需查看图表,请在完整编辑器中选择 SHARE。OnUML 会为当前图表创建公开链接;浏览器权限允许时,还会将链接复制到剪贴板。

OnUML 的 Share link is ready 对话框,包含 Close 和 Copy Link 操作
复制公开分享链接 OnUML 创建链接后,使用 Copy Link 分享当前图表,无需发送图片文件。

分享与保存并不相同:

  • Save 会在你的 OnUML 工作区中保留可编辑项目。
  • SHARE 会创建公开查看链接。
  • PNG/SVG 会下载渲染后的文件。

任何获得公开分享链接的人都可能查看其中的图表内容。创建链接前,请检查源代码和渲染结果。

PDF 怎么办?

OnUML 目前可直接将 PlantUML 图表导出为 PNG 或 SVG,但不能导出为 PDF。

如果最终文档必须是 PDF,请下载缩放效果最佳的 SVG,将其放入文档或演示工具中,再把该文档导出为 PDF。这样还可以控制页面尺寸、边距、图注和周边文本。

如果你明确需要由 PlantUML 生成的 PDF,而不是包含导出图表的文档,则需要使用 OnUML 之外的其他工具。

常见问题

下载按钮处于禁用状态

请确保源代码不为空,等待预览更新,并在下载前修复所有 PlantUML 渲染错误。

下载的图片没有包含我最新的修改

先等待预览显示最新源代码,再选择 PNG 或 SVG。预览仍在更新时,快速编辑器会有意阻止导出。

下载 PNG 后无法编辑 PlantUML 源代码

PNG 是渲染后的图片。请返回当前编辑器草稿,或打开已保存的 OnUML 项目,继续编辑 PlantUML 源代码。

未保存的项目消失了

未保存的草稿依赖浏览器本地存储。清除浏览器数据、更换浏览器或使用其他设备,都可能导致草稿无法使用。请将重要内容保存为 OnUML 项目。

SVG 在浏览器中打开,而不是在图片应用中打开

这是正常现象。SVG 是基于 XML 的矢量图片格式,浏览器可以直接显示;它也可以嵌入网页和许多文档工具中。

常见问题解答

OnUML 能让 PlantUML 图表保持可编辑吗?

可以。使用完整编辑器,将图表保存为 OnUML 项目。之后可以重新打开项目,继续编辑其 PlantUML 源代码。

可以同时下载 PNG 和 SVG 吗?

可以。对于渲染有效的图表,PlantUML 快速编辑器和完整编辑器都提供 PNG 与 SVG 下载操作。

需要安装 Java 吗?

使用本文介绍的 OnUML 工作流不需要。渲染和下载都通过 Web 编辑器完成。

预览和导出需要账号吗?

你可以使用 PlantUML 快速编辑器进行编辑、预览和 PNG/SVG 下载。需要保存持久的云端项目并在 OnUML 中继续管理时再登录。

浏览器草稿等同于已保存项目吗?

不等同。浏览器草稿只是便捷的本地存储。需要持久云端编辑时,应选择已保存的 OnUML 项目。

文档应该使用哪种格式?

如果文档系统支持 SVG,优先选择 SVG,因为它在调整尺寸后依然清晰。目标不支持 SVG 或要求使用常规位图时,则选择 PNG。

后续步骤

需要日后修改时继续在编辑器中工作,需要渲染资源时导出 PNG 或 SVG;图表属于持续维护的在线工作流时,则保存为 OnUML 项目。