组件图：接口与依赖

简介 / Introduction

组件图是架构设计中的核心图种之一，用来展示系统内部的模块划分、接口定义和依赖关系。PlantUML 的组件图原生支持 interface、多种箭头样式（实线、虚线、圆点）以及 component 块；Mermaid 通过 class 图的 <<interface>> 标记和类实现关系也能表达相同语义。本文用同一个业务场景——订单服务通过接口调用支付与通知组件——对比两者的语法与渲染效果。

PlantUML 版

@startuml
skinparam componentStyle uml2

component "OrderService" as Order #Orange
component "PaymentGateway" as Pay #LightBlue
component "NotificationSvc" as Notify #LightGreen

interface "IPayable" as IPay
interface "INotifiable" as INotif

Order -- IPay : uses
Order -- INotif : uses
Pay ..|> IPay : implements
Notify ..|> INotif : implements

IPay -[hidden]- INotif
@enduml

说明：componentStyle uml2 启用矩形组件样式；..|> 表示实现关系；隐藏分隔线 -[hidden]- 让两个接口水平对齐而不显示连接箭头。

Mermaid 版

classDiagram
    class Order {
        <<service>>
        +createOrder()
        +pay(amount)
        +notify(msg)
    }
    class IPayable {
        <<interface>>
        +pay(amount)
    }
    class INotifiable {
        <<interface>>
        +notify(msg)
    }
    class PaymentGateway {
        +pay(amount)
    }
    class NotificationSvc {
        +notify(msg)
    }
    Order --> IPayable : uses
    Order --> INotifiable : uses
    PaymentGateway ..> IPayable : implements
    NotificationSvc ..> INotifiable : implements

说明：Mermaid 没有独立的 component 图，用 class 图配合 <<interface>> 标记替代；..> 为虚线箭头（实现）；--> 为实线箭头（依赖）。

对比 / Side-by-side

特性	PlantUML	Mermaid
专属组件图语法	✅ `component` + `interface`	❌ 需用 class 图模拟
接口标记	`interface "Name"`	`<<interface>>` 在 class 内
实现关系	`..\|>`	`..>`
依赖关系	`-->`	`-->`
隐藏分隔线	`-[hidden]-`	不支持，需 CSS 调整

小结 / Wrap-up

PlantUML 组件图对接口和依赖的表达更直观，Mermaid 则借助 class 图的 <<interface>> 约定来近似实现。两者均可清晰展示组件间的契约关系；实际选型取决于团队工具链和是否需要完整的组件图专属符号（如 port、folder 等）。若文档需在纯 Markdown 环境渲染，Mermaid 更具普适性；若追求架构图的专业度，PlantUML 组件图是更完整的选择。