Aller au contenu
fr
Tous les outils

Catégories

Outils développeurEncodage & décodageJSON & donnéesHash & checksumOutils de texteDate & heureOutils réseauOutils de fichiersMarkdown & diagrammes

Éditeur Mermaid en direct

Un éditeur Mermaid libre : saisissez un diagramme sous forme de code et obtenez un rendu en direct, exportable.

Traité localement dans votre navigateur

Options
0 caractères · 0 lignes
Le résultat apparaîtra ici.

Qu'est-ce que Éditeur Mermaid en direct ?

Mermaid transforme de courtes définitions textuelles en diagrammes : diagrammes de flux, de séquence, de classes, d’états, entité-association, Gantt, cartes mentales, camemberts, parcours utilisateur, chronologies et graphes Git. La source étant du texte brut, les diagrammes peuvent vivre dans le contrôle de version, à côté du code et de la documentation.

Cet éditeur affiche votre code avec Mermaid en mode de sécurité strict et libellés HTML désactivés : le SVG ne contient que des formes et du texte simples. En cas d’erreur de syntaxe, vous obtenez le message de l’analyseur avec la ligne et l’élément attendu, au lieu d’un écran vide. Choisissez un thème et exportez le résultat.

Comment ça marche ?

  1. Saisissez ou collez du code Mermaid ; la première ligne doit nommer le type de diagramme (flowchart, sequenceDiagram, gantt…).
  2. Choisissez un thème (par défaut, neutre, forêt, sombre ou base) adapté à votre document.
  3. Si le diagramme ne s’affiche pas, lisez le message de l’analyseur, corrigez la ligne indiquée et réessayez.
  4. Exportez le diagramme en SVG ou PNG pour des présentations, wikis et documentations.

Cas d'usage courants

  • Esquisser des diagrammes d’architecture et de processus pour un README ou un document de conception.
  • Déboguer un bloc Mermaid qui ne s’affiche pas sur GitHub ou dans votre wiki.
  • Créer des diagrammes pour des présentations sans outil de dessin.
  • Apprendre la syntaxe Mermaid en modifiant un exemple qui fonctionne.

Exemples

Essayez cette saisie dans l'outil ci-dessus :

flowchart TD
    A([Start]) --> B[Read configuration]
    B --> C{Configuration valid?}
    C -- Yes --> D[Start server]
    C -- No --> E[Show error message]
    E --> B
    D --> F([Ready])

Confidentialité

Éditeur Mermaid en direct s'exécute entièrement dans votre navigateur. Le texte ou les fichiers que vous fournissez sont traités sur votre appareil et ne sont ni envoyés, ni journalisés, ni stockés sur nos serveurs.

Limites

Le rendu utilise la version de Mermaid intégrée à ce site : des types de diagrammes ou une syntaxe très récents peuvent différer de votre plateforme. Les fonctions interactives comme les liens cliquables sont désactivées par sécurité.

Questions fréquentes

Le code de mon diagramme est-il envoyé à un serveur ?

Non. Mermaid s’exécute localement dans votre navigateur et le code ne quitte jamais votre appareil.

Pourquoi ai-je une erreur de syntaxe ?

Le message cite la ligne où l’analyse s’est arrêtée et le jeton attendu. Causes fréquentes : mot-clé de diagramme absent en première ligne, libellés contenant crochets ou parenthèses sans guillemets, ou caractère parasite dans une flèche.

Puis-je utiliser le diagramme en dehors de ce site ?

Oui. Exportez en SVG pour un graphique vectoriel ou en PNG pour des présentations, ou copiez le code Mermaid dans toute plateforme compatible : GitHub, GitLab, Notion, etc.

Outils associés

Plus d'outils dans Markdown & diagrammes →