المرجع السريع لـ Mermaid

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

graph TD
    A{Decision} -->|Yes| B[OK]
    A -->|No| C[Cancel]

graph LR
    subgraph Group
        A --> B
    end

graph TD
    A[Rectangle] --> B(Rounded)
    B --> C{Diamond}
    C --> D((Circle))
    C --> E([Stadium])

sequenceDiagram
    Alice->>Bob: Hello
    Bob-->>Alice: Hi

sequenceDiagram
    loop Every minute
        Alice->>Bob: Ping
    end

sequenceDiagram
    alt Success
        A->>B: 200 OK
    else Error
        A->>B: 500 Error
    end

sequenceDiagram
    Alice->>+Bob: Request
    Bob-->>-Alice: Response

classDiagram
    class Animal {
        +String name
        +makeSound()
    }

classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    Animal : +String name

classDiagram
    Customer "1" --> "*" Order

stateDiagram-v2
    [*] --> Active
    Active --> [*]

stateDiagram-v2
    Idle --> Running: start
    Running --> Idle: stop

stateDiagram-v2
    state Active {
        [*] --> Working
        Working --> Paused
    }

gantt
    title Project
    dateFormat YYYY-MM-DD
    section Phase 1
    Task A :a1, 2024-01-01, 30d
    Task B :after a1, 20d

gantt
    Task Done :done, d1, 2024-01-01, 10d
    Task Active :active, 2024-01-11, 10d
    Task Crit :crit, 2024-01-21, 10d

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains

erDiagram
    CUSTOMER {
        int id PK
        string name
        string email
    }

journey
    title User Flow
    section Login
      Visit site: 5: User
      Enter credentials: 3: User
      Dashboard: 4: User

journey
    title New User Onboarding
    section Sign up
      Open homepage: 5: Visitor
      Create account: 3: Visitor
      Verify email: 2: Visitor
    section First diagram
      Choose template: 4: User
      Edit code: 5: User
      Export PNG: 5: User

journey
    title Checkout Flow
    section Browse
      Search product: 4: Customer
      View details: 5: Customer
    section Purchase
      Add to cart: 5: Customer
      Pay: 3: Customer, Stripe
      Confirm order: 5: Customer, Stripe

gitGraph
    commit
    branch develop
    commit
    checkout main
    merge develop

gitGraph
    commit
    branch feature
    commit
    commit
    checkout main
    merge feature
    commit

mindmap
  root((Central))
    Topic A
      Detail 1
      Detail 2
    Topic B
      Detail 3

mindmap
  root((Launch Plan))
    Engineering
      Backend API
      Frontend UI
      Testing
    Marketing
      Landing page
      Social media
    Operations
      Support docs
      Pricing

mindmap
  root((Mermaid))
    ::icon(fa fa-book)
    Origins
      Long history
      Popularisation
    [Square]
      (Rounded)
      ((Circle))
    {{Hexagon}}

pie title Budget
    "Engineering" : 45
    "Marketing" : 25
    "Operations" : 30

pie showData title Browser Share 2026
    "Chrome" : 64.2
    "Safari" : 18.5
    "Edge" : 5.3
    "Firefox" : 3.1
    "Other" : 8.9

pie title How I Spend My Day
    "Sleep" : 8
    "Work" : 9
    "Meals" : 2
    "Exercise" : 1
    "Free time" : 4

timeline
    title History
    2020 : Event A
    2021 : Event B
         : Event C
    2022 : Event D

timeline
    title Product Roadmap
    section 2024
      Q1 : Beta launch
      Q2 : Public release
    section 2025
      Q1 : Mobile apps
      Q2 : Enterprise plan
      Q3 : API v2
    section 2026
      Q1 : AI assistant
      Q2 : Marketplace

timeline
    title Mermaid Study Plan
    Week 1 : Read syntax docs
           : Try flowcharts
    Week 2 : Sequence diagrams
           : Class diagrams
    Week 3 : Gantt and timeline
    Week 4 : Build a real project

kanban
  Todo
    Task 1
    Task 2
  In Progress
    Task 3
  Done
    Task 4

kanban
  Backlog
    [Auth flow]@{ assigned: 'alice', priority: 'High' }
    [Onboarding tour]@{ assigned: 'bob', priority: 'Low' }
  In Progress
    [Payments]@{ assigned: 'carol', priority: 'High' }
  Review
    [Settings page]@{ assigned: 'dan', priority: 'Medium' }
  Done
    [Landing redesign]@{ assigned: 'erin', priority: 'High' }

kanban
  Reported
    Login 500 error
    Slow PDF export
  Triaged
    Mobile menu glitch
  Fixing
    Dark mode contrast
  Verified
    Empty state typo

