Esquissez une machine à états avec stateDiagram-v2 : [*] --> Brouillon, Brouillon --> Relecture : soumettre, Relecture --> Publié : approuver, Publié --> [*]. États composites, points de choix et de fourche, concurrence avec -- et notes sont pris en charge. Utile pour des statuts de commande, des parcours d’interface et des protocoles.
Mode d’emploi
- Choisissez un type de diagramme pour charger un exemple, ou tapez du code Mermaid. L’aperçu se met à jour peu après la fin de la saisie.
- Les erreurs indiquent la ligne et le message de l’analyseur ; touchez l’erreur pour sélectionner la ligne. Le dernier diagramme valide reste affiché, grisé.
- Zoomez avec les boutons ou Ctrl + molette. Les couleurs suivent le mode clair ou sombre.
- Copiez ou téléchargez le SVG, ou téléchargez un PNG en taille double. Activez Transparent pour exporter sans fond.
- Copiez un lien de partage : le code est compressé dans le lien après le #.
- Mermaid dessine les diagrammes dans votre navigateur ; votre texte n’est jamais envoyé. L’éditeur garde votre dernier diagramme.
- Vous pouvez ouvrir des fichiers .mmd ou Markdown ; le premier bloc ```mermaid est utilisé.
- Mermaid tourne en mode de sécurité strict : clics et HTML dans les libellés sont désactivés.
Pourquoi des diagrammes en code
Mermaid décrit un diagramme en quelques lignes lisibles au lieu de boîtes déplacées à la main. flowchart LR puis A[Début] --> B{OK ?} et B -->|oui| C[Livrer] dessinent déjà une décision. Comme c’est du texte, le diagramme vit à côté du code dans Git, se relit dans une pull request et se met à jour en changeant une ligne ; la mise en page est calculée pour vous.
GitHub, GitLab, Notion, Obsidian et beaucoup d’outils de documentation affichent directement les blocs ```mermaid : un diagramme écrit ici se colle tel quel dans un README. Servez-vous de cet éditeur pour caler la syntaxe avec un retour immédiat, puis exportez en SVG ou PNG pour les endroits qui n’acceptent que des images.
Quel type de diagramme choisir
L’organigramme montre processus et décisions ; le diagramme de séquence, les messages entre services ou personnes dans le temps ; le diagramme de classes, des types et leurs relations ; le diagramme d’états, le passage d’un état à l’autre ; le diagramme entité-association, des tables avec cardinalités en patte de corbeau ; le Gantt planifie des tâches avec dates et dépendances ; le camembert montre des parts d’un tout ; la carte mentale part d’une idée ; la frise range des événements par période.
Conseils
Gardez des identifiants de nœud courts et mettez le texte lisible entre crochets : A[Le client passe commande]. Mettez entre guillemets les libellés contenant des caractères spéciaux. Regroupez avec subgraph dans les organigrammes et avec des blocs alt ou loop dans les séquences. Si c’est trop serré, passez de TD à LR ou coupez le diagramme en deux.
Questions fréquentes
Qu’est-ce que Mermaid ?
Mermaid est une bibliothèque JavaScript open source qui dessine des diagrammes à partir d’une syntaxe texte proche du Markdown. GitHub, GitLab et de nombreux wikis et applis de notes la prennent en charge nativement.
Puis-je utiliser le diagramme dans un README GitHub ?
Oui. Copiez le code dans un bloc qui commence par ```mermaid et GitHub le dessine. Si une plateforme ne gère pas Mermaid, exportez en SVG ou PNG et insérez l’image.
Pourquoi mon diagramme affiche-t-il une erreur de syntaxe ?
Le message donne la ligne et ce qu’attendait l’analyseur. Causes fréquentes : flèche manquante, crochet ou guillemet non fermé, ou mot réservé comme end utilisé comme identifiant ; écrivez End ou mettez-le entre guillemets.
Comment exporter une image haute résolution ?
Téléchargez le PNG pour une image au double de la taille affichée, nette sur les écrans haute densité et dans les présentations. Pour l’impression ou une retouche, prenez le SVG, qui s’agrandit sans perte. Activez Transparent pour supprimer le fond.
Puis-je partager un diagramme sans l’envoyer en ligne ?
Oui. Copiez le lien de partage : le code Mermaid est compressé dans la partie de l’URL après le #, que les navigateurs n’envoient pas aux serveurs. Ouvrir le lien restaure le diagramme.
Les clics et les libellés HTML fonctionnent-ils ?
Non. Mermaid tourne ici en mode de sécurité strict : clics, liens et HTML dans les libellés sont désactivés. Le reste de la syntaxe est dessiné normalement.