当前位置:首页 > draw.io教程

将图表从 PlantUML 迁移到 Mermaid 和 draw.io

drawio11个月前 (06-05)draw.io教程21

对于程序员来说,直接用文本绘制图表通常比手动设置图表元素样式和对齐图表元素要快得多。draw.io 对 PlantUML 的支持将于 2025 年底逐步停止,因此,您可以尝试以下方法将 PlantUML 图表迁移到 draw.io 或使用Mermaid 语法重写它们。

为什么PlantUML支持被移除?

PlantUML 缺乏安全审查,使得 draw.io 的更新更加困难。Mermaid 丰富的图表类型、广泛的用户群体以及其客户端架构更符合 draw.io 工具的需求。更多详情请参阅draw.io GitHub 代码库中的弃用通知。

我们将在app.diagrams.net的在线版本中于 2025 年底移除对PlantUML的支持,并在 2028 年移除对 Confluence 和 Jira Cloud 的 draw.io 应用的支持。

免责声明:我们在下方链接了一些开源项目和工具。我们并非特指这些工具,只是想强调PlantUML工具的可用性。

您的 PlantUML 图仍然有效。

这不会删除图表中的任何 PlantUML 元素——图像和底层文本描述仍将保留。您仍然可以复制 PlantUML 文本并将其粘贴到其他工具中,例如PlantTextPlantUML在线编辑器,或者Confluence 的 PlantUML 图表编辑器

在移除支持之前,当您尝试通过简单编辑器主题中的“高级”>“PlantUML”或经典编辑器主题中的“排列”>“插入”>“高级”>“PlantUML”将 PlantUML 插入draw.io 图表时,您会看到一条警告。

将 PlantUML 图表转换为 draw.io 图表

有多种第三方工具可以将您的 PlantUML 文本转换为 draw.io 图表。plantuml2drawioplantuml_to_drawio可以在 GitHub 上找到。

pu2mm 工具可以将 PlantUML 序列图转换为 Mermaid 格式。此外,还有许多工具可以直接将代码转换为各种 Mermaid 图,例如PythonToMarkdownflomaticpymermaider

免责声明:我们并非特指这些工具,但想强调的是,目前有 PlantUML 到 Mermaid 的转换工具和从代码生成 Mermaid 的工具。

获得美人鱼代码后,将其插入 draw.io 并将其保存为画布上的图像(这样您就可以编辑美人鱼代码 - 点击下面的示例),或者将其转换为图表以进行样式设置。

了解更多关于在 draw.io 中使用 Mermaid 图表的信息

编写一个美人鱼版本的 PlantUML 图

将 PlantUML 代码重写为 Mermaid 代码并不难,因为两种图的语法大致相同。

在以下示例中,同一个状态图分别用 PlantUML 和 Mermaid 编写,并以图像形式插入到画布中。 打开此示例,然后双击其中一个状态图即可编辑 PlantUML 或 Mermaid 版本。


PlantUML中的状态图

@startuml
  [*] --> Reconnecting
  state Reconnecting {
    [*] --> EstablishingConnection
    EstablishingConnection --> EstablishingConnection : failed [no connection] /wait 5s then reconnect
    EstablishingConnection --> [*] : success [connection established]
    ||
    [*] --> Listening
    Listening --> VerifyingAccess : key presented [valid RFID code] /verify
    VerifyingAccess --> Listening
    state VerifyingAccess{
      [*] --> CheckingInternalRecords
      CheckingInternalRecords --> KeyAccessVerified : key allowed [valid key]
      KeyAccessVerified --> Unlocked : [valid key] /unlock
      Unlocked --> [*] : wait 5 seconds after door close [unlocked] /lock
      CheckingInternalRecords --> InvalidKey : not found [invalid key] /ignore
      InvalidKey --> [*] : /ignore
    }
  }@enduml

美人鱼中的状态图

stateDiagram-v2
  [*] --> Reconnecting
  state Reconnecting {
      [*] --> EstablishingConnection
      EstablishingConnection --> EstablishingConnection : failed [no connection] /wait 5s then reconnect
      EstablishingConnection --> [*] : success [connection established]
  --
  [*] --> Listening
  Listening  --> VerifyingAccess : key presented [valid RFID code] /verify
  VerifyingAccess --> [*]
  VerifyingAccess --> Listening
    state VerifyingAccess{
      [*] --> CheckingInternalRecords
      CheckingInternalRecords --> KeyAccessVerified : key allowed [valid key]
      KeyAccessVerified --> Unlocked : [valid key] /unlock
      Unlocked --> [*] : wait 5 seconds after door close [unlocked] /lock
      CheckingInternalRecords --> InvalidKey : not found [invalid key] /ignore
      InvalidKey --> [*] : /ignore
    }
  }