mmdr vs mermaid-cli Visual Comparison

Comparing output quality between mmdr (Rust) and mermaid-cli (Node.js + Chromium)
Last regenerated: 2026-02-09 11:59 UTC (just now ago)

Changelog

Flowchart

Basic

Source

flowchart LR
  A([Start]) --> B{Decision}
  B -->|yes| C[/Do thing/]
  B -->|no| D[\\Skip\\]
  C --> E[[End]]
  D --> E

mmdr

mmdr flowchart_basic

mermaid-cli

official flowchart_basic

Top-Down

Source

flowchart TD
  Start([Start]) --> Input[/Read Input/]
  Input --> Check{Valid?}
  Check -->|Yes| Process[Process Data]
  Check -->|No| Error[Show Error]
  Error --> Input
  Process --> Save[(Save to DB)]
  Save --> Done([End])

mmdr

mmdr flowchart_td

mermaid-cli

official flowchart_td

All Shapes

Source

flowchart TD
  A([Stadium]) --> B[[Subroutine]]
  B --> C[(Cylinder)]
  C --> D((Circle))
  D --> E{Diamond}
  E --> F{{Hexagon}}
  F --> G[/Parallelogram/]
  G --> H[\Parallelogram Alt\]
  H --> I[/Trapezoid\]
  I --> J[\Trapezoid Alt/]
  J --> K>Asymmetric]

mmdr

mmdr flowchart_shapes

mermaid-cli

official flowchart_shapes

Edge Types

Source

flowchart LR
  A[Solid] --> B[Arrow]
  C[Dotted] -.-> D[Arrow]
  E[Thick] ==> F[Arrow]
  G[Bidirectional] <--> H[Both]
  I[Undirected] --- J[Line]
  K[Dotted Line] -.- L[No Arrow]
  M[Thick Line] === N[No Arrow]

mmdr

mmdr flowchart_edges

mermaid-cli

official flowchart_edges

Edge Labels

Source

flowchart LR
  A[Client] -->|POST /login| B[API Gateway]
  B -->|Forward request| C[Auth Service]
  C -->|Query credentials| D[(User DB)]
  D -->|Return user| C
  C -->|Generate token| B
  B -->|Set cookie &\nreturn 200| A

mmdr

mmdr flowchart_labels

mermaid-cli

official flowchart_labels

Custom Styles

Source

flowchart LR
  classDef hot fill:#f00,stroke:#000,color:#fff,stroke-width:2
  classDef cool fill:#00f,stroke:#0ff,color:#fff

  A[Alpha] --> B[Beta]
  C[Gamma] -.-> D[Delta]

  class A hot
  class C cool

  style B fill:#0f0,stroke:#090,stroke-width:3,color:#111
  linkStyle 1 stroke:#ff0,stroke-width:4,stroke-dasharray:5 5

mmdr

mmdr flowchart_styles

mermaid-cli

official flowchart_styles

Subgraph

Source

flowchart LR
  subgraph GroupA["Alpha Group"]
    A1[One] --> A2[Two]
  end
  subgraph GroupB["Beta Group"]
    B1[Three] --> B2[Four]
  end
  A2 --> B1

mmdr

mmdr flowchart_subgraph

mermaid-cli

official flowchart_subgraph

Subgraph Directions

Source

flowchart TD
  subgraph One["LR subgraph"]
    direction LR
    A[Alpha] --> B[Beta] --> C[Gamma]
  end
  subgraph Two["TB subgraph"]
    direction TB
    D[Delta] --> E[Epsilon]
  end
  C --> D

mmdr

mmdr flowchart_subgraph_dir

mermaid-cli

official flowchart_subgraph_dir

Branches

Source

flowchart TD
  Start((Start)) --> A[Collect]
  A --> B{Valid?}
  B -->|Yes| C[Process]
  B -->|No| D[Reject]
  C --> E((Done))
  D --> E

mmdr

mmdr flowchart_ports

mermaid-cli

official flowchart_ports

Cycles

Source

flowchart TD
  A[Start] --> B{Decide}
  B -->|yes| C[Do work]
  C --> D{More?}
  D -->|yes| B
  D -->|no| E[End]

  subgraph LoopBlock
    direction LR
    F[One] --> G[Two]
    G --> H[Three]
    H --> F
  end

  E --> F

