« Modèle:Flowchart/Documentation » : différence entre les versions

De Wikimedica
(Déplacement de l’exemple vers brouillon personnel)
(ajout largeur)
Balise : Éditeur de wikicode 2017
 
(11 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
{{Sous-page de documentation}}
{{Sous-page de documentation}}
{{Modèle utilisant les modules Lua|Module:Flowchart}}
{{Modèle utilisant les modules Lua|Module:Flowchart}}


== Utilisation ==
== Utilisation ==
{{Page principale|Aide:Diagramme}}
Permet d'afficher un digramme de type "Flowchart" (algorithme). L'utilisation de ce modèle est différente car il ne possède pas de nombre de paramètres définis et les paramètres sont nommés selon la fonction qu'ils occupent dans le flowchart. Seuls les paramètres débutant par <code>$</code> sont fixes.
Il est conseillé de passer le wikicode pour faire l'édition de ce modèle. L'éditeur visuel n'étant pas adapté à ce cas d'utilisation.
=== Nœuds ===
Sous la forme <code>id nœud=Étiquette à afficher pour le nœud</code>, 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 :
* <code>id nœud.shape=...</code> spécifie la forme du nœud, parmi <code>rounded</code> (par défaut), <code>rectangle</code>, <code>circle</code>, <code>flag</code>, <code>diamond</code>.
* <code>id nœud.group=...</code> définit le groupe de nœuds auquel appartient ce nœud, par défaut aucun.
* <code>id nœud.style.fill=...</code> couleur de remplissage du nœud, par défaut c’est celle du thème Mermaid actif.
* <code>id nœud.style.stroke=...</code> idem pour la bordure du nœud ( exemple: <code>red,stroke-width:4px,stroke-dasharray: 5 5</code>)
=== Liens ===
Ajout d’un lien entre deux nœuds. Sous la forme <code>id nœud d’origine -> id nœud d’arrivée</code>, ou <code>id nœud d’origine -> id nœud d’arrivée=Étiquette du lien</code> 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 :
* <code>id nœud d’origine -> id nœud d’arrivée.shape=...</code> spécifie la forme du lien, parmi <code>curve</code> (par défaut), <code>linear</code>, <code>step</code>, <code>step before</code>, <code>step after</code>.
* <code>id nœud d’origine -> id nœud d’arrivée.ending=...</code> peut valoir <code>arrow</code> pour ajouter une flèche au bout du lien (par défaut), ou <code>plain</code> pour ne rien y mettre.
=== Groupes ===


Permet d'afficher un digramme de type "Flowchart" (Algorithme)
Définition d’un groupe de nœuds. Les nœuds sont ajoutés à un groupe en affectant leur propriété <code>.group=id du groupe</code>. On peut en plus spécifier l’étiquette du groupe avec la syntaxe <code>group id du groupe=Étiquette du groupe</code> (préfixé de <code>group</code>).


== Exemple ==
== Exemple ==
 
<syntaxhighlight>
{{Utilisateur:Mattéo_Delabre/Algorithmes_cliniques/Exemples/1}}
{{Flowchart
| $orientation = to right
| Start = Boîte de début
| Start -> A
| A = Lien vers une [[AAA|maladie]]
| A -> End
| End.group = groupe
| group groupe = Un groupe
| Start -> B
| B = Texte en '''gras'''<br>Avec une autre ligne.<br> Et une autre.
| B -> B2
| B2 = Une condition?
| B2.shape = diamond
| B2.style.fill = #ff6666
| B2 -> B3 = Oui
| B3.group = groupe
| B2 -> End = Non
| Start -> C
| C -> Fin 2
| Fin 2.level = 2
| Fin 2.shape = rectangle
| Fin 2.style.fill = #ff9900
}}
</syntaxhighlight>
{{Flowchart
| $orientation = to right
| Start = Boîte de début
| Start -> A
| A = Lien vers une [[AAA|maladie]]
| A -> End
| End.group = groupe
| group groupe = Un groupe
| Start -> B
| B = Texte en '''gras'''<br>Avec une autre ligne.<br> Et une autre.
| B -> B2
| B2 = Une condition?
| B2.shape = diamond
| B2.style.fill = #ff6666
| B2 -> B3 = Oui
| B3.group = groupe
| B2 -> End = Non
| Start -> C
| C -> Fin 2
| Fin 2.level = 2
| Fin 2.shape = rectangle
| Fin 2.style.fill = #ff9900
}}


== Paramètres ==
== Paramètres ==
Ligne 14 : Ligne 80 :
<templatedata>
<templatedata>
{
{
"params": {},
"params": {
"description": "Génère un diagramme de type Flowchart (Algorithme)",
"$titre": {
"label": "titre",
"description": "Titre du graphique",
"type": "content"
},
"$orientation": {
"label": "Orientation",
"description": "Orientation du flowchart, peut être to bottom, to right, to top, to left.",
"type": "string",
"default": "to bottom"
},
"$largeur": {
"label": "Largeur",
"description": "Force une largeur en pixels. Utile pour agrandir les flowcharts imposants.",
"example": "1200",
"type": "number"
},
"$debug": {
"label": "Déboggage",
"description": "Active le mode déboggage",
"type": "boolean",
"default": "0"
}
},
"description": "Génère un diagramme de type Flowchart (algorithme)",
"format": "block"
"format": "block"
}
}
</templatedata>
</templatedata>
== Notes techniques ==
* En raison d'un conflit avec l'extension Flow, l'affichage des Flowcharts dans les discussions ne fonctionne pas car la librairie mermaid n'est pas chargée. Un patch a été ajouté dans [[MediaWiki:Common.js]] pour pallier à ce problème. Un [https://github.com/SemanticMediaWiki/Mermaid/issues/52 bogue] a été soumis auprès des développeurs.
* De base, Lua ne parse pas de Wikicode à l'interne, une fonction de parsing a donc été rajoutée à LocalSettings.js

Dernière version du 27 février 2024 à 17:24

Illustration de documentation
Ceci est la page de documentation de Modèle:Flowchart [modifier] [purger].
Cette sous-page contient les instructions, les catégories de son modèle d'origine et elle n'est pas destinée à être visualisée directement.


Utilisation

Page principale: Aide:Diagramme

Permet d'afficher un digramme de type "Flowchart" (algorithme). L'utilisation de ce modèle est différente car il ne possède pas de nombre de paramètres définis et les paramètres sont nommés selon la fonction qu'ils occupent dans le flowchart. Seuls les paramètres débutant par $ sont fixes.

Il est conseillé de passer le wikicode pour faire l'édition de ce modèle. L'éditeur visuel n'étant pas adapté à ce cas d'utilisation.

Nœuds

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 rounded (par défaut), rectangle, 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 ( exemple: red,stroke-width:4px,stroke-dasharray: 5 5)

Liens

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.

Groupes

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).

Exemple

{{Flowchart
| $orientation = to right
| Start = Boîte de début
| Start -> A
| A = Lien vers une [[AAA|maladie]]
| A -> End
| End.group = groupe
| group groupe = Un groupe
| Start -> B
| B = Texte en '''gras'''<br>Avec une autre ligne.<br> Et une autre.
| B -> B2
| B2 = Une condition?
| B2.shape = diamond
| B2.style.fill = #ff6666
| B2 -> B3 = Oui
| B3.group = groupe
| B2 -> End = Non
| Start -> C
| C -> Fin 2
| Fin 2.level = 2
| Fin 2.shape = rectangle
| Fin 2.style.fill = #ff9900
}}

Paramètres

Génère un diagramme de type Flowchart (algorithme)

[Modifier les données du modèle]

Paramètres du modèle

La mise en forme multiligne est préférée pour ce modèle.

ParamètreDescriptionTypeÉtat
titre$titre

Titre du graphique

Contenufacultatif
Orientation$orientation

Orientation du flowchart, peut être to bottom, to right, to top, to left.

Par défaut
to bottom
Chaînefacultatif
Largeur$largeur

Force une largeur en pixels. Utile pour agrandir les flowcharts imposants.

Exemple
1200
Nombrefacultatif
Déboggage$debug

Active le mode déboggage

Par défaut
0
Booléenfacultatif

Notes techniques

  • En raison d'un conflit avec l'extension Flow, l'affichage des Flowcharts dans les discussions ne fonctionne pas car la librairie mermaid n'est pas chargée. Un patch a été ajouté dans MediaWiki:Common.js pour pallier à ce problème. Un bogue a été soumis auprès des développeurs.
  • De base, Lua ne parse pas de Wikicode à l'interne, une fonction de parsing a donc été rajoutée à LocalSettings.js