|
|
|
Cette page est consacrée aux diagrammes mermaid, "définis par code", ce qui permet de créer des graphiques "légers" simplement... ou de créer des schémas plus complexes en y passant un peu de temps.
|
|
|
|
On s'intéresse plus particulièrement aux graphiques de type **`flowchart`**. Des exemples en ligne utilisent le graphique de base, **`graph`**, mais toutes les fonctionnalités ne marchent pas avec `graph`.
|
|
|
|
C'est piégeux car les syntaxes se ressemblent, et une fonction qui "ne marche pas" avec `graph` ne déclenche pas d'erreur, simplement le graphe n'est pas tout à fait ce qu'on attendait. On peut passer du temps à vérifier le code, alors que la seule chose à changer est le premier mot... **`flowchart`**
|
|
|
|
C'est piégeux car les syntaxes se ressemblent, et une fonction qui "ne marche pas" avec `graph` ne déclenche pas d'erreur, simplement le graphe n'est pas tout à fait ce qu'on attendait. On peut passer du temps à vérifier le code, alors que la seule chose à changer est le premier mot... **`flowchart`**.
|
|
|
|
|
|
|
|
Comme tout langage, il faut prendre en main la syntaxe. Elle n'est pas du tout compliquée et il y a des tutos, mais parfois le problème est dans un petit détail, comme des **espaces** en trop.
|
|
|
|
Pour appliquer à plusieurs items séparés par des virgules, il ne faut surtout pas d'espace :
|
|
|
|
`class id1,id11,id12 style1`
|
|
|
|
`linkStyle 0,1 stroke:blue,stroke-width:2px,color:red;
|
|
|
|
|
|
|
|
et surtout pas :
|
|
|
|
`class id1, id11, id12 style1`
|
|
|
|
`linkStyle 0, 1 stroke:blue,stroke-width:2px,color:red;
|
|
|
|
|
|
|
|
|
|
|
|
**Sommaire de la page**
|
|
|
|
|
| ... | ... | @@ -74,8 +84,8 @@ flowchart LR |
|
|
|
- class: affecte une classe à des id `class sq,e green`
|
|
|
|
- style : crée et affecte à la volée un style pour un objet `style S3 color:#f66`
|
|
|
|
- `:::` : affecte une classe à la création de l'objet `S1(("((brass))")):::brass;`
|
|
|
|
- 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 : 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
|
|
|
|
|
|
|
|
```mermaid
|
|
|
|
flowchart LR
|
| ... | ... | |
