| ... | ... | @@ -14,7 +14,7 @@ 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**
|
|
|
|
Ca marche sur un objet **flowchart**, pas un objet **graph**
|
|
|
|
|
|
|
|
### Graphes simples de la doc
|
|
|
|
Doc spécifique [doc flowchart](https://mermaid-js.github.io/mermaid/#/flowchart)
|
| ... | ... | @@ -79,40 +79,26 @@ flowchart LR |
|
|
|
: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))
|
|
|
|
- $` \color{#000000} {\sharp 000}`$
|
|
|
|
- $` \color{#ff0000} {\sharp f00}`$
|
|
|
|
- $` \color{00ff00} {\sharp 0f0}`$
|
|
|
|
- $` \color{0000ff} {\sharp 00f}`$
|
|
|
|
- $`\textcolor{blue}{ \text{à comparer avec le mot clé blue}}`$
|
|
|
|
- $`\textcolor{red}{ \text{à comparer avec le mot clé red}}`$
|
|
|
|
- $`\textcolor{green}{ \text{à comparer avec le mot clé green}}`$
|
|
|
|
|
|
|
|
- l'éditeur mermaid en ligne, https://mermaid-js.github.io/mermaid-live-editor/ .
|
|
|
|
$`\textcolor{teal}{ \text{textcolor "teal" dans une syntaxe LateX}}`$ ;
|
|
|
|
$`textcolor{green}{ \text{mot clé green}}`$ ;
|
|
|
|
$`\textcolor{#00ff00} {\sharp 00ff00}`$ ;
|
|
|
|
- les ["colorchips"](https://gitlab.com/gitlab-org/gitlab/-/blob/master/doc/user/markdown.md#colors), qui acceptent plusieurs format de couloeur dont hexa à 3 et 6 chiffres
|
|
|
|
- `#000000` , `#000`, `#222`, `#444`, `#666`, `#888`, `#aaa`, `#ccc`, `#eee`
|
|
|
|
- `#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/ .
|
|
|
|
|
|
|
|
#### 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
|
|
|
|
```
|
|
|
|
- `#080` , `#282` , `#484` , `#888` , `#a8a` , `#c8c`, `#e8e`
|
|
|
|
- `#5fc` , `#5ef`, `#58a`
|
|
|
|
- `#66f` , `#6f6`
|
|
|
|
- `#9f6`
|
|
|
|
- #bbf
|
|
|
|
- `#c97` , `#c55` ,`#c5c`
|
|
|
|
- `#ff1`, `#f96` , `#fcc`, `#fa0`, `#f88` , `#f66` , `#f96`
|
|
|
|
|
|
|
|
```mermaid
|
|
|
|
flowchart LR
|
| ... | ... | |
