Pour des diagrammes Mermaid lisibles et cohérents dans Obsidian sur Mac, définissez des styles de nœuds réutilisables à l'intérieur de chaque diagramme. Conservez votre thème d'application, vérifiez quel moteur de rendu utilise votre version installée, et n'ajoutez de CSS limité au diagramme que lorsque vous avez besoin de valeurs par défaut partagées.

Ce tutoriel crée un petit organigramme avec des remplissages de nœuds cohérents, des étiquettes lisibles et une étape alternative clairement identifiée. Toutes les étiquettes sont synthétiques. L'objectif est un motif de style réutilisable pour des notes ordinaires, avec des instructions distinctes là où Mermaid et le moteur de rendu Pele plus récent d'Obsidian se comportent différemment.

Vérifiez votre moteur de rendu installé avant de choisir les paramètres

Trouvez votre build sous Réglages → À propos → Application → Version actuelle, l'emplacement documenté dans l'aide sur les versions en accès anticipé d'Obsidian. Notez cette version avant de dépanner les styles.

Il existe une frontière importante : les notes de version du 22 octobre 2026 pour Obsidian 1.15.0 Desktop, marqué Accès anticipé, introduisent Pele pour le rendu des diagrammes Mermaid. Les notes indiquent qu'il prend en charge la syntaxe Mermaid 12.1.0, utilise les couleurs et polices du thème, et génère des classes SVG différentes. Ces notes de version décrivent cette version particulière ; elles n'établissent pas quel moteur de rendu votre Mac a installé. Voir Obsidian 1.15.0 Desktop.

Utilisez ce tableau de décision avant de copier une configuration depuis un autre tutoriel :

Votre environnement de rendu Commencez par Frontière à retenir
Obsidian utilisant Mermaid lui-même Classes de diagramme de niveau source ; éventuellement frontmatter du diagramme Les fonctionnalités de configuration dépendent de la version de Mermaid installée.
Obsidian utilisant Pele Styles de niveau source ; éventuellement variables CSS Pele Les thèmes Mermaid et les couleurs themeVariables ne s'appliquent pas.
Un plugin qui remplace le rendu des diagrammes Le moteur de rendu et les paramètres documentés du plugin Le comportement du moteur de rendu intégré ne suffit pas à établir la compatibilité.

Pele documente explicitement sa propre mise en page et son apparence, même lorsqu'il accepte la syntaxe Mermaid. Sa documentation sur la compatibilité indique également que la prise en charge de la configuration varie selon le type de diagramme. Traitez la compatibilité de la syntaxe et la sortie visuelle identique comme des questions distinctes.

Construisez un style d'organigramme réutilisable dans la note

Créez une nouvelle note et collez le bloc complet ci-dessous, y compris ses délimiteurs d'ouverture et de fermeture. La documentation sur la syntaxe de formatage avancé d'Obsidian spécifie un bloc de code délimité étiqueté mermaid pour les diagrammes.

```mermaid
flowchart TD
    A[Item A] --> B[Step B]
    B --> C[Result C]
    B --> D[Option D]

    classDef standard fill:#edf2f7,stroke:#475569,color:#172033,stroke-width:2px;
    classDef alternate fill:#e0f2fe,stroke:#0369a1,color:#172033,stroke-width:2px;
    class A,B,C standard;
    class D alternate;
```

La syntaxe classDef documentée de Mermaid définit une apparence réutilisable ; class l'attribue à des nœuds nommés. Ici, trois nœuds partagent standard, et un utilise alternate. Gardez les identifiants de nœuds séparés des étiquettes visibles pour que les changements de libellé soient faciles à suivre. Ces mécanismes sont décrits dans Organigrammes — Syntaxe de base.

La palette est un choix de conception illustratif. Elle associe des remplissages pâles à un texte foncé et des bordures plus fortes. L'étiquette Option D identifie également l'étape alternative, de sorte que sa signification ne dépend pas uniquement d'un remplissage bleu.

