Mermaid Diagram Examples

This document showcases various Mermaid diagrams that can be rendered in your Neorg web viewer.

Flowchart Example

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E[Celebrate]
    E --> F[End]

Sequence Diagram

sequenceDiagram
    participant User
    participant Neovim
    participant WebServer
    participant Browser
    
    User->>Neovim: Edit .norg file
    Neovim->>WebServer: Save file
    WebServer->>WebServer: Detect change
    WebServer->>WebServer: Convert to HTML
    Browser->>WebServer: Auto-refresh (5s)
    WebServer->>Browser: Send updated content
    Browser->>User: Display changes

Gantt Chart

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Setup
    Create Web Interface     :done,    des1, 2024-01-01, 3d
    Add Neorg Parser        :done,    des2, after des1, 2d
    section Features
    Add Dark Mode           :active,  des3, after des2, 1d
    Mobile Responsive       :         des4, after des3, 2d
    Mermaid Support        :         des5, after des4, 1d

Pie Chart

pie title Language Distribution
    "JavaScript" : 45
    "HTML" : 25
    "CSS" : 20
    "Neorg" : 10

State Diagram

stateDiagram-v2
    [*] --> Idle
    Idle --> Editing : Open File
    Editing --> Saving : Save
    Saving --> Processing : Auto-detect
    Processing --> Updated : Build HTML
    Updated --> Idle : Complete
    
    Editing --> Idle : Cancel

Entity Relationship Diagram

erDiagram
    USER ||--o{ NOTE : creates
    NOTE ||--|{ TAG : has
    NOTE {
        string title
        string content
        datetime created
        datetime modified
    }
    USER {
        string name
        string email
    }
    TAG {
        string name
        string color
    }

Git Graph

gitGraph
    commit
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    merge feature
    commit
    branch bugfix
    checkout bugfix
    commit
    checkout main
    merge bugfix

Class Diagram

classDiagram
    class NeorgParser {
        +parseContent(string)
        +toHTML(string)
        -escapeHtml(string)
    }
    class FileWatcher {
        +watch(path)
        +onChange(callback)
        -buildNotes()
    }
    class WebServer {
        +serve(port)
        +handleRequest()
    }
    
    NeorgParser <|-- FileWatcher
    FileWatcher <|-- WebServer

Mindmap

mindmap
  root((Neorg Web))
    Features
      Live Sync
      Dark Mode
      Mobile Friendly
      Search
    Technologies
      Node.js
      Chokidar
      Vanilla JS
      CSS Variables
    Deployment
      Cloudflare Pages
      GitHub Actions
      Auto Deploy

Journey Map

journey
    title User Journey for Note Taking
    section Writing
      Open Neovim: 5: User
      Create note: 4: User
      Add content: 5: User
    section Viewing
      Open browser: 5: User
      Navigate notes: 4: User
      Read content: 5: User
    section Sharing
      Deploy to web: 3: User
      Share link: 5: User
      Collaborate: 4: User, Team

Testing Markdown Features

Task List

• Create Mermaid examples
• Test flowcharts
• Test on mobile
• Deploy to production

Table Example

Code Example

// This is how the auto-refresh works
setInterval(() => {
    loadNotes();
}, 5000);

Note: All these diagrams are rendered dynamically in the browser using Mermaid.js

End of examples. Feel free to edit this file in Neovim and watch it auto-update in your browser!