🧭 Mermaid Syntax Highlights

🔄 Flowcharts

Direction:

LR: Left to Right
TB: Top to Bottom
BT: Bottom to Top

flowchart LR
    G[(Goals)] <===> P[(Projects)]
    P ---o PD(Deadline)
    PD ---- OV([Overdue]) ---> FOV{4 Days}
    PD ---x MT([Met])
    P ---o PT(Tasks)
    PT ---- C([Complete])
    PT ---x IC([Incomplete])
    C ---> R[[Review]]
    R -..-> G

👀 Comments:

%% – Comment not rendered in the chart
|Label| – Annotates arrows

🎯 Example with styling, click links, and labels:

flowchart LR;
    classDef blue fill:#2374f7,stroke:#000,color:#fff
    G[(Goals)]:::blue <===> |Connects To| P[(Projects)]:::blue
    click P "https://github.com/norbix"

🧩 Class Diagrams (UML-style)

Great for OOP design documentation.

classDiagram
    class Order {
        +OrderStatus status
    }
    class OrderStatus {
        <<enumeration>>
        FAILED
        PENDING
        PAID
    }
    class PaymentProcessor {
        <<interface>>
        -String apiKey
        +processPayment(Order order) OrderStatus
    }
    class Customer {
        +String name
    }
    Order o-- Customer : aggregation
    Car *-- Engine : composition
    PaymentProcessor <|-- StripePaymentProcessor

🧩 UML Relationships

Mermaid also supports association, aggregation, and composition, which are common in UML.

classDiagram
    class Teacher {
      +Name string
      +Teach(Student)
    }
    class Student {
      +Name string
    }
    Teacher --> Student : association

    class Department {
      +Name string
      +Professors []Professor
    }
    class Professor {
      +Name string
    }
    Department o-- Professor : aggregation

    class House {
      +Address string
      +Rooms []Room
    }
    class Room {
      +Number int
    }
    House *-- Room : composition

Association → plain arrow (–>)
Aggregation → hollow diamond (o–)
Composition → filled diamond (*–)

This makes it easy to visually document relationships in Go codebases.

🧱 Graph Diagrams (UML-style)

graph TD
    a(content) --> b([hello])
    b --> c[(world)]
    b --> d(branch)
    d --> e((circle))
    d ==> f>flag]
    f --- g{diamond}

Use subgraph to group elements:

graph TD
    subgraph Graph One
        A --> B
    end
    subgraph Graph Two
        C --> D
    end
    A --> D

🥧 Pie Charts

pie
    title Content Breakdown
    "youtube" : 50
    "twitch" : 20
    "twitter" : 30

🧭 Journey Diagrams

Track progress or workflows using narrative sections:

journey
    title My Working Day
    section Work
        Wrote code: 3: me
        Reviewed PRs: 4: me
    section Twitch
        Streamed: 3: me

🧩 Class Diagrams

Great for OOP design documentation.

classDiagram
    class Order {
        +OrderStatus status
    }
    class OrderStatus {
        <<enumeration>>
        FAILED
        PENDING
        PAID
    }
    class PaymentProcessor {
        <<interface>>
        -String apiKey
        +processPayment(Order order) OrderStatus
    }
    class Customer {
        +String name
    }
    Order o-- Customer
    Car *-- Engine
    PaymentProcessor <|-- StripePaymentProcessor

📜 Sequence Diagrams

sequenceDiagram
    participant fe as Front-End
    participant be as Back-End
    participant auth as Auth

    fe -->> be: Login
    be -->> auth: Validate
    auth -->> be: Token
    be -->> fe: Success

    alt Invalid credentials
        be -->> fe: Error
    end

✅ Why Use Mermaid in Your Codebase?

📖 Self-documenting code and architecture
👥 Team-wide clarity on workflows and design
🔁 Easy to update and version control
🧩 Supports component trees, state machines, database schemas, and more

📦 Resources

🚀 Follow me on norbix.dev for more insights on Go, Python, AI, system design, and engineering wisdom.