7 个开源图表代码工具，值得一试

无论你是在设计基础架构、解释应用程序流程，还是记录云架构，图表都是技术交流的重要组成部分。然而，传统的图表工具可能会成为瓶颈，手动编辑、版本控制问题以及缺乏可重复性往往会拖慢团队的进度。这时，“图表即代码”就应运而生了。

“图表即代码” 工具使你能够直接从代码生成架构图。它们具有版本控制、可自动化且跨团队保持一致。在本文中，云朵君将和大家一起探索七款支持“图表即代码”的开源工具，用于云和软件架构，并特别关注基于 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 Server1"
            web2  = container "Web Server2"
            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 的工作流程中。

无论你选择哪种工具，采用 “图表即代码” 都会使你的设计更易于维护、更易于扩展，并且更易于在团队之间共享。非常建议你尝试一下，如果觉得好用，一键三连支持一下呀❤️