Pour garder les nœuds Mermaid sur des rangées fixes malgré les changements de connexions, utilisez un diagramme en blocs avec des colonnes explicites, lorsque votre moteur de rendu le permet. Dans Obsidian sur Mac, vérifiez d’abord le moteur de rendu installé : les sous-graphes de diagramme de flux ne peuvent pas imposer cette disposition de manière fiable.

Ce guide porte sur une seule tâche : disposer six nœuds neutres sur deux rangées horizontales tout en préservant les connexions entre les nœuds individuels. Déterminez séparément si vous avez besoin de boîtes alignées, de segments de connecteur à angle droit, ou des deux. Un résultat satisfaisant pour une exigence peut ne pas répondre à l’autre.

Pourquoi les connexions croisées perturbent-elles les rangées d’un diagramme de flux ?

Mermaid documente une limitation spécifique des diagrammes de flux : lorsqu’un nœud situé dans un sous-graphe est relié à un élément extérieur à ce sous-graphe, la direction locale est ignorée et le nœud hérite de la direction du graphe parent. Par conséquent, une rangée déclarée avec direction LR à l’intérieur d’un flowchart TB peut changer de disposition lorsqu’une connexion externe est ajoutée. Consultez la limitation concernant la direction des sous-graphes officielle.

Cette note illustrative complète contient cette condition. Ses deux connexions internes suggèrent des rangées horizontales, mais A --> D traverse la limite du sous-graphe :

```mermaid
flowchart TB
  subgraph RowOne[Row One]
    direction LR
    A[Alpha] --> B[Beta]
  end
  subgraph RowTwo[Row Two]
    direction LR
    D[Delta] --> E[Epsilon]
  end
  A --> D
```

Mermaid prend également en charge les connexions aux identifiants des sous-graphes. Relier RowOne à RowTwo à la place peut éviter de cibler leurs nœuds internes, mais modifie le sens de la relation : cela relie des groupes plutôt qu’Alpha et Delta. N’utilisez cette option que si la relation entre les groupes est exacte. Les liens invisibles tels que A ~~~ B sont des aides au positionnement documentées, et non un mécanisme documenté pour verrouiller les rangées. Syntaxe des diagrammes de flux

Pour cette tâche, gardez les extrémités individuelles. Remplacer une connexion requise entre des nœuds par une connexion entre des groupes rendrait le dessin plus ordonné, au détriment des informations qu’il doit transmettre.

Vérifier quel moteur de rendu votre Mac utilise réellement

Ouvrez Settings dans Obsidian, puis General, et notez la version actuelle de l’application. La documentation actuelle indique que les informations de version et la commande Read the changelog s’y trouvent. Consultez les notes de version correspondant à votre version installée avant d’appliquer des instructions écrites pour une autre version. Paramètres — Aide d’Obsidian

Il existe une différence de version importante : la version Desktop 1.15.0 d’Obsidian en accès anticipé, datée du 22 octobre 2026, introduit Pele pour le rendu des diagrammes et décrit la compatibilité avec la syntaxe Mermaid 12.1.0. Cette annonce ne précise pas quel moteur de rendu utilise une version antérieure installée. Notes de version d’Obsidian 1.15.0 Desktop

Pele documente son propre moteur de mise en page, dont les positions des nœuds, l’espacement et les tracés des arêtes diffèrent de ceux de Mermaid. Sa liste de compatibilité inclut à la fois block et block-beta. Par conséquent, la compatibilité syntaxique seule ne suffit pas à prouver qu’un diagramme Obsidian correspondra à un rendu Mermaid en amont. Compatibilité avec Pele

Mermaid en amont a également évolué : sa documentation sur les mises en page indique qu’ELK a été intégré et défini comme moteur par défaut pour les diagrammes de flux dans la version 12.0.0 ; auparavant, l’hôte devait installer et enregistrer le paquet ELK séparément. Les conseils visant à sélectionner layout: elk doivent donc rester conditionnels au moteur de rendu et à sa version. Mises en page Mermaid

Pour effectuer une comparaison utile, gardez ensemble trois éléments : le code source exact du diagramme, la version de l’application Obsidian et l’environnement de rendu. Ne changez qu’un élément à la fois. Comparer des sources différentes dans des moteurs de rendu différents ne permet pas de déterminer pourquoi les rangées ont bougé.

Utiliser un diagramme en blocs pour placer explicitement les rangées

Les diagrammes en blocs de Mermaid permettent de contrôler le placement à l’aide de colonnes. Les blocs remplissent les colonnes déclarées puis passent aux rangées suivantes ; space réserve des cellules vides. Cette méthode constitue la solution Mermaid prise en charge pour disposer des boîtes indépendamment du classement des diagrammes de flux. Syntaxe des diagrammes en blocs

Créez une note temporaire dans Obsidian et collez le bloc complet ci-dessous, y compris ses triples accents graves ouvrants et fermants. Obsidian documente les diagrammes sous forme de blocs de code délimités par des accents graves et portant l’identifiant de langage mermaid. Syntaxe de mise en forme avancée — Aide d’Obsidian

```mermaid
block
  columns 5
  A["Alpha"] space B["Beta"] space C["Gamma"]
  space:5
  D["Delta"] space E["Epsilon"] space F["Zeta"]

  A --> B
  B --> C
  D --> E
  E --> F
  A --> D
  B --> E
  C --> F
  A --> F
```

La disposition visée place Alpha, Beta et Gamma sur la rangée supérieure occupée, avec Delta, Epsilon et Zeta en dessous. Cinq colonnes incluent deux espaces horizontaux ; space:5 réserve une rangée entièrement vide entre les rangées occupées. Les connexions font référence aux identifiants des blocs déclarés. Ces éléments suivent la syntaxe documentée par Mermaid pour les colonnes, l’espacement et les arêtes. Syntaxe des diagrammes en blocs

