mermaid.md

@@ -72,6 +72,72 @@ 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
 ```
+
+### Subgraphs de flowcharts
+Les subgraphs de flowcharts doivent avoir un ID et/ou un titre
+
+```mermaid
+flowchart TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+ 
+```
+Pour affecter un style, c'est plus facile avec un titre ou un ID+titre, sinon il se crée un doublon ????
+```mermaid
+flowchart TB
+    c1-->a2
+    subgraph x
+    x1-->x2:::brick
+    end
+    subgraph id-one   %% one = ID du subgraphe, qui ne sera pas touché par le style ?
+    a1-->a2
+    end
+    subgraph "two" %% two = titre 
+    b1-->b2
+    end
+    subgraph id-three[three] %% id-three = ID  ; three =titre
+    c1-->c2
+    end
+    subgraph id-four[four] %% id-four = ID  ; four=titre
+    f1-->f2
+    end
+ 
+style id-one color:#f66
+style two color:#f66
+style two fill:#66f
+style id-three color:#6f6
+style id-three fill:#c97
+style id-four fill:#c55
+style four color:#c5c
+classDef brick fill:#c55;
+
+```
+La syntaxe sans ID ni titre ne marche pas :
+```
+flowchart TB
+   subgraph 
+    A[Aa] --> B[Bb]
+   end
+```
+
+
+```mermaid
+flowchart TB
+subgraph
+   A[Aa] --> B[Bb]
+end
+
+
+```
+
 ### Ma palette de couleurs et quelques formes
 
 ```mermaid
@@ -98,9 +164,11 @@ flowchart LR
        S3["[brick]" ]:::brick
        S4[["[[pale_red ]]"]]:::pale_red 
        S5{{"{{rose}}"}}:::rose;
+       %%S6 (stylec5c):::purple;
        S1 o--o |"o--o"|S2
        S1 o--x |"o--x"|S3
        S4 ----> |"---->"|S5
+     
   end
   RougeOranges ==> |"==>"|BleuVerts
   G[("[(grey)]")]:::grey
@@ -116,6 +184,15 @@ classDef pale_red fill:#f88;
 classDef grey fill:#777;
 classDef light_blue fill:#5ef;
 classDef light_green fill:#5fc;
+%%classDef purple color:#c5c ;
+%%fill:#eee 
+style S3 color:#f66
+
+style BleuVerts color:#66f
+style BleuVerts fill:#ff1
+style Q3 color:#6f6
+
+
 ```
 
 ## Tests de graphiques "métiers"