Posted inAI AI Chatbot UML

创建简单在线食品订购系统UML部署图的全面指南

1. UML部署图的目的

一个部署图展示了系统的物理/运行时架构：

  • 硬件节点（服务器、设备、云实例）
  • 部署在这些节点上的软件构件
  • 执行环境（容器、运行时）
  • 节点之间的通信路径（协议、连接）

对于一个简单在线食品订购系统，它展示了如何：

  • 客户和餐厅的Web界面是如何提供的
  • 业务逻辑如何运行
  • 数据如何存储
  • 外部服务（支付、通知）如何集成

它帮助开发人员、DevOps团队和利益相关者理解部署拓扑、扩展点、安全边界和依赖关系。

2. 部署图中的关键UML元素

元素 UML表示法（PlantUML） 含义/使用场景 构造型示例
节点 node “名称” 可以托管构件的计算资源（物理或虚拟） <<设备>>, <<云>>
设备 节点“Name” <<设备>> 物理或虚拟硬件（服务器、移动设备、路由器） <<设备>>, <<服务器>>
执行环境 节点“Name” <<执行环境>> 软件运行时/容器（Tomcat、Node.js、Docker、JVM） <<执行环境>>, <<容器>>
工件 工件“filename.war” 可部署单元（可执行文件、.jar、.js捆绑包、数据库模式、配置文件） <<可执行文件>>, <<文件>>, <<数据库>>
组件 组件“Name” 逻辑软件单元（在部署图中可选；通常由工件实现） <<Web>>, <<服务>>
通信路径 –, –>, ..> 节点之间的网络连接（可带有协议标签） HTTP/HTTPS、WebSocket、RMI
依赖/调用 ..>, –> 使用/依赖（例如前端调用后端） <<调用>>, <<访问>>
表现/实现 ..> 带有 <<实现>> 或 ..> 工件实现/被部署为组件 <<实现>>, <<表现>>
外部系统 节点“Name” <<外部>> 您无法控制的第三方服务 <<外部>>, <<SaaS>>

3. 部署图的最佳实践（尤其适用于网络系统）

  • 保持简洁且易于阅读简单且可读 — 避免过于拥挤；每个主要环境（开发/预发布/生产，可选）使用一张图
  • 使用有意义的节点分组（将节点嵌套在节点内部）以显示集群/云区域
  • 优先使用简洁的表示法 — 仅在相关时显示文件名/配置；跳过冗余的构造型
  • 清晰地显示边界 — 内部云与外部服务之间的界限
  • 在路径上标注协议（HTTP/HTTPS、WebSocket、TCP等）
  • 使用从左到右的方向用于网络系统（客户端 → 服务器 → 数据库的流向感觉更自然）
  • 区分设备（硬件）与运行环境（运行时）
  • 仅在有实际价值时显示实现关系（仅当有实际价值时，例如构件 → 组件）
  • 使用皮肤参数在 PlantUML 中以获得更好的颜色/可读性
  • 对于小型/中型系统：最多 4–8 个节点

4. 简单在线点餐系统的推荐架构

此系统的简洁现代布局：

  • 客户端 → 浏览器（隐式）与Web 服务器/CDN
  • Web 服务器/CDN托管客户网站和餐厅面板的静态资源及 SPA 资产
  • API 服务器（执行环境）运行后端逻辑
  • 数据库服务器托管 PostgreSQL
  • 外部支付与通知服务

典型节点：

  1. Web 服务器 / CDN <<设备>>
  2. API 服务器 <<执行环境>>
  3. 数据库服务器 <<执行环境>>
  4. 支付网关 <<外部>>
  5. 通知服务 <<外部>>

5. 由 Visual Paradigm AI 聊天机器人生成的图表

优化并清理后的 PlantUML 代码（附解释）

Plantuml


在 VPasCode 中编辑 PlantUML
Plantuml Edit Plantuml in VPasCode 
@startuml

