Connexions

Creez et personnalisez les connexions entre vos composants avec 6 styles de lignes, 7 types de chemins et des animations.

Les connexions (edges) representent les relations entre vos composants : flux de donnees, appels API, dependances, replications. Contrairement a de simples lignes, les connexions de Siovos Archi portent du sens et peuvent etre enrichies de metadonnees.

Creer une connexion#

Pour connecter deux nodes :

  1. Survolez le node source
  2. Des handles (points de connexion) apparaissent sur les 4 cotes
  3. Cliquez sur un handle et maintenez
  4. Glissez vers un handle du node cible
  5. Relacher pour creer la connexion

La connexion est automatiquement tracee avec le chemin optimal. Vous pouvez ensuite la personnaliser.

Reconnexion#

Pour modifier le point d'attache d'une connexion existante :

  1. Selectionnez la connexion
  2. Cliquez sur l'extremite a deplacer
  3. Glissez vers un nouveau handle

Types de relations#

Les connexions peuvent etre typees pour indiquer leur nature :

TypeIconeUtilisation
depends_on🔗Dependance technique
calls📞Appel HTTP/RPC/gRPC
stores_in💾Ecriture de donnees
reads_from📖Lecture de donnees
authenticates_via🔐Flux d'authentification
routes_to🔀Routage reseau
replicates_to🔄Replication de donnees

Le type de relation enrichit la semantique de votre architecture. L'analyse d'impact utilise ces informations pour comprendre les dependances.

Attribuez un type de relation via clic droit > Type de relation, ou dans le panneau de proprietes.

Styles de ligne#

6 styles pour differencier visuellement vos connexions :

StyleApparenceUsage typique
Solid━━━━━━Flux principal, connexions directes
Dashed─ ─ ─ ─Dependances optionnelles
Dotted······Relations futures ou planifiees
Dash-Dot─·─·─Connexions conditionnelles
Long Dash── ──Replications
Double Dot·· ··Liens faibles

Types de chemin#

7 formes de connexion pour adapter le trajet :

TypeDescription
SmoothstepAngles arrondis (defaut)
BezierCourbe fluide
StepAngles droits
StraightLigne directe
Side to SideConnexion horizontale
Top to BottomConnexion verticale
LoopRetour sur le meme element

Le type Loop est utile pour representer les processus recursifs ou les callbacks.

Fleches (Markers)#

Indiquez la direction du flux avec les fleches :

OptionApparence
Aucune────────
Fin────────▶
Debut◀────────
Les deux◀────────▶

Les fleches aux deux extremites sont utiles pour les communications bidirectionnelles.

Couleurs#

8 couleurs pour categoriser visuellement vos connexions :

  • ⬛ Gris (defaut)
  • 🔵 Bleu
  • 🟢 Vert
  • 🟠 Orange
  • 🔴 Rouge
  • 🟣 Violet
  • 🔷 Cyan
  • 🩷 Rose

Utilisez les couleurs de maniere coherente : par exemple, toutes les connexions HTTP en bleu, toutes les connexions base de donnees en violet.

Labels#

Ajoutez un texte descriptif sur vos connexions :

  1. Selectionnez la connexion
  2. Dans le panneau de proprietes, remplissez le champ Label
  3. Le label s'affiche au milieu de la connexion

Exemples de labels :

  • HTTPS
  • Port 5432
  • gRPC
  • REST /api/users
  • async

Edition inline#

Double-cliquez sur une connexion pour editer son label directement sur le canvas, comme dans draw.io.

Animation#

L'animation de flux de donnees montre la direction du flux visuellement :

  1. Selectionnez la connexion
  2. Activez Animer dans le panneau de proprietes
  3. Des points animes suivent le chemin de la connexion

L'animation s'adapte automatiquement au style de ligne et a la direction. Elle est particulierement efficace pour les demonstrations et les presentations.

Waypoints#

Pour des connexions complexes qui doivent eviter d'autres elements, ajoutez des points de controle :

  1. Selectionnez la connexion
  2. Cliquez sur la ligne pour ajouter un waypoint
  3. Deplacez le waypoint pour ajuster le trajet
  4. Ajoutez autant de waypoints que necessaire

Les waypoints sont sauvegardes et persistent entre les sessions.

Supprimer un waypoint#

Double-cliquez sur un waypoint pour le supprimer.

Reinitialiser le chemin#

Clic droit sur la connexion > Reinitialiser le chemin supprime tous les waypoints et revient au trajet automatique.

Double ligne#

Pour representer des connexions avec redondance ou haute disponibilite, activez l'option Double ligne :

  1. Selectionnez la connexion
  2. Activez Double ligne dans les proprietes (ou clic droit > Double ligne)
  3. La connexion s'affiche avec deux lignes paralleles

Bonnes pratiques#

Lisibilite#

Quelques principes pour des diagrammes lisibles :

  • Evitez les croisements de connexions quand possible
  • Utilisez les waypoints pour contourner les obstacles
  • Limitez le nombre de connexions par node (5-6 maximum)
  • Positionnez les nodes pour minimiser les distances

Coherence#

Adoptez des conventions et gardez-les :

  • Meme style pour le meme type de flux
  • Exemple : HTTP en bleu solid, async en orange dashed
  • Documentez vos conventions dans la description du projet

Labels pertinents#

Soyez concis et informatif :

  • HTTPS, gRPC, Port 5432
  • Connexion HTTPS securisee vers le serveur

Incluez le protocole et/ou le port quand c'est pertinent.

Prochaines etapes#