如何用 Mermaid 画块图

2026-03-05 · MermZen 教程

块图用于可视化复杂系统的组件结构、层次关系和连接方式，适合系统架构设计、网络拓扑、工业流程图等场景。Mermaid 使用 blockBeta 关键字声明块图。

声明图表

使用 blockBeta 关键字：

blockBeta
    title 块图标题

基本块定义

创建简单的块和连接：

blockBeta
    title 基本块图
    block "块 A"
    block "块 B"
    block "块 C"

    "块 A" --> "块 B"
    "块 A" --> "块 C"
    "块 B" --> "块 C"

嵌套块结构

创建包含子块的复杂嵌套结构：

blockBeta
    title 嵌套块图
    block "系统" {
        block "子系统 1" {
            block "组件 A"
            block "组件 B"
        }
        block "子系统 2" {
            block "组件 C"
            block "组件 D"
        }
    }

    "组件 A" --> "组件 C"
    "组件 B" --> "组件 D"
    "子系统 1" --> "子系统 2"

完整示例：网络拓扑图

blockBeta
    title 公司网络拓扑
    block "总部网络" {
        block "核心交换机"
        block "服务器集群" {
            block "Web 服务器"
            block "数据库服务器"
            block "应用服务器"
        }
        block "办公网络" {
            block "员工电脑"
            block "打印机"
        }
    }
    block "分支办公室" {
        block "分支交换机"
        block "本地服务器"
        block "员工设备"
    }
    block "互联网"

    "核心交换机" --> "Web 服务器"
    "核心交换机" --> "数据库服务器"
    "核心交换机" --> "应用服务器"
    "核心交换机" --> "员工电脑"
    "核心交换机" --> "打印机"
    "核心交换机" --> "互联网"
    "分支交换机" --> "本地服务器"
    "分支交换机" --> "员工设备"
    "分支交换机" --> "互联网"

速查表

下一步

掌握块图后，继续学习 Mermaid 需求图，用于项目需求管理和分析。

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