Creating Software with Modern Diagramming Techniques

Ashley Peacock

Pragmatic Bookshelf

This should be a fun little book about creating diagrams with Mermaid.

Mermaid is just a markdown or plain text tool that generates images of diagrams. It has a really simple syntax like this:

flowchart LR
    a --> b & c--> d

You can make UML class diagrams with different associations:

classDiagram
    Title -- Genre
    Title *-- Season
    Title *-- Review
    Title o-- Actor

    Season *-- Episode

	TV Show --|> Title

That would create relationships as o-- aggregates, or *-- compositions, or --|> generalizations, etc.

  • Association: simple relationship with one entity having a reference to another
  • Aggregations: more direct relationship, but they can still exist independently
  • Compositions: when one entity owns the other entity
  • Generalizations: when one entity inherits another, like Animal -> Cat, Dog

Next up is sequence diagrams, these are used to describe actors and flows in the system.

sequenceDiagram
    actor Browser
    participant Sign Up Service
    participant User Service
    participant Kafka

Sequence diagrams are used to describe messages between systems:

sequenceDiagram
    actor Browser
    participant Sign Up Service

    Browser->>Sign Up Service: GET /sign_up
    Sign Up Service-->>Browser: 200 OK (HTML page)

Next up is C4 Diagrams, which consists of 4 parts for Context, Container, Component, and Code. Each part of the C4 diagram has more detail than the last. For each of these diagrams the author recommends using flow charts.

Databases can be done with entity relationship diagrams:

erDiagram
TITLE {
    int id PK
    int type_id FK "this is a comment"
    string name
    datetime release_date
}

And the rest of the book covers how to render Mermaid diagrams on different platforms.