返回图表类型列表

架构图

使用服务图标和连接设计云和系统架构。适合基础设施文档。

图表类型打开主编辑器

什么是架构图?

架构图可视化软件系统、云基础设施和技术环境的结构。它们使用标准图标和符号展示服务、数据库、网络及其互联。架构图对于系统设计、云部署规划、基础设施文档以及向工程团队传达技术决策至关重要。

编辑与预览

使用 Mermaid 语法创建 架构图,实时查看效果。

编辑器
100%

Example

Architecture diagram example

A Mermaid architecture diagram for a browser editor, renderer, and exported PNG file.

Mermaid architecture diagram example showing browser, editor UI, renderer, and PNG file services
Mermaid architecture diagram example showing browser, editor UI, renderer, and PNG file services

Mermaid code

architecture-beta
    group app(cloud)[Mermaid Editor]

    service browser(internet)[Browser] in app
    service editor(server)[Editor UI] in app
    service renderer(server)[Mermaid Renderer] in app
    service file(disk)[PNG File]

    browser:R --> L:editor
    editor:R --> L:renderer
    renderer:B --> T:file

常见使用场景

云基础设施设计

规划 AWS、Azure 或 GCP 部署。在配置之前可视化服务、网络、存储和计算资源。

微服务架构

映射服务边界、API 网关、消息队列和数据存储。记录微服务之间的通信和依赖关系。

系统文档

创建生产系统的活文档。帮助新团队成员理解基础设施和服务拓扑。

安全架构

可视化安全边界、认证流程和网络分段。记录安全控制及其部署位置。

核心功能

服务图标

使用数据库、服务器、云服务和网络组件等常见服务的标准图标。

服务分组

将相关服务分组到命名组中,展示逻辑边界、VPC 或组织单元。

连接类型

使用标签显示服务之间的方向性连接,描述通信协议或数据流。

分层布局

将服务按层排列(展示层、业务逻辑层、数据层),清晰展示架构层级。

最佳实践

展示适当的细节级别

根据受众匹配细节级别。高层管理需要概览图;工程师需要具体的服务细节。

使用标准图标

使用公认的服务和基础设施图标。这使技术受众能立即理解图表。

分组相关服务

使用视觉分组展示服务边界、网络区域或部署环境。

保持更新

架构图与实际偏离时会失去价值。将更新作为部署流程的一部分。

探索其他图表类型

流程图

用节点和方向箭头可视化流程、工作流和算法。非常适合业务流程和决策树。

时序图

记录不同参与者或系统之间的时序交互。非常适合 API 文档和系统设计。

类图

用类、属性和关系建模面向对象系统。软件架构规划的必备工具。

状态图

表示系统或应用程序中的状态转换。非常适合建模生命周期状态和工作流。

甘特图

规划和跟踪项目时间线、任务和依赖关系。非常适合项目管理和进度安排。

ER 图

设计包含实体和关系的数据库架构。非常适合数据库建模和文档编写。

用户旅程图

绘制用户在各个接触点的体验和交互。非常适合用户体验设计和客户旅程分析。

Git 图

可视化 Git 分支策略和提交历史。有助于解释版本控制工作流。

思维导图

组织创意、头脑风暴和创建层次化视觉结构。适合规划和知识管理。

饼图

以圆形图表展示数据比例分布。适合显示百分比和市场份额分析。

时间线

沿时间轴可视化事件和里程碑。适合项目历史和路线图展示。

看板

将任务按工作流阶段组织到列中。适合敏捷项目管理和任务追踪。

四象限图

在双轴网格上绘制项目进行比较和优先级排序。适合功能优先级和战略分析。

桑基图

用比例箭头可视化节点间的流量。适合能源流、预算分配和转化漏斗。

XY 图表

创建带有可自定义坐标轴的柱状图和折线图。适合数据可视化和趋势分析。

块状图

用行列排列的块构建结构化布局。适合系统架构和组件概览。

数据包图

可视化网络协议数据包结构和位级字段布局。适合网络协议文档。