Prévisualisez la note et vérifiez les étiquettes à votre taille de lecture habituelle. Le résultat attendu est trois nœuds gris identiques et un nœud bleu. Laissez les flèches sur leurs valeurs par défaut du moteur de rendu au début ; cela facilite l'évaluation d'un changement à la fois.

Pour réutiliser le motif, copiez le bloc entier dans une autre note, modifiez les étiquettes et les connexions, et mettez à jour les listes de nœuds dans les deux dernières lignes. Conservez une copie de référence de la palette. C'est une convention manuelle : modifier la référence ne met pas automatiquement à jour les diagrammes déjà copiés ailleurs.

Pele prend également en charge le style défini par le diagramme, et sa documentation explique que les couleurs définies dans la source restent fixes lorsque le thème change. Cela rend cette approche utile lorsque vous souhaitez une palette cohérente tout en conservant votre thème Obsidian. Voir Thématisation Pele.

Utilisez le frontmatter du diagramme uniquement lorsque Mermaid rend le diagramme

Si votre environnement installé utilise Mermaid lui-même et prend en charge le frontmatter du diagramme, vous pouvez définir la palette et la typographie globales d'un diagramme ensemble. Mermaid documente la configuration du frontmatter à partir de la version 10.5.0. Son initialisation au niveau du site appartient à l'application intégratrice ; un auteur de note peut utiliser une configuration locale au diagramme à la place. Voir Configuration Mermaid.

Cette alternative complète définit une apparence partagée pour les trois nœuds. Utilisez-la d'abord dans un bloc de test séparé :

```mermaid
---
config:
  theme: base
  themeVariables:
    primaryColor: "#edf2f7"
    primaryTextColor: "#172033"
    primaryBorderColor: "#475569"
    lineColor: "#64748b"
    fontFamily: "Arial, sans-serif"
    fontSize: "16px"
---
flowchart TD
    A[Item A] --> B[Step B]
    B --> C[Result C]
```

Le YAML doit se trouver à l'intérieur du délimiteur mermaid, avant flowchart TD. Il s'agit de la configuration du diagramme, distincte des propriétés de la note en haut d'un fichier Markdown.

Mermaid spécifie base comme thème personnalisable et exige des couleurs hexadécimales pour son moteur de thématisation. Sa documentation sur la configuration du thème liste les variables de texte, remplissage, bordure, ligne et police utilisées ci-dessus. Ces paramètres décrivent l'apparence du diagramme sans sélectionner un autre thème d'application Obsidian.

Sur Pele, changer les couleurs themeVariables de cet exemple ne produira pas le même résultat : ces couleurs sont explicitement non prises en charge. Utilisez des classes définies dans la source pour des couleurs de nœuds fixes, ou l'approche par variables CSS ci-dessous pour les valeurs par défaut du moteur de rendu partagées. N'interprétez pas les paramètres de thème Mermaid ignorés comme une raison de continuer à ajuster les valeurs hexadécimales. Voir Compatibilité Pele.

Ajoutez des valeurs par défaut Pele partagées avec un petit extrait CSS

Pour une installation basée sur Pele, les variables CSS offrent une autre voie prise en charge. Cela est utile lorsque plusieurs diagrammes doivent partager des valeurs par défaut et que vous préférez modifier une seule feuille de style plutôt que d'éditer chaque bloc.

L'extrait complet suivant cible les organigrammes Pele. Il définit les couleurs du texte, des remplissages, des bordures et des connecteurs, tout en laissant la note environnante et le thème de l'application inchangés. Le sélecteur et les variables sont documentés dans Thématisation Pele.

.pele-flowchart {
  --pele-bg: #ffffff;
  --pele-fg: #172033;
  --pele-line: #64748b;
  --pele-surface: #edf2f7;
  --pele-surface-alt: #e2e8f0;
  --pele-border: #475569;
}

