Skip to content
GitLab
Projects Groups Topics Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Register
  • 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 institutionnelle d'INRAE étant en production depuis le 10 juin 2025, nous vous recommandons d'y créer tous vos nouveaux projets.

  • 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
Show 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