UML 架构图入门介绍 starUML

拓展阅读

常见免费开源绘图工具

OmniGraffle 创建精确、美观图形的工具

UML-架构图入门介绍 starUML

UML 绘制工具 starUML 入门介绍

PlantUML 是绘制 uml 的一个开源项目

UML 等常见图绘制工具

绘图工具 draw.io / diagrams.net 免费在线图表编辑器

绘图工具 excalidraw 介绍

绘图工具 GoJS 介绍绘图 js

原型设计工具介绍-01-moqups 介绍

常见原型设计工具介绍

UML

统一建模语言（UML）是一种标准的建模语言，用于可视化、指定、构造和文档化软件系统的各个方面。

UML 中文版

常见的图

用例图（UseCase）

使用ASCII字符画出用例图是一种简单的方式来表示系统的功能需求和用户交互。

下面是一个简单的用例图示例，它展示了一个在线图书馆系统的几个关键用例：

+-------------------+               +------------------------+
|    用户 (User)     |               |   在线图书馆系统        |
|                   |               |   (Online Library System)|
+-------------------+               +------------------------+| 搜索图书       |               | 登录系统               ||---------------->|               |<------------------------|| 查看图书详情   |               | 浏览图书列表           ||---------------->|               |<------------------------|| 借阅图书       |               | 管理借阅记录           ||---------------->|               |<------------------------|| 归还图书       |               | 查找推荐图书           ||---------------->|               |<------------------------|| 评价图书       |               | 管理个人账户           ||---------------->|               |<------------------------|

在这个例子中，我们定义了一个“用户”角色，并且列出了几个可能与在线图书馆系统交互的用例。

类关系图（Class Relationship）

类关系图（Class Diagram）是UML中用于展示系统中类之间关系的静态结构图。

在类关系图中，我们通常展示类的属性（attributes）和方法（methods），以及类之间的关联（associations）、依赖（dependencies）、继承（inheritance）和实现（realization）等关系。

下面是一个简单的ASCII艺术表示的类关系图示例，它展示了一个简单的学校管理系统中的三个类：Student、Teacher和Course。

+----------------+  " 1 "  +----------------+
|    Student     |----------|    Teacher    |
+----------------+          +----------------+
| - name         |          | - name         |
| - age          |          | - subject      |
| - id           |          +----------------+
| + enroll()     |               ^
| + attendClass()|               |
+----------------+               |^  " 0..* "          ||                    |
+----------------+               |
|     Course     |---------------+
+----------------+
| - name         |
| - code         |
| - description |
+----------------+

在这个例子中：

Student类与Teacher类之间有一个关联关系，表示一个学生可以被一个教师指导（这里用" 1 "表示学生端的关系强度，用" 0..* "表示教师端的关系强度，意味着一个教师可以指导多个学生）。
Student类与Course类之间有一个关联关系，表示一个学生可以注册多个课程（这里用" 0..* "表示学生可以注册从零到多个课程）。
Teacher类与Course类之间有一个关联关系，表示一个教师可以教授多个课程（这里同样用" 0..* "表示教师可以教授从零到多个课程）。

请注意，ASCII艺术图的复杂性可以根据你的需求进行调整。简单的ASCII图可以快速传达基本的概念，但是它们通常不适合表示复杂系统的设计。

对于更复杂的设计，使用专业的UML工具来创建图形化类关系图会更加清晰和易于理解。

活动图（Activity）

活动图（Activity Diagram）是UML中用于描述业务流程或系统操作的工作流的一种图形表示。它展示了活动的顺序、决策点、并行处理以及合并点等。下面是一个简单的ASCII艺术表示的活动图示例，它展示了一个在线购物流程：

+-------------------+     +-------------------+
|    开始 (Start)   | --> |   选择商品 (Select) |
+-------------------+     +-------------------+|                            |V                            V
+-------------------+     +-------------------+
|   登录账户 (Login) |     |   添加到购物车 (Add) |
+-------------------+     +-------------------+|                            |V                            V
+-------------------+     +-------------------+
|   确认订单 (Confirm)| --> |   选择支付方式 (Pay) |
+-------------------+     +-------------------+|                            |+------------+------------+|V+-------------------+|   订单完成 (Order Complete) |+-------------------+

