Skip to content
GitLab
Projects Groups Topics Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • A Atelier Gitlab Flavored Markdown
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributor statistics
    • Graph
    • Compare revisions
  • Issues 0
    • Issues 0
    • List
    • Boards
    • Service Desk
    • Milestones
  • Deployments
    • Deployments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Terraform modules
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • Repository
  • Wiki
    • Wiki
  • Activity
  • Graph
  • Create a new issue
  • Commits
  • Issue Boards
Collapse sidebar

La forge gitlab.irstea.fr sera définitivement arrêtée le 30 juin 2026. Nous vous invitons à migrer vos projets vers la forge INRAE. Vous trouverez plus de détails sur le blog de la forge INRAE.

Le service a été transféré vers un nouvel hébergement le mercredi 3/12/2025. Cependant les accès par SSH n'ont pas encore été rétablis. Nous faisons au mieux pour régler ces problèmes rapidement. Merci de votre compréhension et de votre patience.

  • Poulard Christine
  • Atelier Gitlab Flavored Markdown
  • Wiki
  • mermaid

mermaid · Changes

Page history
Update mermaid authored Oct 25, 2022 by Poulard Christine's avatar Poulard Christine
Hide whitespace changes
Inline Side-by-side
mermaid.md
View page @ da7d349b
Cette page est consacrée aux diagrammes mermaid, "définis par code", ce qui permet de créer des graphiques "légers" simplement... ou de créer des schémas plus complexes en y passant un peu de temps. Cette page est consacrée aux diagrammes mermaid, "définis par code", ce qui permet de créer des graphiques "légers" simplement... ou de créer des schémas plus complexes en y passant un peu de temps.
On s'intéresse plus particulièrement aux graphiques de type **`flowchart`**. Des exemples en ligne utilisent le graphique de base, **`graph`**, mais toutes les fonctionnalités ne marchent pas avec `graph`. On s'intéresse plus particulièrement aux graphiques de type **`flowchart`**. Des exemples en ligne utilisent le graphique de base, **`graph`**, mais toutes les fonctionnalités ne marchent pas avec `graph`.
C'est piégeux car les syntaxes se ressemblent, et une fonction qui "ne marche pas" avec `graph` ne déclenche pas d'erreur, simplement le graphe n'est pas tout à fait ce qu'on attendait. On peut passer du temps à vérifier le code, alors que la seule chose à changer est le premier mot... **`flowchart`** C'est piégeux car les syntaxes se ressemblent, et une fonction qui "ne marche pas" avec `graph` ne déclenche pas d'erreur, simplement le graphe n'est pas tout à fait ce qu'on attendait. On peut passer du temps à vérifier le code, alors que la seule chose à changer est le premier mot... **`flowchart`**.
Comme tout langage, il faut prendre en main la syntaxe. Elle n'est pas du tout compliquée et il y a des tutos, mais parfois le problème est dans un petit détail, comme des **espaces** en trop.
Pour appliquer à plusieurs items séparés par des virgules, il ne faut surtout pas d'espace :
`class id1,id11,id12 style1`
`linkStyle 0,1 stroke:blue,stroke-width:2px,color:red;
et surtout pas :
`class id1, id11, id12 style1`
`linkStyle 0, 1 stroke:blue,stroke-width:2px,color:red;
**Sommaire de la page** **Sommaire de la page**
...@@ -74,8 +84,8 @@ flowchart LR ...@@ -74,8 +84,8 @@ flowchart LR
- class: affecte une classe à des id `class sq,e green` - class: affecte une classe à des id `class sq,e green`
- style : crée et affecte à la volée un style pour un objet `style S3 color:#f66` - style : crée et affecte à la volée un style pour un objet `style S3 color:#f66`
- `:::` : affecte une classe à la création de l'objet `S1(("((brass))")):::brass;` - `:::` : affecte une classe à la création de l'objet `S1(("((brass))")):::brass;`
- linkstyle i : définit un style pour le lien numéro i (de 0 à N) - linkStyle i : définit un style pour le lien numéro i (de 0 à N)
- linkstyle i,j,k : définit un style pour les liens numéro i,j,k :warning: pas d'espace entre les chiffres et les virgules - linkStyle i,j,k : définit un style pour les liens numéro i,j,k :warning: pas d'espace entre les chiffres et les virgules
```mermaid ```mermaid
flowchart LR flowchart LR
......
Clone repository

Barre latérale

ce panneau va faciliter votre navigation

Tutoriel
  • Page principale
  • Diagrammes mermaid

Pour les rédacteurs
  • pour les tests

Barre latérale personnalisée
  • référence directe au paragraphe sidebar
pour la retrouver, une référence est bien pratique !
  • Barre latérale