Dans cet article
Pourquoi Mermaid est l'outil de création de diagrammes des développeurs
La documentation technique repose souvent sur des diagrammes pour expliquer l'architecture des systèmes, les flux de travail et les flux de données. Les outils de création de diagrammes traditionnels nécessitent de glisser des formes sur un canevas et d'exporter des images difficiles à versionner. Mermaid adopte une approche différente — vous décrivez votre diagramme dans une syntaxe textuelle simple, et le moteur de rendu produit un SVG propre qui peut coexister avec votre code dans des fichiers Markdown, des wikis et des pull requests.
Parce que les diagrammes Mermaid sont du texte brut, ils sont faciles à examiner dans les diffs, à stocker dans Git et à régénérer automatiquement. Cela les rend idéaux pour la documentation qui doit évoluer avec le code. Un outil de prévisualisation en direct vous permet d'itérer sur la syntaxe du diagramme en temps réel, en voyant le rendu au fur et à mesure que vous tapez au lieu d'attendre une étape de build ou une application séparée.
Comment utiliser l'outil de prévisualisation Mermaid
L'aperçu Mermaid de CheckTown rend instantanément votre code de diagramme pour que vous puissiez concevoir et déboguer des diagrammes sans quitter le navigateur.
- Tapez ou collez votre syntaxe Mermaid dans l'éditeur — l'aperçu se met à jour en temps réel pendant que vous modifiez le code
- L'outil prend en charge les organigrammes, les diagrammes de séquence, les diagrammes de classes, les diagrammes d'état, les diagrammes entité-relation, les diagrammes de Gantt, les diagrammes circulaires et bien plus encore
- Les erreurs de syntaxe sont signalées avec des messages clairs pour que vous puissiez identifier et corriger les problèmes immédiatement au lieu de deviner ce qui n'a pas fonctionné
- Exportez le diagramme rendu en SVG ou PNG pour une utilisation dans des présentations, de la documentation ou des gestionnaires de tickets
Essayez gratuitement — sans inscription
Ouvrir l'aperçu Mermaid →Bonnes pratiques pour les diagrammes Mermaid
Quelques conventions permettent de garder vos diagrammes Mermaid lisibles et maintenables à mesure qu'ils gagnent en complexité.
- Donnez aux nœuds des identifiants et des labels descriptifs — utilisez des noms significatifs comme userService et authDB au lieu de A et B génériques pour que le code source se lise comme de la documentation
- Gardez les diagrammes centrés sur un seul concept — divisez un système complexe en plusieurs diagrammes plus petits plutôt que d'entasser tout dans un seul graphique illisible
- Utilisez des sous-graphes pour regrouper les nœuds liés — cela ajoute une structure visuelle et rend les grands diagrammes plus faciles à parcourir d'un coup d'oeil
Questions fréquemment posées
Quels types de diagrammes Mermaid sont pris en charge ?
L'aperçu prend en charge tous les principaux types de diagrammes Mermaid, y compris les organigrammes, les diagrammes de séquence, les diagrammes de classes, les diagrammes d'état, les diagrammes entité-relation, les diagrammes de Gantt, les diagrammes circulaires, les cartes de parcours et les diagrammes d'exigences. Le moteur de rendu reste à jour avec les dernières versions de Mermaid.js.
Puis-je intégrer le diagramme généré dans GitHub ou GitLab ?
Oui. GitHub et GitLab rendent nativement les blocs de code Mermaid dans les fichiers Markdown. Vous pouvez copier la syntaxe depuis l'éditeur directement dans un bloc de code délimité dans votre README ou page wiki. L'outil de prévisualisation est utile pour itérer sur la syntaxe avant de la committer dans votre dépôt.
Y a-t-il une limite de taille pour les diagrammes ?
Il n'y a pas de limite stricte de caractères. Cependant, les diagrammes extrêmement grands avec des centaines de nœuds peuvent se rendre lentement dans le navigateur. Si votre diagramme devient trop lourd, envisagez de le diviser en diagrammes plus petits et ciblés décrivant chacun une partie du système.