Guide de syntaxe du graphique en quadrants de Mermaid.js

Qu’est-ce qu’un graphique en quadrants ?

Un graphique en quadrants est un outil de visualisation stratégique utilisé pour catégoriser des éléments en quatre zones distinctes en fonction de deux variables continues (par exemple, Effort contre Impact, ou Importance contre Urgence). En plaçant des points de données sur un plan cartésien à deux dimensions divisé par les axes X et Y, vous pouvez clairement distinguer les « gains rapides » à haute priorité des « distractions » à faible priorité ou des « paris stratégiques » à long terme.

Avec Mermaid.js, vous pouvez définir vos quadrants, les titres des axes et les positions des points de données à l’aide d’un bloc déclaratif simple, vous permettant de générer instantanément des matrices de décision professionnelles.

Guide de syntaxe principale : éléments et constructions

Pour concevoir un graphique en quadrants valide et entièrement exécutable dans Mermaid, vous devez maîtriser le système de coordonnées, l’étiquetage des axes et le positionnement des points de données.

1. Initialisation du canevas du quadrant

Vous initialisez un canevas de graphique en quadrants à la première ligne en utilisant le mot-cléquadrantChartVous définissez ensuite les étiquettes de vos quatre quadrants et les titres de vos axes X et Y.

quadrantChart
    titre Matrice de priorisation des projets
    axe-x "Faible effort" --> "Grand effort"
    axe-y "Faible impact" --> "Grand impact"
    quadrant-1 "Paris stratégiques"
    quadrant-2 "Gains rapides"
    quadrant-3 "Distractions"
    quadrant-4 "Grands projets"

2. Positionnement des points de données

Vous ajoutez des éléments au graphique en fournissant leur nom d’affichage suivi de leurs coordonnées X et Y (normalisées entre 0 et 1).

• 0.0 est le début de l’axe.
• 1.0 est la fin de l’axe.

quadrantChart
    titre Matrice Impact vs Effort
    axe-x "Faible effort" --> "Grand effort"
    axe-y "Faible impact" --> "Grand impact"
    quadrant-1 "Paris stratégiques"
    quadrant-2 "Gains rapides"
    quadrant-3 "Distractions"
    quadrant-4 "Grands projets"
    "Tâche A": [0.2, 0.8]
    "Tâche B": [0.7, 0.2]

Meilleures pratiques pour la cartographie des matrices

• Normalisez vos données : Étant donné que les coordonnées Mermaid sont mises à l’échelle de 0,0 à 1,0, mappez vos valeurs brutes de données dans cette plage en pourcentage avant de les insérer dans le script.
• Étiquettes claires des axes : Incluez toujours des étiquettes des axes descriptives qui définissent explicitement ce que représentent les axes X et Y (par exemple, « Coût » par rapport à « ROI »). Une matrice sans axes définis n’est qu’un nuage de points aléatoire.
• Limitez la densité des points : Si vous avez plus de 15 à 20 points sur un seul graphique à quadrants, celui-ci deviendra encombré et illisible. Si vous disposez d’un ensemble de données plus important, envisagez de le diviser en plusieurs graphiques thématiques.

Exemples réels de graphiques à quadrants Mermaid.js

Exemple : Matrice de priorisation des fonctionnalités produit

Ce plan fonctionnel aide les équipes produit à catégoriser les fonctionnalités en fonction de l’effort de développement nécessaire et de leur impact potentiel sur l’activité.

quadrantChart
    titre Priorisation des fonctionnalités produit
    axe-x "Faible effort" --> "Fort effort"
    axe-y "Faible impact" --> "Fort impact"
    quadrant-1 "Paris à long terme"
    quadrant-2 "Gains rapides"
    quadrant-3 "Faible priorité"
    quadrant-4 "Grands projets"
    "Login API" : [0,1 ; 0,9]
    "Personnalisation du thème" : [0,8 ; 0,3]
    "Passerelle de paiement" : [0,6 ; 0,8]
    "Mode sombre" : [0,2 ; 0,2]

Analyse de la syntaxe : En attribuant `[0,1 ; 0,9]` à « Login API », nous la plaçons dans le quadrant en haut à gauche (fort impact, faible effort), ce qui la marque comme un « gain rapide ». Cela permet aux parties prenantes de visualiser instantanément les priorités du plan de développement.