Éditeur Mermaid en ligne

Un éditeur Mermaid intégré à un éditeur Markdown

Mermaid transforme quelques lignes de texte en diagramme, ce qui rend les diagrammes faciles à comparer, à relire et à garder à côté de la documentation qu'ils expliquent. L'éditeur de cette page est un éditeur Markdown côte à côte avec la prise en charge de Mermaid intégrée : écrivez le diagramme là où il a sa place dans le document, et l'aperçu le redessine un instant après que vous avez arrêté de taper. Les diagrammes que vous n'avez pas modifiés reviennent d'un cache, si bien que retoucher le texte autour d'eux reste rapide ; le moteur lui-même se charge la première fois qu'un document contient un diagramme, ce qui peut prendre un moment.

Commencez par ce bloc dans l'éditeur :

```mermaid
flowchart LR
  Idea --> Draft --> Review
  Review -->|changes| Draft
  Review -->|approved| Publish
```

et l'organigramme apparaît à droite. Remplacez LR (de gauche à droite) par TD (de haut en bas), ajoutez un nœud ou renommez une flèche, et l'image suit.

Les types de diagrammes que vous pouvez dessiner

Chaque diagramme ci-dessous est rendu dans l'aperçu. Placez le mot-clé du diagramme sur la première ligne à l'intérieur de la délimitation :

• Organigramme / flowchart (flowchart TD) — processus, décisions, schémas d'architecture.
• Diagramme de séquence (sequenceDiagram) — appels entre services ou personnes au fil du temps.
• Diagramme de classes (classDiagram) et diagramme d'états (stateDiagram-v2).
• Diagramme entité-relation (erDiagram) — schémas de bases de données.
• Diagramme de Gantt (gantt), frise chronologique (timeline) et parcours utilisateur (journey).
• Camembert (pie), diagramme en quadrants (quadrantChart) et carte mentale / mindmap (mindmap).
• Graphe Git (gitGraph), diagramme d'exigences (requirementDiagram) et C4 (C4Context).
• Types plus récents comme Sankey (sankey-beta), graphique XY (xychart-beta), blocs (block-beta), paquets (packet), kanban et architecture (architecture-beta).

La syntaxe des types de diagrammes en bêta peut changer d'une version de Mermaid à l'autre ; consultez donc la documentation officielle de Mermaid pour les mots-clés exacts. Cet éditeur exécute la version intégrée au site.

Déboguer un diagramme

Quand Mermaid ne peut pas analyser le code, le bloc du diagramme se transforme en encadré d'erreur avec le message de l'analyseur — le numéro de ligne, le texte sur lequel il a buté et ce qu'il attendait. Corrigez la ligne et le diagramme remplace l'erreur. Utilisez la disposition Côte à côte pour voir les deux à la fois ; l'aperçu défile avec la ligne que vous modifiez. Les diagrammes sont rendus dans le mode de sécurité strict de Mermaid : les rappels au clic et les scripts dans les définitions de diagrammes sont désactivés, et le HTML inline ailleurs dans le document est assaini.

Enregistrer, partager et exporter

Le document est enregistré automatiquement dans votre navigateur. Exporter → Télécharger .md vous donne le fichier Markdown à valider à côté de votre code. Partager crée un lien qui contient tout le document, afin qu'un collègue l'ouvre avec le diagramme déjà dessiné. Télécharger .html exporte une page autonome avec les diagrammes en SVG, et Imprimer / Enregistrer en PDF produit un PDF où les diagrammes restent nets à tout zoom. Les couleurs des diagrammes suivent le thème clair ou sombre que vous choisissez.

Quand l'utiliser et quand préférer un outil dédié

Si vous voulez seulement itérer sur un diagramme avec un panneau de configuration et des téléchargements d'images, un outil dédié comme mermaid.live est fait pour cela. Si le diagramme a sa place dans un document — un README, une note de conception, le plan d'un agent, une documentation de projet — un éditeur Markdown qui rend Mermaid est le chemin le plus court, car vous voyez le diagramme dans son contexte et pouvez télécharger le fichier entier. La syntaxe autour vous est nouvelle ? Voyez l'aide-mémoire Markdown, ou ouvrez directement l'éditeur Markdown.