Aide:Diagramme

De Wikimedica
Sauter à la navigation Sauter à la recherche
!
Cette page a besoin de vous !
  1. Cet article est une ébauche.

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]

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.

Pour insérer une couleur

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

5.4 1.1 Nœuds[w][modifier | w]

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

5.5 1.2 Liens[w][modifier | w]

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.

5.6 1.3 Groupes[w][modifier | w]

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