title 简单在线点餐系统 - 部署图

从左到右方向

skinparam {
箭头颜色 #424242
箭头字体颜色 #424242
默认字体大小 14
阴影效果关闭
构造型C背景颜色 #ADD1B2
构造型I背景颜色 #ADD1B2
}

' ── 节点 ────────────────────────────────────────────────

节点 "Web 服务器 / CDN" <<设备>> as WebServer {
[客户网站 HTML/JS/CSS] #..# (客户 SPA)
[餐厅管理面板 HTML/JS/CSS] #..# (餐厅 SPA)
}

节点 "云后端" <<设备>> as Cloud {
节点 "API 服务器" <<执行环境>> as APIServer {
构件 "backend-api.jar / main.exe" as BackendArtifact
}

节点 "PostgreSQL 服务器" <<执行环境>> as DBServer {
database "PostgreSQL 数据库" as Postgres <<数据库>>
}
}

节点 "支付网关" <<外部>> as Payment {
[支付 API] as PaymentAPI
}

节点 "通知服务" <<外部>> as Notification {
[WebSocket / 推送 API] as NotifyAPI
}

' ── 关系 ─────────────────────────────────────────

WebServer --> Cloud : HTTPS（API 调用）

Cloud --> Payment : HTTPS（结账）

Cloud --> Notification : WebSocket / HTTPS（状态更新）

' 构件 → 组件实现（可选但清晰）
(Customer SPA) ..> BackendArtifact : <<调用>>
(Restaurant SPA) ..> BackendArtifact : <<调用>>

BackendArtifact --> Postgres : <<JDBC / SQL>>

BackendArtifact --> PaymentAPI : <<HTTPS 调用>>

BackendArtifact --> NotifyAPI : <<WebSocket / HTTPS>>

' 可选：如需可显示数据库协议
' BackendArtifact -right-> Postgres : <<JDBC>>

note right of Cloud
典型的小型/中型部署：
• 单个虚拟机或小型集群
• API 和数据库可部署在同一台机器上（简化）
或分开部署以实现更好的扩展性
end note

@enduml
Edit Plantuml in VPasCode



在 VPasCode 中编辑 PlantUML

6. 逐步指南：如何构建您自己的部署图

  1. 列出所有执行目标（服务器、容器、外部服务）
  2. 列出可部署的构件（实际运行的内容：.js 包、.jar、数据库）
  3. 分组为节点（逻辑上嵌套时使用——例如 API + 数据库位于一个云节点中）
  4. 确定方向（从左到右的布局对 web → API → DB 的流程效果良好）
  5. 添加通信路径并标注协议
  6. 添加关键依赖（<<调用>>，<<访问>>）
  7. 应用皮肤参数用于颜色/可读性
  8. 添加注释用于重要决策（单实例 vs 多实例，扩展性备注）
  9. 验证：DevOps 工程师能否理解每个组件应部署在何处？

概要 – 简单食物订购部署快速参考

部分 典型节点类型 构件示例 通过以下方式连接
客户界面 Web 服务器 / CDN <<设备>> SPA 包（HTML/JS） HTTPS → API
餐厅仪表板 Web 服务器 / CDN <<设备>> 管理 SPA 包 HTTPS → API
业务逻辑 API 服务器 <<executionEnv>> backend-api.jar / 可执行文件 JDBC → 数据库，HTTPS → 外部
数据存储 PostgreSQL <<executionEnv>> PostgreSQL 数据文件 + 模式 —
支付 外部 <<SaaS>> 支付 API 端点 HTTPS
实时更新 外部 <<SaaS>> WebSocket / FCM / APNs WebSocket / HTTPS

此结构适用于 MVP 或中小型部署（1–3 台服务器 + 云数据库 + Stripe/PayPal + Firebase/Pusher）。

当系统扩展时，可自由调整嵌套结构、协议，或添加扩展说明（例如负载均衡器、副本）。

🔗 参考列表