Mermaid.js 类图语法指南

什么是类图?

一个类图是一种结构化的UML 图用于可视化面向对象软件系统的静态架构。作为一种不可或缺的UML 图类型,它描绘了应用程序中各个类、接口和数据模型,明确记录它们的内部字段(属性)、操作功能(方法)以及将它们连接在一起的结构关系。这一蓝图对软件工程师至关重要,他们需要将高层次的领域设计转化为清晰、可维护的对象结构。

使用Mermaid.js,你可以使用直观的基于文本的定义来勾勒出你的数据模型和系统服务。布局引擎会自动计算框体大小,构建标准的UML数据区域,并在画布上自动对齐关系箭头,无需任何手动格式化开销。

核心语法指南:元素与结构

要在 Mermaid 中设计出准确且符合标准的 UML 类图,你必须掌握成员声明、访问修饰符以及结构关系箭头。

1. 声明类和类区域

你可以使用两种有效格式来定义一个类。对于简单类,使用class关键字,后接类名。如果你想立即包含字段和方法,请使用尾随的大括号来创建清晰的主体块:

classDiagram
    class UserProfile {
        +String username
        +String email
        +updateEmail(newEmail) void
    }

2. 添加可见性/访问修饰符

为了记录标准的 UML 封装规则,请在属性或方法名称前直接放置特定符号,以定义其可见性级别:

  • + **公共:** 可从任何其他类访问。
  • - **私有:** 仅在声明类内部可访问。
  • # **受保护:** 在类及其子类中可访问。
  • ~ **包 / 内部:** 在同一包边界内可访问。
classDiagram
    class BankAccount {
        -double balance
        #String accountHolder
        +getBalance() double
    }

3. 掌握关系箭头与继承链接

要展示类在 UML 图模型中的交互方式,请使用专门的关系字符串连接它们的 ID。在 Mermaid 中,线条的方向很重要:箭头指向父类或容器类。

  • 继承 / 泛化(虚线或实线箭头): Child --|> Parent(表示“是-一种”关系)。
  • 实现 / 实施: Class ..|> Interface(表示一个类履行了接口契约)。
  • 组合(实心菱形): Child --* Parent(表示严格的所有权关系;如果父类消亡,子类也会消亡)。
  • 聚合(空心菱形): Child --o Parent(表示松散的集合关系;子类可以独立存在)。
  • 依赖: ClassA ..> ClassB(表示临时的运行时引用)。
classDiagram
    Car --|> Vehicle : "继承自"
    Engine --* Car : "是其中的一部分"

清晰类架构布局的最佳实践

  • 视觉上分组类成员:始终将类变量放在主体块的顶部,将函数放在底部。这种布局符合标准 IDE 的类结构,使你的图表立即变得易于阅读。
  • 指定返回类型: 在声明方法时,将返回类型附加到方法行的末尾(例如,+fetchData() DataSet)。这为你的工程团队提供了精确的实现上下文。
  • 保持多重性清晰: 为了表示数组数量或集合大小,请将多重性文本字符串直接附加到关系线包装器上(例如,Customer "1" --o "many" Order).

现实世界中的 Mermaid.js 类图示例

示例 1:支付网关领域子系统(封装与接口)

此功能蓝图建模了一个在线结账领域服务。它展示了如何使用访问修饰符、分组类成员以及清晰地实现接口关系。

classDiagram
    class PaymentProcessor {
        <<interface>>
        +processPayment(amount) boolean
        +refundPayment(txnId) boolean
    }

    class StripeGateway {
        -String apiKey
        -String endpointUrl
        +processPayment(amount) boolean
        +refundPayment(txnId) boolean
        -logTransaction(status) void
    }

    class PayPalGateway {
        -String merchantId
        +processPayment(amount) boolean
        +refundPayment(txnId) boolean
    }

    StripeGateway ..|> PaymentProcessor : "实现"
    PayPalGateway ..|> PaymentProcessor : "实现"

语法解析: 这个 <<interface>> 标签明确将 `PaymentProcessor` 标记为高层级的架构契约。两个具体的网关实现类使用私有字段(-apiKey)来存储敏感凭证,同时公开公共的支付操作(+processPayment),并通过实现箭头(..|>).

示例 2:企业级订单处理引擎(组合与多重性)

此高级系统蓝图映射了一个复杂的电子商务订单管理架构,展示了如何在多个相互关联的类之间记录结构归属关系和对象数量。

classDiagram
    class Customer {
        +int customerId
        +String name
        +placeOrder() Order
    }

    class Order {
        +int orderId
        +Date dateCreated
        -String internalStatus
        +calculateTotal() double
    }

    class OrderItem {
        +int itemId
        +int quantity
        +double pricePerUnit
    }

    class Address {
        +String street
        +String city
        +String postalCode
    }

    Customer "1" --o "many" Order : "拥有"
    OrderItem "1..*" --* "1" Order : "组成"
    Address "1" --> Order : "发货至"

语法分解:此示例说明了聚合与组合之间的区别。实心菱形箭头(--*) 表示 `OrderItem` 与 `Order` 紧密绑定(如果删除订单,其各个明细项也会被销毁)。相反,空心菱形箭头(--o) 表示 `Customer` 拥有多个订单,但这两个实体可以独立存在。多重性字符串(如 "1..*") 定义了系统的关联需求。

滚动至顶部