Mermaid 11.15.0
Mermaid n’a pas de couloirs natifs. Utilisez un sous-graphe par rôle ; préférez une séquence pour les messages ou architecture-beta pour des groupes d’infrastructure.
Créer avec l’outil Éditeur d’organigrammes Mermaid →Créez un sous-graphe par rôle, puis reliez leurs actions avec les ids des nœuds.
flowchart LR
subgraph author ["Auteur"]
direction TB
A["Brouillon"] --> B["Réviser"]
end
subgraph reviewer ["Relecteur"]
direction TB
C["Vérifier"] --> D["Approuver"]
end
A --> C
C --> B
B --> DChargement…
| Syntaxe | Signification |
|---|---|
| flowchart LR / flowchart TB | Utilisez flowchart ; swimlane n’est pas un mot-clé de diagramme valide. |
| subgraph laneId ["Role"] / end | Groupe les actions d’un rôle ; ids de couloirs et nœuds doivent différer. |
| direction TB / direction LR | Demande une direction interne ; les liens externes peuvent la remplacer. |
| A --> B / A -->|Handoff| B | Relie les actions de couloirs distincts et libelle le passage. |
| laneA --> laneB / A ~~~ B | Les liens entre groupes et invisibles influencent l’ordre sans fixer les coordonnées. |
| style laneId fill:#f5f5f5,stroke:#a1a1a1 | Style directement le fond et le bord du sous-graphe. |
| classDef / class A name / A:::name | Applique des styles réutilisables aux actions. |
| %% / accTitle: / accDescr: | Commentaires et descriptions accessibles ; le reste de flowchart reste disponible. |
Chaque action appartient à un rôle. Les ids de groupe identifient les rôles, ceux des nœuds les actions. Relier les groupes entiers préserve mieux leur direction.
flowchart LR
subgraph writer ["Rédacteur"]
direction TB
A["Plan"] --> B["Brouillon"]
end
subgraph editor ["Éditeur"]
direction TB
C["Révision"] --> D["Valider"]
end
writer --> editorChargement…
Les liens entre actions représentent des passages précis, mais peuvent faire hériter au groupe la direction globale.
flowchart TB
subgraph requester ["Demandeur"]
direction LR
A["Soumettre"] --> B["Répondre"]
end
subgraph approver ["Responsable d’approbation"]
direction LR
C["Évaluer"] --> D["Approuver"]
end
A -->|Demande| C
C -->|Modifications| B
B --> DChargement…
style modifie le couloir et classDef les actions. Gardez texte et bords lisibles ; la couleur complète le nom du rôle.
flowchart LR
subgraph drafting ["Rédaction"]
A["Rédiger"]:::action
end
subgraph checking ["Vérification"]
B["Révision"]:::action
end
A --> B
style drafting fill:#f5f5f5,stroke:#a1a1a1
style checking fill:#d3e5ff,stroke:#0070f3
classDef action fill:#ffffff,stroke:#171717,color:#171717Chargement…
rankSpacing sépare les passages et nodeSpacing les actions. Mermaid contrôle ordre, largeur et positions ; divisez les processus longs.
---
config:
flowchart:
nodeSpacing: 40
rankSpacing: 70
---
flowchart LR
subgraph drafting ["Rédaction"]
A["Rédiger"]
end
subgraph review ["Révision"]
B["Vérifier"]
end
A --> BChargement…
Commencez par flowchart et créez des sous-graphes.
Syntaxe incorrecte : correction ci-dessous
swimlane
Author --> Reviewerflowchart LR
subgraph author ["Auteur"]
A["Brouillon"]
end
subgraph reviewer ["Relecteur"]
B["Vérifier"]
end
A --> BChargement…
Les groupes s’adaptent au contenu ; les liens invisibles ne créent pas de grille fixe.