在这个例子中：

流程开始于“开始”节点，表示购物流程的启动。
用户首先需要“选择商品”，然后可以选择“登录账户”以便进行后续操作。
登录后，用户可以选择“添加到购物车”商品，或者直接“确认订单”。
在“确认订单”节点，用户需要选择一种“支付方式”来完成支付。
支付完成后，流程到达“订单完成”节点，表示购物流程结束。

活动图使用不同的形状来表示不同类型的节点：

圆角矩形（如“选择商品”、“登录账户”等）表示活动的执行。
箭头表示流程的流向。
菱形（如“确认订单”）表示决策节点，通常包含条件逻辑。
并行条（在本例中未展示）表示活动可以同时进行。
结束节点（如“订单完成”）表示流程的结束。

序列图（Sequence）

它展示了一个简单的客户端-服务器通信场景：

+----------------+     +----------------+     +---------------+
|   客户端 (Client) | --> | 服务器 (Server) | --> | 数据库 (DB)   |
+----------------+     +----------------+     +---------------+| 请求数据       |               |               ||----------------->| 处理请求       |               ||                 |<-- 验证权限     |               ||                 |----------------->| 查询数据       ||                 |               |<-- 返回结果     ||                 |               |                 ||                 |               |                 ||                 |               |                 ||                 |               |                 ||                 |               |                 ||                 |               |                 ||                 |               |                 ||                 |               |                 |

在这个例子中：

客户端发起请求，向服务器请求数据。
服务器接收到请求后，首先验证客户端的权限。
权限验证通过后，服务器向数据库发出查询请求。
数据库处理查询请求，并将结果返回给服务器。
服务器接收到数据库返回的结果后，将其发送回客户端。

序列图中的每个箭头代表一个消息，消息的发送者和接收者分别位于箭头的两端。

箭头的方向表示消息的流向，即从发送者到接收者。

对象之间的交互按照时间顺序排列，垂直排列的对象表示它们在交互中的存在。

状态图（State chart）

状态图（State Diagram）是UML中用于描述系统或对象可能处于的各种状态以及在接收到特定事件或条件满足时状态之间的转换的一种图形表示。

下面状态图示例展示了一个在线订单的生命周期：

+-----------+
| 订单创建   |
+-----------+|V
+-----------+
| 待支付   |
+-----------+|V
+-----------+
| 已支付   |
+-----------+|V
+-----------+
| 已发货   |
+-----------+|V
+-----------+
| 已完成   |
+-----------+

在这个例子中，一个在线订单的生命周期包括以下几个状态：

订单创建：这是订单的初始状态。当用户完成商品选择并提交订单时，订单就处于此状态。
待支付：在订单创建之后，用户需要支付订单。在这个阶段，订单等待用户的付款。
已支付：用户完成支付后，订单状态更新为已支付。此时，订单正在处理中，准备发货。
已发货：订单处理完成并且商品已经发出，订单状态变为已发货。用户可以跟踪物流信息。
已完成：当用户收到商品，订单生命周期结束，状态变为已完成。

状态之间的转换通常由事件触发，例如，在“待支付”状态下，用户的支付行为是一个事件，它会触发状态转换到“已支付”状态。

状态图使用箭头来表示状态转换，箭头的方向表示转换的方向。

请注意，ASCII艺术图的复杂性可以根据你的需求进行调整。简单的ASCII图可以快速传达基本的概念，但是它们通常不适合表示复杂系统的设计。

对于更复杂的状态机，使用专业的UML工具来创建图形化状态图会更加清晰和易于理解。

组件图（Component）

组件图（Component Diagram）是UML中用于描述系统中软件组件以及它们之间的关系的静态结构图。

组件通常是指代码的封装单元，如库、模块或包。

下面是一个简单组件图示例，它展示了一个简单的文本编辑器应用程序的组件结构：

