draw.io怎么插入PlantUML图？

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

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

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

在draw.io中插入一个PlantUML图

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

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

在Confluence服务器中启用PlantUML

尽管默认情况下在Confluence Server的draw.io中输入PlantUML可以正常工作，但是较新版本的draw.io应用要求您决定是使用自己的自托管PlantUML服务器，还是使用draw.io PlantUML服务器生成SVG。。

默认情况下，draw.io PlantUML服务器是禁用的，旨在为希望将其数据保留在其基础结构中的客户提供最高的数据隐私和安全性。

如果您选择将数据发送到draw.io服务器以将PlantUML数据转换为SVG，则需要在draw.io应用程序配置中启用我们的服务器。转换后的图表数据将立即删除，并发送回Confluence服务器。

转到Confluence中的“管理”区域。
找到draw.io应用程序，然后转到“附件配置”选项卡。
在服务器配置字段中输入 plantuml = https：//exp-plant.draw.io/plantuml4。
点击保存更改。

现在，当您编辑draw.io图表时，您将看到通过上述菜单通过菜单输入代码的选项：排列 > 插入 > 高级 > PlantUML。

阅读有关Confluence中的draw.io服务器配置选项的更多信息

在基础架构中托管您自己的PlantUML服务器

您可以从Github上最新的plantuml-server版本中下载.war文件，并使用Tomcat之类的servlet引擎将其安装到基础架构中。在配置draw.io附加组件时，请在上述步骤3的“服务器配置”字段中使用您自己的PlantUML服务器的URL。

三种不同的格式

插入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服务器，然后立即删除。