mmdr

mmdr flowchart_cycles

mermaid-cli

official flowchart_cycles

Dense Graph

Source

flowchart LR
  A((A)) --> B((B))
  A --> C((C))
  A --> D((D))
  B --> E((E))
  C --> E
  D --> E
  B --> F((F))
  C --> F
  D --> F
  E --> G((G))
  F --> G
  G --> H((H))
  B --> H
  C --> H
  D --> H

mmdr

mmdr flowchart_dense

mermaid-cli

official flowchart_dense

Complex Pipeline

Source

flowchart TD
  subgraph Ingest
    A[Source] --> B{Validate}
    B -->|ok| C[Normalize]
    B -->|fail| D[Reject]
  end

  subgraph Process
    C --> E[Queue]
    E --> F[Worker 1]
    E --> G[Worker 2]
    E --> H[Worker 3]
    F --> I[Aggregate]
    G --> I
    H --> I
  end

  subgraph Output
    I --> J{Route}
    J -->|fast| K[Cache]
    J -->|slow| L[Archive]
    K --> M[Notify]
    L --> M
  end

  D --> M
  A -. retry .-> E
  C --> J
  G -. audit .-> D

mmdr

mmdr flowchart_complex

mermaid-cli

official flowchart_complex

CI/CD Pipeline

Source

flowchart LR
  A[Push to Git] --> B{CI Triggered}
  B --> C[Lint]
  B --> D[Unit Tests]
  B --> E[Build]
  C --> F{All Pass?}
  D --> F
  E --> F
  F -->|Yes| G[Deploy to Staging]
  F -->|No| H[Notify Developer]
  G --> I{QA Approved?}
  I -->|Yes| J[Deploy to Production]
  I -->|No| H
  J --> K[Monitor]
  K -->|Alert| H

mmdr

mmdr flowchart_cicd

mermaid-cli

official flowchart_cicd

Auth Flow

Source

flowchart TD
  A([User Visit]) --> B{Logged in?}
  B -->|No| C[Show Login Form]
  C --> D{Credentials Valid?}
  D -->|No| E[Show Error]
  E --> C
  D -->|Yes| F{2FA Enabled?}
  F -->|Yes| G[Send OTP]
  G --> H{OTP Valid?}
  H -->|No| E
  H -->|Yes| I[Create Session]
  F -->|No| I
  B -->|Yes| I
  I --> J[Dashboard]

mmdr

mmdr flowchart_auth

mermaid-cli

official flowchart_auth

Sequence Diagram

Basic

Source

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

mmdr

mmdr sequence_basic

mermaid-cli

official sequence_basic

Frames

Source

sequenceDiagram
  participant Client
  participant API
  participant DB

  Client->>API: Request
  activate API
  API->>DB: Query
  activate DB
  DB-->>API: Rows
  deactivate DB
  alt success
    API-->>Client: 200 OK
  else failure
    API-->>Client: 500 Error
  end
  deactivate API

mmdr

mmdr sequence_frames

mermaid-cli

official sequence_frames

Collaboration

Source

sequenceDiagram
  participant User
  participant Web
  participant API
  User->>Web: Open app
  Web->>API: Fetch profile
  API-->>Web: Profile data
  Web-->>User: Render screen

mmdr

mmdr sequence_collab

mermaid-cli

official sequence_collab

Loops & Par

Source

sequenceDiagram
  participant C as Client
  participant S as Server
  participant DB

  C->>S: Connect
  loop Health Check
    S->>DB: Ping
    DB-->>S: Pong
  end
  opt Has Cache
    S->>C: Cached Response
  end
  par Task A
    S->>DB: Query A
  and Task B
    S->>DB: Query B
  end
  DB-->>S: Results
  S-->>C: Response

mmdr

mmdr sequence_loops

mermaid-cli

official sequence_loops

Notes

Source

sequenceDiagram
  participant A as Alice
  participant B as Bob
  participant C as Carol

  Note over A: Alice starts
  A->>B: Hello Bob
  Note over A,B: Handshake
  B->>C: Introduce Alice
  Note right of C: Carol thinks
  C-->>A: Nice to meet you
  Note over A,C: All connected

