Le Canvas

Vue d'ensemble#

Le canvas est l'espace de travail principal ou vous concevez votre architecture. Il offre une experience fluide avec zoom, pan et des interactions intuitives.

Vue d'ensemble du canvas avec toolbar, panneau de proprietes et minimap

Navigation#

Zoom#

• Ctrl + Molette : Zoom in/out centre sur le curseur
• Boutons +/- : Dans la toolbar en bas a gauche
• Fit View : Bouton pour ajuster la vue a tous les elements

Le zoom va de 10% a 400% avec des increments de 5% pour un controle precis.

Deplacer la vue (Pan)#

• Clic droit + Glisser : Deplacez la vue du canvas
• Espace + Clic gauche : Alternative au clic droit

MiniMap#

La miniature en bas a droite vous donne une vue globale de votre architecture. Les nodes sont colores selon leur calque :

• Bleu : Application
• Violet : Services
• Vert : Reseau
• Orange : Securite

Selection#

Selection simple#

Cliquez sur un node ou une connexion pour le selectionner. Le panneau de proprietes s'ouvre automatiquement sur la droite.

Multi-selection#

• Clic + Glisser : Tracez un rectangle (rubber band) pour selectionner plusieurs elements
• Ctrl/Cmd + Clic : Ajoutez des elements a la selection

Deselectionner#

Cliquez sur une zone vide du canvas pour tout deselectionner.

Manipulation des nodes#

Deplacer#

Cliquez et maintenez sur un node, puis deplacez-le. Si plusieurs nodes sont selectionnes, ils se deplacent ensemble.

Redimensionner#

1. Selectionnez un node
2. Des poignees bleues apparaissent sur les coins et les cotes
3. Glissez une poignee pour redimensionner

Les dimensions sont sauvegardees et persistees.

Dupliquer#

• Ctrl/Cmd + D : Duplique le(s) node(s) selectionne(s)
• Ctrl/Cmd + C / V : Copier-coller

Supprimer#

• Delete ou Backspace : Supprime la selection
• Bouton corbeille : Dans la toolbar ou le panneau de proprietes

Ordre d'empilement (Z-Order)#

Controlez quels elements apparaissent devant ou derriere :

1. Selectionnez un node
2. Utilisez les boutons dans la toolbar :
   • Devant : Amene le node au premier plan
   • Derriere : Envoie le node a l'arriere-plan

Undo / Redo#

Annulez ou retablissez vos modifications :

• Ctrl/Cmd + Z : Annuler
• Ctrl/Cmd + Shift + Z : Retablir
• Boutons : Dans la toolbar

L'historique conserve un grand nombre d'actions pour vous permettre d'experimenter sans risque.

Connexions#

Creer une connexion#

1. Survolez un node source
2. Cliquez sur un des 4 handles (points de connexion)
3. Maintenez et glissez vers le handle cible
4. Relacchez pour valider

Modifier une connexion#

1. Selectionnez la connexion (cliquez dessus)
2. Le panneau de proprietes affiche les options :
   • Style de ligne
   • Type de fleches
   • Label
   • Couleur
   • Animation

Waypoints#

Pour des connexions plus complexes, ajoutez des points de controle :

1. Selectionnez une connexion
2. Cliquez sur la ligne pour ajouter un waypoint
3. Deplacez le waypoint pour ajuster la forme

Double-clic pour editer#

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

Groupes / Zones#

Les groupes permettent de regrouper visuellement des nodes (VPC, Cluster K8s, Region) :

1. Selectionnez plusieurs nodes
2. Clic droit > Grouper
3. Le groupe devient une zone visuelle avec bordure

Vous pouvez nommer et styliser le groupe via le panneau de proprietes.

Toolbar#

La toolbar a gauche contient :

Menu d'ajout de nodes avec recherche et categories

Panneau droit#

Le panneau s'ouvre automatiquement quand vous selectionnez un element. Il contient 3 onglets :

Proprietes#

Modifiez les attributs de l'element selectionne :

• Label : Nom affiche sur le node
• Description : Notes detaillees
• Metadonnees : Port, technologie, URL, etc.
• Style : Couleurs, dimensions

Panneau de proprietes d'un node

Checklist#

Suggestions automatiques pour ameliorer votre architecture :

• Securite : HTTPS, authentification, chiffrement
• Resilience : Replicas, load balancing, failover
• Performance : Cache, CDN, optimisations
• Observabilite : Monitoring, logs, alertes

Chaque suggestion indique les nodes concernes. Cliquez sur un node pour le selectionner et y naviguer.

Onglet Checklist avec suggestions

Commentaires#

Discutez avec votre equipe directement sur l'architecture :

• Ajoutez des commentaires sur des nodes specifiques
• Mentionnez des collegues avec @pseudo
• Reagissez avec des emojis
• Resolvez les discussions terminees

Onglet Commentaires avec thread

Palette de commandes#

Accedez rapidement a toutes les actions avec Cmd+K (ou Ctrl+K) :

• Rechercher : Nodes, projets, commandes
• Navigation : Aller a un node specifique
• Actions : Creer, dupliquer, supprimer
• Parametres : Theme, preferences

Tapez pour filtrer et utilisez les fleches pour naviguer.

Theme#

Basculez entre le mode clair et sombre :

• Icone soleil/lune : Dans le header
• Auto : Suit les preferences systeme

Le theme s'applique au canvas, aux nodes et a toute l'interface.

Sauvegarde et historique#

Vos modifications sont sauvegardees automatiquement. L'indicateur dans le header montre :

• Sauvegarde... : Enregistrement en cours
• Sauvegarde : Tout est a jour
• Erreur : Probleme de connexion (vos donnees sont conservees localement)

L'historique de versions est cree intelligemment : une nouvelle version est enregistree uniquement lors de changements structurels (ajout/suppression de nodes ou connexions). Les deplacements et modifications de proprietes mettent a jour la version actuelle.

Consultez Historique de versions pour plus de details.

Export#

Exportez votre architecture dans differents formats :

Depuis le menu ... dans le header du projet, selectionnez Exporter puis le format souhaite.

Prochaines etapes#

• Types de Nodes : Decouvrez les 25+ types disponibles
• Connexions : Personnalisez vos connexions
• Calques : Organisez votre architecture par calques
• Historique : Suivez l'evolution de votre architecture