🥧 Mermaid

Diagramme circulaire

Montrez les proportions d’un coup d’œil

Ouvrir cet exemple dans l’éditeur En générer un avec l’IA

Qu’est-ce qu’un Diagramme circulaire ?

Un diagramme circulaire montre comment un total se décompose : répartition budgétaire, parts de marché, réponses à une enquête, distribution du temps. En Mermaid, quatre lignes de texte suffisent — parfait pour docs et rapports.

Le diagramme circulaire apparaît dans les slides budgétaires, les revues de coûts et les synthèses d’enquête — partout où un total doit être découpé pour un public non technique. Écrit en Mermaid, il tient en quatre lignes qui vivent dans le document, au lieu d’une capture de tableur que personne ne retrouvera. Sa limite est stricte : un total, un instant. Comparer deux périodes, ou montrer une catégorie trop petite pour être vue, demande autre chose.

Exemple en direct

Code Mermaid

pie showData
    title Cloud spend by service
    "Compute" : 42
    "Storage" : 23
    "Network" : 18
    "Databases" : 12
    "Other" : 5

Exemple en direct

Quand l’utiliser

Visualiser répartitions de budget ou de coûts dans les rapports

Présenter résultats d’enquêtes et parts de marché

Montrer l’allocation du temps ou des ressources par équipe

Erreurs fréquentes

Des libellés de parts sans guillemets

Écrire Compute : 42 échoue : le libellé doit être une chaîne entre guillemets, même s’il tient en un seul mot sans espace. C’est de loin la première raison pour laquelle un diagramme circulaire refuse de s’afficher.

Les parts sont réordonnées par taille

Mermaid dessine les parts de la plus grande à la plus petite, quel que soit votre ordre d’écriture, tandis que la légende conserve le vôtre. Ne faites jamais porter de sens à la position d’une part : étiquetez-la, ou acceptez le décalage.

Des valeurs déjà exprimées en pourcentage

Mermaid calcule lui-même la part de chaque valeur dans le total. Lui donner des pourcentages qui totalisent 98 ou 103 après un arrondi fait ailleurs remet silencieusement toutes les parts à l’échelle, et le graphique ne colle plus au tableau imprimé à côté.

Syntaxe de base

.mmd

pie title Budget
    "Engineering" : 50
    "Marketing" : 30
    "Operations" : 20

pie showData title Cloud spend by service
showData affiche la valeur brute à côté de chaque libellé dans la légende, en plus du pourcentage calculé par Mermaid. Le titre est facultatif et peut aussi tenir sur la ligne pie.
"Compute" : 42
Chaque part s’écrit libellé entre guillemets, deux-points, nombre. Les décimales sont acceptées et Mermaid calcule les pourcentages : la somme des valeurs n’a pas à atteindre un total particulier.
%%{init: {"themeVariables": {"pie1": "#4f46e5"}}}%%
Les couleurs des parts viennent du thème. Une directive init sur la toute première ligne les remplace une à une, de pie1 à pie12, pour coller à une palette de marque.
%% Q3 figures, source: finance export
Deux signes pourcent ouvrent un commentaire. Noter d’où viennent les chiffres, juste à côté des chiffres, c’est ce qui rend un graphique encore fiable six mois plus tard.

Questions sur ce diagramme

Puis-je afficher les valeurs réelles sur le graphique ?

Oui — ajoutez showData après le mot-clé pie et Mermaid affiche la valeur à côté de chaque libellé, en plus du pourcentage.

Combien de parts un diagramme circulaire doit-il avoir ?

Cinq à sept au maximum pour rester lisible. Regroupez les petites catégories dans « Autres » — vous pouvez toujours renvoyer vers un tableau détaillé.

Puis-je mettre un diagramme circulaire Mermaid dans un rapport Markdown ?

Oui. GitHub et GitLab rendent les diagrammes circulaires depuis un bloc délimité annoté mermaid, et les chiffres restent modifiables dans la source. Pour un PDF ou une diapositive, exportez en SVG afin que les libellés restent nets à toute taille.

Un seul diagramme circulaire peut-il comparer deux périodes ?

Non. Mermaid ne gère qu’une série : ni parts groupées, ni anneau, ni second cercle. Dessinez deux graphiques côte à côte, ou passez au tableau quand le lecteur doit comparer des valeurs plutôt que percevoir des proportions.

Comment changer la couleur des parts ?

Définissez les variables de thème pie1 à pie12 dans une directive init sur la première ligne, ou changez de thème. Une part ne peut pas être colorée depuis sa propre ligne, ce qui garde toute la palette définie au même endroit.

Pourquoi mon diagramme circulaire paraît-il petit dans la page ?

Le graphique s’adapte à la largeur de son conteneur : une colonne étroite rétrécit les libellés avec lui. Donnez-lui plus de largeur dans la page, ou exportez un PNG en 2× quand il doit être lu depuis un vidéoprojecteur.

Diagramme circulaire ou un autre type de diagramme ?

Diagramme circulaire ou matrice à quadrants ?

Le diagramme circulaire n’est honnête que si les parts appartiennent à un même tout et que la liste est exhaustive : le même budget, la même population. Si vos éléments ont été mesurés séparément, ou si vous n’avez gardé que les plus intéressants, les pourcentages affichés par Mermaid ne veulent rien dire — placez-les plutôt sur une matrice à quadrants.

Diagramme circulaire ou diagramme de Gantt ?

Les deux servent à répondre à « où part l’effort ». Le circulaire découpe un total à un instant donné — 40 % du trimestre sur la plateforme. Le Gantt étale ce même travail sur un calendrier. Prenez le circulaire quand la répartition est la décision, le Gantt quand c’est l’enchaînement.

Explorer les autres types de diagrammes

🔀 Flowchart (logigramme)💬 Diagramme de séquence 🧩 Diagramme de classes 🗄️ Diagramme entité-association 🔄 Diagramme d’états 📅 Diagramme de Gantt 🧠 Carte mentale 🌿 Graphe Git 🕰️ Frise chronologique 🚶 Parcours utilisateur 🎯 Matrice à quadrants

Créez votre Diagramme circulaire maintenant

Décrivez-le en langage naturel — l’IA écrit le code Mermaid pour vous.

Ouvrir Mermaid Studio