Krokanti Notes unterstützt Mermaid – eine textbasierte Diagrammsprache. Schreibe Diagramm-Code in einem umzäunten Code-Block, und er wird als visuelles Diagramm im Editor gerendert.

So fügst du ein Diagramm ein

Tippe im visuellen Editor drei Backticks, dann mermaid, dann Enter:

```mermaid
Dein Diagramm-Code hier
```

Oder schreibe es in der Quelltext-Ansicht (Markdown) direkt.

Flussdiagramme

Der häufigste Diagrammtyp – ideal für Entscheidungsbäume, Prozesse und Workflows.

flowchart TD
  A[Start] --> B{Funktioniert es?}
  B -->|Ja| C[Deployen]
  B -->|Nein| D[Debuggen]
  D --> B
  C --> E[Fertig]

Richtungsoptionen: TD (von oben nach unten), LR (von links nach rechts), BT (von unten nach oben), RL (von rechts nach links)

Knotenformen:

[Rechteck]
(Abgerundetes Rechteck)
{Raute / Entscheidung}
((Kreis))
[/Parallelogramm/]

Sequenzdiagramme

Zeigen Interaktionen zwischen Systemen oder Personen im Zeitverlauf.

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

Verwende ->> für einen durchgezogenen Pfeil und -->> für einen gestrichelten Rückgabepfeil.

Gantt-Diagramme

Projektzeitpläne und Aufgabenplanung:

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-Diagramme

Visualisierung von Datenbankschemas:

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

Kreisdiagramme

Einfache proportionale Daten:

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

Klassendiagramme

Objektorientiertes Design:

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

Diagramme werden automatisch beim Tippen gerendert – du musst sie nicht separat in der Vorschau ansehen. Wenn ein Syntaxfehler vorliegt, wird der rohe Code anstelle des Diagramms angezeigt; korrigiere den Tippfehler, und es wird wieder gerendert.

Tipps

Mermaid-Diagramme werden auch in öffentlichen Notizenansichten gerendert – ideal zum Teilen technischer Dokumentation
Diagramm-Code wird als Klartext gespeichert – er ist bearbeitbar und durchsuchbar wie der Rest deiner Notiz
Für komplexe Diagramme verwende den Mermaid Live Editor, um zu erstellen und eine Vorschau zu sehen, und füge dann den Code in deine Notiz ein