Aller au contenu principal
LibraTool logoLibraTool

Éditeur de diagrammes Mermaid — outil gratuit

Rédigez des organigrammes, diagrammes de séquence, diagrammes de Gantt et plus encore en syntaxe Mermaid avec un aperçu en direct. Exportez en SVG ou PNG. S'exécute entièrement dans votre navigateur.

💡 Écrivez vos diagrammes en syntaxe Mermaid — organigrammes, diagrammes de séquence, diagrammes de Gantt, diagrammes de classes et plus — et exportez-les en SVG ou PNG. Tout s'exécute dans votre navigateur : le texte de votre diagramme n'est jamais envoyé, et le moteur de rendu Mermaid est servi depuis ce site plutôt que depuis un CDN tiers.

Utilisations courantes

  • Créer un organigrammeCréez un diagramme de flux à partir du texte et exportez-le en tant qu'image.
  • Dessiner un diagramme de séquenceMontrez comment les systèmes ou les gens interagissent au fil du temps.
  • Ajouter un diagramme à un READMECréez des diagrammes que GitHub rend nativement dans votre README.
  • Créer un diagramme de GanttDisposez une chronologie du projet sous la forme d'un diagramme de Gantt à partir du texte.
  • Créer un diagramme de classeDiagrammez les classes et leurs relations pour la conception de logiciels.

Comment ça marche

Mermaid vous permet d'écrire des diagrammes sous forme de texte et de les faire rendre automatiquement — idéal pour garder les diagrammes en contrôle de version. Ceci est un éditeur en direct qui rend au fur et à mesure que vous tapez.

  1. 1
    Le moteur Mermaid se charge
    La bibliothèque Mermaid se charge depuis LibraTool la première fois que vous utilisez l'outil, puis votre navigateur la met en cache.
  2. 2
    Vous écrivez du code de diagramme
    Organigrammes, diagrammes de séquence, diagrammes de Gantt, diagrammes de classe, diagrammes en camembert et plus — en utilisant la syntaxe texte de Mermaid.
  3. 3
    Il rend en direct
    Votre code est analysé et rendu à un SVG dans votre navigateur au fur et à mesure que vous tapez, avec les thèmes clair et sombre.
  4. 4
    Exportez SVG ou PNG
    Téléchargez le diagramme sous forme d'un SVG évolutif ou d'un PNG 2x pour le déposer dans les documents, les diapositives ou un README.

Votre code de diagramme — qui peut décrire les systèmes internes — est rendu entièrement dans votre navigateur et jamais téléchargé.

Outils associés

📝

Éditeur Markdown

Rédigez et prévisualisez du Markdown en temps réel. Prend en charge les titres, le gras, l'italique, les blocs de code, les tableaux et les listes.

Essayer
🟦

Générateur CSS Grid

Concevez visuellement une grille CSS — pistes, unités et espacements — et copiez le CSS et le HTML générés.

Essayer
🌳

Générateur d'arborescence ASCII

Transformez une liste indentée en une arborescence de dossiers claire (├── └──) pour les READMEs et la documentation. Sortie Unicode ou ASCII pur. S'exécute entièrement dans votre navigateur.

Essayer

Questions fréquemment posées