Skip to content
GitLab

mermaid · Changes

Page history
Update mermaid authored by Poulard Christine's avatar Poulard Christine
Hide whitespace changes
Inline Side-by-side
mermaid.md
View page @ a8d47457
......@@ -68,6 +68,7 @@ flowchart LR
classDef someclass fill:#f96;
```
#### mots clefs pour définir des styles
:key: Les mots clefs pour les styles sont :
- 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`
......@@ -76,28 +77,35 @@ 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
:rainbow: Les couleurs peuvent être nommées ou définies en hexa à 3 chiffres, `#rvb`, qui correspondent à `#rrvvbb` sur 6.
Pour tester, on peut utiliser :
- la syntaxe LateX/kateX ( [voir la doc](https://katex.org/docs/supported.html#style-color-size-and-font))
#### 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.
```
$`\textcolor{green}{ \text{textcolor "green" dans une syntaxe LateX}}`$
```
$`\textcolor{green}{ \text{textcolor "green" dans une syntaxe LateX}}`$ ;
```
$`\textcolor{#00ff00} {\sharp 00ff00}`$
```
$`\textcolor{#00ff00} {\sharp 00ff00}`$
##### Présentation du code à l'aide de "colorchips"
Sur une page en markdown "gitlab", les ["colorchips"](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/user/markdown.md#colors) permettent de présenter ou tester des couleurs, selon plusieurs formats, dont hexa à 3 et 6 chiffres.
- les ["colorchips"](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/user/markdown.md#colors), qui acceptent plusieurs format de couleur dont hexa à 3 et 6 chiffres
- `#000000` , `#000`, `#222`, `#444`, `#666`, `#888`, `#aaa`, `#ccc`, `#eee`
Utilisons-les ici pour présenter le principe du code :
- noir, et dégradés de gris : trois chiffres identiques
- noir = `#000000` = `#000` = noir,
- dégradés de gris : `#000`, `#222`, `#444`, `#666`, `#888`, `#aaa`, `#ccc`, `#eee`
- couleurs Rouge, Verte et Bleue = `#F00`, `#0f0`, `#00f`, avec dégradés
- `#FF0000` , `#F00`, `#F22`, `#F44`, `#F66`, `#F88`, `#Faa`, `#Fcc`
- `#00ff00` , `#0f0`, `#2F2`, `#4F4`, `#6F6`, `#8F8`, `#aFa`, `#cFc`
- `#0000ff` , `#00f`, `#22F`, `#44F`, `#66F`, `#88F`, `#aaF`, `#ccF`
- l'éditeur mermaid en ligne, https://mermaid-js.github.io/mermaid-live-editor/ .
- couleurs complémentaires à Rouge, Vert et Bleu = `#0FF`, `#F0F`, `#FF0`
- variations sur deux axes, motif xvx:
- `#020` , `#222` , `#424` , `#828` , `#a2a` , `#c2c`, `#e2e`
- `#040` , `#242` , `#444` , `#848` , `#a4a` , `#c4c`, `#e4e`
- `#060` , `#262` , `#464` , `#868` , `#a6a` , `#c6c`, `#e6e`
- `#080` , `#282` , `#484` , `#888` , `#a8a` , `#c8c`, `#e8e`
- `#0a0` , `#2a2` , `#4a4` , `#8a8` , `#aaa` , `#cac`, `#eae`
- `#0c0` , `#2c2` , `#4c4` , `#8c8` , `#aca` , `#ccc`, `#ece`
- `#0e0` , `#2e2` , `#4e4` , `#8e8` , `#aea` , `#cec`, `#eee`
- `#0f0` , `#2f2` , `#4f4` , `#8f8` , `#afa` , `#cfc`, `#efe`
#### Palettes en hexa
#### Exemple de colorchips
- `#080` , `#282` , `#484` , `#888` , `#a8a` , `#c8c`, `#e8e`
- `#5fc` , `#5ef`, `#58a`
- `#66f` , `#6f6`
......@@ -106,13 +114,36 @@ $`\textcolor{#00ff00} {\sharp 00ff00}`$
- `#c97` , `#c55` ,`#c5c`
- `#ff1`, `#f0d` , `#fcc`, `#fa0`, `#f88` , `#f66` , `#f96`
##### Autres astuces pour trouver des palettes ou tester une couleur
- un site ou un logiciel extérieur, par exemple **Inkscape** ou **LibreOffice Writer**, qui propose une palette dans laquelle on peut choisir une couleur et qui indique son code dans un ou plusieurs formats.
![Capture_d_écran_ColorPickerWriter](uploads/fe1ea6dacc7d5b2c54455a54de6dabc5/Capture_d_écran_ColorPickerWriter.png)
- l'éditeur mermaid, soit en ligne, https://mermaid-js.github.io/mermaid-live-editor/ soit dans une page markdown.
```mermaid
flowchart LR
id1(Start)-->id2(Stop)
id1("fill:#f9f,stroke:#333")-->id2("fill:#bbf,stroke:#f66",color:#fff")
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
##### comparaison avec LateX/kateX (hexa codé sur 6)
La syntaxe LateX/kateX utilise du hexa sur 6 caractères, et aussi des couleurs nommées ( [voir la doc](https://katex.org/docs/supported.html#style-color-size-and-font)).
On rappelle que la couleur `#rvb` codée sur 3 caractères correspond à `#rrvvbb` codé sur 6.
```
$`\textcolor{green}{ \text{textcolor "green" dans une syntaxe LateX}}`$
```
$`\textcolor{green}{ \text{textcolor "green" dans une syntaxe LateX}}`$ ;
```
$`\textcolor{#00ff00} {\sharp 00ff00}`$
```
$`\textcolor{#00ff00} {\sharp 00ff00}`$
### Subgraphs de flowcharts
Les subgraphs de flowcharts doivent avoir un ID et/ou un titre
......