mmdr

mmdr sequence_notes

mermaid-cli

official sequence_notes

Autonumber

Source

sequenceDiagram
  autonumber
  participant U as User
  participant FE as Frontend
  participant BE as Backend
  participant DB as Database

  U->>FE: Click Submit
  FE->>BE: POST /api/data
  BE->>DB: INSERT INTO table
  DB-->>BE: OK
  BE-->>FE: 201 Created
  FE-->>U: Show success

mmdr

mmdr sequence_autonumber

mermaid-cli

official sequence_autonumber

OAuth Flow

Source

sequenceDiagram
  participant U as User
  participant App as Application
  participant Auth as Auth Server
  participant API as Resource API

  U->>App: Click Login
  App->>Auth: Authorization Request
  Auth->>U: Login Page
  U->>Auth: Enter Credentials
  Auth->>App: Authorization Code
  App->>Auth: Exchange Code for Token
  Auth->>App: Access Token + Refresh Token
  App->>API: API Request + Access Token
  API->>App: Protected Resource
  App->>U: Display Data

mmdr

mmdr sequence_oauth

mermaid-cli

official sequence_oauth

Microservices

Source

sequenceDiagram
  participant GW as API Gateway
  participant US as User Service
  participant OS as Order Service
  participant PS as Payment Service
  participant NS as Notification Service
  participant Q as Message Queue

  GW->>US: Authenticate
  US-->>GW: Token Valid
  GW->>OS: Create Order
  activate OS
  OS->>PS: Process Payment
  activate PS
  PS-->>OS: Payment OK
  deactivate PS
  OS->>Q: Publish OrderCreated
  Q-->>NS: OrderCreated Event
  NS->>NS: Send Email
  OS-->>GW: Order Confirmed
  deactivate OS
  GW-->>GW: Return Response

mmdr

mmdr sequence_microservice

mermaid-cli

official sequence_microservice

Class Diagram

Basic

Source

classDiagram
class Animal {
+String name
+eat()
}
class Dog
Animal <|-- Dog : inherits

mmdr

mmdr class_basic

mermaid-cli

official class_basic

Multiplicity

Source

classDiagram
Class01 "1" *-- "many" Class02 : contains

mmdr

mmdr class_multiplicity

mermaid-cli

official class_multiplicity

Relations

Source

classDiagram
class Order
class Item
class Customer
Customer "1" --> "many" Order
Order "1" --> "many" Item

mmdr

mmdr class_relations

mermaid-cli

official class_relations

Interfaces

Source

classDiagram
  class Shape {
    <<interface>>
    +area() double
    +perimeter() double
  }
  class Circle {
    -double radius
    +area() double
    +perimeter() double
  }
  class Rectangle {
    -double width
    -double height
    +area() double
    +perimeter() double
  }
  class Square {
    +Square(double side)
  }
  Shape <|.. Circle
  Shape <|.. Rectangle
  Rectangle <|-- Square

mmdr

mmdr class_interface

mermaid-cli

official class_interface

E-Commerce Model

Source

classDiagram
  class User {
    +int id
    +String name
    +String email
    +login()
    +logout()
  }
  class Order {
    +int id
    +Date date
    +double total
    +addItem()
    +removeItem()
  }
  class Product {
    +int id
    +String name
    +double price
  }
  class Payment {
    <<abstract>>
    +double amount
    +process()
  }
  class CreditCard {
    +String cardNumber
    +process()
  }
  class PayPal {
    +String email
    +process()
  }
  User "1" --> "*" Order : places
  Order "*" --> "*" Product : contains
  Order "1" --> "1" Payment : has
  Payment <|-- CreditCard
  Payment <|-- PayPal

mmdr

mmdr class_full

mermaid-cli

official class_full

Observer Pattern

Source