Si le moteur de rendu installé refuse block, arrêtez-vous et vérifiez la compatibilité. Consultez la syntaxe documentée avant d’essayer l’ancienne forme block-beta ; Pele les répertorie toutes les deux, mais cela ne prouve pas qu’elles sont prises en charge par toutes les anciennes versions d’Obsidian. Les exemples présentés ici ont été vérifiés par rapport à la documentation, et non exécutés dans un moteur de rendu Obsidian installé. Compatibilité avec Pele

Évaluez le résultat en deux étapes. Vérifiez d’abord les six libellés et leur appartenance aux rangées prévues. Examinez ensuite les huit relations, en particulier la connexion diagonale d’Alpha à Zeta. Accepter la disposition des boîtes ne doit pas masquer un connecteur ambigu ou chevauchant.

Les connecteurs à angle droit doivent-ils eux aussi rester sur des rangées fixes ?

Traitez l’apparence des connecteurs comme un critère d’acceptation distinct. La configuration des diagrammes de flux Mermaid définit curve comme un paramètre de rendu des arêtes et répertorie step, stepBefore et stepAfter parmi ses valeurs. Elle définit séparément nodeSpacing pour les nœuds au même niveau et rankSpacing pour les niveaux différents. Ces paramètres concernent l’apparence et l’espacement ; les objectifs documentés ne garantissent pas le maintien des nœuds sur des rangées fixes. Schéma de configuration des diagrammes de flux

L’exemple en blocs traite du placement des boîtes. Il ne garantit pas que chaque connexion croisée n’utilisera que des segments horizontaux et verticaux. Ne supposez pas qu’un paramètre de courbure des diagrammes de flux contrôle les connecteurs des diagrammes en blocs, ni qu’un paramètre accepté par Mermaid en amont se comporte de la même manière dans Pele.

Utilisez cet outil d’aide à la décision avant de consacrer du temps à ajuster le dessin :

Résultat attendu Choix pratique Critère d’acceptation
Deux rangées fixes avec des connexions croisées entre nœuds individuels Diagramme en blocs, si pris en charge Chaque nœud reste sur la rangée prévue
Un diagramme de flux lisible avec un positionnement flexible Ajustements de disposition et d’espacement du diagramme de flux Les relations restent claires après chaque modification
Des connexions entre des groupes entiers Extrémités de sous-graphes, si elles correspondent au sens voulu Les extrémités décrivent la relation visée
Des boîtes disposées manuellement dans Obsidian Canvas Le placement des cartes et les connexions correspondent au diagramme voulu
Des rangées fixes et des changements de direction prescrits pour les connecteurs Évaluer séparément les deux exigences Examiner chaque segment et croisement dans le moteur de rendu réel

Que faire si votre version installée d’Obsidian ne peut pas afficher le diagramme en blocs ?

Pour une tâche courante sur Mac où des cartes placées manuellement sont acceptables, Obsidian Canvas propose une autre solution documentée. Ouvrez la palette de commandes et sélectionnez Canvas: Create new canvas. Double-cliquez sur le canevas pour créer des cartes de texte, puis saisissez les six libellés fictifs. Canvas — Aide d’Obsidian

Sélectionnez les trois cartes du haut et choisissez Align, puis Arrange in a row. Répétez l’opération pour les trois cartes du bas. Ajustez l’espacement au besoin. Pour relier les cartes, survolez le bord d’une carte jusqu’à ce qu’un cercle plein apparaisse, puis faites glisser ce cercle vers le bord d’une autre carte. Ces commandes d’agencement et de connexion sont des fonctionnalités Canvas documentées. Canvas — Aide d’Obsidian

Canvas crée un document .canvas distinct plutôt qu’un bloc de code Mermaid intégré. Choisissez cette option si des cartes agencées directement conviennent au livrable. Ses commandes de placement répondent au besoin de rangées, mais la documentation citée ne confirme pas la possibilité de modifier librement les points de passage des connecteurs. Canvas — Aide d’Obsidian

Vérifier le résultat avant d’ajouter d’autres connexions

Utilisez une courte séquence de comparaison pour distinguer une syntaxe non prise en charge d’un comportement de mise en page. Il s’agit d’une procédure de diagnostic déduite des limites documentées, et non d’une affirmation fondée sur un test dans une installation Obsidian particulière :

  1. Affichez les six blocs déclarés sans leurs huit lignes de connexion. Vérifiez leur appartenance aux rangées.
  2. Rétablissez les quatre connexions entre les nœuds de chaque rangée. Vérifiez les libellés et le sens des flèches.
  3. Rétablissez les trois connexions entre les colonnes correspondantes. Examinez l’espace entre les rangées.
  4. Rétablissez A --> F en dernier. Vérifiez si son tracé reste lisible.
  5. Rouvrez la source finale dans l’environnement où vous comptez la lire. Évaluez ce rendu.

Si l’étape 1 échoue à l’analyse syntaxique, vérifiez la prise en charge des diagrammes avant de modifier l’espacement. Si le placement convient mais qu’un connecteur manque de clarté, ajustez son tracé ou repensez la présentation. Gardez toutes les relations requises visibles lorsque vous comparez les options ; supprimer la connexion problématique ferait disparaître précisément la condition à laquelle le diagramme doit répondre.

Pour conserver des rangées stables, commencez par un placement explicite en blocs et validez-le dans le moteur de rendu installé. Préservez les relations entre les nœuds, examinez séparément la géométrie des connecteurs et utilisez Canvas lorsque le placement direct des cartes est la solution la plus pratique.

Sources