{"id":2108,"date":"2026-05-26T08:05:44","date_gmt":"2026-05-26T08:05:44","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/docs\/uncategorized\/mermaid-js-quadrant-syntax-guide\/"},"modified":"2026-05-26T08:05:44","modified_gmt":"2026-05-26T08:05:44","slug":"mermaid-js-quadrant-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-quadrant-syntax-guide\/","title":{"rendered":"Guide de syntaxe du graphique en quadrants de Mermaid.js"},"content":{"rendered":"

Qu’est-ce qu’un graphique en quadrants ?<\/h2>\n

Un graphique en quadrants<\/strong> est un outil de visualisation strat\u00e9gique utilis\u00e9 pour cat\u00e9goriser des \u00e9l\u00e9ments en quatre zones distinctes en fonction de deux variables continues (par exemple, Effort contre Impact, ou Importance contre Urgence). En pla\u00e7ant des points de donn\u00e9es sur un plan cart\u00e9sien \u00e0 deux dimensions divis\u00e9 par les axes X et Y, vous pouvez clairement distinguer les \u00ab gains rapides \u00bb \u00e0 haute priorit\u00e9 des \u00ab distractions \u00bb \u00e0 faible priorit\u00e9 ou des \u00ab paris strat\u00e9giques \u00bb \u00e0 long terme.<\/p>\n

Avec Mermaid.js<\/strong>, vous pouvez d\u00e9finir vos quadrants, les titres des axes et les positions des points de donn\u00e9es \u00e0 l’aide d’un bloc d\u00e9claratif simple, vous permettant de g\u00e9n\u00e9rer instantan\u00e9ment des matrices de d\u00e9cision professionnelles.<\/p>\n

Guide de syntaxe principale : \u00e9l\u00e9ments et constructions<\/h2>\n

Pour concevoir un graphique en quadrants valide et enti\u00e8rement ex\u00e9cutable dans Mermaid, vous devez ma\u00eetriser le syst\u00e8me de coordonn\u00e9es, l’\u00e9tiquetage des axes et le positionnement des points de donn\u00e9es.<\/p>\n

1. Initialisation du canevas du quadrant<\/h3>\n

Vous initialisez un canevas de graphique en quadrants \u00e0 la premi\u00e8re ligne en utilisant le mot-cl\u00e9quadrantChart<\/code>Vous d\u00e9finissez ensuite les \u00e9tiquettes de vos quatre quadrants et les titres de vos axes X et Y.<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nModifier Mermaid dans VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
quadrantChart\r\n    titre Matrice de priorisation des projets\r\n    axe-x \"Faible effort\" --> \"Grand effort\"\r\n    axe-y \"Faible impact\" --> \"Grand impact\"\r\n    quadrant-1 \"Paris strat\u00e9giques\"\r\n    quadrant-2 \"Gains rapides\"\r\n    quadrant-3 \"Distractions\"\r\n    quadrant-4 \"Grands projets\"<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nModifier Mermaid dans VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
2. Positionnement des points de donn\u00e9es<\/h3>\n
Vous ajoutez des \u00e9l\u00e9ments au graphique en fournissant leur nom d’affichage suivi de leurs coordonn\u00e9es X et Y (normalis\u00e9es entre 0 et 1).<\/p>\n