Comment écrire un diagramme circulaire Mermaid ?

Commencez par `pie title Votre Titre` sur la première ligne, puis listez chaque tranche comme `"Étiquette" : valeur` sur des lignes séparées. Les valeurs peuvent être n'importe quel nombre positif — Mermaid les convertit automatiquement en pourcentages. Exemple : `pie title Répartition des navigateurs \n "Chrome" : 65.2 \n "Safari" : 19.1 \n "Firefox" : 4.0`. Vous n'avez pas besoin de vous assurer que les valeurs totalisent 100.

Puis-je contrôler la couleur de chaque tranche ?

Les diagrammes circulaires Mermaid utilisent une palette de couleurs attribuée automatiquement en fonction du thème du diagramme. Vous ne pouvez pas spécifier directement les couleurs par tranche dans la syntaxe du diagramme. Pour personnaliser les couleurs, vous devrez appliquer un thème Mermaid personnalisé ou post-traiter la sortie SVG. Pour les présentations nécessitant des couleurs de marque spécifiques, la modification du SVG exporté dans un éditeur vectoriel comme Figma ou Inkscape est l'approche la plus pratique.

Y a-t-il un nombre maximum de tranches pour un diagramme circulaire Mermaid ?

Il n'y a pas de limite stricte, mais les diagrammes circulaires deviennent difficiles à lire au-delà de 7 à 8 tranches, car les segments deviennent trop étroits pour être étiquetés clairement. La meilleure pratique consiste à regrouper les petites catégories dans un compartiment « Autre » si une tranche individuelle représente moins de 3 à 5 % du total. Mermaid tentera de générer n'importe quel nombre de tranches, mais la lisibilité se dégrade considérablement au-delà de 10.

Quand dois-je utiliser un diagramme circulaire par rapport à un diagramme de Gantt ou à une chronologie ?

Utilisez un diagramme circulaire lorsque vous souhaitez montrer des relations partie-tout pour un instant donné — proportions, distributions, parts. Utilisez un diagramme de Gantt lorsque vous devez montrer des tâches, des durées et une planification sur un axe temporel. Utilisez une chronologie lorsque vous souhaitez marquer des événements spécifiques dans un ordre chronologique. Les diagrammes circulaires répondent à « quelle part du total ? » ; les diagrammes de Gantt et de chronologie répondent à « quand ? ».

Visualiseur de diagrammes circulaires Mermaid

Générez instantanément des diagrammes circulaires Mermaid dans votre navigateur. Visualisez des données proportionnelles et exportez en SVG ou PNG. Outil en ligne gratuit.

Code Mermaid

Aperçu

Entrez du code Mermaid pour prévisualiser votre diagramme

Les diagrammes circulaires communiquent les distributions proportionnelles en un coup d'œil — part de marché, allocation budgétaire, sources de trafic, utilisation des fonctionnalités ou résultats d'enquête. La syntaxe `pie` de Mermaid est la plus simple de tous les types de diagrammes Mermaid : juste un titre et une liste d'étiquettes-valeurs. Cette simplicité fait des diagrammes circulaires une sortie fréquente des assistants IA lorsque les utilisateurs demandent une visualisation rapide des données. Lorsque les chefs de produit demandent à Claude ou ChatGPT « Montrez-moi une répartition de nos canaux d'acquisition d'utilisateurs » ou que les développeurs demandent « Visualisez la distribution des codes d'erreur HTTP dans les journaux de notre API », ils reçoivent souvent un diagramme circulaire Mermaid. Zolkit génère le diagramme immédiatement afin que vous puissiez vérifier les étiquettes, les proportions et l'impression visuelle globale avant de l'exporter pour un rapport ou une présentation. Les diagrammes circulaires Mermaid calculent automatiquement les pourcentages à partir des valeurs brutes et étiquettent chaque tranche en conséquence. Le visualiseur exporte des SVG nets pour l'intégration Web ou des PNG 2× pour l'inclusion dans des présentations, des documents Word et des rapports par e-mail. Pour des besoins de visualisation de données plus complexes, envisagez d'associer des diagrammes circulaires à des diagrammes de Gantt (pour la distribution temporelle) ou à des diagrammes de chronologie.

Diagrammes Associés

← Visualiseur de Diagrammes Mermaid Visualiseur de diagrammes de Gantt Mermaid Visualiseur de diagrammes de chronologie Mermaid Visionneuse de cartes mentales Mermaid

Visualiseur et Exportateur Gratuit de Diagrammes Mermaid en Ligne

Le Visualiseur de Diagrammes Mermaid de Zolkit vous permet de coller n'importe quel code Mermaid et de voir un diagramme rendu instantanément — aucune installation, aucune inscription, aucun téléversement sur serveur. Tout s'exécute dans votre navigateur, ce qui en fait le moyen le plus rapide de vérifier les diagrammes générés par IA depuis Claude, ChatGPT ou Gemini. Prend en charge tous les principaux types de diagrammes Mermaid : organigrammes, diagrammes de séquence, diagrammes de classes, diagrammes ER, diagrammes de Gantt, diagrammes d'états, cartes mentales, graphes Git, diagrammes circulaires et chronologies.

Aperçu Instantané en Direct

Les diagrammes sont rendus automatiquement pendant que vous tapez, avec un délai de 300 ms pour qu'il ne soit jamais lent.

100% Privé

Tout le rendu se fait dans votre navigateur à l'aide de mermaid.js. Votre code n'est jamais envoyé à aucun serveur.

Exporter SVG & PNG

Téléchargez votre diagramme en tant que SVG vectoriel net ou PNG 2× haute résolution prêt pour vos documents et présentations.

Tous les Types de Diagrammes Mermaid

Prend en charge les organigrammes, diagrammes de séquence, diagrammes de classes, diagrammes ER, diagrammes de Gantt, cartes mentales, graphes Git, et plus encore.

Prêt pour les Diagrammes IA

Conçu pour l'ère de l'IA — prévisualisez directement les diagrammes générés par Claude, ChatGPT, Gemini, ou tout LLM.

Toujours Gratuit

Aucun compte requis, aucune limite d'utilisation, aucun filigrane. Le visualiseur Mermaid de Zolkit est entièrement gratuit pour toujours.

Comment Prévisualiser un Diagramme Mermaid

1
Collez votre code Mermaid dans l'éditeur à gauche — vous pouvez le copier depuis un assistant IA ou l'écrire manuellement.
2
Le diagramme est rendu instantanément dans le panneau d'aperçu à droite. S'il y a une erreur de syntaxe, un message explique le problème.
3
Cliquez sur 'Exporter SVG' ou 'Exporter PNG' pour télécharger votre diagramme sous forme de fichier prêt pour la documentation, les présentations ou le partage.