PlantUML 基本示例 活动Archimate类组件部署Ditaa甘特图JSON思维导图网络对象序列状态时间用例工作分解结构

问题描述

我正在评估 PlantUML 是否可以替代 GraphViz。

它被宣传为“直观”，但老实说，主页上的第一个例子已经令人困惑。

为什么下面创建了两次“Bob”和“Alice”？ 我在文本中看到 2 个节点，在输出中看到 4 个。 此外，箭头不在节点之间，而是在节点重复之间的关系之间。

Bob->Alice : hello

这对我来说是零意义的。 这个例子的含义是什么，只有 2 个节点和它们之间有一个箭头的更简单的例子是什么？

解决方法

我看你已经陷入了“手册的第一页不代表工具”的经典陷阱。⁽¹⁾

除了各种 UML 图（如您遇到的序列图），PlantUML 还支持各种其他软件开发相关格式（例如 archimate、框图、bpmn、c4、计算机网络图、erd、gantt 图表、思维导图和 wbd)，以及 json 和 yaml 文件的可视化。

事实上，它甚至理解 Graphviz 语法！⁽²⁾

因此，除非您对 PlantUML 有一些基本知识，否则“直观”不会发生。

回到你的问题......你所看到的并不是你认为的那样。

那是什么？

将事物与 Graphviz 相关联，而不是这样：

digraph d {
    Bob -> Alice : hello
}

你实际上看到的是：⁽³⁾

@startuml
digraph sequenceDiagramExample {
  bobHead [ label="Bob" pos="0,1.5!" shape="record" ];
  bobPoint0 [ pos="0,0.75!" shape="point" width="0" ]
  bobFoot [ label="Bob" pos="0,0!" shape="record" ];
  aliceHead [ label="Alice" pos="1,1.5!" shape="record" ];
  alicePoint0 [ pos="1,0.75!" shape="point" width="0" ]
  aliceFoot [ label="Alice" pos="1,0!" shape="record" ];
  bobHead -> bobPoint0 -> bobFoot [ dir="none" style="dashed" ]
  aliceHead -> alicePoint0 -> aliceFoot [ dir="none" style="dashed" ]
  bobPoint0 -> alicePoint0 [ label="hello" labelloc="c" style="solid" ]
}
@enduml

举个例子！

只有两个节点和它们之间有一个箭头的示例看起来像什么取决于选择的图形类型...

您必须记住的是，使用 Graphviz，您必须自己将所有含义应用到图表中。有了PlantUML，意义就由PlantUML为你提供。您需要做的就是告诉 PlantUML 您的意思。

通过一些基本的指针，这会很快变得直观。在开始之前，你只需要知道你想画什么样的图表......

正如您从下面的示例中看到的，PlantUML 是一个非常强大的工具，可以添加到您的软件开发人员工具带中。

我希望这些示例有助于让事情变得更直观，并且您的第一个失误不会阻止您进一步探索 PlantUML！

活动

@startuml
:Alice;
:Bob;
@enduml

Archimate

@startuml
archimate #Application Alice
archimate #Business Bob
Alice -> Bob
@enduml

类

@startuml
Alice -|> Bob: Hello
@enduml

组件

@startuml
[Alice] -> [Bob]: Hello
@enduml

部署

@startuml
folder Alice
file Bob
Alice -> Bob: Hello
@enduml

Ditaa

@startuml
ditaa

+-------+       +-----+
|       | hello |     |
| Alice +------>| Bob |
|       |       |     |
+-------+       +-----+
@enduml

甘特图

@startgantt
[Alice]->[Bob]
@endgantt

JSON

@startjson
{
  "Alice": ["Bob"]
}
@endjson

思维导图

@startmindmap
+ Alice
++ Bob
@endmindmap

网络

@startuml
nwdiag {
  network hello {
    Alice;
    Bob;
  }
}
@enduml

对象

@startuml
object Alice
object Bob
Alice -> Bob
@enduml

序列

@startuml
Bob -> Alice : hello
@enduml

状态

@startuml
[*] -> Alice
Alice -> Bob: hello
Bob -> [*]
@enduml

时间

@startuml
concise Hello
0 is Alice
+100 is Bob
@enduml

用例

@startuml
:Alice: -> :Bob: : Hello
@enduml

工作分解结构

@startwbs
+ Alice
++ Bob
@endwbs

脚注

1. 这不是真的经典，我只是编造出来的。但这是经常发生的事情。
2. 在此处参考手册：https://plantuml.com/dot
3. 在 neato not dot 中呈现，参见 https://stackoverflow.com/a/53470455/153049

,

它们不是“四个节点”，它们是序列中每个参与者的顶部和底部标题。这对于较大序列图中的可读性很有用，请参阅此处的一些示例https://plantuml.com/en/sequence-diagram

您可以设置图表样式以符合严格的 UML

skinparam style strictuml

---

完整代码

@startuml
skinparam style strictuml
Bob -> Alice : hello
Alice -> Bob : ok
@enduml