关于使用Draw.io画流程图(PlantUML)的说明

背景简介

diagrams.net是用于构建图表应用程序的开源技术堆栈，也是世界上最广泛使用的基于浏览器的最终用户图表软件

PlantUML

https://plantuml.com

PlantUML是一种开源工具，允许用户通过简单文本语法生成UML图表。它基于文本描述，结合图形化输出，特别适合需要快速创建和修改UML图表的开发者

PlantUML的优势

• 文本驱动：用户编写类似代码的文本(PlantUML语法)，工具自动渲染为图表
• 支持多种UML图：包括活动图、类图、序列图、用例图、状态图等，还支持非UML图(如Gantt图、思维导图)
• 跨平台：PlantUML是一个Java库，可作为独立工具、在线服务或插件集成到编辑器(如VSCode、IntelliJ IDEA)和其他平台(如draw.io在线版)
• 输出格式：支持PNG、SVG、PDF等格式，适合嵌入文档或分享

工作原理

1、用户编写PlantUML代码，例如

@startuml
start
:动作1;
:动作2;
stop
@enduml

2、工具解析代码，生成对应的UML图表

3、图表可直接显示或导出

DrawIO的关系

• draw.io的在线版集成了PlantUML功能，允许用户输入PlantUML代码并渲染图表(通过Arrange>Insert>Advanced>PlantUML)
• draw.io的桌面版因离线设计限制，不支持PlantUML。

在DrawIO中使用

示例文本

@startuml
skinparam shadowing false
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml

与钉钉结合

在钉钉中使用PlantUML

1、在钉钉中新建一个文档

2、插入 - 文本绘图

3、格式切换到PlantUML格式

4、切换视图 - 仅展示图表

语法

开始和结束

PlantUML代码通常以@startuml开始，以@enduml结束，中间是图表的描述内容。基本结构如下：

@startuml
  // 这里是图表描述代码
@enduml

注释功能

可以使用'释

可以使用/' ...'/ 行注释

类图(Class Diagram)

描述系统中的类、属性、方法及它们之间的关系

属性和方法可以用：+（public）、-（private）、#（protected）、~（package）

关系：

• 继承：--|> 或者 <|--
• 实现：..|>
• 关联：-->
• 组合：*--
• 聚合：o--

@startuml
class Animal {
  -String name
  +move()
}
class Dog {
  +bark()
}
Animal <|-- Dog
@enduml

序列图(Sequence Diagram)

描述对象之间的交互顺序，常用于展示方法调用流程

• 参与者：actor 名称或participant 名称
• 消息：->（同步调用）、-->（异步调用）
• 激活条：自动显示，生命周期用activate和deactivate控制
• 返回消息：-->>

@startuml
actor User
participant System
User -> System: login(username, password)
activate System
System -->> User: success
deactivate System
@enduml

用例图(Use Case Diagram)

展示系统功能和用户(或外部系统)之间的交互

• 参与者：actor :名称:
• 用例：(用例名称)
• 关联：-- 或 -->
• 系统边界：package "系统名称" {}

@startuml
actor Customer
actor Admin
package "Online Shop" {
  (View Products)
  (Place Order)
  (Manage Inventory)
}
Customer --> (View Products)
Customer --> (Place Order)
Admin --> (Manage Inventory)
@enduml

样式和格式

可以通过皮肤参数，来调整图表外观，如skinparam monochrome true

可通过title 标题 添加图表标题

可通过note left/right: 内容 添加注释

@startuml
skinparam monochrome true
title Class Diagram Example
class Example {
  #data
}
note right: This is a note
@enduml

分组与包

可使用package "名称" {}或namespace 名称 {}分组类或对象

@startuml
package "Subsystem" {
  class Class1
  class Class2
}
@enduml

条件与循环

• 条件：alt/else/end
• 循环：loop 次数/end loop

@startuml
actor User
participant System
User -> System: request data
alt success
  System -->> User: return data
else failure
  System -->> User: error message
end
@enduml

参考资料

• https://www.diagrams.net