Krokanti Notes prend en charge Mermaid — un langage de diagrammes basé sur du texte. Écris le code du diagramme dans un bloc de code délimité et il s'affiche sous forme de diagramme visuel dans l'éditeur.

Comment insérer un diagramme

Dans l'éditeur visuel, tape trois backticks, puis mermaid, puis Entrée :

```mermaid
ton code de diagramme ici
```

Ou en vue source (Markdown), écris-le directement.

Organigrammes

Le type de diagramme le plus courant — idéal pour les arbres de décision, les processus et les flux de travail.

flowchart TD
  A[Début] --> B{Ça fonctionne ?}
  B -->|Oui| C[Déployer]
  B -->|Non| D[Déboguer]
  D --> B
  C --> E[Terminé]

Options de direction : TD (de haut en bas), LR (de gauche à droite), BT (de bas en haut), RL (de droite à gauche)

Formes de nœuds :

[Rectangle]
(Rectangle arrondi)
{Losange / décision}
((Cercle))
[/Parallélogramme/]

Diagrammes de séquence

Montre les interactions entre systèmes ou personnes dans le temps.

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

Utilise ->> pour une flèche pleine et -->> pour une flèche de retour en pointillés.

Diagrammes de Gantt

Calendriers de projet et planification des tâches :

gantt
  title Calendrier du projet
  dateFormat YYYY-MM-DD
  section Phase 1
    Recherche   :done, 2026-01-01, 2026-01-14
    Conception  :active, 2026-01-15, 2026-01-28
  section Phase 2
    Développement : 2026-02-01, 2026-03-01
    Tests         : 2026-03-01, 2026-03-15

Diagrammes entité-relation

Visualisation de schéma de base de données :

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

Diagrammes circulaires

Données proportionnelles simples :

pie title Répartition du temps
  "Écriture" : 40
  "Recherche" : 30
  "Révision" : 20
  "Administration" : 10

Diagrammes de classes

Conception orientée objet :

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

Les diagrammes s'affichent automatiquement au fur et à mesure que tu tapes — pas besoin de les prévisualiser séparément. S'il y a une erreur de syntaxe, le code brut est affiché à la place du diagramme ; corrige la faute de frappe et il s'affiche de nouveau.

Conseils

Les diagrammes Mermaid s'affichent aussi dans les vues de notes publiques — idéal pour partager de la documentation technique
Le code du diagramme est stocké en texte brut — modifiable et consultable comme le reste de ta note
Pour les diagrammes complexes, utilise l'éditeur en ligne Mermaid pour construire et prévisualiser, puis colle le code dans ta note

Diagrammes Mermaid