Aide:Diagramme

De Wikimedica
Sauter à la navigation Sauter à la recherche

Cette page d'aide vous permettra d'apprendre à faire des diagrammes directement grâce au wikicode par l'entremise du modèle Flowchart. Ceci semble complexe à première vue, mais c'est en fait très facile si on prend une approche pas à pas.

1 Pourquoi est-ce important de passer par le wikicode plutôt que d'importer une image ?[modifier | w]

Il y a plusieurs avantages à passer par le wikicode plutôt que de simplement passer par une image.

  • Il est beaucoup plus simple de corriger en passant par le wikicode que d'avoir à importer de nouveau une image. Par exemple, imaginez qu'un diagramme a été importé il y a dix ans et qu'une information doit être mise à jour ou qu'il y a simplement une erreur d'orthographe dans le diagramme. Si c'est sous forme d'image, il faut retrouver l'auteur original du diagramme, lui demander de changer le diagramme ou lui demander de nous envoyer le fichier original du diagramme, changer le diagramme dans le fichier, téléverser le fichier sur Wikimedica.... Cela fait passablement beaucoup d'étapes. Par contre, si on édite un diagramme via le modèle Flowchart, c'est nettement plus simple. Il ne suffit que de balancer l'éditeur en wikicode (le W à côté de Modifier la page) et de modifier le contenu directement.
  • La mise en forme des diagrammes se ressemblera partout sur le wiki si on utilise le modèle Flowchart. Si chaque éditeur fait son diagramme de son côté, il y aura autant de mise en forme que d'éditeurs, ce qui risque de détonner avec le style de la plateforme.
  • En utilisant le wikicode plutôt qu'une image, cela évite les erreurs liés à la qualité des images, au nommage des fichiers, etc.
  • En utilisant le wikicode plutôt qu'une image, cela permet d'ajouter des données sémantiques à l'intérieur d'un diagramme et à une intelligence artificielle de mieux comprendre la nature du diagramme. En utilisant une image, les données sont beaucoup moins accessibles.
  • On peut ajouter des hyperliens dans un diagramme produit grâce au wikicode, contrairement à une image.

2 Créer le diagramme[modifier | w]

Avant d'écrire directement dans le modèle, allez dans votre logiciel de traitement de texte préféré et réalisez votre diagramme. Voici un exemple de diagramme à réaliser.

Exemple de diagramme

3 Numéroter les éléments du diagramme[modifier | w]

Ensuite, vous devez numéroter chacun des éléments de votre diagramme.

Voici quelques conseils pratique.

  • S'il n'y a une seule bulle de départ, nommer cette bulle Start.
  • Nommez les différents éléments de manière logique pour faciliter la vie de ceux qui vous suivent.
Diagramme dont tous les éléments ont été numérotés

4 Transposer votre diagramme dans le modèle[modifier | w]

Vous devez d'abord accéder à l'interface de modification. Cliquez sur « Modifier la page » en haut à droite de l'écran. Allez dans le menu Insérer et sélectionner Modèle. Recherchez ensuite le modèle dénommée Flowchart.

4.1 Insérer les relations[modifier | w]

Ensuite, insérez les relations entre les différents éléments que vous avez numéroté précédemment. N'écrivez pas le texte pour l'instant. Nous décrivons seulement les relations entre les éléments à ce point-ci. Pour ajouter une nouvelle relation entre des éléments, allez tout en bas du menu déroulant du modèle, cliquez sur le bouton Ajouter plus d'informations, puis dans Nom du champs, écrivez 1.

Dans ce champs, écrivez la première relation entre deux bulles. Dans ce cas-ci, la première relation est Start vers A, qui se traduit ainsi pour ce modèle : Start -> A. Voici le rendu de cette première étape.

Ensuite, rajoutez le champs 2 et inscrivez Start -> B. Vous aurez le rendu suivant. Vous commencez à voir le principe qui s'en dégage.

Par la suite, ajoutez le champs 3 et la relation Start -> C, puis le champs 4 et la relation A -> A1, etc. Lorsque vous aurez terminé de décrire l'ensemble des relations, vous aurez un diagramme comme celui-ci.

Voici ce que ça donne en wikicode :

{{Flowchart
| Start -> A
| Start -> B
| Start -> C
| A -> A1
| A -> A5
| A1 -> A2
| A1 -> A3
| A1 -> A4
| A5 -> A6
| A5 -> A7
| A5 -> A8
| B -> B1
| B -> B2
| B -> B3
| B -> B4
| B1 -> A8
}}

4.2 Ajoutez le texte[modifier | w]

