Showing 22 of 22 examples

Basic Flowchart

Simple top-to-bottom flowchart

Flowcharts

flowchartgraphbasicdecision

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

Left-to-Right Flowchart

Horizontal flowchart layout

Flowcharts

flowcharthorizontalleft-right

graph LR;
    A[Input] --> B[Process];
    B --> C[Output];

Different Node Shapes

Various node shapes in flowchart

Flowcharts

flowchartshapesnodesstyles

graph TD;
    A[Rectangle] --> B(Rounded);
    B --> C([Stadium]);
    C --> D[[Subroutine]];
    D --> E[(Database)];
    E --> F((Circle));
    F --> G>Asymmetric];
    G --> H{Diamond};

Basic Sequence Diagram

Simple message flow between actors

Sequence Diagrams

sequencemessageactorscommunication

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

Advanced Sequence

Loops, alternatives, and notes

Sequence Diagrams

sequenceloopaltnoteadvanced

sequenceDiagram
    participant User
    participant API
    participant DB
    
    User->>+API: Request Data
    Note over API: Validate Request
    
    alt Valid Request
        API->>+DB: Query
        DB-->>-API: Result
        API-->>User: Success
    else Invalid Request
        API-->>User: Error
    end
    
    loop Every hour
        API->>DB: Sync
    end

Activation Boxes

Show active periods in sequence

Sequence Diagrams

sequenceactivationlifeline

sequenceDiagram
    participant Client
    participant Server
    
    Client->>+Server: Request
    Server->>+Database: Query
    Database-->>-Server: Data
    Server-->>-Client: Response

Basic Class Diagram

Simple class with properties and methods

Class Diagrams

classumlobjectproperties

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
        +eat()
    }

Class Relationships

Inheritance and associations

Class Diagrams

classinheritanceassociationrelationship

classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    Animal : +String name
    Animal : +makeSound()
    
    Dog : +bark()
    Cat : +meow()
    
    Owner "1" --> "*" Animal : owns

Advanced Class Features

Abstract classes, interfaces, and visibility

Class Diagrams

classabstractinterfacevisibility

classDiagram
    class Animal {
        <<abstract>>
        -String name
        #int age
        +getName()
        +getAge()*
    }
    
    class Flyable {
        <<interface>>
        +fly()
    }
    
    Animal <|-- Bird
    Flyable <|.. Bird
    
    Bird : +fly()
    Bird : +layEggs()

Basic State Diagram

Simple state transitions

State Diagrams

statetransitionlifecycle

stateDiagram-v2
    [*] --> Idle
    Idle --> Running: start
    Running --> Stopped: stop
    Stopped --> Idle: reset
    Running --> [*]: terminate

Composite States

Nested states and parallel regions

State Diagrams

statecompositenested

stateDiagram-v2
    [*] --> Active
    
    state Active {
        [*] --> Processing
        Processing --> Waiting
        Waiting --> Processing
    }
    
    Active --> Closed: done
    Closed --> [*]

Basic ER Diagram

Simple entity relationships

ER Diagrams

erentityrelationshipdatabase

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

ER with Attributes

Entities with properties

ER Diagrams

erattributespropertieskeys

erDiagram
    CUSTOMER {
        string name
        string email
        int customerId PK
    }
    ORDER {
        int orderId PK
        date orderDate
        int customerId FK
    }
    PRODUCT {
        int productId PK
        string name
        float price
    }
    
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ PRODUCT : contains

Basic Gantt Chart

Simple project timeline

Gantt Charts

gantttimelineprojectschedule

gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    
    section Planning
    Research           :a1, 2024-01-01, 7d
    Design            :a2, after a1, 5d
    
    section Development
    Frontend          :b1, 2024-01-15, 10d
    Backend           :b2, after b1, 8d
    
    section Testing
    QA Testing        :c1, after b2, 5d
    Deployment        :c2, after c1, 2d

Advanced Gantt

With milestones and dependencies

Gantt Charts

ganttmilestonecriticaldependencies

gantt
    title Development Sprint
    dateFormat YYYY-MM-DD
    
    section Phase 1
    Task A            :active, a1, 2024-01-01, 3d
    Task B            :a2, after a1, 2d
    Milestone 1       :milestone, m1, after a2, 0d
    
    section Phase 2
    Task C            :crit, c1, after m1, 4d
    Task D            :c2, after c1, 3d

Basic Pie Chart

Simple percentage distribution

Pie Charts

piechartpercentagedistribution

pie title Market Share
    "Product A" : 45
    "Product B" : 30
    "Product C" : 15
    "Others" : 10

Basic Git Graph

Simple git branch visualization

Git Graphs

gitbranchversioncontrol

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit

Advanced Git Flow

Complex branching strategy

Git Graphs

gitflowbranchesmergetag

gitGraph
    commit id: "Initial"
    branch develop
    checkout develop
    commit id: "Feature prep"
    
    branch feature
    checkout feature
    commit id: "Add feature"
    commit id: "Fix bug"
    
    checkout develop
    merge feature
    
    checkout main
    merge develop tag: "v1.0"
    
    checkout develop
    commit id: "Hotfix"

Basic User Journey

Simple user experience flow

User Journey

journeyuserexperienceflow

journey
    title My Working Day
    section Morning
      Wake up: 3: Me
      Breakfast: 4: Me
      Commute: 2: Me, Cat
    section Work
      Meeting: 3: Me, Boss
      Coding: 5: Me
      Lunch: 4: Me, Colleague
    section Evening
      Go home: 2: Me
      Relax: 5: Me

Basic Requirement Diagram

System requirements visualization

Requirements

requirementspecificationsystem

requirementDiagram
    requirement UserAuth {
        id: 1
        text: User authentication system
        risk: high
        verifymethod: test
    }
    
    requirement DataEncryption {
        id: 2
        text: Encrypt sensitive data
        risk: high
        verifymethod: inspection
    }
    
    element LoginPage {
        type: interface
    }
    
    UserAuth - contains -> LoginPage
    DataEncryption - contains -> LoginPage

Basic Mindmap

Simple concept organization

Mindmaps

mindmapbrainstormideasconcept

mindmap
  root((Project))
    Planning
      Research
      Design
      Budget
    Development
      Frontend
      Backend
      Testing
    Deployment
      Hosting
      Monitoring

Basic Timeline

Historical events timeline

Timeline

timelinehistoryeventsmilestones

timeline
    title Project Milestones
    2024-Q1 : Project Kickoff
            : Requirements Gathering
    2024-Q2 : Design Phase
            : Development Start
    2024-Q3 : Beta Release
            : User Testing
    2024-Q4 : Final Release
            : Maintenance Phase

How to Use Mermaid Diagrams

1. Copy any example code using the copy button

2. Wrap the code in a code block with the mermaid language identifier:

```mermaid
graph TD;
    A-->B;
```

3. Use in Markdown files and supported editors that render Mermaid diagrams

4. Learn more at mermaid.js.org