mermaid.md

+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`. 
+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`**
+
 **Sommaire de la page**
 
 [TOC]
@@ -10,6 +14,8 @@ https://css-tricks.com/making-mermaid-diagrams-in-markdown/
 
 https://mermaid-js.github.io/mermaid/#/
 
+Ca marche sur un obket **flowchart**, pas un objet **graph**
+
 ### Graphes simples de la doc
 Doc spécifique [doc flowchart](https://mermaid-js.github.io/mermaid/#/flowchart)
 ex de la doc
@@ -56,8 +62,16 @@ graph TD
 ```
 
 ### Styles : traits et couleurs ?
-; hexa sur 4 bits (
-https://www.colorhexa.com/color-names)
+
+:key: Les mots clefs pour les styles sont : 
+- #abc : les couleurs sont codées en hexa sur 3 chiffres (RGB, 0= mini, 1= maxi) ; #000 = blanc, #111 = noir
+- classDef : définit le style pour une classe `classDef green fill:#9f6,stroke:#333,stroke-width:2px`
+- class: affecte une classe à des id `class sq,e green`
+- style : crée et affecte à la volée `style S3 color:#f66`
+- `:::` : 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,j,k : définit un style  pour les liens numéro i,j,k :warning: pas d'espace entre les chiffres et les virgules
+
 
 ça marche dans l'éditeur en ligne
 ```mermaid
@@ -66,6 +80,30 @@ flowchart LR
     classDef someclass fill:#f96;
 ```
 
+#### Palettes en hexa
+
+```js
+classDef green fill:#9f6,stroke:#333,stroke-width:2px
+classDef orange fill:#f96,stroke:#333,stroke-width:4px
+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;
+classDef purple color:#c5c ; %% à vérifier
+%%fill:#eee 
+style S3 color:#f66
+
+style BleuVerts color:#66f
+style BleuVerts fill:#ff1
+style Q3 color:#6f6
+```
+
 ```mermaid
 flowchart LR
     id1(Start)-->id2(Stop)
@@ -191,8 +229,22 @@ style S3 color:#f66
 style BleuVerts color:#66f
 style BleuVerts fill:#ff1
 style Q3 color:#6f6
+```
+### Les liens aussi peuvent être "stylés"
+Ca marche sur un obket **flowchart**, pas un objet **graph**
+`linkStyle`+ numéro de 0 à N, ou liste de numéros ou `default`
 
+`linkStyle 0 stroke:blue,stroke-width:2px,color:red;`
+```mermaid
+flowchart LR
+    %% Colors %%
+    classDef class_blue fill:#2374f7,stroke:#000,stroke-width:2px,color:#fff
+    classDef class_green fill:#16b552,stroke:#000,stroke-width:2px,color:#fff
+
+    A[Hello]:::class_blue ---> |Change_font| B[of_text]:::class_green 
 
+    %% Link Color %%
+    linkStyle 0 stroke:blue,stroke-width:2px,color:red;
 ```
 
 ## Tests de graphiques "métiers"
@@ -237,8 +289,8 @@ classDef Ao_green fill:#080;
 classDef gold fill:#fa0;
 
 ```
-
-### De l'hydrologie aux DMA au multicritères
+### Indicateurs de Risque Inondation
+#### De l'hydrologie aux DMA au multicritères
 
 ```mermaid
 graph TD
@@ -273,7 +325,7 @@ classDef Ao_green fill:#080;
 classDef gold fill:#fa0;
 
 ```
-### De l'hydrologie aux DMA 
+#### De l'hydrologie aux DMA 
 
 ```mermaid
 graph TD
@@ -288,7 +340,7 @@ classDef Ao_green fill:#080;
 classDef gold fill:#fa0;
 
 ```
-
+#### principe de calcul des DMA, 2
 
 ```mermaid
 graph TD
@@ -305,8 +357,60 @@ classDef gold fill:#fa0;
 
 ```
 
+### Déroulement d'un projet Surcotes
+```mermaid
+flowchart LR
+   subgraph QGis
+    direction TB
+       Q1[Axe écoulement <br>]:::light_blue;
+       Q2[Profils <br> en travers]:::light_blue;
+       Q3[Zone inondée CC]:::light_blue;
+       Q5["(LFN)"]:::light_blue;
+       Q4[MNT]:::brass;
+       
+  end
+  subgraph Prétraitement
+    direction TB
+       S1[Création d'un MNT virtuel]:::brass;
+       S2[Découpage du MNT]:::brass;
+       S1 -.-> S2;  %% 0
+       S3["AUTRES <br> (rallongement de profils en travers)..."]:::light_blue ;
+       Q4 -.-> S1  %% 1
+  end
+  subgraph Projet géré par le plugin Surcotes
+     direction TB
+       DP[Définition projet]:::light_green;
+       GT[Gestion tronçons]:::light_green;
+       GP[Gestion profils <br> calculs Strickler]:::light_green;
+       DP-->GT;%% 2
+       GT-->|paramètres et méthodes <br> de calcul|GP; %% 3
+       GP -->|vérification <br> de la cohérence|GT ; %% 4
+       Q1 --> DP %% 5
+       Q2 --> |objets géométriques <br> et leur <br> table attributaire| DP ; %% 6
+       Q3 --> DP; %% 7
+       Q4 -.-> DP; %% 8
+       Q5 -.-> DP; %% 9
+       S3 -.-> DP; %% 10
+       S2 -.-> DP; %% 11
+       
+    end
+
+%% Colors %%
+classDef link_blue fill:#580,stroke:#000,stroke-width:2px,color:#580
+classDef brass fill:#c97;
+classDef Ao_green fill:#080;
+classDef gold fill:#fa0;
+classDef light_blue fill:#5ef;
+classDef light_green fill:#5fc;
+
+linkStyle 5,6,7,9,10 stroke:blue,stroke-width:2px,color:blue;
+%%linkStyle 6,10 stroke:blue,stroke-width:2px,color:red;
+
+
+```
 
-git ?
+## Git ?
+git ne donne rien sous gitlab ?
 ```mermaid
     gitGraph
        commit