Passer au contenu principal

Mermaid 11.15.0

Aide-mémoire des graphiques circulaires Mermaid

Un graphique circulaire compare peu de parts positives d’un total. Préférez des barres pour de nombreuses catégories ou valeurs proches et des quadrants pour deux dimensions.

Créer avec l’outil Générateur de diagrammes circulaires →

Démarrage rapide

Les valeurs sont des poids : leur somme peut différer de 100 ; Mermaid calcule les proportions.

Mermaid
Ouvrir dans l’éditeur → 
pie showData
  title Effort de documentation
  "Rédaction" : 48
  "Révision" : 32
  "Publication" : 20

Chargement…

Référence de syntaxe

Référence de syntaxe
SyntaxeSignification
pie / pie showDataDéclare le graphique ; showData ajoute les valeurs à la légende.
title TextAjoute un titre facultatif.
"Label" : 12.75Libellés entre guillemets et poids positifs ; la précision documentée est de deux décimales.
config.pie.textPosition: 0.75Position radiale : 0 au centre, 1 au bord.
themeVariables.pieOuterStrokeWidth: "2px"Épaisseur du bord extérieur.
themeVariables.pie1…pie12Couleurs des parts avec theme base.
pieTitleTextSize / pieTitleTextColor / pieSectionTextSize / pieSectionTextColorVariables du thème pour titre et texte des parts.
pieLegendTextSize / pieLegendTextColor / pieStrokeColor / pieStrokeWidth / pieOuterStrokeColor / pieOpacityVariables du thème pour légende, bords et opacité.
%% / accTitle: / accDescr:Commentaires et descriptions accessibles.

Décimales et proportions

Utilisez des poids positifs et un point décimal, même en français. showData montre les poids d’origine ; les pourcentages sont arrondis à l’entier. Mermaid 11.15 masque les parts inférieures à 1%, mais conserve leurs entrées dans la légende.

Mermaid
Ouvrir dans l’éditeur → 
pie showData
  title Heures d’édition
  "Rédaction" : 12.75
  "Vérification des faits" : 6.25
  "Correction" : 3.50

Chargement…

Libellés et légende

Gardez des noms courts. Sans showData, la légende liste les noms et les parts indiquent toujours les proportions ; évitez les petites catégories.

Position du texte

textPosition est un ratio radial. Une valeur moindre rapproche le texte du centre ; simplifiez les données si les libellés se chevauchent.

Mermaid
Ouvrir dans l’éditeur → 
---
config:
  pie:
    textPosition: 0.6
---
pie showData
  title Répartition de révision
  "Technique" : 60
  "Éditoriale" : 40

Chargement…

Couleurs et bord extérieur

Utilisez theme base et pie1…pie12. pieOuterStrokeWidth reçoit une longueur CSS ; adaptez le contraste du texte et des bords au fond.

Mermaid
Ouvrir dans l’éditeur → 
---
config:
  theme: base
  themeVariables:
    pie1: "#d3e5ff"
    pie2: "#50e3c2"
    pie3: "#f5f5f5"
    pieOuterStrokeWidth: "2px"
    pieSectionTextColor: "#171717"
---
pie showData
  title Répartition du travail
  "Recherche" : 45
  "Rédaction" : 35
  "Révision" : 20

Chargement…

Erreurs fréquentes

Utiliser un poids négatif

Les valeurs négatives sont rejetées ; choisissez un poids positif et un autre graphique pour une perte nette.

Syntaxe incorrecte : correction ci-dessous

pie
  "Révision" : -2

Utiliser une virgule décimale

Écrivez 12.75, pas 12,75 ; arrondissez aux deux décimales documentées.

Limites

  • Utilisez des poids positifs pour les parts visibles. Zéro est accepté, mais ne dessine aucune part ; les valeurs négatives sont rejetées.
  • Deux décimales sont documentées pour les valeurs d’origine ; les pourcentages sont arrondis à l’entier. Les parts inférieures à 1% sont masquées.
  • Les nombreuses catégories et valeurs proches se comparent mieux avec des barres.

Foire aux questions

Les valeurs doivent-elles totaliser 100 ?
Non : chaque poids positif est divisé par le total.
Que change showData ?
Il ajoute les valeurs originales à la légende, sans changer la géométrie.
Comment changer les couleurs ?
Utilisez theme base et pie1…pie12 dans themeVariables.