Component diagrams: interfaces and dependencies

简介 / Introduction

Component diagrams are a core part of architecture documentation, showing module boundaries, interface contracts, and dependency relationships. PlantUML has native component and interface syntax with multiple arrow styles; Mermaid simulates the same using class diagrams with <<interface>> markers. This article contrasts both engines using a single scenario — an OrderService depending on PaymentGateway and NotificationSvc via typed interfaces.

PlantUML Version

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

@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 switches to rectangular component boxes; ..|> denotes implementation; the hidden separator -[hidden]- aligns the two interfaces horizontally without drawing a visible arrow.

Mermaid Version

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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 has no dedicated component diagram — <<interface>> inside a class declaration is the conventional substitute; ..> draws a dashed arrow (implements) and --> draws a solid arrow (dependency).

对比 / Side-by-side

小结 / Wrap-up

PlantUML’s component diagram is purpose-built for interface and dependency visualization, making the diagram semantically precise. Mermaid achieves the same visual outcome via class diagrams with <<interface>> conventions, trading specificity for broader Markdown compatibility. Choose PlantUML for architecture-grade diagrams with full component notation; choose Mermaid when the diagram must render in any Markdown environment without a dedicated PlantUML server.