banner

🧭 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"

🧱 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