Skip to content

MERMAID.md

Latest commit

 

History

History
376 lines (310 loc) · 5.98 KB

MERMAID.md

File metadata and controls

376 lines (310 loc) · 5.98 KB

Mermaid Diagrams

NoteDiscovery supports Mermaid diagrams directly in your markdown notes! Mermaid lets you create diagrams and visualizations using text-based definitions, making it easy to version control and collaborate.

How to Use

Simply create a code block with the language set to mermaid:

```mermaid
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
```

Basic Examples

Flowchart

```mermaid
graph LR
    A[Square Rect] --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D
```

Preview:

graph LR
    A[Square Rect] --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D
Loading

Sequence Diagram

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
```

Preview:

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!
Loading

Class Diagram

```mermaid
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
```

Preview:

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
Loading

State Diagram

```mermaid
stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```

Preview:

stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
Loading

Gantt Chart

```mermaid
gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Planning
    Research           :a1, 2024-01-01, 30d
    Design             :after a1, 20d
    section Development
    Backend            :2024-02-01, 40d
    Frontend           :2024-02-15, 35d
    section Testing
    Integration Tests  :2024-03-20, 15d
```

Preview:

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Planning
    Research           :a1, 2024-01-01, 30d
    Design             :after a1, 20d
    section Development
    Backend            :2024-02-01, 40d
    Frontend           :2024-02-15, 35d
    section Testing
    Integration Tests  :2024-03-20, 15d
Loading

Entity Relationship Diagram

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
    
    CUSTOMER {
        string name
        string email
        string phone
    }
    ORDER {
        int orderNumber
        date orderDate
        string status
    }
```

Preview:

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
    
    CUSTOMER {
        string name
        string email
        string phone
    }
    ORDER {
        int orderNumber
        date orderDate
        string status
    }
Loading

Pie Chart

```mermaid
pie title Pet Preferences
    "Dogs" : 45
    "Cats" : 30
    "Birds" : 15
    "Fish" : 10
```

Preview:

pie title Pet Preferences
    "Dogs" : 45
    "Cats" : 30
    "Birds" : 15
    "Fish" : 10
Loading

Git Graph

```mermaid
gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
```

Preview:

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

User Journey

```mermaid
journey
    title My Working Day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
```

Preview:

journey
    title My Working Day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
Loading

Mindmap

```mermaid
mindmap
  root((NoteDiscovery))
    Features
      Markdown
      Themes
      Search
      Folders
    Integrations
      MathJax
      Mermaid
      Syntax Highlighting
    Benefits
      Fast
      Simple
      Offline-first
```

Preview:

mindmap
  root((NoteDiscovery))
    Features
      Markdown
      Themes
      Search
      Folders
    Integrations
      MathJax
      Mermaid
      Syntax Highlighting
    Benefits
      Fast
      Simple
      Offline-first
Loading

Theme Support

Mermaid diagrams automatically adapt to your current NoteDiscovery theme:

  • Light themes use the default Mermaid color scheme
  • Dark themes use dark-optimized colors with proper contrast
  • Theme changes automatically re-render all diagrams

Tips

  1. Keep it simple: Start with basic diagrams and add complexity as needed
  2. Use comments: Add %% for comments in your Mermaid code
  3. Test syntax: If a diagram doesn't render, check the Mermaid documentation
  4. Export: Diagrams are included when you export notes to HTML

More Information

For the complete Mermaid syntax and more diagram types, visit the official documentation:

Pro Tip: Combine Mermaid diagrams with LaTeX math expressions and code blocks for comprehensive technical documentation! 📊