Mermaid Exercises

Exercise 1 — Flowchart

Create:

Start
  ↓
Enter credentials
  ↓
Check credentials
  ├── Yes → Login success
  └── No  → Error

Solution

flowchart TD
    Start --> Input[Enter credentials]
    Input --> Check{Credentials OK?}
    Check -->|Yes| Success[Login successful]
    Check -->|No| Error[Show error]

Exercise 2 — Sequence Diagram

Model:

User → Authentication Service → Success/Error

Solution

sequenceDiagram
    participant User
    participant Auth as AuthService

    User->>Auth: Login(username, password)
    Auth-->>User: Success or Error

Exercise 3 — Class Diagram

Create a library containing many books.

Solution

classDiagram
    class Library {
        +String name
    }

    class Book {
        +String title
    }

    Library "1" o-- "*" Book : contains

Exercise 4 — State Diagram

Create a door with Closed and Open states.

Solution

stateDiagram-v2
    [*] --> Closed
    Closed --> Open : open
    Open --> Closed : close

Exercise 5 — ER Diagram

Create a blog where one user writes many posts.

Solution

erDiagram
    USER ||--o{ POST : writes

    USER {
        int id PK
        string username
    }

    POST {
        int id PK
        string title
    }

Exercise 6 — Gantt Chart

Create three sequential tasks:

Design — 2 days
Build — 5 days
Test — 3 days

Solution

gantt
    title Project Plan
    dateFormat YYYY-MM-DD

    section Phase 1
    Design :done, 2024-01-01, 2d
    Build  :active, after Design, 5d
    Test   :crit, after Build, 3d

Exercise 7 — Pie Chart

Create:

A = 10
B = 20
C = 5

Solution

pie
    title Exam Grades
    "A" : 10
    "B" : 20
    "C" : 5

Exercise 8 — Requirement

Create a login requirement with:

type: interfaceRequirement
risk: Medium
verification: Test

Solution

requirementDiagram
    interfaceRequirement LoginReq {
        id: R_Login
        text: "User must be able to log in"
        risk: Medium
        verifymethod: Test
    }