Mermaid 11.15.0
Les quadrants placent des éléments sur deux dimensions normalisées. Utilisez un graphique circulaire pour les parts d’un total ou Gantt pour un planning daté.
Créer avec l’outil Éditeur Mermaid →Les coordonnées vont de 0 à 1 : X croît vers la droite, Y vers le haut.
quadrantChart
title Priorités éditoriales
x-axis Faible effort --> Fort effort
y-axis Faible valeur --> Forte valeur
quadrant-1 Planifier
quadrant-2 Faire d’abord
quadrant-3 Reporter
quadrant-4 Reconsidérer
Corriger les liens: [0.2, 0.8]
Réécrire le guide: [0.8, 0.7]
Changement esthétique: [0.6, 0.2]Chargement…
| Syntaxe | Signification |
|---|---|
| quadrantChart / title Text | Déclare le graphique et un titre facultatif. |
| x-axis Left --> Right / x-axis Left | Libelle les deux extrémités horizontales ou seulement la gauche. |
| y-axis Bottom --> Top / y-axis Bottom | Libelle les deux extrémités verticales ou seulement le bas. |
| quadrant-1 / quadrant-2 / quadrant-3 / quadrant-4 | 1 : haut droit ; 2 : haut gauche ; 3 : bas gauche ; 4 : bas droit. |
| Name: [0.25, 0.75] | Coordonnées x,y normalisées dans l’intervalle inclusif 0–1. |
| radius: 8 / color: #0070f3 / stroke-color: #171717 / stroke-width: 2px | Style les points ; la couleur de bord exige une épaisseur visible. |
| classDef focus color: #0070f3 / Name:::focus: [x, y] | Classes réutilisables ; le style direct prévaut sur classe et thème. |
| config.quadrantChart.chartWidth / chartHeight / pointRadius / pointTextPadding | Configure dimensions, rayon et distance des libellés. |
| quadrantPadding / quadrantTextTopPadding / quadrantLabelFontSize / quadrantInternalBorderStrokeWidth / quadrantExternalBorderStrokeWidth | Configure marges, placement du texte et épaisseur des bords des quadrants. |
| xAxisLabelPadding / xAxisLabelFontSize / xAxisPosition / yAxisLabelPadding / yAxisLabelFontSize / yAxisPosition | Configure les axes ; avec des points, l’axe horizontal reste en bas. |
| titleFontSize / titlePadding / pointTextPadding / pointLabelFontSize | Configure tailles et espacements du titre et des textes de points. |
| quadrant1Fill…quadrant4Fill / quadrant1TextFill…quadrant4TextFill | Couleurs de fond et de texte des quadrants. |
| quadrantPointFill / quadrantPointTextFill | Couleurs par défaut des points, textes et bords. |
| quadrantXAxisTextFill / quadrantYAxisTextFill / quadrantInternalBorderStrokeFill / quadrantExternalBorderStrokeFill / quadrantTitleFill | Couleurs des axes, bords et titre. |
| %% / accTitle: / accDescr: | Commentaires et descriptions accessibles. |
Lisez Y de bas en haut. Les numéros tournent dans le sens antihoraire depuis le haut droit. Un seul libellé ne change pas l’intervalle.
quadrantChart
title Deux dimensions
x-axis Effort
y-axis Valeur
quadrant-1 Haut droit
quadrant-2 Haut gauche
quadrant-3 Bas gauche
quadrant-4 Bas droit
Option: [0.3, 0.7]Chargement…
Normalisez les mesures avant de les saisir. radius est en pixels ; expliquez sa signification si l’aire représente une troisième variable.
quadrantChart
title Travail sélectionné
x-axis Faible --> Élevé
y-axis Faible --> Élevé
Brouillon: [0.25, 0.65] radius: 7, color: #0070f3, stroke-color: #171717, stroke-width: 2px
Révision: [0.7, 0.4] radius: 5Chargement…
Ajoutez ::: après le nom et avant les coordonnées. Le style direct prime sur la classe, la classe sur le thème. Une couleur seule ne crée pas de contour.
quadrantChart
title Candidats à la révision
x-axis Faible effort --> Fort effort
y-axis Faible valeur --> Forte valeur
Liens:::focus: [0.2, 0.8]
Réécriture:::focus: [0.8, 0.7]
classDef focus color: #0070f3, radius: 6, stroke-color: #171717, stroke-width: 2pxChargement…
quadrantChart contrôle la géométrie et themeVariables les couleurs. Agrandissez le graphique si les textes sont serrés ; pointTextPadding n’évite pas tous les chevauchements.
---
config:
theme: base
quadrantChart:
chartWidth: 420
chartHeight: 360
pointRadius: 6
pointTextPadding: 8
themeVariables:
quadrant1Fill: "#d3e5ff"
quadrant2Fill: "#f5f5f5"
quadrantPointFill: "#0070f3"
---
quadrantChart
title Travail prévu
x-axis Effort
y-axis Valeur
Guide: [0.65, 0.8]Chargement…
Convertissez 80 en 0.8 avant la saisie.
Syntaxe incorrecte : correction ci-dessous
quadrantChart
Guide: [80, 60]quadrantChart
Guide: [0.8, 0.6]Chargement…
Le premier libellé de y-axis est en bas ; quadrant-1 est en haut à droite.