七個開源圖表代碼工具，值得一試
無論你是在設計基礎架構、解釋應用程序流程，還是記錄云架構，圖表都是技術交流的重要組成部分。然而，傳統的圖表工具可能會成為瓶頸，手動編輯、版本控制問題以及缺乏可重復性往往會拖慢團隊的進度。這時，“圖表即代碼”就應運而生了。
“圖表即代碼” 工具使你能夠直接從代碼生成架構圖。它們具有版本控制、可自動化且跨團隊保持一致。在本文中，云朵君將和大家一起探索七款支持“圖表即代碼”的開源工具，用于云和軟件架構，并特別關注基于 AWS 的基礎設施。
我們首先了解一下我們將嘗試在每個工具中復制的圖表示例數據。
示例 AWS 架構
本文中，我們所有的制圖均是將使用一個示例架構，該架構反映了托管在 AWS 上的典型 Web 應用程序。以下是其組件：
- Route53：你的域的 DNS 路由。
- Elastic Load Balancer (ELB) ：彈性負載均衡器（ELB）分配傳入流量。
- Two EC2 instances：托管應用程序后端。
- Lambda function：用于身份驗證邏輯。
- IAM Role：與 Lambda 鏈接以獲得安全權限。
- Primary RDS DB：主應用程序數據庫。
- Replica RDS DB：讀取副本以獲得更好的性能。
每個工具都會生成相同的邏輯結構來橫向比較性能。
1. Diagrams
Diagrams[1]是一個基于 Python 的開源庫，可以將簡單的 Python 代碼轉換為美觀的系統架構圖。它支持 AWS、Azure 和 GCP 等主流云提供商，以及 Kubernetes 和 Docker 等本地工具。它是直接從代碼自動化架構文檔編寫的最簡單方法之一。
主要優點
- 開箱即用，支持大量云和 DevOps 圖標。
- 對于熟悉 Python 的開發人員來說很容易使用。
- 與 CI/CD 工具良好集成，實現自動文檔生成。
缺點
- 布局和樣式的定制有限。
- 不支持實時協作或 GUI。
安裝
圖表依賴于Graphviz來渲染架構圖。使用diagramsPython 包之前，需要先安裝 Graphviz。
如果你使用的是macOS 系統，可以使用 Homebrew。其他平臺請參考 Graphviz 官方安裝指南：https://graphviz.org/download/
# 首先安裝 Graphviz
brew install graphviz
# 然后安裝 Diagrams
pip install diagrams示例圖表代碼
將此代碼片段保存在文件 aws.py 中
from diagrams import Diagram
from diagrams.aws.compute import EC2
from diagrams.aws.database import RDS
from diagrams.aws.network import ELB, Route53
from diagrams.aws.security import IAM
from diagrams.aws.compute import Lambda
with Diagram("AWS Architecture", show=False):
dns = Route53("Route53")
lb = ELB("Load Balancer")
web1 = EC2("Web Server 1")
web2 = EC2("Web Server 2")
auth_lambda = Lambda("Auth")
iam = IAM("IAM Role")
db_primary = RDS("Primary DB")
db_replica = RDS("Replica DB")
dns >> lb >> [web1, web2]
web1 >> auth_lambda >> iam
[web1, web2] >> db_primary >> db_replica運行以下命令
python3 aws.py輸出
圖片
簡直方便至極，以后寫PPT，寫論文，寫報告都可以隨心所欲了，是不是很酷！
2. PlantUML
PlantUML[2]是一種成熟而靈活的工具，你使可以用簡單而強大的文本語言定義圖表。它支持序列圖、用例圖、類圖、組件圖等，使其適用于軟件開發和基礎設施建模。
主要優點
- 基于文本且版本控制友好。
- 與 markdown、文檔工具和 IDE 配合良好。
- 靈活并支持多種圖表類型。
缺點
- 需要學習其語法。
- 對于大規模圖表來說可能會變得冗長。
安裝
你可以使用 Docker 在本地運行 PlantUML，也可以直接在瀏覽器中使用官方的基于 Web 的編輯器：https://editor.plantuml.com/
通過 Docker 進行本地設置：
docker run -d -p 8080:8080 plantuml/plantuml-server:jetty示例圖表代碼
@startuml
component "Route53"as DNS
component "ELB"as LB
component "EC2 Web 1"as WS1
component "EC2 Web 2"as WS2
component "Lambda Auth"as Lambda
component "IAM Role"as IAM
component "RDS Primary"as DB1
component "RDS Replica"as DB2
DNS --> LB
LB --> WS1
LB --> WS2
WS1 --> Lambda
Lambda --> IAM
WS1 --> DB1
WS2 --> DB1
DB1 --> DB2
@enduml輸出
圖片
3. Mermaid
Mermaid[3]是一款基于 JavaScript 的圖表繪制工具，采用 Markdown 風格的語法。它非常適合將簡潔明了的圖表直接嵌入到 Markdown 文檔或 Notion、GitHub 或 GitLab 等工具中。
云朵君除非必要，只用Markdown撰寫報告或文章，因為非常鐘愛這款工具，建議你也嘗試一下??。
主要優點
- 與 markdown 文件無縫協作。
- 對于初學者來說語法簡單。
- 許多平臺都原生支持。
缺點
- 不適合大型、復雜的圖表。
- 有限的視覺定制選項。
使用方法（Markdown平臺無需安裝）
你可以在許多基于 markdown 的平臺（如 GitHub、GitLab、Notion 和 Obsidian）中直接使用 Mermaid，而無需安裝任何東西。
如需快速測試或在線共享圖表，請使用其官方游樂場： https://www.mermaidchart.com/play
示例圖表代碼
graph TD
DNS[Route53] --> LB[ELB]
LB --> WS1[Web Server 1]
LB --> WS2[Web Server 2]
WS1 --> Lambda[Lambda Function]
Lambda --> IAM[IAM Role]
WS1 --> DB1[Primary DB]
WS2 --> DB1
DB1 --> DB2[Replica DB]輸出
圖片
4. Structurizr DSL
Structurizr[4] DSL 是一種功能強大的文本領域特定語言 (DSL)，可基于 C4 模型創建軟件架構圖。它更注重概念的清晰度而非視覺上的完美，非常適合企業級系統的建模。
如果你對 C4 模型比較了解，那么這款工具將是你的首選！
主要優點
- 完全支持C4建模標準。
- 模型和視圖的明確分離。
- 鼓勵建筑領域的最佳實踐。
缺點
- 學習曲線更陡峭。
- 需要了解 C4 模型。
安裝
你可以直接在瀏覽器中使用 Structurizr DSL，也可以在本地安裝。
Web 編輯器：https://structurizr.com/dsl 本地安裝指南：https://structurizr.com/help/dsl
示例圖表代碼
workspace {
model {
user = person "User"
system = softwareSystem "Web Application" {
lb = container "Load Balancer"
web1 = container "Web Server 1"
web2 = container "Web Server 2"
auth = container "Auth Lambda"
role = container "IAM Role"
db1 = container "Primary DB"
db2 = container "Replica DB"
user -> lb
lb -> web1
lb -> web2
web1 -> auth
auth -> role
web1 -> db1
web2 -> db1
db1 -> db2
}
}
views {
container system {
include *
autolayout lr
}
}
}輸出
圖片
5.AWS Diagram-as-Code
AWS Diagram-as-Code[5]是由 AWS 實驗室構建的一款基于 YAML 的開源工具。它專注于使用原生服務標識符和關系來表示 AWS 基礎設施。該工具非常適合 AWS 負載繁重的環境，能夠以結構化的 YAML 格式輸出靜態架構鏡像。
主要優點
- 簡單且聲明性的 YAML 語法。
- 專為 AWS 服務量身定制。
- 輕量級且由 CLI 驅動。
缺點
- 僅限于 AWS。
- 定制和布局控制很少。
安裝
你可以使用 Homebrew 輕松地在 macOS 上安裝 AWS Diagram-as-Code：
$ brew install awsdac對于其他系統或更高級的使用，請參考官方文檔：https://github.com/awslabs/diagram-as-code[6]
示例圖表代碼
Diagram:
DefinitionFiles:
- Type: URL
Url: "https://raw.githubusercontent.com/awslabs/diagram-as-code/main/definitions/definition-for-aws-icons-light.yaml"
Resources:
Canvas:
Type: AWS::Diagram::Canvas
Direction: vertical
Children:
- AWSCloud
- User
AWSCloud:
Type: AWS::Diagram::Cloud
Direction: vertical
Preset: AWSCloudNoLogo
Align: center
Children:
- Route53
- LoadBalancer
- EC2Stack
- Lambda
- IAM
- DBStack
User:
Type: AWS::Diagram::Resource
Preset: User
Label: User
Route53:
Type: AWS::Route53::HostedZone
Label: Route 53
LoadBalancer:
Type: AWS::ElasticLoadBalancingV2::LoadBalancer
Label: Load Balancer
EC2Stack:
Type: AWS::Diagram::HorizontalStack
Children:
- EC2_1
- EC2_2
EC2_1:
Type: AWS::EC2::Instance
Label: Web Server 1
EC2_2:
Type: AWS::EC2::Instance
Label: Web Server 2
Lambda:
Type: AWS::Lambda::Function
Label: Auth Lambda
IAM:
Type: AWS::IAM::Role
Label: IAM Role
DBStack:
Type: AWS::Diagram::HorizontalStack
Children:
- DB1
- DB2
DB1:
Type: AWS::RDS::DBInstance
Label: Primary DB
DB2:
Type: AWS::RDS::DBInstance
Label: Replica DB
Links:
- Source: User
SourcePosition: N
Target: Route53
TargetPosition: S
TargetArrowHead:
Type: Open
- Source: Route53
SourcePosition: N
Target: LoadBalancer
TargetPosition: S
TargetArrowHead:
Type: Open
- Source: LoadBalancer
SourcePosition: SSW
Target: EC2_1
TargetPosition: NNW
TargetArrowHead:
Type: Open
- Source: LoadBalancer
SourcePosition: SSE
Target: EC2_2
TargetPosition: NNE
TargetArrowHead:
Type: Open
- Source: EC2_1
SourcePosition: S
Target: Lambda
TargetPosition: N
TargetArrowHead:
Type: Open
- Source: Lambda
SourcePosition: S
Target: IAM
TargetPosition: N
TargetArrowHead:
Type: Open
- Source: EC2_1
SourcePosition: SE
Target: DB1
TargetPosition: NW
TargetArrowHead:
Type: Open
- Source: EC2_2
SourcePosition: SW
Target: DB1
TargetPosition: NE
TargetArrowHead:
Type: Open
- Source: DB1
SourcePosition: E
Target: DB2
TargetPosition: W
TargetArrowHead:
Type: Open將其保存為 aws.yaml 并運行以下命令
awsdac aws.yml輸出
圖片
6. D2
D2[7]是由 Terrastruct 開發的一種現代圖表腳本語言。它強調簡潔性和清晰度，非常適合那些希望以最少的精力創建優雅圖表的開發人員。它支持在 VS Code 擴展程序或瀏覽器中實時渲染。
主要優點
- 具有自動布局的簡單語法。
- 支持主題和注釋。
- 渲染速度快，開發人員體驗極佳。
缺點
- 社區和生態系統仍在不斷發展。
- 缺少開箱即用的 AWS 特定圖標。
安裝
你可以在本地安裝 D2 或使用基于 Web 的游樂場進行快速可視化：https://play.d2lang.com/
brew install terrastruct/d2/d2
# 或
curl -fsSL https://d2lang.com/install.sh | sh示例圖表代碼
direction: right
DNS: "Route53: DNS"
LB: "ELB: Load Balancer"
WS1: "EC2: Web Server 1"
WS2: "EC2: Web Server 2"
Lambda: "Lambda: Auth Function"
IAM: "IAM Role"
DB1: "RDS: Primary DB"
DB2: "RDS: Replica DB"
DNS -> LB
LB -> WS1
LB -> WS2
WS1 -> Lambda
Lambda -> IAM
WS1 -> DB1
WS2 -> DB1
DB1 -> DB2輸出
圖片
7.Kroki
Kroki 是一個圖表渲染引擎，它為 20 多種流行的圖表格式（例如 Mermaid、PlantUML、Graphviz 等）提供后端服務。如果你想在 CI/CD 或文檔平臺中實現跨不同格式的圖表渲染標準化，它是理想的選擇。
主要優點
- 多種格式的集中渲染。
- 在管道、文檔或應用程序上運行良好。
- 使用 Docker 輕松實現自托管。
缺點
- 仍然需要外部語法（Mermaid、PlantUML 等）。
- 需要配置自托管部署。
安裝
你可以使用 Docker 在本地運行 Kroki，或者直接調用其遠程 API 進行快速渲染。
# 在本地運行 Kroki
docker run -d -p 8000:8000 yuzutech/kroki
# 或者調用公共 API
curl -X POST https://kroki.io/mermaid/svg -d 'graph TD; A-->B; B-->C; C-->A;' > diagram.svg示例使用（通過 curl 訪問 Mermaid）
curl -X POST https://kroki.io/mermaid/svg -d 'graph TD
> DNS[Route53] --> LB[ELB]
> LB --> WS1[Web Server 1]
> LB --> WS2[Web Server 2]
> WS1 --> Lambda[Lambda Function]
> Lambda --> IAM[IAM Role]
> WS1 --> DB1[Primary DB]
> WS2 --> DB1
> DB1 --> DB2[Replica DB]' > diagram.svg輸出
圖片
總結
圖表即代碼工具正在改變開發人員、DevOps 工程師、架構師甚至技術文檔撰寫者溝通復雜基礎設施和系統設計的方式。在當今快節奏的工程環境中，系統不斷發展，以可復制、版本控制的格式記錄架構已不再是奢侈，而是必需品。
通過為你的工作流程選擇正確的工具，你不僅可以提高文檔質量，還可以釋放自動化可能性，例如直接從 CI/CD 管道渲染圖表或在內部門戶中嵌入最新的視覺效果。
你可以選擇適合你個人工作流程或團隊設置的工具。對我來說，Diagrams非常適合，因為我熟悉 Python，我能夠輕松地將圖表生成功能集成到我現有的基于 Python 的工作流程中。
無論你選擇哪種工具，采用 “圖表即代碼” 都會使你的設計更易于維護、更易于擴展，并且更易于在團隊之間共享。非常建議你嘗試一下，如果覺得好用，一鍵三連支持一下呀??
參考資料
[1] Diagrams: https://diagrams.mingrammer.com/
[2] PlantUML: https://plantuml.com/
[3] Mermaid: https://mermaid.js.org/
[4] Structurizr: https://structurizr.com/
[5] AWS Diagram-as-Code: https://github.com/awslabs/diagram-as-code
[6] https://github.com/awslabs/diagram-as-code: https://github.com/awslabs/aws-diagram-as-code
[7] D2: https://d2lang.com/
