mermaid.md

@@ -2,14 +2,22 @@ Cette page est consacrée aux diagrammes mermaid, "définis par  code", ce qui p
 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`**.
 
-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 :
+Un `flowchart` est composé de...
+- ...**sous-graphes**, emboîtables, qui peuvent contenir
+-    ... **des noeuds**, représentés par des rectangles, cercles, losanges...
+Les objets sous-graphes et noeuds peuvent être **reliés par des liens**, portant du texte ou pas.
+Des **styles** peuvent être affectés à un ou plusieurs objets et des **styles de liens** peuvent être affectés aux traits et textes des liens.
+
+La syntaxe n'est pas du tout compliquée et il y a des tutos, mais parfois le problème est dans un petit détail. Quand une petite bombe s'affiche à la place de votre graphique, pensez à le tester sous [l'éditeur en ligne](https://mermaid-js.github.io/mermaid-live-editor/) qui vous indiquera où est l'erreur, et ce qu'il attend comme type. 
+
+Vous pouvez perdre du temps à cause de **caractères interdits** dans les titres, d'**espaces en trop**, des balises ouvertes mais non refermées....
+Exemple : les éléments d'une liste d'items "au même niveau" doivent être séparés par des virgules, sans espaces intercalaires. Les espaces sont réservés à la séparation de mots-clefs ou arguments différents. Exemple de définition correcte d'une  liste d'éléments auxquels on applique le même style  :
 `class id1,id11,id12 style1`
-`linkStyle 0,1 stroke:blue,stroke-width:2px,color:red;
+`linkStyle 0,1 stroke:blue,stroke-width:2px,color:red;`
 
-et surtout pas :
+il ne faut surtout pas d'espaces, qui empêcheraient la bonne interprétation  :
 `class id1, id11, id12 style1`
-`linkStyle 0, 1 stroke:blue,stroke-width:2px,color:red;
+`linkStyle 0, 1 stroke:blue,stroke-width:2px,color:red;`
 
 
 **Sommaire de la page**