Skill Tracer
Skills › Scientific Agent Skills › markdown-mermaid-writing › class.md

class.md

251 lines · skills/markdown-mermaid-writing/references/diagrams/class.md at 5f2bc03

Open on GitHub

Most marks come from matching words in the file, so treat them as pointers.

1<!-- Source: https://github.com/SuperiorByteWorks-LLC/agent-project | License: Apache-2.0 | Author: Clayton Young / Superior Byte Works, LLC (Boreal Bytes) -->
2
3# Class Diagram
4
5> **Back to [Style Guide](../mermaid_style_guide.md)** — Read the style guide first for emoji, color, and accessibility rules.
6
7**Syntax keyword:** `classDiagram`
8**Best for:** Object-oriented design, type hierarchies, interface contracts, domain models
9**When NOT to use:** Database schemas (use [ER](er.md)), runtime behavior (use [Sequence](sequence.md))
11---

<!-- Source: https://github.com/SuperiorByteWorks-LLC/agent-project | License: Apache-2.0 | Author: Clayton Young / Superior Byte Works, LLC (Boreal Bytes) -->

Class Diagram

Back to Style Guide — Read the style guide first for emoji, color, and accessibility rules.

Syntax keyword: classDiagram Best for: Object-oriented design, type hierarchies, interface contracts, domain models When NOT to use: Database schemas (use ER), runtime behavior (use Sequence)


Raw lines 1 to 12
13## Exemplar Diagram
15```mermaid
16classDiagram
17 accTitle: Payment Processing Class Hierarchy
18 accDescr: Interface and abstract base class with two concrete implementations for credit card and digital wallet payment processing
20 class PaymentProcessor {
21 <<interface>>
22 +processPayment(amount) bool
23 +refund(transactionId) bool
24 +getStatus(transactionId) string
25 }
27 class BaseProcessor {
28 <<abstract>>
29 #apiKey: string
30 #timeout: int
31 +validateAmount(amount) bool
32 #logTransaction(tx) void
33 }
35 class CreditCardProcessor {
36 -gateway: string
37 +processPayment(amount) bool
38 +refund(transactionId) bool
39 -tokenizeCard(card) string
40 }
42 class DigitalWalletProcessor {
43 -provider: string
44 +processPayment(amount) bool
45 +refund(transactionId) bool
46 -initiateHandshake() void
47 }
49 PaymentProcessor <|.. BaseProcessor : implements
50 BaseProcessor <|-- CreditCardProcessor : extends
51 BaseProcessor <|-- DigitalWalletProcessor : extends
53 style PaymentProcessor fill:#ede9fe,stroke:#7c3aed,stroke-width:2px,color:#3b0764
54 style BaseProcessor fill:#dbeafe,stroke:#2563eb,stroke-width:2px,color:#1e3a5f
55 style CreditCardProcessor fill:#dcfce7,stroke:#16a34a,stroke-width:2px,color:#14532d
56 style DigitalWalletProcessor fill:#dcfce7,stroke:#16a34a,stroke-width:2px,color:#14532d
57```
59---

Exemplar Diagram

classDiagram
    accTitle: Payment Processing Class Hierarchy
    accDescr: Interface and abstract base class with two concrete implementations for credit card and digital wallet payment processing

    class PaymentProcessor {
        <<interface>>
        +processPayment(amount) bool
        +refund(transactionId) bool
        +getStatus(transactionId) string
    }

    class BaseProcessor {
        <<abstract>>
        #apiKey: string
        #timeout: int
        +validateAmount(amount) bool
        #logTransaction(tx) void
    }

    class CreditCardProcessor {
        -gateway: string
        +processPayment(amount) bool
        +refund(transactionId) bool
        -tokenizeCard(card) string
    }

    class DigitalWalletProcessor {
        -provider: string
        +processPayment(amount) bool
        +refund(transactionId) bool
        -initiateHandshake() void
    }

    PaymentProcessor <|.. BaseProcessor : implements
    BaseProcessor <|-- CreditCardProcessor : extends
    BaseProcessor <|-- DigitalWalletProcessor : extends

    style PaymentProcessor fill:#ede9fe,stroke:#7c3aed,stroke-width:2px,color:#3b0764
    style BaseProcessor fill:#dbeafe,stroke:#2563eb,stroke-width:2px,color:#1e3a5f
    style CreditCardProcessor fill:#dcfce7,stroke:#16a34a,stroke-width:2px,color:#14532d
    style DigitalWalletProcessor fill:#dcfce7,stroke:#16a34a,stroke-width:2px,color:#14532d

