Éditeur Mermaid en Direct

Éditeur Mermaid en Direct

Tapez la syntaxe Mermaid à gauche et regardez le diagramme se mettre à jour à droite en temps réel. Supporte les onze types de diagrammes de Mermaid — flowchart, sequence, class, state, ER, Gantt, pie, mindmap, timeline, parcours utilisateur et diagramme à quadrants — avec cinq thèmes (default, dark, forest, neutral, base). Exportez le diagramme en SVG vectoriel propre ou en PNG haute résolution. Tout tourne dans votre navigateur ; rien n'est téléversé.

Qu'est-ce que Mermaid et que peut-on dessiner ?

Mermaid est un langage de diagrammes basé sur JavaScript qui permet de décrire un diagramme en texte brut. Né comme alternative aux outils type Visio coûteux, il est devenu le standard de fait dans la documentation des développeurs — supporté nativement par GitHub, GitLab, Notion, Obsidian, VS Code et de nombreux générateurs statiques.

Cet éditeur supporte tous les types fournis par Mermaid 10 :

- Flowchart — boîtes, décisions, flèches. Le plus utilisé.
- Sequence — échanges de messages entre participants dans le temps.
- Class — diagrammes UML de classes (héritage, composition, méthodes, attributs).
- State — machines à états finis avec transitions et sous-états.
- Entity-Relationship — tables de base de données et leurs relations.
- Gantt — chronogrammes projet avec tâches, dépendances, jalons.
- Pie — diagrammes de proportions.
- Mindmap — hiérarchies radiales d'idées.
- Timeline — événements sur un axe horizontal.
- Parcours utilisateur — flux UX avec scores de ressenti.
- Diagramme à quadrants — grille 2×2 pour prioriser.

Choisissez-en un dans le menu Exemples pour démarrer, puis adaptez le code à vos données.

En quoi diffère-t-il du Mermaid Live Editor officiel ?

L'éditeur officiel mermaid.live est excellent — et cet outil utilise exactement le même moteur de rendu (mermaid-js v10.9). Différences :

- Cette page est l'une d'environ 1 400 outils sur un même domaine ; l'éditeur partage donc l'UI du site, le mode sombre et le changement de langue (English/Spanish/Vietnamese/French/Portuguese).
- Pas de comptes, pas de canevas Pan/Zoom, pas d'URL partageable : volontairement plus simple. Pour partager un lien ou conserver un diagramme, mermaid.live ou un GitHub Gist convient mieux.
- On utilise le bundle UMD depuis cdn.jsdelivr.net ; le diagramme est rendu après le chargement de la page. Aucune étape de build, aucune offre payante.
- Tout le traitement est local. Mermaid rend le SVG entièrement en JavaScript ; rien n'est envoyé à un serveur.

Pour intégrer Mermaid dans un environnement privé/hors-ligne, le même code fonctionne — hébergez mermaid.min.js et lancez le même rendu.

Comment créer un flowchart ?

Les flowcharts sont les plus simples. Commencez par une direction puis listez nœuds et arêtes :

