2020年10月9日

在draw.io中使用PlantUML

PlantUML是一个开放源代码工具，您可以在其中以文本格式指定UML图，它看起来与简单的编程语言非常相似。它通常由软件开发人员使用，并使具有辅助功能的用户能够绘制UML图。

尽管还有其他用于UML建模的文本格式，但是Plant UML是最流行的格式之一：它支持许多图类型，自动布置图元素，并具有一种简单易懂的语言。

PlantUML使用Graphviz软件对图进行布局，其中布局算法将连接器对准同一方向（从上到下，或从左到右），并尝试避免使用交叉线或连接器以使图更易读。Graphviz DOT代码还可用于创建流程图，图形等。

draw.io允许您插入PlantUML和Graphviz DOT代码，并自动将带有图表的图像添加到绘图区域。

在draw.io中插入PlantUML图

打开draw.io图或创建一个新的空白图，然后从菜单中选择“排列” >“插入” >“高级” >“ PlantUML ”。
将您的PlantUML代码粘贴到对话框中，然后单击“插入”。

默认情况下，您的UML图将作为SVG插入在透明背景上。像所有其他draw.io形状一样，它易于调整大小和移动。

三种不同的格式

插入PlantUML代码时，可以从三种不同的图像格式中进行选择。默认情况下，draw.io将在透明背景（左）上插入可缩放的SVG。您还可以选择在白色背景（中间）上插入UML图的PNG图像，或在透明背景上插入文本表示（右）。

在draw.io中打开此示例

示例PlantUML图

PlantUML支持许多不同类型的UML图。有关全面的描述，请参考 PlantUML语言参考（PDF）或其主要网站 PlantUML.com。

例如，让我们看一下序列，用例和活动图以及创建它们的PlantUML代码

@startuml
演员用户
用户->销售：ProcessOrder
  激活销售
  销售->仓库：<< packOrder >>
    激活仓库
    仓库->选择器：GetProducts
      激活选择器
      选择器->仓库：收集的产品
      停用选择器
    仓库->销售：OrderPacked
    停用仓库
  销售->销售：SendOrder
  销售->用户：OrderSent
  停用销售
@enduml

在draw.io中打开

@startuml
从左到右的方向
skinparam包样式矩形
演员用户
演员销售
矩形顺序{
  用户->（结帐）
  （结帐）。>（付款）：包括
  （processOrder）。>（结帐）：扩展（结帐）
  （processOrder）<-销售
}
@enduml

@startuml
（*）->“订单已提交”
如果“已接受付款”，则
  -> [是]“包装产品”
  ->“寄包裹”
  -右->（*）
其他
  -> [否]“发送错误消息”
  -> [取消订单]（*）
万一
@enduml

在draw.io中打开

树木，图表等

您不仅限于UML图。Graphviz DOT语言允许您创建各种复杂的图，包括树，图，实体关系，数据流程图和有限状态机。

DOT和PlantUML还允许您使用颜色，字体和形状来格式化图表。例如，以下DOT代码创建了一个带有彩色矩形节点而不是黑色椭圆的树。

@startdot
有向图UML图表{
节点[color = Red，shape = box]
 UML->结构；
 UML->行为；
   结构-> {包装类部署对象组件CompositeStructure}；
   行为-> {Activity UseCase状态序列交互}；
     互动-> {Timing Communication InteractionOverview};
}
@enddot

在draw.io中打开此示例

将PlantUML或DOT图添加到Confluence页面

确保在您的实例中安装了PlantUML for Confluence Cloud应用程序。

编辑页面时，插入一个{plantuml}宏。插入后，您将看到一个宏框，上面显示“ PlantUML for Confluence”。单击宏，然后按“编辑”。

在宏编辑器中，输入图像附件的文件名以及希望在Confluence页面上显示图像的宽度和高度。然后输入您的PlantUML或DOT代码，您将在对话框的右侧看到预览。

保存宏配置，然后保存您的页面以查看该图。

该Confluence应用程序将文本描述和结果图像输出存储在Confluence Cloud实例中。数据仅在图像生成期间才通过draw.io服务器，然后立即删除。

标签draw.io draw.io图表 draw.io流程图