七個(gè)開源圖表代碼工具，值得一試
無論你是在設(shè)計(jì)基礎(chǔ)架構(gòu)、解釋應(yīng)用程序流程，還是記錄云架構(gòu)，圖表都是技術(shù)交流的重要組成部分。然而，傳統(tǒng)的圖表工具可能會(huì)成為瓶頸，手動(dòng)編輯、版本控制問題以及缺乏可重復(fù)性往往會(huì)拖慢團(tuán)隊(duì)的進(jìn)度。這時(shí)，“圖表即代碼”就應(yīng)運(yùn)而生了。
“圖表即代碼” 工具使你能夠直接從代碼生成架構(gòu)圖。它們具有版本控制、可自動(dòng)化且跨團(tuán)隊(duì)保持一致。在本文中，云朵君將和大家一起探索七款支持“圖表即代碼”的開源工具，用于云和軟件架構(gòu)，并特別關(guān)注基于 AWS 的基礎(chǔ)設(shè)施。
我們首先了解一下我們將嘗試在每個(gè)工具中復(fù)制的圖表示例數(shù)據(jù)。
示例 AWS 架構(gòu)
本文中，我們所有的制圖均是將使用一個(gè)示例架構(gòu)，該架構(gòu)反映了托管在 AWS 上的典型 Web 應(yīng)用程序。以下是其組件：
- Route53：你的域的 DNS 路由。
- Elastic Load Balancer (ELB) ：彈性負(fù)載均衡器（ELB）分配傳入流量。
- Two EC2 instances：托管應(yīng)用程序后端。
- Lambda function：用于身份驗(yàn)證邏輯。
- IAM Role：與 Lambda 鏈接以獲得安全權(quán)限。
- Primary RDS DB：主應(yīng)用程序數(shù)據(jù)庫。
- Replica RDS DB：讀取副本以獲得更好的性能。
每個(gè)工具都會(huì)生成相同的邏輯結(jié)構(gòu)來橫向比較性能。
1. Diagrams
Diagrams[1]是一個(gè)基于 Python 的開源庫，可以將簡(jiǎn)單的 Python 代碼轉(zhuǎn)換為美觀的系統(tǒng)架構(gòu)圖。它支持 AWS、Azure 和 GCP 等主流云提供商，以及 Kubernetes 和 Docker 等本地工具。它是直接從代碼自動(dòng)化架構(gòu)文檔編寫的最簡(jiǎn)單方法之一。
主要優(yōu)點(diǎn)
- 開箱即用，支持大量云和 DevOps 圖標(biāo)。
- 對(duì)于熟悉 Python 的開發(fā)人員來說很容易使用。
- 與 CI/CD 工具良好集成，實(shí)現(xiàn)自動(dòng)文檔生成。
缺點(diǎn)
- 布局和樣式的定制有限。
- 不支持實(shí)時(shí)協(xié)作或 GUI。
安裝
圖表依賴于Graphviz來渲染架構(gòu)圖。使用diagramsPython 包之前，需要先安裝 Graphviz。
如果你使用的是macOS 系統(tǒng)，可以使用 Homebrew。其他平臺(tái)請(qǐng)參考 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運(yùn)行以下命令
python3 aws.py輸出
圖片
簡(jiǎn)直方便至極，以后寫PPT，寫論文，寫報(bào)告都可以隨心所欲了，是不是很酷！
2. PlantUML
PlantUML[2]是一種成熟而靈活的工具，你使可以用簡(jiǎn)單而強(qiáng)大的文本語言定義圖表。它支持序列圖、用例圖、類圖、組件圖等，使其適用于軟件開發(fā)和基礎(chǔ)設(shè)施建模。
主要優(yōu)點(diǎn)
- 基于文本且版本控制友好。
- 與 markdown、文檔工具和 IDE 配合良好。
- 靈活并支持多種圖表類型。
缺點(diǎn)
- 需要學(xué)習(xí)其語法。
- 對(duì)于大規(guī)模圖表來說可能會(huì)變得冗長(zhǎng)。
安裝
你可以使用 Docker 在本地運(yùn)行 PlantUML，也可以直接在瀏覽器中使用官方的基于 Web 的編輯器：https://editor.plantuml.com/
通過 Docker 進(jìn)行本地設(shè)置：
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 風(fēng)格的語法。它非常適合將簡(jiǎn)潔明了的圖表直接嵌入到 Markdown 文檔或 Notion、GitHub 或 GitLab 等工具中。
云朵君除非必要，只用Markdown撰寫報(bào)告或文章，因?yàn)榉浅ｇ姁圻@款工具，建議你也嘗試一下??。
主要優(yōu)點(diǎn)
- 與 markdown 文件無縫協(xié)作。
- 對(duì)于初學(xué)者來說語法簡(jiǎn)單。
- 許多平臺(tái)都原生支持。
缺點(diǎn)
- 不適合大型、復(fù)雜的圖表。
- 有限的視覺定制選項(xiàng)。
使用方法（Markdown平臺(tái)無需安裝）
你可以在許多基于 markdown 的平臺(tái)（如 GitHub、GitLab、Notion 和 Obsidian）中直接使用 Mermaid，而無需安裝任何東西。
如需快速測(cè)試或在線共享圖表，請(qǐng)使用其官方游樂場(chǎng)： 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 是一種功能強(qiáng)大的文本領(lǐng)域特定語言 (DSL)，可基于 C4 模型創(chuàng)建軟件架構(gòu)圖。它更注重概念的清晰度而非視覺上的完美，非常適合企業(yè)級(jí)系統(tǒng)的建模。
如果你對(duì) C4 模型比較了解，那么這款工具將是你的首選！
主要優(yōu)點(diǎn)
- 完全支持C4建模標(biāo)準(zhǔn)。
- 模型和視圖的明確分離。
- 鼓勵(lì)建筑領(lǐng)域的最佳實(shí)踐。
缺點(diǎn)
- 學(xué)習(xí)曲線更陡峭。
- 需要了解 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 實(shí)驗(yàn)室構(gòu)建的一款基于 YAML 的開源工具。它專注于使用原生服務(wù)標(biāo)識(shí)符和關(guān)系來表示 AWS 基礎(chǔ)設(shè)施。該工具非常適合 AWS 負(fù)載繁重的環(huán)境，能夠以結(jié)構(gòu)化的 YAML 格式輸出靜態(tài)架構(gòu)鏡像。
主要優(yōu)點(diǎn)
- 簡(jiǎn)單且聲明性的 YAML 語法。
- 專為 AWS 服務(wù)量身定制。
- 輕量級(jí)且由 CLI 驅(qū)動(dòng)。
缺點(diǎn)
- 僅限于 AWS。
- 定制和布局控制很少。
安裝
你可以使用 Homebrew 輕松地在 macOS 上安裝 AWS Diagram-as-Code：
$ brew install awsdac對(duì)于其他系統(tǒng)或更高級(jí)的使用，請(qǐng)參考官方文檔：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 并運(yùn)行以下命令
awsdac aws.yml輸出
圖片
6. D2
D2[7]是由 Terrastruct 開發(fā)的一種現(xiàn)代圖表腳本語言。它強(qiáng)調(diào)簡(jiǎn)潔性和清晰度，非常適合那些希望以最少的精力創(chuàng)建優(yōu)雅圖表的開發(fā)人員。它支持在 VS Code 擴(kuò)展程序或?yàn)g覽器中實(shí)時(shí)渲染。
主要優(yōu)點(diǎn)
- 具有自動(dòng)布局的簡(jiǎn)單語法。
- 支持主題和注釋。
- 渲染速度快，開發(fā)人員體驗(yàn)極佳。
缺點(diǎn)
- 社區(qū)和生態(tài)系統(tǒng)仍在不斷發(fā)展。
- 缺少開箱即用的 AWS 特定圖標(biāo)。
安裝
你可以在本地安裝 D2 或使用基于 Web 的游樂場(chǎng)進(jìn)行快速可視化：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 是一個(gè)圖表渲染引擎，它為 20 多種流行的圖表格式（例如 Mermaid、PlantUML、Graphviz 等）提供后端服務(wù)。如果你想在 CI/CD 或文檔平臺(tái)中實(shí)現(xiàn)跨不同格式的圖表渲染標(biāo)準(zhǔn)化，它是理想的選擇。
主要優(yōu)點(diǎn)
- 多種格式的集中渲染。
- 在管道、文檔或應(yīng)用程序上運(yùn)行良好。
- 使用 Docker 輕松實(shí)現(xiàn)自托管。
缺點(diǎn)
- 仍然需要外部語法（Mermaid、PlantUML 等）。
- 需要配置自托管部署。
安裝
你可以使用 Docker 在本地運(yùn)行 Kroki，或者直接調(diào)用其遠(yuǎn)程 API 進(jìn)行快速渲染。
# 在本地運(yùn)行 Kroki
docker run -d -p 8000:8000 yuzutech/kroki
# 或者調(diào)用公共 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輸出
圖片
總結(jié)
圖表即代碼工具正在改變開發(fā)人員、DevOps 工程師、架構(gòu)師甚至技術(shù)文檔撰寫者溝通復(fù)雜基礎(chǔ)設(shè)施和系統(tǒng)設(shè)計(jì)的方式。在當(dāng)今快節(jié)奏的工程環(huán)境中，系統(tǒng)不斷發(fā)展，以可復(fù)制、版本控制的格式記錄架構(gòu)已不再是奢侈，而是必需品。
通過為你的工作流程選擇正確的工具，你不僅可以提高文檔質(zhì)量，還可以釋放自動(dòng)化可能性，例如直接從 CI/CD 管道渲染圖表或在內(nèi)部門戶中嵌入最新的視覺效果。
你可以選擇適合你個(gè)人工作流程或團(tuán)隊(duì)設(shè)置的工具。對(duì)我來說，Diagrams非常適合，因?yàn)槲沂煜?Python，我能夠輕松地將圖表生成功能集成到我現(xiàn)有的基于 Python 的工作流程中。
無論你選擇哪種工具，采用 “圖表即代碼” 都會(huì)使你的設(shè)計(jì)更易于維護(hù)、更易于擴(kuò)展，并且更易于在團(tuán)隊(duì)之間共享。非常建議你嘗試一下，如果覺得好用，一鍵三連支持一下呀??
參考資料
[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/