Raw lines 13 to 60
61## Tips
63- Use `<<interface>>` and `<<abstract>>` stereotypes for clarity
64- Show visibility: `+` public, `-` private, `#` protected
65- Keep to **4–6 classes** per diagram — split larger hierarchies
66- Use `style ClassName fill:...,stroke:...,color:...` for light semantic coloring:
67 - 🟣 Purple for interfaces/abstractions
68 - 🔵 Blue for base/abstract classes
69 - 🟢 Green for concrete implementations
70- Relationship arrows:
71 - `<|--` inheritance (extends)
72 - `<|..` implementation (implements)
73 - `*--` composition · `o--` aggregation · `-->` directed association · `..>` dependency
75---

Tips

  • Use <<interface>> and <<abstract>> stereotypes for clarity
  • Show visibility: + public, - private, # protected
  • Keep to 4–6 classes per diagram — split larger hierarchies
  • Use style ClassName fill:...,stroke:...,color:... for light semantic coloring:
  • 🟣 Purple for interfaces/abstractions
  • 🔵 Blue for base/abstract classes
  • 🟢 Green for concrete implementations
  • Relationship arrows:
  • <|-- inheritance (extends)
  • <|.. implementation (implements)
  • *-- composition · o-- aggregation · --> directed association · ..> dependency

Raw lines 61 to 76
77## Template
79```mermaid
80classDiagram
81 accTitle: Your Title Here
82 accDescr: Describe the class hierarchy and the key relationships between types
84 class InterfaceName {
85 <<interface>>
86 +methodOne() ReturnType
87 +methodTwo(param) ReturnType
88 }
90 class ConcreteClass {
91 -privateField: Type
92 +methodOne() ReturnType
93 +methodTwo(param) ReturnType
94 }
96 InterfaceName <|.. ConcreteClass : implements
97```
99---

Template

classDiagram
    accTitle: Your Title Here
    accDescr: Describe the class hierarchy and the key relationships between types

    class InterfaceName {
        <<interface>>
        +methodOne() ReturnType
        +methodTwo(param) ReturnType
    }

    class ConcreteClass {
        -privateField: Type
        +methodOne() ReturnType
        +methodTwo(param) ReturnType
    }

    InterfaceName <|.. ConcreteClass : implements

