Skip to main content
Open App
Reviewed on July 22, 2026Product version 1.8.2
On this page

Advanced Mermaid Examples

← Back to Markdown examples

Use these templates as a starting point for your own diagrams.

Decision flowchart

flowchart TD
    Start([Start]) --> Input[/Data input/]
    Input --> Process{Process?}
    Process -->|Yes| Execute[Run task]
    Process -->|No| Skip[Skip]
    Execute --> Check{Success?}
    Check -->|Yes| Success[✅ Success]
    Check -->|No| Retry{Try again?}
    Retry -->|Yes| Execute
    Retry -->|No| Fail[❌ Failure]
    Skip --> End([End])
    Success --> End
    Fail --> End

State diagram

stateDiagram-v2
    [*] --> Idle
    Idle --> Loading: Upload
    Loading --> Processing: Files loaded
    Processing --> Saving: Validated
    Saving --> Success: Saved
    Saving --> Error: Failed
    Success --> Idle: Complete
    Error --> Idle: Retry
    Error --> [*]: Cancel

Timeline

timeline
    title Project development
    section Phase 1
        Setup : Project configuration
              : Dependency installation
    section Phase 2
        IndexedDB : Database implementation
                  : Persistence tests
    section Phase 3
        Components : Component creation
                   : Interface integration
    section Phase 4
        Testing : Functional tests
                : Offline tests
    section Phase 5
        Release : Production build
                : Distribution

Entity-relationship diagram

erDiagram
    FILE ||--o{ FOLDER : belongs_to
    FILE {
        int id PK
        string path
        string name
        text content
        datetime createdAt
        datetime updatedAt
    }
    FOLDER {
        int id PK
        string path
        string name
    }
    USER ||--o{ FILE : creates
    USER {
        int id PK
        string name
    }

Gantt chart

gantt
    title Project schedule
    dateFormat YYYY-MM-DD
    section Planning
    Define requirements      :a1, 2025-10-01, 3d
    Create prototype         :a2, after a1, 2d
    section Development
    Set up project           :b1, 2025-10-06, 1d
    Implement IndexedDB      :b2, after b1, 2d
    Create components        :b3, after b2, 3d
    Integrate interface      :b4, after b3, 2d
    section Testing
    Unit tests               :c1, after b4, 2d
    Integration tests        :c2, after c1, 2d
    section Release
    Production build         :d1, after c2, 1d
    Distribution             :d2, after d1, 1d

Mind map

mindmap
  root((Raziel.MD))
    Features
      Upload
        Drag and drop
        File selector
        Folder selector
      Reading
        Markdown
        Mermaid diagrams
        Syntax highlighting
      Storage
        IndexedDB
        Offline use
        PWA
    Technology
      Interface
        Vue 3
        TypeScript
        TailwindCSS
      Libraries
        Marked.js
        Mermaid.js
        Dexie.js
    Experience
      Dark mode
      Search
      Navigation
      Responsive layout

Diagram types

Mermaid offers several types:

  • ✅ Flowchart
  • ✅ Sequence diagram
  • ✅ Class diagram
  • ✅ State diagram
  • ✅ Entity-relationship diagram
  • ✅ Gantt chart
  • ✅ Pie chart
  • ✅ Git graph
  • ✅ Timeline
  • ✅ Mind map

Try creating your own diagrams.

Keep exploring