flowchart TD
A[Début] --> B{Décision ?}
B -- Oui --> C[Faire l'action]
B -- Non --> D[Ignorer]
C --> E[Fin]
D --> E

Directions : TD (top-down), LR (left-right), BT, RL.

Formes par type de parenthèses :
- [Rectangle]
- (Arrondi)
- ((Cercle))
- {Losange / décision}
- [/Parallélogramme/]
- [\Trapèze\]
- [(Cylindre)]

Styles d'arête :
- --> flèche
- --- ligne
- -. pointillé .->
- ==> flèche épaisse
- -- texte -->

Chargez l'exemple Flowchart et jouez avec les formes pour vous approprier la syntaxe.

Comment réaliser un sequence diagram pour une API ou un flux de chat ?

Les sequence diagrams montrent l'ordre des messages entre participants :

sequenceDiagram
participant Browser
participant API
participant DB
Browser->>API: POST /login {email, password}
API->>DB: SELECT user WHERE email=?
DB-->>API: row(id, hash)
API->>API: bcrypt.compare()
API-->>Browser: 200 OK + token
Note over Browser,API: Les requêtes suivantes<br>envoient le token
Browser->>API: GET /profile (Bearer token)
API-->>Browser: 200 OK + profile JSON

Flèches : ->> pleine avec pointe ; -->> réponse pointillée ; -> fine ; --> pointillée.

Notes : Note over X,Y: text — ajoute une note jaune couvrant les participants.

Loops, alt, par et critical sont supportés. Grammaire complète sur mermaid.js.org/syntax/sequenceDiagram.

Comment modéliser une base de données avec ER diagram ?

Utilisez erDiagram et un caractère de cardinalité par côté de relation :

erDiagram
USER ||--o{ ORDER : passe
ORDER ||--|{ LINE_ITEM : contient
USER {
int id PK
string email
string name
}
ORDER {
int id PK
int user_id FK
date created_at
}

Clés de cardinalité (gauche à droite) :
- |o zéro ou un
- || exactement un
- }o zéro ou plus
- }| un ou plus

Donc USER ||--o{ ORDER se lit 'un utilisateur a zéro ou plus de commandes'.

Dans le bloc {}, listez les colonnes en type nom modificateur — modificateur PK (clé primaire) ou FK (clé étrangère). Idéal pour intégrer un petit schéma dans un README sans déployer un vrai viewer.

Comment fonctionne la syntaxe Gantt ?

La syntaxe Gantt décrit des tâches par section, avec dates, durées et dépendances :

gantt
title Plan projet
dateFormat YYYY-MM-DD
section Conception
Wireframes :done, w1, 2026-05-01, 5d
Maquettes :active, m1, after w1, 7d
section Développement
Backend :b1, 2026-05-13, 14d
Frontend :f1, after b1, 10d
section Lancement
QA :q1, after f1, 3d
Release :milestone, after q1, 0d

Format tâche : 'Nom : [statuts], task-id, date-début | after task-id, durée | date-fin'

Statuts : done, active, crit (chemin critique).

Jalons : terminer par 0d pour rendre en losange.

Dépendances : 'after task-id' enchaîne les tâches, modifier une tâche en amont décale automatiquement les suivantes. Pour des plannings complexes, Smartsheet ou MS Project sont mieux — mais pour la documentation et les propositions rapides, Mermaid Gantt est difficile à battre.

Puis-je exporter le diagramme ?

Oui — deux formats :

- SVG : vectoriel, infiniment scalable, s'intègre directement dans HTML/Markdown/PDF, et le texte reste sélectionnable et cherchable. Le fichier téléchargé contient exactement le XML rendu visible dans l'inspecteur.
- PNG : raster en 2× par défaut. Chaque pixel du diagramme devient 4 pixels en haute DPI. Fond blanc ajouté pour un rendu correct sur Slack/Discord/email. Utilisez-le quand la destination n'accepte pas le SVG.

Les deux exports se font entièrement dans le navigateur. Le PNG utilise un HTMLCanvasElement pour rastériser le SVG ; le SVG est un téléchargement direct du XML. Aucun aller-retour serveur.

Pour des diagrammes d'architecture vivant dans un dépôt Git, préférez SVG : il diff raisonnablement dans les pull requests et c'est le format que GitHub rend inline.

Y a-t-il un surligneur d'erreurs de syntaxe ?

Quand Mermaid n'arrive pas à parser votre code (faute de frappe sur un mot-clé, parenthèse non fermée, forme inconnue), le message d'erreur du parser apparaît sous l'éditeur. Le dernier diagramme valide reste affiché à droite — vous pouvez ainsi comparer votre code actuel à la dernière version valide pendant la correction.

Les messages de Mermaid sont parfois cryptiques. Correctifs fréquents :
- 'Parse error on line N' — regardez la ligne indiquée et la précédente ; souvent flèche ou parenthèse manquante.
- 'Lexical error' — caractère illégal, souvent un guillemet Unicode (“ ”) au lieu d'ASCII (").
- Le mot-clé du type (flowchart, sequenceDiagram…) doit être la toute première ligne non vide ; un espace avant casse le parsing.

Pour déboguer en direct, collez un extrait court et ajoutez les lignes progressivement — Mermaid rend à chaque frappe (avec un petit debounce), donc l'édition fautive se repère facilement.

Fonctionnalités Clés

• Rendu en direct du diagramme à chaque frappe (debounce)
• Onze types : flowchart, sequence, class, state, ER, gantt, pie, mindmap, timeline, journey, quadrant
• Cinq thèmes : default, dark, forest, neutral, base
• Chargement d'un exemple complet pour chaque type
• Export SVG (vectoriel) ou PNG (2× retina)
• Debounce par frappe : UI fluide même sur grands diagrammes
• Conserve le dernier rendu valide si le code en cours a une erreur
• Boutons zoom in/out et reset pour le panneau d'aperçu
• Copie de la source Mermaid dans le presse-papiers
• Propulsé par [email protected] depuis le CDN jsDelivr (URL pré-testée)
• 100 % côté client — la source ne quitte pas le navigateur
• Mise en page responsive adaptée au mobile
• Mode sombre avec bascule de thème
• Niveau de sécurité strict — les diagrammes n'exécutent pas de HTML arbitraire
• Fonctionne dans tout navigateur moderne ; sans build