Deployment diagrams: nodes and artifacts

简介 / Introduction

A deployment diagram visualizes the physical layout of a software system across hardware nodes and the artifacts deployed on each. This post renders the same deployment structure in both PlantUML and Mermaid so you can compare syntax side by side.

PlantUML 版

PlantUML uses deployment diagram { } to open a deployment diagram, with node for nodes and artifact for deployed files.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@startuml
deployment diagram {
  node "Web Server" as web <<Node>> {
    artifact "index.html"
    artifact "app.js"
  }
  node "DB Server" as db <<Node>> {
    artifact "data.pkl"
    artifact "backup/"
  }
  node "Load Balancer" as lb <<Node>>
  lb --> web : HTTP
  web --> db : JDBC
}
@enduml

Mermaid 版

Mermaid’s deployment diagram uses the deployment chart type, service to define nodes, contains for artifacts, and rel for relationships.

1
2
3
4
5
6
7
8
9
10
11

deployment
    title Deployment View
    service Web_Server["Web Server"]
    service Database_Server["Database Server"]
    service Load_Balancer["Load Balancer"]
    Web_Server::webnode contains index.html
    Web_Server::webnode contains app.js
    Database_Server::dbnode contains data.pkl
    Database_Server::dbnode contains backup/
    Load_Balancer --> Web_Server : HTTP
    Web_Server --> Database_Server : JDBC

对比 / Side-by-side

小结 / Wrap-up

PlantUML deployment diagrams offer richer nesting and visual styling for complex production environments. Mermaid’s deployment diagrams are concise and ideal for inline documentation. Both support nodes, artifacts, and relationships — pick the tool that fits your workflow.