如何用Mermaid代码生成清晰的网络拓扑图？

Question

**如何用Mermaid代码生成清晰的网络拓扑图？** 使用Mermaid绘制网络拓扑图时，如何合理组织节点与连接关系，使图形结构清晰、层级分明？

Answer 1

一、Mermaid 简介与网络拓扑图绘制基础

Mermaid 是一种基于文本的图表绘制工具，支持多种图形类型，其中 graph TD（从上到下）和 graph LR（从左到右）是绘制网络拓扑图的常用结构。

网络拓扑图的核心在于节点（设备）与连接（链路）之间的关系。合理组织这些元素，有助于提升图示的可读性和逻辑性。

graph TD
    A[核心交换机] --> B[接入交换机1]
    A --> C[接入交换机2]
    B --> D[服务器1]
    B --> E[服务器2]
    C --> F[服务器3]
  

上图展示了一个简单的分层结构，核心层连接接入层，接入层再连接服务器节点。

二、节点命名与层级结构设计

清晰的节点命名是构建可读性强的拓扑图的基础。建议使用设备类型+编号的方式，例如：SW-Core-01、FW-01等。

层级结构应体现网络的物理或逻辑分层，例如：

• 核心层（Core Layer）
• 分布层（Distribution Layer）
• 接入层（Access Layer）
• 终端设备（End Devices）

graph TD
    Core[SW-Core-01] --> Dist1[SW-Dist-01]
    Core --> Dist2[SW-Dist-02]
    Dist1 --> Acc1[SW-Access-01]
    Dist1 --> Acc2[SW-Access-02]
    Dist2 --> Acc3[SW-Access-03]
    Acc1 --> PC1[PC-01]
    Acc2 --> PC2[PC-02]
    Acc3 --> PC3[PC-03]
  

通过层级缩进，可以清晰地表达设备之间的隶属关系。

三、连接关系与方向控制

Mermaid 支持多种连接线类型，如：

符号	说明
-->	单向箭头
<-->	双向箭头
---	无箭头连线

合理使用这些符号可以表达网络中设备间的通信方向，如防火墙与核心交换机之间通常使用双向连接：

graph TD
    FW[Firewall] <--> Core[Core Switch]
    Core --> Dist[Distribution Switch]
    Dist --> Access[Access Switch]
    Access --> Server[Web Server]
  

四、样式优化与节点分组

Mermaid 支持为节点设置不同的样式，以增强可读性。例如，使用 classDef 自定义设备类型样式：

graph TD
    classDef core fill:#f9f,stroke:#333;
    classDef access fill:#9cf,stroke:#333;

    Core[Core Switch] --> Dist[Distribution Switch]
    Dist --> Access[Access Switch]
    Access --> PC[PC-01]

    class Core core
    class Access,PC access
  

通过颜色区分核心设备与接入设备，有助于快速识别网络结构。

五、复杂拓扑与子图结构

对于大型网络，可以使用 Mermaid 的 subgraph 功能组织子拓扑：

graph TD
    subgraph 数据中心
        Core[Core Switch] --> Dist[Distribution Switch]
        Dist --> Acc[Access Switch]
        Acc --> Web[Web Server]
        Acc --> DB[DB Server]
    end

    subgraph 分支办公室
        Branch[Branch Router] --> Firewall[Firewall]
        Firewall --> PC[PC-01]
    end

    Core <--> Branch
  

使用子图可以将网络划分为多个逻辑区域，增强整体结构的清晰度。