+--------------------------------------------------+
|   文本编辑器应用程序 (Text Editor Application)   |
+--------------------------------------------------+|            |            |            |V            V            V            V
+------------+  +------------+  +------------+  +------------+
| 用户界面   |  | 文件管理   |  | 编辑功能   |  | 显示组件   |
| (UI)       |  | (File Mgmt)|  | (Editing)  |  | (Display)  |
+------------+  +------------+  +------------+  +------------+

在这个例子中：

文本编辑器应用程序 是整个系统的边界，包含了所有子组件。
用户界面 (UI) 组件负责提供用户交互的界面，如菜单、工具栏和编辑区域。
文件管理 (File Mgmt) 组件处理文件的打开、保存和其他文件操作。
编辑功能 (Editing) 组件实现文本编辑的核心功能，如剪切、复制、粘贴等。
显示组件 (Display) 负责文本的显示，包括文本渲染和屏幕更新。

组件之间的关系可以用箭头或连接线表示，表示它们之间的依赖关系。

在这个例子中，组件之间的关系是隐含的，因为它们都是文本编辑器应用程序的一部分，相互之间存在依赖关系。

部署图（Deployment）

部署图（Deployment Diagram）是UML中用于描述系统中软件和硬件的配置以及它们之间的依赖关系的静态结构图。

部署图展示了系统的物理部署，包括节点（如服务器、客户端等）和它们的组件分布。

下面是一个简单的部署图示例，它展示了一个简单的Web应用程序的部署结构：

+--------------------------------------------------+
|           Web服务器 (Web Server)               |
|                   (Node A)                     |
+--------------------------------------------------+
|   +--------+   +--------+   +--------+   +--------+   |
|   | Web    |   | App    |   | DB     |   | Cache  |   |
|   | Server |   | Server |   | Server |   | (in-   |   |
|   +--------+   +--------+   +--------+   | memory)|   |
|   |        |   |        |   |        |   | (for    |   |
|   |        |   |        |   |        |   | hot    |   |
|   |        |   |        |   |        |   | data    |   |
|   |        |   |        |   |        |   | storage  |
|   |        |   |        |   |        |   +--------+   |
+--------------------------------------------------+|            |            |            ||            |            |            |V            V            V            V
+--------+  +--------+  +--------+  +--------+  +--------+
| 客户端 |  | 客户端 |  | 客户端 |  | 客户端 |  | 客户端 |  | 客户端 |
| (Client)|  | (Client)|  | (Client)|  | (Client)|  | (Client)|
+--------+  +--------+  +--------+  +--------+  +--------+

在这个例子中：

Web服务器 (Web Server) 位于节点A，是部署图的主要节点，它托管了Web应用程序的各个组件。
- Web Server：负责处理客户端请求和提供Web页面。
- App Server：运行应用程序逻辑和处理业务请求。
- DB Server：存储应用程序数据，处理数据库查询。
- Cache (in-memory)：用于存储热点数据，提高应用程序性能。
客户端 (Client) 表示多个客户端设备，它们通过网络与Web服务器进行交互。

部署图中的节点通常用矩形框表示，组件用较小的矩形框嵌套在节点内表示。

节点之间的连接线表示它们之间的通信或依赖关系。

客户端可以是物理设备，如个人电脑、手机等，也可以是其他网络中的服务器。

序列图

下面是一个使用 Markdown 格式编写的简单序列图示例：

<uml>下载->定义:定义->使用:
</uml>

js-sequence-diagrams 能够帮助你将文本转换成UML序列图。

而 flowchart 则是另一个工具。

下载

js-sequence-diagrams 依赖于 Raphaël 和 Underscore.js。

定义

<uml>标题: UML 测试A->B: 正常线条B-->C: 虚线C->>D: 开放箭头D-->>A: 虚线开放箭头
</uml>

使用

导入js文件

<script src="raphael-min.js"></script>
<script src="underscore-min.js"></script>
<script src="sequence-diagram-min.js"></script>

在jQuery中定义这个：

$("UML, uml").sequenceDiagram({theme: 'hand'});

然后你可以看到：

标题: UML 测试 A->B: 正常线条 B-->C: 虚线 C->>D: 开放箭头 D-->>A: 虚线开放箭头