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 20, 2022 by Poulard Christine's avatar Poulard Christine
Hide whitespace changes
Inline Side-by-side
mermaid.md
View page @ d12c8fe2
**Refs** : **Sommaire de la page**
[TOC]
### Refs
:bulb: https://mermaid-js.github.io/mermaid-live-editor/ :bulb: https://mermaid-js.github.io/mermaid-live-editor/
...@@ -6,7 +10,7 @@ https://css-tricks.com/making-mermaid-diagrams-in-markdown/ ...@@ -6,7 +10,7 @@ https://css-tricks.com/making-mermaid-diagrams-in-markdown/
https://mermaid-js.github.io/mermaid/#/ https://mermaid-js.github.io/mermaid/#/
## Graphes ### Graphes simples de la doc
Doc spécifique [doc flowchart](https://mermaid-js.github.io/mermaid/#/flowchart) Doc spécifique [doc flowchart](https://mermaid-js.github.io/mermaid/#/flowchart)
ex de la doc ex de la doc
```mermaid ```mermaid
...@@ -34,7 +38,7 @@ flowchart LR ...@@ -34,7 +38,7 @@ flowchart LR
C -->|Two| E[Result two] C -->|Two| E[Result two]
``` ```
#### mes tests ### mes tests simples
```mermaid ```mermaid
graph LR graph LR
A[départ] -.-> | on suit ce petit chemin | B(avec une halte) -.-> C[/ouf, on y est\] A[départ] -.-> | on suit ce petit chemin | B(avec une halte) -.-> C[/ouf, on y est\]
...@@ -68,8 +72,55 @@ flowchart LR ...@@ -68,8 +72,55 @@ flowchart LR
style id1 fill:#f9f,stroke:#333,stroke-width:4px style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
``` ```
### Ma palette de couleurs et quelques formes
```mermaid
%%{config: { 'fontFamily': 'Menlo', 'fontSize': 30, 'fontWeight': 400, 'width'="100%", 'height'="100%"} }%%
%%{init: { "flowchart": { "curve": "linear" } } }%%
flowchart LR
subgraph BleuVerts
direction TB
Q1[/"[/blue/]"/]:::blue;
Q2("(light_blue)"):::light_blue;
Q3>">Ao_green]"]:::Ao_green ;
Q4{"{light_green}"}:::light_green ;
Q4 -.-> |"-.->"|Q2
Q4 ---> |"--->"|Q3
Q4 ==> |"==>"|Q1
end
subgraph RougeOranges
direction TB
S1(("((brass))")):::brass;
S2[/"[/gold\]"\]:::gold;
S3["[brick]" ]:::brick
S4[["[[pale_red ]]"]]:::pale_red
S5{{"{{rose}}"}}:::rose;
S1 o--o |"o--o"|S2
S1 o--x |"o--x"|S3
S4 ----> |"---->"|S5
end
RougeOranges ==> |"==>"|BleuVerts
G[("[(grey)]")]:::grey
Q4 -.-> |"-.->"| G
classDef blue fill:#58a;
classDef brass fill:#c97;
classDef Ao_green fill:#080;
classDef gold fill:#fa0;
classDef rose fill:#fcc;
classDef brick fill:#c55;
classDef pale_red fill:#f88;
classDef grey fill:#777;
classDef light_blue fill:#5ef;
classDef light_green fill:#5fc;
```
## Tests de graphiques "métiers"
### schéma d'un wiki
```mermaid ```mermaid
graph TB graph TB
subgraph Pages subgraph Pages
...@@ -110,6 +161,7 @@ classDef gold fill:#fa0; ...@@ -110,6 +161,7 @@ classDef gold fill:#fa0;
``` ```
### De l'hydrologie aux DMA au multicritères
```mermaid ```mermaid
graph TD graph TD
...@@ -144,6 +196,7 @@ classDef Ao_green fill:#080; ...@@ -144,6 +196,7 @@ classDef Ao_green fill:#080;
classDef gold fill:#fa0; classDef gold fill:#fa0;
``` ```
### De l'hydrologie aux DMA
```mermaid ```mermaid
graph TD graph TD
......
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