Aide-mémoire des organigrammes Mermaid

Démarrage rapide

Gardez des ids stables et des libellés entre guillemets ; les liens utilisent les ids.

flowchart LR
  D["Brouillon du guide"] --> R{"Approuvé ?"}
  R -->|Oui| P["Publier le guide"]
  R -->|Non| D

Référence de syntaxe

Formes et libellés

Le catalogue couvre les 48 formes standard du moteur 11.15 et leurs alias. Utilisez @{ shape: ... } pour les nouvelles formes ; la notation classique reste valide.

flowchart TB
  A@{ shape: sl-rect, label: "Saisir le titre" }
  B@{ shape: doc, label: "Document en brouillon" }
  C@{ shape: diam, label: "Complet ?" }
  D@{ shape: cyl, label: "Archive" }
  A --> B --> C
  C -->|Oui| D
  C -->|Non| A

Liens et distances

Les tirets supplémentaires demandent plus de rangs. Les extrémités expriment vos conventions ; les liens invisibles influencent la disposition.

flowchart LR
  A["Plan"] -->|Prêt| B["Brouillon"]
  B -.-> C["Révision"]
  C ==> D["Publication"]
  A ----> D
  B o--o E["Liste de contrôle"]
  E x--x D
  C ~~~ E

Sous-graphes

La direction interne peut céder aux connexions vers l’extérieur. Reliez les sous-graphes entiers pour mieux la préserver.

flowchart LR
  subgraph prep ["Préparation"]
    direction TB
    A["Plan"] --> B["Brouillon"]
  end
  subgraph review ["Révision"]
    direction TB
    C["Vérifier"] --> D["Approuver"]
  end
  prep --> review

Styles et Markdown

classDef définit un style, class ou ::: l’applique. style cible un nœud, linkStyle l’index de déclaration et les ids des liens précis.

flowchart LR
  A["`**Guide** en brouillon`"]:::focus e1@--> B["Révision"]
  B --> C["Publier"]
  classDef focus fill:#d3e5ff,stroke:#0070f3,color:#171717
  class B focus
  style C stroke-width:2px
  linkStyle 1 stroke:#0070f3,stroke-width:2px
  classDef edge stroke:#0070f3
  class e1 edge

Espacement et moteur de disposition

nodeSpacing et rankSpacing ajustent la disposition. ELK et les paquets d’icônes exigent un enregistrement par l’hôte ; les formes ordinaires fonctionnent seules.

---
config:
  flowchart:
    nodeSpacing: 35
    rankSpacing: 60
---
flowchart LR
  A["Rédiger"] --> B["Révision"] --> C["Publier"]

Erreurs fréquentes

flowchart LR
  A[Draft

flowchart LR
  A["Brouillon"] --> B["Révision"]

Limites

• La disposition automatique fixe les positions ; les tirets ne fixent pas de distances en pixels.
• Les liens externes peuvent remplacer la direction du sous-graphe.
• Les icônes exigent un paquet, les images des ressources accessibles et ELK un enregistrement.

Aide-mémoire associés

• Aide-mémoire des diagrammes en couloirs Mermaid →
• Aide-mémoire des diagrammes de classes Mermaid →
• Aide-mémoire Mermaid →