如何用 Mermaid 画架构图

2026-03-05 · MermZen 教程

架构图用于可视化系统架构、组件关系、部署模式等，适合系统设计、架构评审、技术文档等场景。Mermaid 使用 architectureBeta 关键字声明架构图。

声明图表

使用 architectureBeta 关键字：

architectureBeta
    title 系统架构图

在 MermZen 中试试 →

组件定义

定义系统组件，包括服务、数据库、外部系统等：

architectureBeta
    title 基础架构组件
    container "前端应用" {
        component "用户界面"
        component "API 调用"
    }
    container "后端服务" {
        component "业务逻辑"
        component "数据访问"
    }
    database "数据库" {
        component "用户数据"
        component "业务数据"
    }
    system "外部支付系统"

在 MermZen 中试试 →

连接关系

定义组件之间的连接和依赖关系：

architectureBeta
    title 组件关系图
    container "前端应用" {
        component "用户界面"
        component "API 调用"
    }
    container "后端服务" {
        component "业务逻辑"
        component "数据访问"
    }
    database "数据库" {
        component "用户数据"
        component "业务数据"
    }
    system "外部支付系统"

    "用户界面" --> "API 调用"
    "API 调用" --> "业务逻辑"
    "业务逻辑" --> "数据访问"
    "数据访问" --> "用户数据"
    "数据访问" --> "业务数据"
    "业务逻辑" --> "外部支付系统"

在 MermZen 中试试 →

完整示例：微服务架构

architectureBeta
    title 电商系统微服务架构
    container "用户界面层" {
        component "Web 端"
        component "移动端"
        component "管理后台"
    }
    container "API 网关" {
        component "请求路由"
        component "身份验证"
        component "限流熔断"
    }
    container "业务服务层" {
        component "用户服务"
        component "产品服务"
        component "订单服务"
        component "支付服务"
        component "库存服务"
    }
    database "数据存储" {
        component "MySQL 主库"
        component "MySQL 从库"
        component "Redis 缓存"
    }
    system "外部系统" {
        component "支付宝"
        component "微信支付"
        component "物流系统"
    }

    "Web 端" --> "API 网关"
    "移动端" --> "API 网关"
    "管理后台" --> "API 网关"

    "API 网关" --> "用户服务"
    "API 网关" --> "产品服务"
    "API 网关" --> "订单服务"
    "API 网关" --> "支付服务"
    "API 网关" --> "库存服务"

    "用户服务" --> "MySQL 主库"
    "用户服务" --> "Redis 缓存"
    "产品服务" --> "MySQL 主库"
    "产品服务" --> "Redis 缓存"
    "订单服务" --> "MySQL 主库"
    "库存服务" --> "MySQL 主库"

    "支付服务" --> "支付宝"
    "支付服务" --> "微信支付"
    "订单服务" --> "物流系统"

在 MermZen 中试试 →

速查表

语法	功能
`architectureBeta`	声明架构图
`title 标题`	设置图表标题
`container "名称" { ... }`	定义容器组件
`component "名称"`	定义内部组件
`database "名称" { ... }`	定义数据库组件
`system "名称"`	定义外部系统
`"组件1" --> "组件2"`	定义组件之间的连接
`%% 注释`	行注释

下一步

掌握架构图后，继续学习 Mermaid 块图，用于更复杂的系统架构和流程图可视化。

如果您想在 MermZen 中尝试上述代码，可以点击在线编辑器，然后将代码粘贴进去。