Du Mermaid réel et prêt à l'emploi pour chaque type de diagramme courant. Chacun s'affiche en direct ci-dessous — ouvrez-en un dans l'éditeur pour l'ajuster, ou copiez le code source directement dans votre documentation. Rien n'est téléversé.
Des rectangles pour les étapes, des losanges pour les décisions, des flèches étiquetées pour les embranchements — le diagramme de processus incontournable.
flowchart TD
Start([User visits app]) --> A{Logged in?}
A -->|Yes| Home[Show dashboard]
A -->|No| Login[Show login form]
Login --> B{Credentials valid?}
B -->|No| Err[Show error] --> Login
B -->|Yes| Token[Issue session token] --> HomeQui appelle quoi, et dans quel ordre. Les flèches pleines sont des requêtes, les flèches en pointillés des réponses — idéal pour les flux d'API et d'authentification.
sequenceDiagram
participant C as Client
participant API
participant DB as Database
C->>API: POST /orders
API->>DB: INSERT order
DB-->>API: order_id
API-->>C: 201 CreatedModélisez une base de données avec une cardinalité en patte d'oie. On y lit « un utilisateur écrit plusieurs articles » d'un seul coup d'œil.
erDiagram
USER ||--o{ POST : writes
POST ||--o{ COMMENT : has
USER ||--o{ COMMENT : makes
POST }o--o{ TAG : "tagged with"Plus d'exemples et de syntaxe de diagramme entité-association →
Classes, attributs, méthodes et relations. « <|-- » désigne l'héritage ; les marqueurs de visibilité (+/-) montrent l'interface.
classDiagram
class Animal {
+String name
+move()
}
class Dog {
+bark()
}
class Cat {
+meow()
}
Animal <|-- Dog
Animal <|-- CatLes états qu'une entité peut occuper et les événements qui la font passer de l'un à l'autre — cycles de vie de commandes, flux de validation, protocoles.
stateDiagram-v2
[*] --> Draft
Draft --> Submitted: submit
Submitted --> UnderReview: assigned
UnderReview --> Approved: approve
UnderReview --> Rejected: reject
Rejected --> Draft: revise
Approved --> [*]Une chronologie datée à partir de quelques lignes de texte. Indiquez qu'une tâche démarre « after » une autre et le diagramme les enchaîne pour vous.
gantt
title Sprint 24
dateFormat YYYY-MM-DD
section Dev
Feature A :a, 2026-02-02, 5d
Feature B :b, after a, 4d
section QA
Test pass :after b, 3dRien que de l'indentation : la ligne la moins indentée est le centre, chaque niveau plus profond est une branche. Faites un brainstorming en texte brut.
mindmap
root((Blog ideas))
Tutorials
Mermaid tips
Git workflows
Opinion
Tooling rants
Lists
Best CLIsChaque exemple ici est du texte Mermaid brut — la même syntaxe que GitHub, GitLab et Obsidian affichent nativement. Ouvrez-en un dans l'éditeur, renommez les nœuds selon vos besoins, et exportez un SVG ou un PNG.
Voir aussi: Éditeur Mermaid · Intégrer dans GitHub · Mermaid vs PlantUML
Oui. Copiez, modifiez et réutilisez librement n'importe quel exemple — sans inscription, sans compte et sans attribution requise. Les diagrammes s'affichent dans votre navigateur, donc rien n'est téléversé.
Cliquez sur « Ouvrir dans l'éditeur » sur n'importe quel exemple. Il charge le code source Mermaid exact dans l'éditeur en direct, où vous pouvez le modifier, le voir se réafficher instantanément, et exporter un SVG ou un PNG.
Oui. Copiez le code source et collez-le dans un bloc de code délimité ```mermaid au sein d'un README, d'une issue ou d'une pull request — GitHub et GitLab affichent Mermaid nativement, sans image nécessaire.
Diagramme de flux, séquence, entité-association (base de données), classes UML, états, Gantt et carte mentale. Ce sont tous des types de diagrammes Mermaid standard, et chacun renvoie vers un générateur dédié proposant plus d'exemples et un aide-mémoire de syntaxe.
Oui — ouvrez n'importe quel exemple dans l'éditeur, puis utilisez les boutons d'export SVG ou PNG. Le SVG reste net à n'importe quelle taille ; le PNG est pratique pour les diapositives et les documents.