classDiagram
  class Subject {
    <<interface>>
    +attach(Observer)
    +detach(Observer)
    +notify()
  }
  class Observer {
    <<interface>>
    +update()
  }
  class ConcreteSubject {
    -state
    +getState()
    +setState()
  }
  class ConcreteObserverA {
    +update()
  }
  class ConcreteObserverB {
    +update()
  }
  Subject <|.. ConcreteSubject
  Observer <|.. ConcreteObserverA
  Observer <|.. ConcreteObserverB
  Subject o-- Observer : observers

mmdr

mmdr class_patterns

mermaid-cli

official class_patterns

State Diagram

Basic

Source

stateDiagram-v2
[*] --> Idle
Idle --> Active : start
state "Waiting" as Wait
Wait --> Active

mmdr

mmdr state_basic

mermaid-cli

official state_basic

With Note

Source

stateDiagram-v2
[*] --> Idle
Idle --> Active
note right of Active: Running
Active --> [*]

mmdr

mmdr state_note

mermaid-cli

official state_note

Composite

Source

stateDiagram-v2
[*] --> Idle
Idle --> Working : start
state Working {
  [*] --> TaskA
  TaskA --> TaskB
}
Working --> [*]

mmdr

mmdr state_parallel

mermaid-cli

official state_parallel

Lifecycle

Source

stateDiagram-v2
  [*] --> Draft
  Draft --> Review : submit
  Review --> Approved : approve
  Review --> Rejected : reject
  Approved --> Published : publish
  Rejected --> Draft : revise
  Published --> Archived : archive
  Published --> [*]
  Archived --> [*]

mmdr

mmdr state_choice

mermaid-cli

official state_choice

Deeply Nested

Source

stateDiagram-v2
  [*] --> Active
  state Active {
    [*] --> Running
    Running --> Paused : pause
    Paused --> Running : resume
    state Running {
      [*] --> Processing
      Processing --> Waiting : yield
      Waiting --> Processing : wake
    }
  }
  Active --> Stopped : stop
  Stopped --> Active : restart
  Stopped --> [*]

mmdr

mmdr state_nested

mermaid-cli

official state_nested

Fork/Join

Source

stateDiagram-v2
  [*] --> Ready
  Ready --> Active
  state Active {
    [*] --> TaskA
    [*] --> TaskB
    [*] --> TaskC
    TaskA --> [*]
    TaskB --> [*]
    TaskC --> [*]
  }
  Active --> Done
  Done --> [*]

mmdr

mmdr state_fork

mermaid-cli

official state_fork

TCP States

Source

stateDiagram-v2
  [*] --> CLOSED
  CLOSED --> LISTEN : passive open
  CLOSED --> SYN_SENT : active open / SYN
  LISTEN --> SYN_RCVD : SYN / SYN+ACK
  SYN_SENT --> ESTABLISHED : SYN+ACK / ACK
  SYN_RCVD --> ESTABLISHED : ACK
  ESTABLISHED --> FIN_WAIT_1 : close / FIN
  ESTABLISHED --> CLOSE_WAIT : FIN / ACK
  FIN_WAIT_1 --> FIN_WAIT_2 : ACK
  FIN_WAIT_2 --> TIME_WAIT : FIN / ACK
  CLOSE_WAIT --> LAST_ACK : close / FIN
  LAST_ACK --> CLOSED : ACK
  TIME_WAIT --> CLOSED : timeout

mmdr

mmdr state_tcp

mermaid-cli

official state_tcp

ER Diagram

Basic

Source

