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/
......@@ -6,7 +10,7 @@ https://css-tricks.com/making-mermaid-diagrams-in-markdown/
https://mermaid-js.github.io/mermaid/#/
## Graphes
### Graphes simples de la doc
Doc spécifique [doc flowchart](https://mermaid-js.github.io/mermaid/#/flowchart)
ex de la doc
```mermaid
......@@ -34,7 +38,7 @@ flowchart LR
C -->|Two| E[Result two]
```
#### mes tests
### mes tests simples
```mermaid
graph LR
A[départ] -.-> | on suit ce petit chemin | B(avec une halte) -.-> C[/ouf, on y est\]
......@@ -68,8 +72,55 @@ flowchart LR
style id1 fill:#f9f,stroke:#333,stroke-width:4px
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
graph TB
subgraph Pages
......@@ -110,6 +161,7 @@ classDef gold fill:#fa0;
```
### De l'hydrologie aux DMA au multicritères
```mermaid
graph TD
......@@ -144,6 +196,7 @@ classDef Ao_green fill:#080;
classDef gold fill:#fa0;
```
### De l'hydrologie aux DMA
```mermaid
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