quadrantChart
    title Priority Matrix
    x-axis Low Effort --> High Effort
    y-axis Low Impact --> High Impact
    quadrant-1 Plan
    quadrant-2 Do First
    quadrant-3 Delegate
    quadrant-4 Eliminate
    Item A: [0.3, 0.8]
    Item B: [0.7, 0.2]

quadrantChart
    title Reach and Engagement
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 Stars
    quadrant-2 Hidden Gems
    quadrant-3 Filler
    quadrant-4 Volume Plays
    Campaign A: [0.7, 0.8]
    Campaign B: [0.3, 0.7]
    Campaign C: [0.2, 0.2]
    Campaign D: [0.8, 0.3]

quadrantChart
    title Tech Choices
    x-axis Hard --> Easy
    y-axis Slow --> Fast
    quadrant-1 Adopt
    quadrant-2 Trial
    quadrant-3 Hold
    quadrant-4 Assess
    Vue: [0.8, 0.7] radius: 12, color: #41b883
    React: [0.7, 0.7] radius: 12, color: #61dafb
    Svelte: [0.6, 0.85] radius: 10, color: #ff3e00

sankey-beta

Source,Target,Value
A,X,5
A,Y,3
B,X,2
B,Y,8

sankey-beta

Visitors,Signups,1200
Visitors,Bounce,3800
Signups,Trial,800
Signups,Free Plan,400
Trial,Paid,250
Trial,Churn,550

sankey-beta

Solar,Grid,40
Wind,Grid,30
Coal,Grid,80
Grid,Residential,50
Grid,Industrial,80
Grid,Losses,20

xychart-beta
    title "Sales"
    x-axis [Jan, Feb, Mar, Apr]
    y-axis "Revenue" 0 --> 100
    bar [30, 50, 70, 90]
    line [30, 50, 70, 90]

xychart-beta
    title "Quarterly Revenue (USD k)"
    x-axis ["Q1", "Q2", "Q3", "Q4"]
    y-axis "Revenue" 0 --> 250
    bar [120, 145, 180, 220]

xychart-beta
    title "Active Users"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Users (k)" 0 --> 50
    line [10, 14, 18, 25, 33, 42]
    line [8, 11, 15, 20, 24, 28]

xychart-beta horizontal
    title "Programming Language Popularity"
    x-axis "Share (%)" 0 --> 30
    y-axis [JavaScript, Python, Java, C#, Go]
    bar [25, 22, 14, 8, 5]

block-beta
columns 3
  a["A"]:3
  b["B"] c["C"] d["D"]

block-beta
columns 4
  a["Input"] b("Process") c{{"Decision"}} d[("Storage")]
  a --> b
  b --> c
  c --> d

block-beta
columns 3
  Web["Web App"]:3
  space:3
  API["REST API"] Auth["Auth Service"] DB[("Postgres")]
  Web --> API
  API --> Auth
  API --> DB

architecture-beta
    group api(cloud)[API]
    service web(internet)[Web] in api
    service db(database)[DB]
    web:R --> L:db

architecture-beta
    group public(cloud)[Public Network]
    group private(cloud)[Private VPC]

    service cdn(internet)[CDN] in public
    service lb(server)[Load Balancer] in public
    service web(server)[Web Tier] in private
    service api(server)[API Tier] in private
    service db(database)[Postgres] in private
    service cache(disk)[Redis] in private

    cdn:R --> L:lb
    lb:R --> L:web
    web:R --> L:api
    api:R --> L:db
    api:B --> T:cache

architecture-beta
    service gw(internet)[API Gateway]
    service queue(server)[Event Bus]
    service orders(server)[Orders]
    service billing(server)[Billing]
    service notify(server)[Notifications]
    service db(database)[Shared DB]

    gw:R --> L:orders
    orders:R --> L:queue
    queue:T --> B:billing
    queue:B --> T:notify
    orders:B --> T:db

packet-beta
  0-15: "Source Port"
  16-31: "Dest Port"
  32-63: "Sequence Number"

packet-beta
title TCP Header
  0-15: "Source Port"
  16-31: "Destination Port"
  32-63: "Sequence Number"
  64-95: "Acknowledgment Number"
  96-99: "Data Offset"
  100-105: "Reserved"
  106-111: "Flags"
  112-127: "Window"
  128-143: "Checksum"
  144-159: "Urgent Pointer"

packet-beta
title IPv4 Header
  0-3: "Version"
  4-7: "IHL"
  8-15: "Type of Service"
  16-31: "Total Length"
  32-47: "Identification"
  48-50: "Flags"
  51-63: "Fragment Offset"
  64-71: "TTL"
  72-79: "Protocol"
  80-95: "Header Checksum"
  96-127: "Source IP Address"
  128-159: "Destination IP Address"