Guide de syntaxe des cartes mentales Mermaid.js

Qu’est-ce qu’une carte mentale ?

Une Carte mentale est une visualisation hiérarchique basée sur un arbre utilisée pour capturer, organiser et structurer des flux d’information complexes, des idées issues d’un cahier de brainstorming ou des taxonomies de projets. Contrairement aux diagrammes de flux qui imposent des étapes procédurales linéaires, les cartes mentales représentent les connexions entre un concept central et ses divers sous-nœuds, ce qui les rend idéales pour la planification de parcours stratégiques, la structure de décomposition des fonctionnalités ou la gestion des connaissances.

Avec Mermaid.js, vous définissez votre structure hiérarchique en utilisant l’indentation standard des listes Markdown. Le moteur gère automatiquement le positionnement des nœuds, calcule la croissance de l’arbre et applique des formes de nœuds distinctes en fonction du niveau hiérarchique, vous permettant ainsi de visualiser des centaines de nœuds interconnectés sans alignement manuel au niveau des pixels.

Guide de syntaxe principale : éléments et constructions

Concevoir une carte mentale valide et de qualité production dans Mermaid nécessite de maîtriser la définition du nœud racine, le superposition par indentation des niveaux et les jetons décoratifs visuels.

1. Initialisation de la racine de la carte mentale

Vous initialisez une toile de carte mentale à la première ligne en utilisant le mot-clémindmapmot-clé. La structure est construite en définissant un nœud racine (le centre de votre carte) puis en imbriquant des sous-nœuds en dessous en utilisant une indentation basée sur des espaces :

mindmap
  root((Concept central))
    Nœud de niveau 1
      Sous-nœud de niveau 2

2. Contrôle de la géométrie des nœuds

Tout comme dans les diagrammes de flux, vous pouvez injecter un contexte visuel en encadrant votre texte avec des symboles spécifiques. Cela est fortement recommandé pour distinguer les catégories principales, les tâches secondaires et les éléments actionnables :

• (Texte) — Nœud arrondi (par défaut).
• ((Texte)) — Nœud doublement arrondi (généralement réservé à la racine).
• [Texte] — Nœud carré.
• )Texte( — Nœud convexe/asymétrique.
• {Texte} — Nœud hexagonal/nœud en crochet.

3. Intégration des icônes et du formatage externe

Vous pouvez améliorer la lisibilité des nœuds en ajoutant des icônes visuelles directement dans la chaîne de texte en utilisant la ::icône(...) syntaxe. Cela vous permet de distinguer rapidement différents types de nœuds (par exemple, des personnes, des logiciels, des matériels ou des API externes) d’un simple coup d’œil :

mindmap
  racine((Architecture du système))
    (Couche UI)
    ::icône(fa fa-ordinateur)
      [Application web]
    (Couche données)
    ::icône(fa fa-base-de-données)
      [Base de données principale]

Meilleures pratiques pour des mappes hiérarchiques claires

• Gardez le texte des nœuds court :Les cartes mentales doivent être utilisées pour un balayage rapide. Gardez vos étiquettes de nœuds à trois mots ou moins afin que le texte ne tende pas les branches de l’arbre au-delà de la largeur de l’écran.
• Utilisez une géométrie cohérente :Maintenez une logique stricte pour les formes sur l’ensemble de votre arbre (par exemple, utilisez des nœuds carrés pour les composants de code, des nœuds hexagonaux pour les points d’entrée API, et des nœuds arrondis pour l’infrastructure physique). Cette cohérence rend la carte bien plus facile à interpréter.
• Limitez la profondeur d’imbrication :Essayez de garder votre carte imbriquée à une profondeur maximale de quatre ou cinq niveaux. Si une branche nécessite une imbrication plus profonde, envisagez de la séparer dans une carte mentale dédiée afin de garder la taille globale du canevas gérable.

Exemples et modèles de cartes mentales Mermaid.js du monde réel

Exemple 1 : Taxonomie du cycle de vie du développement logiciel (SDLC)

Ce plan fonctionnel organise les phases standard du SDLC en un arbre catégorisé, en utilisant des icônes pour mettre en évidence visuellement la nature de chaque regroupement de tâches.

mindmap
  racine((Phases du SDLC))
    (Planification)
    ::icône(fa fa-tâches)
      [Exigences]
      [Faisabilité]
    (Développement)
    ::icône(fa fa-code)
      [Architecture]
      [Implémentation]
    (Qualité)
    ::icône(fa fa-puce)
      [Tests unitaires]
      [Tests d'intégration]
    (Déploiement)
    ::icône(fa fa-nuage)
      [Pipelines CI/CD]
      [Surveillance]

Analyse de la syntaxe : En utilisant le racine nœud au centre et l’indentation pour les niveaux, le moteur génère des branches de manière symétrique. La ::icône(fa fa-...) syntaxe injecte des glyphes compatibles FontAwesome, transformant des phases abstraites en nœuds visuellement distincts et faciles à scanner.

Exemple 2 : Découpage des fonctionnalités des microservices d’entreprise

Ce plan avancé décompose une plateforme e-commerce en ensembles fonctionnels techniques, en utilisant des formes géométriques pour distinguer les modules d’infrastructure des interfaces orientées client.

mindmap
  racine((Plateforme de commerce électronique))
    (Interface utilisateur)
      [Application mobile]
      [Tableau de bord web]
    (Couche de service)
      [API d'authentification]
      [API de commande]
    (Infrastructure)
      ((Fournisseur principal de cloud))
        [Cache Redis]
        [Instance PostgreSQL]

Analyse de la syntaxe : Cette carte utilise explicitement différentes formes pour indiquer les composants logiques du système. Cette hiérarchie visuelle claire permet aux parties prenantes de distinguer instantanément entre les services de haut niveau et les fondations de données sous-jacentes.