erDiagram
CUSTOMER ||--o{ ORDER : places
CUSTOMER {
string id
string name
}
ORDER {
string id
date created_at
}

mmdr

mmdr er_basic

mermaid-cli

official er_basic

Extended

Source

erDiagram
USER ||--o{ POST : writes
USER ||--o{ SESSION : has
POST ||--o{ COMMENT : receives
USER {
  string id PK
  string email UK
  string name
}
POST {
  string id PK
  string user_id FK
  string title
  string status
}
COMMENT {
  string id PK
  string post_id FK
  string body
}
SESSION {
  string id PK
  string user_id FK
  date created_at
}

mmdr

mmdr er_extended

mermaid-cli

official er_extended

E-Commerce

Source

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
  PRODUCT ||--o{ LINE_ITEM : "is in"
  CUSTOMER {
    int id PK
    string name
    string email UK
    string phone
  }
  ORDER {
    int id PK
    int customer_id FK
    date order_date
    string status
    float total
  }
  LINE_ITEM {
    int id PK
    int order_id FK
    int product_id FK
    int quantity
    float unit_price
  }
  PRODUCT {
    int id PK
    string name
    string category
    float price
    int stock
  }
  PRODUCT }o--|| CATEGORY : "belongs to"
  CATEGORY {
    int id PK
    string name
    string description
  }

mmdr

mmdr er_ecommerce

mermaid-cli

official er_ecommerce

Blog Platform

Source

erDiagram
  AUTHOR ||--o{ ARTICLE : writes
  ARTICLE ||--o{ TAG_MAP : has
  TAG ||--o{ TAG_MAP : "used in"
  ARTICLE ||--o{ COMMENT : receives
  READER ||--o{ COMMENT : posts
  READER ||--o{ SUBSCRIPTION : subscribes
  AUTHOR ||--o{ SUBSCRIPTION : "subscribed to"

  AUTHOR {
    int id PK
    string name
    string bio
    string avatar_url
  }
  ARTICLE {
    int id PK
    int author_id FK
    string title
    text content
    date published_at
    string status
  }
  TAG {
    int id PK
    string name UK
  }
  TAG_MAP {
    int article_id FK
    int tag_id FK
  }
  COMMENT {
    int id PK
    int article_id FK
    int reader_id FK
    text body
    date created_at
  }

mmdr

mmdr er_blog

mermaid-cli

official er_blog

Pie Chart

Basic

Source

pie showData
  title Pets
  "Dogs" : 10
  Cats : 5

mmdr

mmdr pie_basic

mermaid-cli

official pie_basic

Segments

Source

pie showData
  title Platforms
  "Web" : 45
  "iOS" : 25
  "Android" : 20
  "Desktop" : 10

mmdr

mmdr pie_segments

mermaid-cli

official pie_segments

Browser Share

Source

pie showData title Browser Market Share
  "Chrome" : 65
  "Safari" : 19
  "Firefox" : 4
  "Edge" : 4
  "Opera" : 3
  "Other" : 5

mmdr

mmdr pie_multicolor

mermaid-cli

official pie_multicolor

Gantt Chart

Basic

Source

gantt
  title Plan
  dateFormat  YYYY-MM-DD
  section Alpha
  Task A : done, a1, 2026-01-01, 5d
  Task B : after a1, 3d

mmdr

mmdr gantt_basic

mermaid-cli

official gantt_basic

Release Plan

Source

gantt
  title Release Plan
  dateFormat  YYYY-MM-DD
  section Design
  Research : done, des1, 2026-01-01, 5d
  Review : after des1, 3d
  section Build
  API : build1, 2026-01-10, 7d
  UI : after build1, 5d
  section Launch
  QA : 2026-01-20, 4d
  Release : milestone, 2026-01-26, 0d

mmdr

mmdr gantt_release

mermaid-cli

official gantt_release

Full Project

Source

gantt
  title Project Timeline
  dateFormat YYYY-MM-DD
  excludes weekends

  section Planning
    Requirements     :done, req, 2024-01-01, 14d
    Architecture     :done, arch, after req, 7d
    Design Review    :milestone, m1, after arch, 0d

  section Development
    Backend API      :active, api, after arch, 21d
    Frontend UI      :active, ui, after arch, 28d
    Database Schema  :crit, db, after arch, 14d
    Integration      :int, after api, 14d

  section Testing
    Unit Tests       :test1, after api, 7d
    E2E Tests        :test2, after int, 10d
    Performance      :test3, after test2, 5d

  section Release
    Staging Deploy   :stage, after test3, 3d
    Production       :milestone, m2, after stage, 0d

mmdr

mmdr gantt_full

mermaid-cli

official gantt_full

Sprint Plan

Source

gantt
  title Sprint Plan
  dateFormat YYYY-MM-DD

  section Backend
    Auth module     :a1, 2024-03-01, 5d
    API endpoints   :a2, after a1, 3d
    Data migration  :a3, after a2, 4d

  section Frontend
    Login page      :b1, 2024-03-01, 3d
    Dashboard       :b2, after b1, 5d
    Settings        :b3, after b2, 2d

  section DevOps
    CI pipeline     :c1, 2024-03-01, 2d
    Deploy scripts  :c2, after c1, 2d

mmdr

mmdr gantt_sections

mermaid-cli

official gantt_sections

Mindmap

Basic

Source

mindmap
  root((Root))
    Child A
    Child B
      Grandchild

mmdr

mmdr mindmap_basic

mermaid-cli

official mindmap_basic

Deep

Source

mindmap
  root((Project))
    Planning
      Scope
      Budget
    Build
      Backend
        API
        DB
      Frontend
    Launch
      Beta
      GA

mmdr

mmdr mindmap_deep

mermaid-cli

official mindmap_deep

Project Structure

Source

mindmap
  root((Project))
    Frontend
      React
        Components
        Hooks
        State Management
      Styling
        CSS Modules
        Tailwind
    Backend
      Node.js
        Express
        Middleware
      Database
        PostgreSQL
        Redis
    DevOps
      CI/CD
      Docker
      Kubernetes

mmdr

mmdr mindmap_project

mermaid-cli

official mindmap_project

Node Shapes

Source

mindmap
  root((Central Topic))
    (Rounded)
      [Square]
      ((Circle))
    )Cloud(
      ))Bang((
    {{Hexagon}}

mmdr

mmdr mindmap_shapes

mermaid-cli

official mindmap_shapes

Timeline

Basic

Source

timeline
  title History
  2020 : Launch
  2021 : Growth

mmdr

mmdr timeline_basic

mermaid-cli

official timeline_basic

Phases

Source

timeline
  title Product Timeline
  section Phase 1
    2022 : MVP
    2023 : Beta
  section Phase 2
    2024 : Launch
    2025 : Growth

mmdr

mmdr timeline_release

mermaid-cli

official timeline_release

Computing History

Source

timeline
  title History of Computing
  section Early Era
    1940s : ENIAC built
          : First programmable computer
    1950s : FORTRAN created
          : First high-level language
  section Personal Computing
    1970s : Apple II released
          : Commodore PET
    1980s : IBM PC launched
          : Macintosh introduced
  section Internet Age
    1990s : World Wide Web
          : Amazon founded
    2000s : Google IPO
          : iPhone released
  section Modern Era
    2010s : Cloud computing boom
          : AI renaissance
    2020s : GPT revolution
          : Quantum progress

mmdr

mmdr timeline_detailed

mermaid-cli

official timeline_detailed

User Journey

Basic

Source

journey
  title My Journey
  section Start
    Step one: 5: Alice
    Step two: 3: Alice, Bob

mmdr

mmdr journey_basic

mermaid-cli

official journey_basic

Team

Source

journey
  title Onboarding
  section Signup
    Create account: 5: Alice
    Verify email: 4: Alice
  section Setup
    Connect data: 3: Alice, Bob
    Configure alerts: 2: Bob

mmdr

mmdr journey_team

mermaid-cli

official journey_team

Shopping Experience

Source

journey
  title Online Shopping Experience
  section Discovery
    Search for product: 5: Customer
    Browse categories: 3: Customer
    Read reviews: 4: Customer
  section Purchase
    Add to cart: 5: Customer
    Enter shipping info: 2: Customer
    Payment: 3: Customer, Payment System
    Order confirmation: 5: Customer, Email System
  section Delivery
    Track package: 4: Customer, Logistics
    Receive delivery: 5: Customer, Logistics
    Leave review: 3: Customer

mmdr

mmdr journey_shopping

mermaid-cli

official journey_shopping

Git Graph

Basic

Source

gitGraph
  commit
  branch feature
  checkout feature
  commit id:"F1"
  checkout main
  merge feature

mmdr

mmdr gitgraph_basic

mermaid-cli

official gitgraph_basic

Branching

Source

gitGraph
  commit id:"Init"
  branch feature
  checkout feature
  commit id:"F1"
  commit id:"F2"
  checkout main
  commit id:"M1"
  merge feature
  commit id:"Release"

mmdr

mmdr gitgraph_branching

mermaid-cli

official gitgraph_branching

Release Flow

Source

gitGraph
  commit id: "init"
  commit id: "add readme"
  branch develop
  commit id: "setup ci"
  branch feature/auth
  commit id: "login page"
  commit id: "auth api"
  checkout develop
  merge feature/auth
  branch feature/dashboard
  commit id: "dashboard ui"
  commit id: "charts"
  checkout develop
  merge feature/dashboard
  checkout main
  merge develop tag: "v1.0"
  commit id: "hotfix"

mmdr

mmdr gitgraph_release

mermaid-cli

official gitgraph_release

Parallel Branches

Source

gitGraph
  commit id: "initial"
  branch feature-a
  commit id: "feat-a-1"
  commit id: "feat-a-2"
  checkout main
  branch feature-b
  commit id: "feat-b-1"
  checkout main
  branch feature-c
  commit id: "feat-c-1"
  commit id: "feat-c-2"
  checkout main
  merge feature-a
  merge feature-b
  merge feature-c tag: "v2.0"

mmdr

mmdr gitgraph_parallel

mermaid-cli

official gitgraph_parallel

XY Chart

Basic

Source

xychart-beta
  x-axis [Q1, Q2]
  y-axis Units
  bar [10, 20]

mmdr

mmdr xychart_basic

mermaid-cli

official xychart_basic

Series

Source

xychart-beta
  title "Sales"
  x-axis [Q1, Q2, Q3, Q4]
  y-axis "Units" 0 --> 100
  bar "Product A" [20, 30, 40, 60]
  line "Product B" [15, 25, 35, 50]

mmdr

mmdr xychart_series

mermaid-cli

official xychart_series

Line Chart

Source

xychart-beta
  title "Monthly Revenue (2024)"
  x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
  y-axis "Revenue ($K)" 0 --> 500
  line [120, 145, 160, 190, 220, 250, 280, 310, 290, 330, 370, 420]

mmdr

mmdr xychart_line

mermaid-cli

official xychart_line

Bar + Line

Source

xychart-beta
  title "Sales vs Target"
  x-axis [Q1, Q2, Q3, Q4]
  y-axis "Units" 0 --> 1000
  bar [500, 650, 700, 850]
  line [600, 600, 750, 800]

mmdr

mmdr xychart_mixed

mermaid-cli

official xychart_mixed

Quadrant Chart

Basic

Source

quadrantChart
  title Sample
  x-axis Low Reach --> High Reach
  y-axis Low Engagement --> High Engagement
  quadrant-1 Execute
  quadrant-2 Expand
  quadrant-3 Monitor
  quadrant-4 Re-evaluate
  A : [0.2, 0.8]
  B : [0.7, 0.3]

mmdr

mmdr quadrant_basic

mermaid-cli

official quadrant_basic

Strategy

Source

quadrantChart
  title Strategy
  x-axis Low Effort --> High Effort
  y-axis Low Impact --> High Impact
  quadrant-1 Invest
  quadrant-2 Quick Wins
  quadrant-3 Fill Ins
  quadrant-4 Defer
  Alpha : [0.2, 0.9]
  Beta : [0.7, 0.8]
  Gamma : [0.3, 0.3]
  Delta : [0.8, 0.2]

mmdr

mmdr quadrant_strategy

mermaid-cli

official quadrant_strategy

Technology Radar

Source

quadrantChart
  title Technology Radar
  x-axis Low Maturity --> High Maturity
  y-axis Low Impact --> High Impact
  quadrant-1 Adopt
  quadrant-2 Trial
  quadrant-3 Assess
  quadrant-4 Hold
  Kubernetes : [0.8, 0.9]
  Rust : [0.5, 0.7]
  WebAssembly : [0.3, 0.8]
  GraphQL : [0.7, 0.6]
  Deno : [0.2, 0.4]
  HTMX : [0.3, 0.5]
  Svelte : [0.5, 0.5]
  Zig : [0.15, 0.3]

mmdr

mmdr quadrant_tech

mermaid-cli

official quadrant_tech

C4 Diagram

Context

Source

C4Context
  Person(user, "User", "A customer")
  System(webapp, "Web App", "Main application")
  SystemDb(db, "Database", "Stores data")
  System_Ext(email, "Email Service", "Sends emails")

  Rel(user, webapp, "Uses", "HTTPS")
  Rel(webapp, db, "Reads/Writes")
  Rel(webapp, email, "Sends via", "SMTP")

mmdr

mmdr c4_basic

mermaid-cli

official c4_basic

Container

Source

C4Context
  Person(admin, "Admin", "System administrator")
  Person(user, "User", "End user")

  Boundary(b0, "Platform") {
    System(api, "API Gateway")
    SystemDb(db, "PostgreSQL")
    System(cache, "Redis Cache")
    System(queue, "Message Queue")
  }

  System_Ext(auth, "Auth Provider", "OAuth2")

  Rel(user, api, "Uses")
  Rel(admin, api, "Manages")
  Rel(api, db, "Queries")
  Rel(api, cache, "Caches")
  Rel(api, queue, "Publishes")
  Rel(api, auth, "Authenticates")

mmdr

mmdr c4_container

mermaid-cli

official c4_container

Sankey Diagram

Energy Flow

Source

sankey-beta
  Agricultural waste,Bio-conversion,124.729
  Bio-conversion,Liquid,0.597
  Bio-conversion,Losses,26.862
  Bio-conversion,Solid,280.322
  Bio-conversion,Gas,81.144
  Solid,Over generation / exports,0.001
  Liquid,Industry,121.066
  Gas,Heating and cooling,79.329

mmdr

mmdr sankey_basic

mermaid-cli

official sankey_basic

Block Diagram

Basic

Source

block-beta
  columns 3
  A["Frontend"] B["API"] C["Database"]
  D["Cache"]:2 E["Queue"]
  F["Monitor"]:3

mmdr

mmdr block_basic

mermaid-cli

official block_basic

Packet Diagram

IPv4 Header

Source

packet-beta
  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 Address"
  128-159: "Destination Address"

mmdr

mmdr packet_basic

mermaid-cli

official packet_basic

Kanban Board

Sprint Board

Source

kanban
  Backlog
    id1[Design new landing page]
    id2[Fix login bug]
  todo[To Do]
    id3[Write API tests]
    id4[Update dependencies]
  doing[In Progress]
    id5[Implement auth flow]
  review[Code Review]
    id6[Refactor database layer]
  done[Done]
    id7[Setup CI/CD pipeline]
    id8[Deploy v1.0]

mmdr

mmdr kanban_basic

mermaid-cli

official kanban_basic

Requirement Diagram

Basic

Source

requirementDiagram

    requirement login {
    id: 1
    text: Users must log in
    risk: high
    verifymethod: test
    }

    requirement session {
    id: 2
    text: Sessions expire after 30 min
    risk: medium
    verifymethod: test
    }

    requirement audit {
    id: 3
    text: All logins must be logged
    risk: low
    verifymethod: inspection
    }

    element webapp {
    type: application
    }

    login - satisfies -> session
    login - traces -> audit
    webapp - satisfies -> login

mmdr

mmdr requirement_basic

mermaid-cli

official requirement_basic

Architecture Diagram

Basic

Source

architecture-beta
  group api(cloud)[Cloud Platform]

  service gateway(internet)[API Gateway] in api
  service app(server)[App Server] in api
  service db(database)[Database] in api
  service cache(database)[Cache] in api

  gateway:R --> L:app
  app:R --> L:db
  app:B --> T:cache

mmdr

mmdr architecture_basic

mermaid-cli

official architecture_basic

Radar Chart

Comparison

Source

radar-beta
  axis Speed, Reliability, Scalability, Security, Usability
  curve "Product A" { 4, 3, 5, 4, 3 }
  curve "Product B" { 3, 5, 3, 5, 4 }

mmdr

mmdr radar_basic

mermaid-cli

official radar_basic

Treemap

Revenue

Source

treemap-beta
  Revenue
    Product Sales: 450
      Hardware: 200
      Software: 250
    Services: 300
      Consulting: 180
      Support: 120
    Licensing: 150

mmdr

mmdr treemap_basic

mermaid-cli

official treemap_basic