DiagramPreview
基础解析Server SVG文本图表可导出

PlantUML 在线预览

粘贴包含 @startuml 和 @enduml 的 PlantUML 源码，快速检查 UML 图是否能渲染、标签是否可读、参与方和失败分支是否完整。

示例
PlantUML 预览就绪
你的 PlantUML 预览会显示在这里。

下一步可以继续

把当前预览结果带到相关工具里继续转换、排查或导出。

PlantUML 转 Draw.io

把 PlantUML 草稿转换成可编辑 draw.io XML，方便在 diagrams.net 中继续调整。

打开
Mermaid 在线预览

实时预览 Mermaid 流程图、时序图、类图和 ER 图，并导出 SVG/PNG。

打开
AI PlantUML 生成器

通过 DeepSeek 从自然语言生成 PlantUML。

打开

使用方法

  1. 1粘贴完整 PlantUML 文档，确保包含 @startuml 和 @enduml。
  2. 2从时序图、类图、用例图或活动图示例开始，先确认基础语法可渲染。
  3. 3检查渲染 SVG 中的 participant、类名、消息标签、note 和 alt 分支是否符合文档意图。
  4. 4遇到失败时先缩小到最小可渲染示例，再逐步加回 skinparam、note、sprite 或 include。
  5. 5确认源码可以和文档一起维护后，再导出或复制结果。

常见场景

UML 时序图类图草稿用例图 review活动流程说明ADR 架构决策记录代码评审文档

相关工具

PlantUML 转 Draw.io

把 PlantUML 草稿转换成可编辑 draw.io XML，方便在 diagrams.net 中继续调整。

Mermaid 在线预览

实时预览 Mermaid 流程图、时序图、类图和 ER 图，并导出 SVG/PNG。

AI PlantUML 生成器

通过 DeepSeek 从自然语言生成 PlantUML。

常见问题

PlantUML 是如何渲染的？

当前版本会编码 PlantUML 源码，并通过 PlantUML 渲染服务生成 SVG 预览。

后续可以替换渲染器吗？

可以。PlantUML URL 构建逻辑隔离在 renderer 模块中，后续可替换为自建或私有渲染服务。

发布 PlantUML 图前应该检查什么？

确认源码完整、标签足够短、远程 include 是有意使用的，并且渲染结果仍然匹配真实系统或工作流。

私有图表适合使用公共 PlantUML 渲染吗？

敏感图表建议使用可信的私有渲染器。服务端渲染通常会把 PlantUML 源码发送给负责生成 SVG 的渲染服务。

PlantUML Preview 帮助团队直接在浏览器中复核 UML 风格图表，适合时序流程、类图、活动图和用例图。

第一版采用标准 PlantUML server URL 方案。编码逻辑已隔离，后续可以替换成本地或私有 renderer。

因为输入是纯文本，图表可以自然进入代码评审、Wiki、Issue 和 SVG 资产流程。

Demo：用 PlantUML 说明登录时序

PlantUML 适合把接口调用和认证流程作为文本放在代码仓库里维护。一个紧凑的时序图能解释登录、令牌交换和失败路径。

  • participant 名称尽量和系统边界里的服务名一致。
  • 消息标签保持短句，方便在 Wiki 和 PR 里阅读。
  • 用 alt block 表示关键失败路径，而不是只写在正文里。
@startuml
actor User
participant Web
participant Auth
database SessionDB
User -> Web: submit credentials
Web -> Auth: verify password
Auth -> SessionDB: create session
Auth --> Web: token
Web --> User: signed in
@enduml

排障：隔离服务端 PlantUML 渲染失败

PlantUML 渲染失败时，最快方式是先把源码缩到服务器能接受的最小图，再逐步加回样式、note 和复杂 block。

  • 先只保留 @startuml、@enduml 和两个节点测试。
  • 检查 remote include、sprite、skinparam 是否依赖不可访问资源。
  • 私有图表不要直接依赖不可信公共渲染器。
@startuml
Alice -> Bob: ping
Bob --> Alice: pong
@enduml

Review 模式：让 PlantUML 源码可维护

PlantUML 的价值不只是生成图片，而是让图表源码可在 code review 中被理解。过重样式和超大 include 会让图片漂亮但难维护。

  • participant、class 和 service 名称尽量贴近代码或文档术语。
  • 假设写在 note 里，不要藏在很长的箭头标签里。
  • 类图、时序图和活动图如果主题不同，应拆成多个文件。
@startuml
participant Client
participant API
note over API: Validate token before reading orders
Client -> API: GET /orders
API --> Client: 200 OK
@enduml

PlantUML 在线预览 检查清单

当你需要在文档、PR、故障复盘或交接材料发布前检查源码内容时，可以使用 PlantUML 在线预览。在线预览 PlantUML 时序图、类图、用例图和活动图。

导出前建议检查标签是否可读、关系是否和源码一致、示例是否包含敏感信息，以及修改输入后预览是否仍然成立。

限制与排查

如果预览失败，先把输入缩小到最小完整示例，确认格式语法，再逐段加回内容。很多失败来自不完整文件、缩进错误、缺少图表头，或复制了依赖隐藏上下文的片段。

请把预览结果当作 review 界面，而不是生产事实来源。生成的图表、转换文件、看板和规则示例在进入正式文档或运维流程前仍需要人工确认。

可测试的示例输入

  • 时序图: @startuml actor User participant App participant Service User -> App: Submit diagram App -> Service: Render Service --> App: SVG App --> User: Preview @enduml
  • 类图: @startuml class Diagram { +source: string +render(): SVG } class PlantUMLDiagram Diagram <|-- PlantUMLDiagram @enduml
  • 用例图: @startuml left to right direction actor Developer rectangle DiagramPreview { Developer -- (Preview PlantUML) Developer -- (Export SVG) } @enduml

工具完成度

基础解析

基础解析

这个工具偏向快速结构检查，适合预览、排查和定位问题；关键输出进入生产前仍需要人工复核。

分级不是质量打分，而是告诉用户当前工具更适合稳定导出、深度调试、快速解析，还是 AI 辅助生成。