Utilisez des sous-graphes d’organigramme imbriqués pour les conteneurs titrés, y compris les blocs terminaux. Si les conteneurs vides s’affichent mal, ajoutez un espaceur invisible dans chaque bloc terminal. Cela préserve la hiérarchie visible ; vérifiez le résultat dans le moteur de rendu Obsidian installé sur votre appareil.

Ce guide crée un diagramme neutre : un bloc extérieur intitulé Collection, qui contient Group A et Group B, avec des conteneurs terminaux titrés dans chaque groupe. L’objectif est de faire en sorte que ces blocs terminaux ressemblent à des conteneurs avec des titres, au lieu de les remplacer par de simples rectangles légendés.

Quel élément doit représenter un bloc terminal titré ?

Représentez chaque conteneur visible par un subgraph, qu’il contienne ou non un autre bloc significatif. Mermaid présente les sous-graphes, leurs identifiants explicites et leur imbrication dans ses exemples d’organigrammes. Une déclaration de nœud ordinaire telle que leafA["Block A"] crée un nœud légendé ; elle ne déclare pas un conteneur titré. Consultez Organigrammes — Syntaxe de base de Mermaid.

Dans cet exemple, distinguez le modèle visible de ses éléments de mise en page. Collection, les groupes et les blocs terminaux sont les éléments significatifs. Un espaceur est un détail d’implémentation qui fournit du contenu au conteneur terminal pour la mise en page. L’ajout de cet élément auxiliaire ne transforme pas la déclaration du bloc terminal en nœud : elle reste un sous-graphe.

Cette distinction délimite également la portée de cette approche : elle produit un diagramme dont les blocs terminaux visibles restent des conteneurs titrés, mais dont le code source comprend des nœuds auxiliaires ordinaires. Si votre exigence interdit toute déclaration de nœud, y compris les éléments auxiliaires invisibles, cette solution de contournement ne répond pas à cette exigence plus stricte.

Vérifiez le moteur de rendu utilisé par votre installation Mac

Dans Obsidian, ouvrez Settings depuis la barre latérale, puis sélectionnez General et notez la version de l’application. La documentation des paramètres d’Obsidian indique que les informations de version se trouvent dans General. Utilisez cette version pour choisir les notes de version pertinentes.

Le moteur de rendu constitue une différence importante. Les notes de version officielles du 22 octobre 2026 indiquent que la version Desktop 1.15.0 est en accès anticipé et qu’elle interprète la syntaxe Mermaid avec la bibliothèque Pele d’Obsidian, tout en assurant la compatibilité avec la syntaxe Mermaid 12.1.0. Cette même version modifie les classes générées pour les diagrammes afin d’utiliser celles de Pele. Ne supposez pas qu’une ancienne installation utilise Pele, ni que la compatibilité garantit un rendu identique à celui de Mermaid.js. Consultez Obsidian 1.15.0 pour ordinateur (accès anticipé).

La documentation Mermaid consultée pour ce guide affiche la version 12.2.0. Il s’agit d’une version différente du niveau de compatibilité indiqué dans ces notes de version d’Obsidian. Considérez la documentation, un éditeur en ligne et l’application installée comme des environnements distincts tant que vous n’avez pas vérifié le même exemple dans chacun d’eux.

Pour un premier essai, n’ajoutez ni configuration propre à un moteur de rendu ni sélecteurs de feuille de style externe. L’exemple ci-dessous utilise des sous-graphes et un style défini dans le diagramme ; il constitue un point de départ simple pour vérifier votre installation.

Créez les conteneurs imbriqués dans une note Obsidian

Ouvrez une note en mode édition et collez le bloc complet ci-dessous, avec les délimiteurs d’ouverture et de fermeture. Obsidian documente les diagrammes Mermaid sous forme de blocs de code délimités par des accents graves et portant l’identifiant de langage mermaid. Aucun module complémentaire de diagramme n’est requis pour ce format de note documenté. Consultez Syntaxe de mise en forme avancée.

```mermaid
flowchart TB
    subgraph collection["Collection"]
        subgraph groupA["Group A"]
            subgraph blockA["Block A"]
                spacerA[" "]
            end
            subgraph blockB["Block B"]
                spacerB[" "]
            end
        end
        subgraph groupB["Group B"]
            subgraph blockC["Block C"]
                spacerC[" "]
            end
        end
    end

    classDef spacer fill:transparent,stroke:transparent,color:transparent;
    class spacerA,spacerB,spacerC spacer;
```

Appuyez sur Cmd+E pour basculer entre le mode édition et Reading view. Utilisez le mode lecture pour examiner le diagramme terminé sans que le curseur d’édition n’affiche son code source. Ces commandes sont décrites dans Modes d’affichage et d’édition d’Obsidian.

Le résultat attendu comporte six conteneurs titrés visibles : une collection, deux groupes et trois blocs terminaux. Chaque bloc terminal contient un élément auxiliaire dont le libellé est une espace. La classe spacer demande un remplissage, une bordure et un texte transparents. Cette méthode combine le mécanisme de classe documenté par Mermaid et une solution de contournement pour la mise en page ; Mermaid décrit classDef et l’attribution de classes dans sa référence de style des organigrammes.

L’exemple a été vérifié par rapport à la syntaxe documentée ; il n’a pas été rendu dans une session Obsidian sur Mac pour cet article. La vérification d’acceptation est donc visuelle et locale : les six titres doivent apparaître, chaque groupe doit contenir les blocs qui lui sont attribués et aucun rectangle d’espacement ne doit être visible. L’espacement exact et la position des éléments frères ne sont pas des critères d’acceptation.