Raw lines 77 to 100
101## Complex Example
103An event-driven notification platform with 11 classes organized into 3 `namespace` groups — core orchestration, delivery channels, and data models. Shows interface implementation, composition, and dependency relationships across layers.
105```mermaid
106classDiagram
107 accTitle: Event-Driven Notification Platform
108 accDescr: Multi-namespace class hierarchy for a notification system showing core orchestration, four delivery channel implementations, and supporting data models with composition and dependency relationships
110 namespace Core {
111 class NotificationService {
112 -queue: NotificationQueue
113 -registry: ChannelRegistry
114 +dispatch(notification) bool
115 +scheduleDelivery(notification, time) void
116 +getDeliveryStatus(id) DeliveryStatus
117 }
119 class NotificationQueue {
120 -pending: List~Notification~
121 -maxRetries: int
122 +enqueue(notification) void
123 +dequeue() Notification
124 +retry(attempt) bool
125 }
127 class ChannelRegistry {
128 -channels: Map~string, Channel~
129 +register(name, channel) void
130 +resolve(type) Channel
131 +healthCheck() Map~string, bool~
132 }
133 }
135 namespace Channels {
136 class Channel {
137 <<interface>>
138 +send(notification, recipient) DeliveryAttempt
139 +getStatus(attemptId) DeliveryStatus
140 +validateRecipient(recipient) bool
141 }
143 class EmailChannel {
144 -smtpHost: string
145 -templateEngine: TemplateEngine
146 +send(notification, recipient) DeliveryAttempt
147 +getStatus(attemptId) DeliveryStatus
148 +validateRecipient(recipient) bool
149 }
151 class SMSChannel {
152 -provider: string
153 -rateLimit: int
154 +send(notification, recipient) DeliveryAttempt
155 +getStatus(attemptId) DeliveryStatus
156 +validateRecipient(recipient) bool
157 }
159 class PushChannel {
160 -firebaseKey: string
161 -apnsKey: string
162 +send(notification, recipient) DeliveryAttempt
163 +getStatus(attemptId) DeliveryStatus
164 +validateRecipient(recipient) bool
165 }
167 class WebhookChannel {
168 -signingSecret: string
169 -timeout: int
170 +send(notification, recipient) DeliveryAttempt
171 +getStatus(attemptId) DeliveryStatus
172 +validateRecipient(recipient) bool
173 }
174 }
176 namespace Models {
177 class Notification {
178 +id: uuid
179 +channel: string
180 +subject: string
181 +body: string
182 +priority: string
183 +createdAt: timestamp
184 }
186 class Recipient {
187 +id: uuid
188 +email: string
189 +phone: string
190 +deviceTokens: List~string~
191 +preferences: Map~string, bool~
192 }
194 class DeliveryAttempt {
195 +id: uuid
196 +notificationId: uuid
197 +recipientId: uuid
198 +status: DeliveryStatus
199 +attemptNumber: int
200 +sentAt: timestamp
201 }
203 class DeliveryStatus {
204 <<enumeration>>
205 QUEUED
206 SENDING
207 DELIVERED
208 FAILED
209 BOUNCED
210 }
211 }
213 NotificationService *-- NotificationQueue : contains
214 NotificationService *-- ChannelRegistry : contains
215 ChannelRegistry --> Channel : resolves
217 Channel <|.. EmailChannel : implements
218 Channel <|.. SMSChannel : implements
219 Channel <|.. PushChannel : implements
220 Channel <|.. WebhookChannel : implements
222 Channel ..> Notification : receives
223 Channel ..> Recipient : delivers to
224 Channel ..> DeliveryAttempt : produces
226 DeliveryAttempt --> DeliveryStatus : has
228 style Channel fill:#ede9fe,stroke:#7c3aed,stroke-width:2px,color:#3b0764
229 style DeliveryStatus fill:#ede9fe,stroke:#7c3aed,stroke-width:2px,color:#3b0764
230 style NotificationService fill:#dbeafe,stroke:#2563eb,stroke-width:2px,color:#1e3a5f
231 style NotificationQueue fill:#dbeafe,stroke:#2563eb,stroke-width:2px,color:#1e3a5f
232 style ChannelRegistry fill:#dbeafe,stroke:#2563eb,stroke-width:2px,color:#1e3a5f
233 style EmailChannel fill:#dcfce7,stroke:#16a34a,stroke-width:2px,color:#14532d
234 style SMSChannel fill:#dcfce7,stroke:#16a34a,stroke-width:2px,color:#14532d
235 style PushChannel fill:#dcfce7,stroke:#16a34a,stroke-width:2px,color:#14532d
236 style WebhookChannel fill:#dcfce7,stroke:#16a34a,stroke-width:2px,color:#14532d
237 style Notification fill:#f3f4f6,stroke:#6b7280,stroke-width:2px,color:#1f2937
238 style Recipient fill:#f3f4f6,stroke:#6b7280,stroke-width:2px,color:#1f2937
239 style DeliveryAttempt fill:#f3f4f6,stroke:#6b7280,stroke-width:2px,color:#1f2937
240```

Complex Example

An event-driven notification platform with 11 classes organized into 3 namespace groups — core orchestration, delivery channels, and data models. Shows interface implementation, composition, and dependency relationships across layers.

