... | @@ -96,46 +96,70 @@ flowchart LR |
... | @@ -96,46 +96,70 @@ flowchart LR |
|
- 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
|
|
|
|
|
|
:tools: les propriétés modifiables sont
|
|
:warning: on peut affecter un style à un sous-graphe uniquement avec `style` et à un lien uniquement avec `linkStyle`, pas de passage par `class` référençant une classDef ?? Difficile de donner un style à un sous-graphe imbriqué dans un autre ?
|
|
- color : couleur du texte;
|
|
|
|
- fill : couleur de remplissage;
|
|
|
|
- stroke: couleur de trait ;
|
|
|
|
- stroke-width : épaisseur du trait en px;
|
|
|
|
- stroke-dasharray: style de trait, défini par la longueur du trait et celle de l'interruption ;
|
|
|
|
- :warning: font-size: en pixel, cette information est traitée mais la taille des "boîtes" reste calculée pour une taille de 20 px...
|
|
|
|
|
|
|
|
|
|
|
|
```mermaid
|
|
```mermaid
|
|
flowchart LR
|
|
flowchart LR
|
|
|
|
subgraph style_par_defaut
|
|
id0("style par défaut")
|
|
id0("style par défaut")
|
|
|
|
id2("classDef style2 fill:#bbf,stroke:#f66,color:#fff, défini <br> mais non utilisé")
|
|
|
|
end
|
|
|
|
subgraph style1
|
|
id1("classDef style1 fill:#f9f,stroke:#333")
|
|
id1("classDef style1 fill:#f9f,stroke:#333")
|
|
|
|
|
|
|
|
subgraph linkStyle02
|
|
id11("id11")
|
|
id11("id11")
|
|
id12("id12")
|
|
id12("id12")
|
|
id13(("id13:::style1")):::style1
|
|
end
|
|
id1--> |style affecté au noeud en fin de script avec <br> class style1 id1,id11,id12| id11
|
|
|
|
id1--> |style affecté au noeud par la même ligne class <br> et style du lien et du précédent avec linkStyle| id12
|
|
|
|
id1 -.-> |style affecté à la création du noeud|id13;
|
|
id13(("id13:::style1")):::style1
|
|
|
|
|
|
|
|
%%id1--> |style affecté au noeud par la même ligne class <br> et style du lien et du précédent avec linkStyle| id12
|
|
|
|
|
|
|
|
|
|
id2("classDef style2 fill:#bbf,stroke:#f66,color:#fff, défini <br> mais non utilisé")
|
|
id1--> |style affecté aux noeuds en fin de script avec <br> class style1 id1,id11,id12|id11 & id12
|
|
|
|
id1 -.-> |style affecté à la création du noeud|id13;
|
|
|
|
end
|
|
|
|
|
|
|
|
id3["style défini en fin de script juste pour ce noeud <br> style id3 fill:#ff0,stroke:#f82,stroke-width:4px,color:#66f,stroke-dasharray: 1,1"]
|
|
|
|
|
|
|
|
|
|
|
|
classDef style1 fill:#f9f,stroke:#333,stroke-width:4px
|
|
|
|
classDef style2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray:5, 5
|
|
|
|
classDef style_pour_lien stroke:blue,stroke-width:2px,color:red;
|
|
|
|
class id1,id11,id12 style1
|
|
|
|
style style1 stroke:green,stroke-width:2px,color:green
|
|
|
|
style id3 fill:#ff0,stroke:#f82,stroke-width:4px,color:#66f,stroke-dasharray:1,1
|
|
|
|
|
|
|
|
linkStyle 0,1 stroke:blue,stroke-width:2px,color:red
|
|
|
|
linkStyle 2 stroke:green;
|
|
|
|
|
|
id3["style défini en fin de script juste pour ce noeud <br> style id3 fill:#ff0,stroke:#f82,stroke-width:4px,color:#66f,stroke-dasharray: 1,1"]
|
|
```
|
|
|
|
:tools: les propriétés modifiables sont
|
|
|
|
- color : couleur du texte;
|
|
|
|
- fill : couleur de remplissage;
|
|
|
|
- stroke: couleur de trait ;
|
|
|
|
- stroke-width : épaisseur du trait en px;
|
|
|
|
- stroke-dasharray: style de trait, défini par la longueur du trait et celle de l'interruption ;
|
|
|
|
- :warning: font-size: en pixel, cette information est traitée mais la taille des "boîtes" reste calculée pour une taille de 20 px...
|
|
|
|
|
|
|
|
```mermaid
|
|
|
|
flowchart LR
|
|
|
|
|
|
|
|
subgraph tests_font-size_40px
|
|
id4["<br>propriété de style <br> font-size:40px"]--> |affectée avec classDef style_loupe <br> + class id41 style_loupe| id41[<br>cause une erreur<br>]
|
|
id4["<br>propriété de style <br> font-size:40px"]--> |affectée avec classDef style_loupe <br> + class id41 style_loupe| id41[<br>cause une erreur<br>]
|
|
id4 --> |affectée à la volée avec style id42 font-size:40px| id42[<br>40px<br>]
|
|
id4 --> |affectée à la volée avec style id42 font-size:40px| id42[<br>40px<br>]
|
|
id4 --> |"affectée avec :::style_loupe"| id43((40px<br>.)):::style_loupe
|
|
id4 --> |"affectée avec :::style_loupe"| id43((40px<br>.)):::style_loupe
|
|
%%id41 o--o id42 o--o id43
|
|
%%id41 o--o id42 o--o id43
|
|
|
|
end
|
|
|
|
|
|
classDef style1 fill:#f9f,stroke:#333,stroke-width:4px
|
|
|
|
classDef style2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray:5, 5
|
|
|
|
classDef style_loupe font-size:40px
|
|
classDef style_loupe font-size:40px
|
|
class id1,id11,id12 style1
|
|
|
|
%%class id41 style_loupe
|
|
%%class id41 style_loupe
|
|
|
|
|
|
style id3 fill:#ff0,stroke:#f82,stroke-width:4px,color:#66f,stroke-dasharray:1,1
|
|
|
|
style id42 font-size:40px
|
|
style id42 font-size:40px
|
|
|
|
style tests_font-size_40px fill:#eef,stroke:#f66
|
|
linkStyle 0,1 stroke:blue,stroke-width:2px,color:red;
|
|
|
|
|
|
|
|
```
|
|
```
|
|
|
|
|
... | | ... | |