| ... | ... | @@ -96,31 +96,50 @@ flowchart LR |
|
|
|
- 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
|
|
|
|
|
|
|
|
: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
|
|
|
|
id0("style par défaut")
|
|
|
|
|
|
|
|
id1("classDef style1 fill:#f9f,stroke:#333")
|
|
|
|
id11("id11")
|
|
|
|
id12("id12")
|
|
|
|
|
|
|
|
id13(("id13:::style1")):::style1
|
|
|
|
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;
|
|
|
|
|
|
|
|
id2("classDef style2 fill:#bbf,stroke:#f66,color:#fff, défini mais non utilisé")
|
|
|
|
id2("classDef style2 fill:#bbf,stroke:#f66,color:#fff, défini <br> mais non utilisé")
|
|
|
|
|
|
|
|
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"]
|
|
|
|
|
|
|
|
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
|
|
|
|
|
|
|
|
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 avec :::style_loupe"| id43((40px<br>.)):::style_loupe
|
|
|
|
%%id41 o--o id42 o--o id43
|
|
|
|
|
|
|
|
classDef style1 fill:#f9f,stroke:#333,stroke-width:4px
|
|
|
|
classDef style2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5,5
|
|
|
|
%%class id1 style1 ;
|
|
|
|
style id3 fill:#ff0,stroke:#f82,stroke-width:4px,color:#66f,stroke-dasharray: 1,1
|
|
|
|
classDef style2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray:5, 5
|
|
|
|
classDef style_loupe font-size:40px
|
|
|
|
class id1,id11,id12 style1
|
|
|
|
%%class id41 style_loupe
|
|
|
|
|
|
|
|
style id3 fill:#ff0,stroke:#f82,stroke-width:4px,color:#66f,stroke-dasharray:1,1
|
|
|
|
style id42 font-size:40px
|
|
|
|
|
|
|
|
linkStyle 0,1 stroke:blue,stroke-width:2px,color:red;
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
#### code des couleurs : couleurs nommées et hexa sur 3 'chiffres', et astuces pour les visualiser
|
|
|
|
:rainbow: Les couleurs peuvent être nommées ou définies en hexadécimal sur 3 chiffres, en anglais red/green/blue (rgb) et en français rouge/vert/bleu (rvb). Le code `#rvb` correspond à `#rrvvbb` codé sur 6.
|
|
|
|
Les 16 "chiffres" de la base hexadécimale vont de 0 à f.
|
| ... | ... | |
