Éditeur Mermaid en ligne gratuit par Bee Tools. Prend en charge les organigrammes, les diagrammes de séquence, Gantt, de classes et ER. Aperçu en direct, export SVG/PNG. Rendu à 100 % dans votre navigateur.
Dessinez des diagrammes professionnels avec une syntaxe textuelle et voyez des aperçus instantanés. Décrivez n'importe quel diagramme dans la syntaxe déclarative de Mermaid et Bee Tools le rendra localement dans votre navigateur sous forme de graphique vectoriel net. Exportez en PNG ou SVG pour documents, diapositives et blogs.
Aide-mémoire Mermaid
Qu'est-ce que Mermaid
Mermaid a été créé par Knut Sveidqvist en 2014 comme un langage déclaratif de style Markdown pour décrire des diagrammes. Par rapport aux outils glisser-déposer, Mermaid permet à vos diagrammes de vivre dans des fichiers source contrôlés par version.
Référence rapide
flowchart TD/LR — organigrammes. A-->B est un lien, A{?} est une décision, A([Start]) est une forme en stade.
sequenceDiagram — séquence. Alice->>Bob: Hello envoie un message synchrone ; Bob-->>Alice: Hi est la réponse.
gantt — diagrammes de Gantt. Déclarez dateFormat puis décrivez les tâches avec dates de début et durées.
classDiagram — diagrammes de classes. Définissez des classes et des relations comme l'héritage Animal <|-- Dog.
stateDiagram-v2 — machines à états, idéal pour les fluxes UI/commande/pipeline.
pie — diagrammes circulaires via des paires "Label" : valeur.
Conseils pratiques
Gardez les libellés de nœuds courts — les libellés longs cassent la mise en page.
Utilisez des sous-graphes pour découper les diagrammes complexes en morceaux lisibles.
Personnalisez les couleurs avec classDef pour une meilleure lisibilité.
Parsemez de %% commentaires pour rendre la source maintenable.
Modifiez l'exemple à gauche et regardez le diagramme rendu à droite.
FAQ
Qu'est-ce que Mermaid ?
Mermaid est un langage de diagrammes basé sur JavaScript créé par Knut Sveidqvist. À l'aide d'un texte semblable à Markdown, il génère des organigrammes, des diagrammes de séquence, des diagrammes de Gantt et plus encore. La prise en charge native est intégrée à GitHub, GitLab, Docusaurus et Obsidian.
Quels types de diagrammes sont pris en charge ?
Nous prenons en charge flowchart, sequenceDiagram, gantt, classDiagram, stateDiagram-v2, pie, erDiagram, gitGraph et requirementDiagram d'emblée.
Mes diagrammes sont-ils enregistrés ou téléversés ?
Non. Le dessin se produit entièrement dans votre navigateur. Fermer l'onglet efface tout.
L'export perdra-t-il en qualité ?
Le SVG est vectoriel — net à tout niveau de zoom. Le PNG est rastérisé à une résolution 2×, suffisante pour la plupart des documents et diapositives.
Comment intégrer Mermaid dans Markdown ?
Encadrez le code dans un bloc clôturé `mermaid`. GitHub, GitLab, Hugo, Hexo et Obsidian le rendent automatiquement.