{"id":2110,"date":"2026-05-26T08:05:44","date_gmt":"2026-05-26T08:05:44","guid":{"rendered":"https:\/\/www.vpascode.com\/fr\/docs\/uncategorized\/mermaid-js-mind-map-syntax-guide\/"},"modified":"2026-05-26T08:05:44","modified_gmt":"2026-05-26T08:05:44","slug":"mermaid-js-mind-map-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/fr\/docs\/vpascode-docs\/mermaid-js-mind-map-syntax-guide\/","title":{"rendered":"Guide de syntaxe des cartes mentales Mermaid.js"},"content":{"rendered":"

Qu’est-ce qu’une carte mentale ?<\/h2>\n

Une Carte mentale<\/strong> est une visualisation hi\u00e9rarchique bas\u00e9e sur un arbre utilis\u00e9e pour capturer, organiser et structurer des flux d’information complexes, des id\u00e9es issues d’un cahier de brainstorming ou des taxonomies de projets. Contrairement aux diagrammes de flux qui imposent des \u00e9tapes proc\u00e9durales lin\u00e9aires, les cartes mentales repr\u00e9sentent les connexions entre un concept central et ses divers sous-n\u0153uds, ce qui les rend id\u00e9ales pour la planification de parcours strat\u00e9giques, la structure de d\u00e9composition des fonctionnalit\u00e9s ou la gestion des connaissances.<\/p>\n

Avec Mermaid.js<\/strong>, vous d\u00e9finissez votre structure hi\u00e9rarchique en utilisant l’indentation standard des listes Markdown. Le moteur g\u00e8re automatiquement le positionnement des n\u0153uds, calcule la croissance de l’arbre et applique des formes de n\u0153uds distinctes en fonction du niveau hi\u00e9rarchique, vous permettant ainsi de visualiser des centaines de n\u0153uds interconnect\u00e9s sans alignement manuel au niveau des pixels.<\/p>\n

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

Concevoir une carte mentale valide et de qualit\u00e9 production dans Mermaid n\u00e9cessite de ma\u00eetriser la d\u00e9finition du n\u0153ud racine, le superposition par indentation des niveaux et les jetons d\u00e9coratifs visuels.<\/p>\n

1. Initialisation de la racine de la carte mentale<\/h3>\n

Vous initialisez une toile de carte mentale \u00e0 la premi\u00e8re ligne en utilisant le mot-cl\u00e9mindmap<\/code>mot-cl\u00e9. La structure est construite en d\u00e9finissant un n\u0153ud racine (le centre de votre carte) puis en imbriquant des sous-n\u0153uds en dessous en utilisant une indentation bas\u00e9e sur des espaces :<\/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 
mindmap\r\n  root((Concept central))\r\n    N\u0153ud de niveau 1\r\n      Sous-n\u0153ud de niveau 2<\/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. Contr\u00f4le de la g\u00e9om\u00e9trie des n\u0153uds<\/h3>\n
Tout comme dans les diagrammes de flux, vous pouvez injecter un contexte visuel en encadrant votre texte avec des symboles sp\u00e9cifiques. Cela est fortement recommand\u00e9 pour distinguer les cat\u00e9gories principales, les t\u00e2ches secondaires et les \u00e9l\u00e9ments actionnables :<\/p>\n