plantuml绘制架构图 plantuml 布局

使用PlantUML可以让你快速的画以下这些图：

• 序列图
• 用例图
• 类图
• 对象图
• 活动图
• 组件图
• 部署图
• 状态图
• 时序图
• ……

话不多说，上图

效果大概就是这个样子，那么PlantUML如何实现既不用拉框也不用连线的呢。跟随我的脚步

一、先装好Visual Studio Code

相信大多数同学都装好了，可以直接跳到第二步。

没有安装好的参考这个教程：VSCode详细安装教程

二、安装PlantUML插件

再次上图

1，2，3，4，🆗插件装完了。

不满意？那我简单说两句：

1. 点击拓展 extension
2. 在搜索框输入 PlantUML
3. 选择第一个
4. 点安装

三、如何使用PlantUML画类图

随便new一个文件，拓展名为 .puml (还有其他的格式也支持，先用着)

• 类图示例：

Student 类有两个私有属性 name 和 age ，两个方法 eat() 和 sleep()当然我们大学生不是这样的，返回值均为 void。PUML代码如下：（首尾两行是固定格式，相信你能看懂）

@startuml Student

class Student {
    -name : String
    -age : Integer
    +eat() : void
    +sleep() : void
}

@enduml

效果是这样的：（按快捷键 Alt + D 绘图）

其他的类图就不一一举例了, 在此给出第一个图的代码

@startuml Computer

' 定义
class Computer
{
    -cpu : Cpu
    -memory : List<Memory>
    +Computer(Cpu cpu, List<Memory> memoryList)
    +startRun() : void
    +installUSB(USB usb) : void
}

abstract class Cpu
{
    +calculate() : void
}

abstract class Memory
{
    + storage() : void
}

interface USB
{
    +connect() : void
}

class IntelCpu
{
    +calculate() : void
}

class AmdCpu {
    +calculate() : void
}

class IntelMemory
{
    +storage() : void
}

class AmdMemory
{
    +storage() : void
}

class Mouse
{
    +name : String
    +connect() : void
    +click() : void
}

class KeyBoard
{
    +name : String
    +connect() : void
    +click() : void
}

' 连线
Computer --> Cpu
Computer --o Memory
Computer ..> USB

Cpu <|-- IntelCpu
Cpu <|-- AmdCpu

Memory <|-- IntelMemory
Memory <|-- AmdMemory

USB <|.. Mouse
USB <|.. KeyBoard

@enduml

效果是这样的:

简单读一读代码就会发现, 这个PlantUML很形象, 例如:

• 用 —|> 表示继承关系(泛化关系)
• 用 …> 表示实现关系
• 用 —o 表示聚合关系
• 用 —* 表示组合关系
• 用 —> 表示单向关联关系
• 用 — 表示双向关联关系或者自关联

与平时画的很接近, 很方便记忆。

四、如何使用PlantUML画用例图

上图

这个代码看起来有点abstract。这个冒号哪来的？

没关系，PUML提供了多种语法看完之后我选了最好写的那种。

五、更多的功能等你探索

点击 PlantUML官网 就能看到各种语法了，很方便。可以自己研究研究怎么画其他类型的图。

六、当然我也不是说拉框连线画 UML 的方式不好啊

Visio 这个软件有点大，比较笨重，个人认为初学者用点轻量级的画图工具比较方便。在此推荐两个在线打开就能画图的网站，界面十分友好。

• ProcessOn 随便注册一个账号就能用了
• diagrams.net 点开直接start，以前叫draw.io来着，什么时候改名了