Supported Diagram Types

myMDnotes supports all Mermaid v11 diagram types. Upload any markdown file containing these diagrams and see them rendered beautifully.

Flowchart

Visualize processes, workflows, and decision trees. Supports multiple directions (TB, LR, RL, BT).

```mermaid
graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Process]
  B -->|No| D[End]
```

Sequence Diagram

Model interactions between participants over time. Great for API documentation and system design.

```mermaid
sequenceDiagram
  participant Client
  participant Server
  Client->>Server: HTTP Request
  Server-->>Client: HTTP Response
```

Class Diagram

Document object-oriented structures with classes, interfaces, and relationships.

```mermaid
classDiagram
  class Animal {
    +String name
    +makeSound()
  }
  Animal <|-- Dog
  Animal <|-- Cat
```

State Diagram

Map state machines and transitions. Useful for documenting UI states or system lifecycles.

```mermaid
stateDiagram-v2
  [*] --> Idle
  Idle --> Processing: start
  Processing --> Done: complete
  Done --> [*]
```

Entity Relationship Diagram

Design and document database schemas with entities and their relationships.

```mermaid
erDiagram
  USER ||--o{ POST : writes
  POST ||--|{ COMMENT : has
  USER ||--o{ COMMENT : writes
```

Gantt Chart

Plan project timelines with tasks, dependencies, and milestones.

```mermaid
gantt
  title Project Plan
  dateFormat YYYY-MM-DD
  section Phase 1
  Design: des, 2024-01-01, 14d
  Development: dev, after des, 21d
```

Pie Chart

Show proportional data distributions.

```mermaid
pie title Browser Usage
  "Chrome": 65
  "Firefox": 20
  "Safari": 10
  "Other": 5
```

Git Graph

Visualize Git branch histories, merges, and cherry-picks.

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

Mindmap

Create hierarchical mind maps for brainstorming and organization.

```mermaid
mindmap
  root((Central Topic))
    Branch A
      Detail 1
      Detail 2
    Branch B
      Detail 3
```

Timeline

Document chronological events and milestones.

```mermaid
timeline
  title Project Milestones
  2024-Q1: Research
  2024-Q2: Development
  2024-Q3: Launch
```