classDiagram
    accTitle: Event-Driven Notification Platform
    accDescr: Multi-namespace class hierarchy for a notification system showing core orchestration, four delivery channel implementations, and supporting data models with composition and dependency relationships

    namespace Core {
        class NotificationService {
            -queue: NotificationQueue
            -registry: ChannelRegistry
            +dispatch(notification) bool
            +scheduleDelivery(notification, time) void
            +getDeliveryStatus(id) DeliveryStatus
        }

        class NotificationQueue {
            -pending: List~Notification~
            -maxRetries: int
            +enqueue(notification) void
            +dequeue() Notification
            +retry(attempt) bool
        }

        class ChannelRegistry {
            -channels: Map~string, Channel~
            +register(name, channel) void
            +resolve(type) Channel
            +healthCheck() Map~string, bool~
        }
    }

    namespace Channels {
        class Channel {
            <<interface>>
            +send(notification, recipient) DeliveryAttempt
            +getStatus(attemptId) DeliveryStatus
            +validateRecipient(recipient) bool
        }

        class EmailChannel {
            -smtpHost: string
            -templateEngine: TemplateEngine
            +send(notification, recipient) DeliveryAttempt
            +getStatus(attemptId) DeliveryStatus
            +validateRecipient(recipient) bool
        }

        class SMSChannel {
            -provider: string
            -rateLimit: int
            +send(notification, recipient) DeliveryAttempt
            +getStatus(attemptId) DeliveryStatus
            +validateRecipient(recipient) bool
        }

        class PushChannel {
            -firebaseKey: string
            -apnsKey: string
            +send(notification, recipient) DeliveryAttempt
            +getStatus(attemptId) DeliveryStatus
            +validateRecipient(recipient) bool
        }

        class WebhookChannel {
            -signingSecret: string
            -timeout: int
            +send(notification, recipient) DeliveryAttempt
            +getStatus(attemptId) DeliveryStatus
            +validateRecipient(recipient) bool
        }
    }

    namespace Models {
        class Notification {
            +id: uuid
            +channel: string
            +subject: string
            +body: string
            +priority: string
            +createdAt: timestamp
        }

        class Recipient {
            +id: uuid
            +email: string
            +phone: string
            +deviceTokens: List~string~
            +preferences: Map~string, bool~
        }

        class DeliveryAttempt {
            +id: uuid
            +notificationId: uuid
            +recipientId: uuid
            +status: DeliveryStatus
            +attemptNumber: int
            +sentAt: timestamp
        }

        class DeliveryStatus {
            <<enumeration>>
            QUEUED
            SENDING
            DELIVERED
            FAILED
            BOUNCED
        }
    }

    NotificationService *-- NotificationQueue : contains
    NotificationService *-- ChannelRegistry : contains
    ChannelRegistry --> Channel : resolves

    Channel <|.. EmailChannel : implements
    Channel <|.. SMSChannel : implements
    Channel <|.. PushChannel : implements
    Channel <|.. WebhookChannel : implements

    Channel ..> Notification : receives
    Channel ..> Recipient : delivers to
    Channel ..> DeliveryAttempt : produces

    DeliveryAttempt --> DeliveryStatus : has

    style Channel fill:#ede9fe,stroke:#7c3aed,stroke-width:2px,color:#3b0764
    style DeliveryStatus fill:#ede9fe,stroke:#7c3aed,stroke-width:2px,color:#3b0764
    style NotificationService fill:#dbeafe,stroke:#2563eb,stroke-width:2px,color:#1e3a5f
    style NotificationQueue fill:#dbeafe,stroke:#2563eb,stroke-width:2px,color:#1e3a5f
    style ChannelRegistry fill:#dbeafe,stroke:#2563eb,stroke-width:2px,color:#1e3a5f
    style EmailChannel fill:#dcfce7,stroke:#16a34a,stroke-width:2px,color:#14532d
    style SMSChannel fill:#dcfce7,stroke:#16a34a,stroke-width:2px,color:#14532d
    style PushChannel fill:#dcfce7,stroke:#16a34a,stroke-width:2px,color:#14532d
    style WebhookChannel fill:#dcfce7,stroke:#16a34a,stroke-width:2px,color:#14532d
    style Notification fill:#f3f4f6,stroke:#6b7280,stroke-width:2px,color:#1f2937
    style Recipient fill:#f3f4f6,stroke:#6b7280,stroke-width:2px,color:#1f2937
    style DeliveryAttempt fill:#f3f4f6,stroke:#6b7280,stroke-width:2px,color:#1f2937
Raw lines 101 to 241
Starts an agent dispatch :114
242### Why this works
244- **3 namespaces mirror architectural layers** — Core (orchestration), Channels (delivery implementations), Models (data). A developer can scan one namespace without reading the others.
245- **Color encodes the role** — purple for interfaces/enums, blue for core services, green for concrete implementations, gray for data models. The pattern is instantly recognizable.
246- **Relationship types are deliberate** — composition (`*--`) for "owns and manages", implementation (`<|..`) for "fulfills contract", dependency (`..>`) for "uses at runtime". Each arrow type carries meaning.

Why this works

  • 3 namespaces mirror architectural layers — Core (orchestration), Channels (delivery implementations), Models (data). A developer can scan one namespace without reading the others.
  • Color encodes the role — purple for interfaces/enums, blue for core services, green for concrete implementations, gray for data models. The pattern is instantly recognizable.
  • Relationship types are deliberate — composition (*--) for "owns and manages", implementation (<|..) for "fulfills contract", dependency (..>) for "uses at runtime". Each arrow type carries meaning.
Raw lines 242 to 248
249## Verified reference
251Syntax examples reviewed against [official Mermaid documentation](https://mermaid.js.org/syntax/classDiagram.html) and rendered with Mermaid 12.0.0 (2026-10-01). Check the destination version; appearance and accessibility are not guaranteed by a successful parse.

Verified reference

Syntax examples reviewed against official Mermaid documentation and rendered with Mermaid 12.0.0 (2026-10-01). Check the destination version; appearance and accessibility are not guaranteed by a successful parse.

Raw lines 249 to 251