Mermaid Design

Premiers pas

mermaid.design est un éditeur de diagrammes Mermaid en ligne gratuit. Écrivez la syntaxe Mermaid à gauche et regardez le diagramme se rendre en direct à droite. Tout s’exécute entièrement dans votre navigateur — vos diagrammes ne quittent jamais votre appareil.

Votre premier diagramme

  1. Ouvrez mermaid.design — l’éditeur se charge avec un organigramme d’exemple.
  2. Modifiez le code Mermaid dans le panneau de gauche, par exemple :
flowchart TD
    A[Début] --> B{Prêt ?}
    B -- Oui --> C[Livrer]
    B -- Non --> D[Continuer à coder]
  1. L’aperçu se re-rend automatiquement pendant la saisie (avec un léger délai anti-rebond). Si la syntaxe est invalide, le dernier diagramme valide reste visible derrière une bannière d’erreur, et l’éditeur de code marque la ligne en échec.

L’atelier

L’éditeur est un atelier à trois panneaux :

  • Éditeur de code (à gauche) — un éditeur Monaco (le même moteur que VS Code) avec coloration syntaxique Mermaid, marqueurs d’erreur en ligne et barre d’outils formater/copier/effacer. Vous pouvez le réduire en une fine bande d’icônes ou faire glisser le séparateur pour le redimensionner.
  • Aperçu (au centre) — le diagramme rendu en direct. Faites glisser pour déplacer, Ctrl/⌘ + molette pour zoomer, double-clic pour ajuster. Une barre d’outils flottante propose des contrôles de zoom et un sélecteur d’arrière-plan du canevas (points / blanc / damier).
  • Panneau de thème (à droite) — préréglages en un clic, variables de thème détaillées et génération de thème à partir d’une couleur de départ. Voir ci-dessous.

Sur les écrans étroits, l’atelier devient un panneau unique avec une barre d’onglets Code / Aperçu / Thème en bas.

Modes de rendu

Utilisez le contrôle segmenté dans la barre de navigation pour changer la façon dont votre diagramme est rendu :

  • Officiel — la sortie SVG Mermaid standard, exactement telle que le moteur Mermaid la rend.
  • ASCII — votre diagramme converti en art textuel que vous pouvez coller dans des commentaires de code, des documents ou des terminaux. Voir Rendu ASCII.

Le mode fait partie de l’URL, vous pouvez donc mettre en signet ou partager un lien vers un mode spécifique.

Thèmes

Chaque diagramme est rendu avec le thème base plus un ensemble de plus de 70 variables de thème modifiables :

  • Préréglages — les 11 thèmes Mermaid intégrés (Default, Neutral, Forest, Dark, Base, et plus) plus des préréglages de designer, chacun avec un mini-aperçu.
  • Variables du thème — ajustez les couleurs, bordures et polices individuelles par groupe, avec recherche.
  • Générer — dérivez un thème complet à partir d’une seule couleur de départ, clair ou sombre.

Votre travail est enregistré automatiquement

L’éditeur conserve votre code, votre thème et votre mise en page dans le stockage local de votre navigateur. Fermez l’onglet et revenez plus tard — votre diagramme est toujours là. Rien n’est envoyé vers un serveur.

Prochaines étapes