Ajoutez ensuite le texte lié à chaque bulle. Dans le modèle, allez tout en bas du menu déroulant, cliquez sur le bouton Ajouter plus d'informations. Dans Nom du champs, écrivez le nom de la bulle (ou noeud) dont vous désirez modifier le texte. Par exemple, si vous désirez assigner du texte au noeud Start, ajoutez dans le Nom du champs le noeud Start, puis dans la boîte que vous voyez apparaître, inscrivez simplement le texte que vous désirez assigner à ce noeud. Dans ce cas-ci, le texte à insérer est Tumeurs appendiculaires. Faites la même chose pour tous les autres noeuds.

Voici ce que ça donne en wikicode :

{{Flowchart
| Start -> A
| Start -> B
| Start -> C
| A -> A1
| A -> A5
| A1 -> A2
| A1 -> A3
| A1 -> A4
| A5 -> A6
| A5 -> A7
| A5 -> A8
| B -> B1
| B -> B2
| B -> B3
| B -> B4
| Start = Tumeurs appendiculaires
| A = Tumeurs épithéliales
| A1 = Tumeurs non invasives
| A2 = Néoplasie mucineuse de bas grade (LAMN)
| A3 = Néoplasie mucineuse de grade intermédiaire
| A4 = Néoplasie mucineuse de haut grade (HAMN)
| A5 = Tumeurs invasives
| A6 = Adénocarcinome mucineux
| A7 = Adénocarcinome de type intestinal
| A8 = Tumeur adénocarcinoïde
| B = Tumeurs non épithéliales
| B1 = Tumeur neuro-endocrine
| B2 = GIST
| B3 = Lymphome
| B4 = Sarcome
| C = Métastase
}}

5 Mise en page du diagramme[modifier | w]

La mise en page se fait à l'aide de paramètres supplémentaires. 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

Ces propriétés sont détaillées ci-dessous.

5.1 Changer l'orientation[modifier | w]

Vous avez le choix de l'orientation de votre diagramme : vers le bas, vers le haut, vers la gauche et vers la droite. Voici un exemple de chacun dans l'ordre.

Pour définir la direction, vous devez sélectionner Ajouter plus d'informations tout en bas du formulaire du modèle, puis sélectionnez Orientation. Ensuite, écrivez to right, to left, to bottom ou to top selon ce que vous désirez dans le champs Orientation. Voici ce que ça donne en wikicode :

{{Flowchart
| Start -> A
| Start -> B
| $orientation = to bottom
}}

5.2 Couleur[modifier | w]

Pour les couleurs, vous avez le choix parmi les 140 couleurs disponibles à l'adresse suivante. Choisissez voter couleur et gardez en mémoire le code de la couleur en CSS, qui correspond au dièse, suivi d'une suite de caractère alphanumérique (ex. #32CD32 correspond à la couleur Lime Green.

Voici ce que ça donne en wikicode :

{{Flowchart
| Start -> A
| Start -> B
| B.style.fill = green
}}

5.3 Forme[modifier | w]

Spécifiez la forme du nœud, parmi rounded (par défaut), rectangle, circle, flag, diamond.

Voici ce que ça donne en wikicode :

{{Flowchart
| Start -> A
| Start -> B
| B.style.fill = green
| A.shape = diamond
}}

5.4 Bordure[modifier | w]

L'ajout d'une bordure à un noeud est un peu plus complexe et requiert l'usage d'un peu de syntaxe CSS. La meilleure manière d'y arriver, c'est d'expérimenter.

Voici ce que ça donne en wikicode :

{{Flowchart
| Start -> A
| Start -> B
| B.style.fill = green
| A.shape = diamond
| Start.style.stroke = red,stroke-width:4px,stroke-dasharray: 5 5
}}

5.5 Bordure et terminaison des liens[modifier | w]

Les spécificateurs suivants sont disponibles pour la bordure et terminaison des liens:

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

Voici ce que ça donne en wikicode :

{{Flowchart
| Start -> A
| Start -> B
| B.style.fill = green
| A.shape = diamond
| Start.style.stroke = red,stroke-width:4px,stroke-dasharray: 5 5
| Start -> A.shape = step
| Start -> B.ending = plain
}}

5.6 Faire un regroupement de plusieurs bulles[modifier | w]

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

Voici ce que ça donne en wikicode :

{{Flowchart
| Start -> A
| Start -> B
| B.style.fill = green
| A.shape = diamond
| Start.style.stroke = red,stroke-width:4px,stroke-dasharray: 5 5
| Start -> A.shape = step
| Start -> B.ending = plain
| group G = Groupe
| A.group = G
| B.group = G
}}