🧬 Diagrams with Mermaid.js - NagusameCS/IVY GitHub Wiki

Basic Syntax

Diagrams are created using a code block with the mermaid identifier:

```mermaid
graph TD
    A[Start] --> B[End]
```

Flowchart Diagrams

Basic Flowchart

```mermaid
graph TD
    A[Start] --> B[Process]
    B --> C{Decision}
    C -->|Yes| D[Result 1]
    C -->|No| E[Result 2]
```

Flowchart Shapes

```mermaid
graph TD
    A[Square Box] --> B(Rounded Box)
    B --> C{Diamond}
    C --> D((Circle))
    D --> E>Asymmetric]
    E --> F[/Parallelogram/]
```

Sequence Diagrams

Basic Sequence

```mermaid
sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello Bob
    B->>A: Hi Alice
```

Advanced Sequence

```mermaid
sequenceDiagram
    participant S as Student
    participant T as Teacher
    S->>T: Ask Question
    activate T
    T-->>S: Think about answer
    deactivate T
    Note over S,T: Interaction
```

Class Diagrams

Basic Class

```mermaid
classDiagram
    class Animal {
        +name: string
        +age: int
        +makeSound()
    }
```

Class Relationships

```mermaid
classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    Animal : +name
    Animal : +makeSound()
    class Dog{
        +bark()
    }
    class Cat{
        +meow()
    }
```

State Diagrams

Simple State

```mermaid
stateDiagram-v2
    [*] --> Still
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```

Gantt Charts

Project Timeline

```mermaid
gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Planning
    Research    :2024-01-01, 30d
    Design      :2024-02-01, 20d
    section Development
    Coding      :2024-03-01, 45d
```

Pie Charts

Simple Pie

```mermaid
pie
    title Distribution
    "A" : 45
    "B" : 35
    "C" : 20
```

ER Diagrams

Database Schema

```mermaid
erDiagram
    STUDENT ||--o{ ENROLLMENT : enrolls
    STUDENT {
        string id
        string name
    }
    ENROLLMENT {
        string course_id
        date date
    }
```

Journey Diagrams

User Journey

```mermaid
journey
    title User Journey
    section Login
        Open website: 5: User
        Enter credentials: 3: User
        Submit form: 4: User
    section Dashboard
        View data: 5: User
```

Best Practices

1. Clarity: Keep diagrams simple and focused
2. Layout: Use proper spacing and alignment
3. Labels: Use clear, concise text
4. Direction: Choose appropriate diagram flow (TD = top-down, LR = left-right)
5. Comments: Add comments for complex diagrams

Tips for Complex Diagrams

Subgraphs

```mermaid
graph TD
    subgraph Process A
        A1[Step 1] --> A2[Step 2]
    end
    subgraph Process B
        B1[Step 1] --> B2[Step 2]
    end
    A2 --> B1
```

Styling

```mermaid
graph TD
    A[Start] --> B[Process]
    style A fill:#f9f,stroke:#333,stroke-width:4px
    style B fill:#bbf,stroke:#333,stroke-width:2px
```

Examples for Common Uses

Learning Flow

```mermaid
graph LR
    A[Concept] --> B[Practice]
    B --> C[Assessment]
    C -->|Pass| D[Next Topic]
    C -->|Fail| B
```

Problem-Solving Process

```mermaid
graph TD
    A[Problem] --> B{Understand?}
    B -->|Yes| C[Plan Solution]
    B -->|No| D[Research]
    D --> B
    C --> E[Implement]
    E --> F[Test]
    F -->|Pass| G[Complete]
    F -->|Fail| C
```