Modifiez les libellés sans changer la hiérarchie

Commencez par modifier uniquement les titres entre guillemets. Gardez collection, groupA, blockA et les autres identifiants distincts. Il sera ainsi plus facile de comparer la version modifiée à l’exemple de départ.

Pour ajouter un autre bloc terminal, copiez un sous-graphe terminal complet, attribuez de nouveaux identifiants à son sous-graphe et à son espaceur, puis ajoutez l’identifiant de ce nouvel espaceur à l’affectation de classe finale. Placez-le avant l’instruction end du groupe qui le contient. Par exemple, un quatrième bloc terminal dans Group B se place à côté de blockC, dans groupB.

Lisez les instructions de fermeture de l’intérieur vers l’extérieur : fermez le bloc terminal, puis son groupe, puis la collection. L’indentation rend cette structure visible pendant l’édition, mais c’est l’emplacement de chaque end que votre code source doit exprimer correctement.

Pourquoi utiliser des espaceurs plutôt que des sous-graphes vides ?

Le comportement des conteneurs vides a varié selon le moteur de rendu et la version. Le problème Mermaid 5402 signale qu’un sous-graphe vide ne fonctionne pas avec ELK dans Mermaid 10.8.0, alors que l’exemple fourni avec Dagre fonctionne. Il s’agit d’un signalement historique portant sur une configuration précise, et non d’une preuve que tous les moteurs de rendu actuels rejettent les sous-graphes vides. Consultez Le moteur de rendu Elk ne fonctionne pas avec un sous-graphe vide.

En pratique, mieux vaut éviter de faire dépendre entièrement un diagramme destiné à une installation non précisée du comportement des conteneurs vides. L’approche avec espaceur donne un contenu explicite à chaque bloc terminal tout en conservant le titre significatif sur le sous-graphe.

Utilisez ce guide de décision pour choisir le degré de rigueur nécessaire pour votre code source :

Exigence Approche de départ Élément à vérifier
Les blocs terminaux visibles doivent rester des conteneurs titrés Sous-graphes imbriqués avec des espaceurs transparents Titres, contenance et éléments auxiliaires masqués
Le code source ne doit contenir aucun nœud auxiliaire Essayez des sous-graphes terminaux vides dans le moteur de rendu cible Vérifiez si chaque bloc terminal vide s’affiche correctement
Les blocs terminaux contiendront ensuite des éléments réels Conservez les sous-graphes terminaux et remplacez leurs espaceurs Supprimez uniquement les éléments auxiliaires qui ne sont plus nécessaires
Les blocs doivent être placés délibérément en colonnes Évaluez séparément les diagrammes en blocs Mermaid Vérifiez la prise en charge de la syntaxe installée et la présentation des titres

La documentation dédiée de Mermaid aux diagrammes en blocs décrit les blocs composites, les colonnes et l’espacement explicite. Ces fonctions méritent d’être évaluées lorsque le placement est l’objectif principal. Elles ne garantissent pas, à elles seules, qu’une conversion préservera exactement cette présentation des conteneurs titrés. Consultez Documentation des diagrammes en blocs.

Diagnostiquez un résultat inattendu

Ne modifiez qu’un seul élément à la fois. Conservez une copie de l’exemple de départ complet dans une note distincte afin de distinguer une différence de moteur de rendu d’une erreur de modification.

  1. La note affiche du code au lieu d’un diagramme. Vérifiez que le délimiteur d’ouverture utilise mermaid, puis passez en Reading view. Comparez le délimiteur au format de diagramme documenté par Obsidian.
  2. Un bloc terminal ressemble à un simple rectangle légendé. Vérifiez sa déclaration. Elle doit commencer par subgraph, avec son espaceur sur une ligne distincte à l’intérieur.
  3. Un petit rectangle reste visible dans un bloc terminal. Faites correspondre l’identifiant de l’espaceur à l’instruction finale class. Supprimez temporairement le style pour repérer l’élément auxiliaire affiché, puis rétablissez-le.
  4. Un bloc apparaît dans le mauvais groupe. Vérifiez l’ordre des instructions de fermeture end avant de modifier les paramètres de mise en page.
  5. Le diagramme fonctionne en ligne, mais s’affiche autrement dans Obsidian. Comparez les notes de version de l’application installée avec la version du moteur de rendu en ligne. Conservez l’exemple qui fonctionne localement comme référence.

Préservez la contenance avant d’ajuster le placement

Une fois les titres et la contenance corrects, déterminez si la disposition est suffisamment lisible. Ne remplacez pas un sous-graphe terminal par un nœud dans le seul but de réduire son rectangle : cette modification change la représentation que vous souhaitez préserver.

De même, n’ajoutez des connecteurs que si le diagramme doit exprimer une relation qui dépasse la contenance. Mermaid signale une limite de direction : relier un nœud situé dans un sous-graphe à un élément extérieur entraîne l’héritage de la direction du parent par ce sous-graphe. Revérifiez la mise en page après avoir ajouté de telles arêtes. Consultez Direction dans les sous-graphes.

Terminez en examinant la note à la largeur à laquelle vous la lisez habituellement. Gardez la version qui montre clairement la collection, ses groupes et leurs blocs terminaux titrés. Le résultat attendu est une hiérarchie de contenance lisible, dont les blocs terminaux restent des sous-graphes, avec des éléments auxiliaires invisibles de mise en page clairement identifiés et faciles à supprimer plus tard.

Sources