Mermaid Diagrams

Krokanti Notes supports Mermaid — a text-based diagramming language. Write diagram code in a fenced code block and it renders as a visual diagram in the editor.

How to Insert a Diagram

In the visual editor, type three backticks, then mermaid, then Enter:

```mermaid
your diagram code here
```

Or in source (Markdown) view, write it directly.

Flowcharts

The most common diagram type — great for decision trees, processes, and workflows.

flowchart TD
  A[Start] --> B{Is it working?}
  B -->|Yes| C[Deploy]
  B -->|No| D[Debug]
  D --> B
  C --> E[Done]

Direction options: TD (top-down), LR (left-right), BT (bottom-top), RL (right-left)

Node shapes:

• [Rectangle]
• (Rounded rectangle)
• {Diamond / decision}
• ((Circle))
• [/Parallelogram/]

Sequence Diagrams

Show interactions between systems or people over time.

sequenceDiagram
  User->>Server: POST /api/login
  Server->>Database: Verify credentials
  Database-->>Server: User found
  Server-->>User: JWT token

Use ->> for a solid arrow and -->> for a dashed return arrow.

Gantt Charts

Project timelines and task scheduling:

gantt
  title Project Timeline
  dateFormat YYYY-MM-DD
  section Phase 1
    Research    :done, 2026-01-01, 2026-01-14
    Design      :active, 2026-01-15, 2026-01-28
  section Phase 2
    Development : 2026-02-01, 2026-03-01
    Testing     : 2026-03-01, 2026-03-15

Entity Relationship Diagrams

Database schema visualization:

erDiagram
  USER ||--o{ NOTE : creates
  NOTE ||--o{ TAG : has
  NOTE ||--o{ VERSION : has
  USER ||--o{ FOLDER : owns

Pie Charts

Simple proportional data:

pie title Time Allocation
  "Writing" : 40
  "Research" : 30
  "Review" : 20
  "Admin" : 10

Class Diagrams

Object-oriented design:

classDiagram
  class Note {
    +String title
    +String content
    +Boolean isPinned
    +save()
    +delete()
  }
  class Folder {
    +String name
    +Note[] notes
  }
  Folder --> Note

Tips

• Mermaid diagrams render in public note views too — great for sharing technical documentation
• Diagram code is stored as plain text — editable and searchable just like the rest of your note
• For complex diagrams, use the Mermaid Live Editor to build and preview, then paste the code into your note