2020年10月9日

在draw.io中使用PlantUML

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

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

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

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

在draw.io中插入PlantUML图

  1. 打开draw.io图或创建一个新的空白图,然后从菜单中选择“排列” >“插入” >“高级” >“ PlantUML ”。
  2. 将您的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中打开

在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服务器,然后立即删除。