Diagramming Practice for System Design

“Make copies, young man, many copies. You can only become a good artist by copying the masters.” — Jean-Auguste-Dominique Ingres

“It’s not aping or slavish emulation to immerse ourselves in the works of the masters to the point of copying them line-for-line. The masters did it themselves, studying earlier masters.” — Steven Pressfield

---

I have been studying system design and figured that one of the more essential activities in system design is creating diagrams.

Creating diagrams reminds me of UML. I tried to learn UML a decade ago, but because I have not put into constant use what I learned, it has faded into oblivion.*

But now that I have the need to create diagrams, I have to relearn UML. Along with it, I need to familiarize myself with this newer diagramming approach called The C4 Model which I encountered while exploring the GitHub repository “Modular Monolith with DDD”.

Based on my own experience and the experiences of others, a good thing to do when learning something is to copy the masters. So that’s what I will do with regards to diagramming — imitate the C4 and UML diagrams made by the masters. I’ll be posting in this blog the resulting works.

---

1. System Context Diagram for Internet Banking System

Copied from Simon Brown’s slides for his talk “Visualising software architecture with the C4 model”

---

2. Component Diagram for Internet Banking System

Copied from Simon Brown’s slides for his talk “Visualising software architecture with the C4 model”

---

3. Streamy Domain Model

From the book “Creating Software with Modern Diagramming Techniques: Build Better Software with Mermaid” by Ashley Peacock

---
title: Streamy Domain Model
---
classDiagram
    Title "1..*" -- "1..*" Genre: is associated with
    Title "1" *-- "0..*" Season: has
    Title "1" *-- "0..*" Review: has
    Title "0..*" o-- "1..*" Actor: has
    TV Show --|> Title: implements
    Short --|> Title: implements
    Film --|> Title: implements
    Viewer "0..*" --> "0..*" Title: watches
    Season "1" *-- "0..*" Review: has
    Season "1" *-- "1..*" Episode: has
    Episode "1" *-- "0..*" Review: has

---
title: User Sign Up Flow
---
sequenceDiagram
    autonumber
    actor Browser
    participant Sign Up Service
    participant User Service
    participant Kafka
    
    Browser->>Sign Up Service: GET /sign_up
    activate Sign Up Service
    Sign Up Service-->>Browser: 200 OK (HTML page)
    deactivate Sign Up Service
    
    Browser->>+Sign Up Service: POST /sign_up
    Sign Up Service->>Sign Up Service: Validate input
    
    alt invalid input
        Sign Up Service-->>Browser: Error
    else valid input
        Sign Up Service->>+User Service: POST /users
        User Service--)Kafka: User Created Event Published
        Note left of Kafka: other services take action based on this event
        User Service-->>-Sign Up Service: 201 Created (User)
        Note over User Service, Kafka: sample note spanning two nodes, sample note spanning two nodes
        Sign Up Service-->>-Browser: 301 Redirect (Login page)
    end

---