Advanced Diagrams: ER, State, Gantt & More

🔄 You’ve mastered flowcharts (Lesson 3) and sequence diagrams (Lesson 4) — the two most common diagram types. Now let’s cover the rest: ER diagrams for databases, state diagrams for lifecycle modeling, Gantt charts for timelines, and a quick tour of class diagrams and mind maps.

Entity-Relationship (ER) Diagrams

Use when: You need to model database tables, columns, and relationships.

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : "appears in"
    CUSTOMER {
        int id PK
        string name
        string email
    }
    ORDER {
        int id PK
        date created_at
        string status
    }
    LINE_ITEM {
        int quantity
        float price
    }
    PRODUCT {
        int id PK
        string name
        float price
    }

Relationship Syntax

The symbols between entities define cardinality:

Read left to right: CUSTOMER ||--o{ ORDER means “one customer places zero or many orders.”

Attributes

Inside the curly braces, list column type, name, and optionally PK (primary key) or FK (foreign key):

ENTITY {
    int id PK
    string name
    int parent_id FK
}

✅ Quick Check: A blog database has Users, Posts, and Comments. A user writes many posts. A post has many comments. A user writes many comments. Sketch the relationships using ||--o{ notation. (USER ||–o{ POST : writes, POST ||–o{ COMMENT : has, USER ||–o{ COMMENT : writes.)

State Diagrams

Use when: You need to show the lifecycle states of an entity and what triggers transitions.

stateDiagram-v2
    [*] --> Draft
    Draft --> Review : Submit
    Review --> Approved : Approve
    Review --> Draft : Request Changes
    Approved --> Published : Publish
    Published --> Archived : Archive
    Archived --> [*]

[*] represents the start and end states. Arrows show transitions, labels show the triggering event.

Composite States

States can contain sub-states:

stateDiagram-v2
    [*] --> Active
    state Active {
        [*] --> Idle
        Idle --> Processing : New Request
        Processing --> Idle : Complete
    }
    Active --> Suspended : Suspend
    Suspended --> Active : Resume
    Active --> [*] : Terminate

The “Active” state has its own internal lifecycle (Idle ↔ Processing) while also participating in the outer lifecycle.

When State Diagrams Beat Flowcharts

An order can be Draft, Submitted, Shipped, Delivered, Returned. Those are states. The transitions (events) between them are what a state diagram captures elegantly.

Gantt Charts

Use when: You need to show tasks on a timeline with dependencies, milestones, and phases.

gantt
    title Project Launch Timeline
    dateFormat YYYY-MM-DD
    section Design
        Wireframes       :a1, 2026-03-01, 5d
        UI Mockups       :a2, after a1, 4d
        Design Review    :milestone, a3, after a2, 0d
    section Development
        Frontend         :b1, after a3, 10d
        Backend API      :b2, after a3, 12d
        Integration      :b3, after b1, 5d
    section Launch
        QA Testing       :c1, after b3, 5d
        Deploy           :c2, after c1, 2d

Key Gantt Syntax

• taskName : id, startDate, duration — Define a task
• after id — Start after another task completes (dependency)
• milestone — A zero-duration checkpoint
• section — Group tasks into phases
• Durations: 5d (days), 2w (weeks), 1h (hours)

Gantt charts in Mermaid aren’t as feature-rich as dedicated project management tools, but they’re perfect for documentation — a visual timeline in your README that stays version-controlled.

✅ Quick Check: Your Gantt chart has “QA Testing” starting on a fixed date, but development might slip. How should you define the start time instead? (Use after dev_task_id instead of a fixed date. Dependencies keep the timeline realistic — if development slips, QA automatically shifts.)

Class Diagrams

Use when: You need to show the structure of object-oriented code — classes, properties, methods, and inheritance.

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound() void
    }
    class Dog {
        +String breed
        +fetch() void
    }
    class Cat {
        +bool isIndoor
        +purr() void
    }
    Animal <|-- Dog
    Animal <|-- Cat

Relationship types: <|-- inheritance, *-- composition, o-- aggregation, --> association. Visibility: + public, - private, # protected.

Class diagrams are most useful for software documentation — showing how your code is structured at a high level.

Mind Maps

Use when: You need to brainstorm or organize ideas hierarchically.

mindmap
    root((Project Ideas))
        Mobile App
            iOS
            Android
            Cross-platform
        Web Platform
            Dashboard
            Public API
            Docs Site
        Infrastructure
            CI/CD
            Monitoring
            Cloud Setup

Mind maps are the simplest diagram type — just indentation defines the hierarchy. They’re great for brainstorming sessions, feature planning, and knowledge organization.

Choosing the Right Diagram

When in doubt, start with a flowchart. If you find yourself drawing multiple participants exchanging messages, switch to a sequence diagram. If you’re modeling states and transitions, switch to a state diagram.

Key Takeaways

• ER diagrams model database tables, columns, and relationships with cardinality symbols
• State diagrams show entity lifecycle: states, transitions, and triggering events — use them when you care about “what states can this be in?”
• Gantt charts model tasks on timelines with dependencies — use after for realistic scheduling
• Class diagrams show object-oriented structure: classes, inheritance, composition
• Mind maps organize hierarchical ideas with simple indentation
• Match the diagram type to your question — the wrong diagram type makes information harder to understand, not easier

Up Next

You know the syntax for 7+ diagram types. In Lesson 6, we’ll add the AI multiplier — how to use ChatGPT, Claude, and Gemini to generate Mermaid diagrams from natural language descriptions, and techniques for iterating on AI-generated diagrams.