Installez-le via le workflow de bureau documenté d'Obsidian :

  1. Ouvrez Réglages.
  2. Sous Apparence → Extraits CSS, sélectionnez Ouvrir le dossier des extraits.
  3. Créez un fichier texte brut nommé diagram-defaults.css dans ce dossier et collez-y le CSS.
  4. Retournez à Apparence → Extraits CSS et sélectionnez Recharger les extraits.
  5. Activez diagram-defaults.

Ces contrôles et l'application automatique des modifications d'extraits enregistrés sont documentés dans Extraits CSS — Aide Obsidian. Sur Mac, vérifiez que votre éditeur a enregistré le nom de fichier avec l'extension .css.

Testez les valeurs par défaut partagées en utilisant le diagramme à trois nœuds de la section précédente, en supprimant son frontmatter de diagramme. Les couleurs définies dans la source peuvent remplacer les valeurs par défaut du moteur de rendu, donc les classes de nœuds explicites du premier exemple ne conviennent pas pour juger si les variables de remplissage partagées ont pris effet.

Cet extrait utilise délibérément une palette claire fixe. Si votre configuration de lecture préférée nécessite une palette différente, modifiez ensemble le texte, les surfaces, les bordures et les lignes, puis inspectez le résultat. La variable --pele-bg sert aux éléments d'arrière-plan ; elle ne promet pas un panneau opaque derrière l'ensemble du diagramme.

Gardez cet extrait spécifique à Pele. La documentation des organigrammes de Mermaid recommande classDef pour le style des nœuds et avertit que le CSS externe peut perdre face aux styles internes de Mermaid. Une feuille de style ciblant un moteur de rendu ne doit pas être supposée fonctionner avec l'autre. Voir Conseils sur les classes CSS de Mermaid.

Diagnostiquez les diagrammes illisibles dans un ordre reproductible

Utilisez la séquence suivante lorsqu'un diagramme s'affiche mais que son apparence est incohérente. Elle sépare la syntaxe, la portée du style et l'espace disponible sans changer votre thème d'application.

  1. Réduisez le test. Copiez le diagramme de la note dans une note temporaire et conservez trois étiquettes courtes. Si le petit exemple échoue également, examinez la syntaxe ou la prise en charge du moteur de rendu avant d'affiner les couleurs.
  2. Choisissez un seul mécanisme de style. Testez les classes source seules, le frontmatter Mermaid seul, ou les variables Pele seules. Les combiner immédiatement rend les remplacements plus difficiles à identifier.
  3. Vérifiez les couleurs associées. Inspectez le texte par rapport à son remplissage de nœud, puis les bordures et flèches par rapport à la note environnante. Corrigez la paire illisible avant d'ajouter un autre accent.
  4. Vérifiez la largeur de lecture. Prévisualisez le diagramme dans la largeur de panneau que vous utilisez normalement. Raccourcissez les étiquettes ou essayez une disposition verticale si le graphique devient trop large.
  5. Réintroduisez la complexité progressivement. Ajoutez les nœuds restants, les styles alternatifs et les étiquettes de bord par petits groupes. Gardez la dernière version lisible disponible pour comparaison.

Pour la vérification de la direction, Mermaid documente TD comme haut vers bas et LR comme gauche vers droite. Essayez de changer uniquement cette déclaration avant de réécrire le diagramme. Voir Direction de l'organigramme.

Jugez le résultat final dans votre moteur de rendu Obsidian installé. Un éditeur externe peut aider à examiner la syntaxe, mais Pele documente des positions de nœuds, des espacements et des chemins de bord différents de ceux de Mermaid. Une source correspondante n'exige pas une géométrie correspondante.

Gardez un petit diagramme de référence à côté de votre palette réutilisable. Une fois que ses étiquettes, nœuds et connecteurs sont lisibles clairement à votre largeur de panneau normale, appliquez la même convention à vos notes de travail. La cohérence vient d'un style reproductible et d'une frontière de moteur de rendu connue ; votre thème Obsidian peut rester tel quel.

Sources