Sujet sur Discussion Gestion:Tâches/Liste/69

Aller à la navigation Aller à la recherche

Je viens d’ajouter une première version du Modèle:Flowchart. Voici par exemple comment pourrait être reproduit un flowchart que j’ai trouvé au hasard parmi les fichiers téléversés sur Wikimedica.

Version originelle

Version avec le modèle

Code

{{Flowchart
| non catég = Fichier<br>non catégorisé
| non catég.shape = rounded
| non catég -> perm inconnue = Ajout d’une description et<br>d’une condition d’utilisation

| perm inconnue = Fichier<br>de permission<br>inconnue
| perm inconnue.shape = rounded
| perm inconnue.style.fill = #ff9900
| perm inconnue -> peut utiliser ?

| peut utiliser ? = Ce fichier peut-il<br>être utilisé<br>sur Wikimedica?
| peut utiliser ?.shape = diamond
| peut utiliser ? -> perm inconnue = Je ne sais pas

| peut utiliser ? -> utilisable = Oui
  | utilisable = Fichier utilisable<br>(ou autre)
  | utilisable.style.fill = #00cc00

| peut utiliser ? -> académique ? = Non
  | académique ? = Ce fichier est-il<br>utilisé dans un<br>cadre académique?
  | académique ?.shape = diamond
  | académique ? -> exempté = Oui
    | exempté = Fichier exempté
    | exempté.shape = rounded
    | exempté.style.fill = #ff6666

  | académique ? -> remplaçable ? = Non
    | remplaçable ? = Est-il possible de<br>remplacer le fichier ?
    | remplaçable ?.shape = rounded
    | remplaçable ? -> à remplacer = Non
      | à remplacer = Fichier à remplacer
      | à remplacer.shape = rounded
      | à remplacer.style.fill = #ff6666

    | remplaçable ? -> remplacement = Oui
      | remplacement = Remplacer le fichier
      | remplacement.shape = rounded
      | remplacement.style.fill = #729fcf
}}

Rendu


J’ai pris un certain nombre de libertés avec la syntaxe des paramètres, j’ai essayé de faire quelque chose qui ne soit ni trop difficile à écrire ni trop difficile à parser. Une fois qu’on se sera accordé sur une syntaxe, je prendrai le temps d’écrire une documentation plus fournie du modèle. Dans l’état actuel, quatre types d’arguments sont possibles :

  • Paramètres du flowchart
    Préfixés d’un caractère $, ils se rapportent à l’apparence générale du flowchart.
    • $orientation=... définit la direction du flowchart, parmi to bottom (par défaut), to right, to top, to left.
    • $theme=... sélectionne un thème Mermaid, parmi neutral (par défaut), default, forest, dark.
    • $debug active le mode débogage dans lequel des informations sur la représentation interne et sur le code Mermaid généré sont affichées.


  • Définition d’un nœud du flowchart
    Sous la forme id nœud=Étiquette à afficher pour le nœud, quasiment tous les caractères sont autorisés dans l’identifiant du nœud, sauf ceux utilisés pour déclarer un lien, un paramètre général ou un groupe. On peut en plus définir des propriétés pour les nœuds, telles que :
    • id nœud.shape=... spécifie la forme du nœud, parmi rectangle (par défaut), rounded, circle, flag, diamond.
    • id nœud.group=... définit le groupe de nœuds auquel appartient ce nœud, par défaut aucun.
    • id nœud.style.fill=... couleur de remplissage du nœud, par défaut c’est celle du thème Mermaid actif.
    • id nœud.style.stroke=... idem pour la bordure du nœud


  • Ajout d’un lien entre deux nœuds
    Sous la forme id nœud d’origine -> id nœud d’arrivée, ou id nœud d’origine -> id nœud d’arrivée=Étiquette du lien pour ajouter une étiquette. Comme pour les définitions de nœuds, on peut définir des propriétés pour le lien, telles que :
    • id nœud d’origine -> id nœud d’arrivée.shape=... spécifie la forme du lien, parmi curve (par défaut), linear, step, step before, step after.
    • id nœud d’origine -> id nœud d’arrivée.ending=... peut valoir arrow pour ajouter une flèche au bout du lien (par défaut), ou plain pour ne rien y mettre.


  • Définition d’un groupe de nœuds
    Les nœuds sont ajoutés à un groupe en affectant leur propriété .group=id du groupe. On peut en plus spécifier l’étiquette du groupe avec la syntaxe group id du groupe=Étiquette du groupe (préfixé de group).
    Quelques remarques supplémentaires :
  • Les flowcharts Mermaid ne chargent pas dans l’éditeur visuel. On dirait un problème avec l’extension Mermaid.
  • Vue la nature dynamique des noms des arguments du modèle, je ne suis pas sûr qu’on puisse le documenter avec TemplateData, et ça risque de ne pas être évident à saisir depuis l’éditeur visuel. Voyez-vous une façon de modifier la syntaxe des arguments du modèle pour faciliter cela ?
  • À cause d’une limitation technique de Lua, l’ordre des paramètres du modèle (et donc des nœuds) n’est pas nécessairement préservé dans le flowchart. Peut-être qu’il serait possible de rajouter un paramètre du type order prenant une valeur numérique pour fixer l’ordre des nœuds, mais je pense que Mermaid aussi a tendance à réordonner les nœuds à sa guise.
  • Comme mentionné dans mon message précédent, il ne semble pas être possible de forcer le rang d’un nœud pour faire en sorte par exemple que deux nœuds apparaissent à la même hauteur. Ça se passe au niveau de bibliothèque de layout utilisée par Mermaid, Dagre.

Quel est votre avis là-dessus ?