Le Canvas

Le canvas est votre espace de travail principal. C'est ici que vous concevez, organisez et visualisez votre architecture technique. Il offre une expérience fluide inspirée des meilleurs outils de design, avec des fonctionnalités spécifiques aux diagrammes d'architecture.

Structure de l'interface#

Vue d'ensemble de l'interface du canvas avec les zones numérotées

1. Barre d'ajout - la colonne d'icônes à gauche du canvas. Elle déploie la bibliothèque de composants : parcourez les catégories, puis glissez ou cliquez un type pour l'ajouter.
2. Barre d'outils - branche, calques, mode présentation, checklist, décisions, annulation/rétablissement et compteurs de composants et de liens.
3. Bouton du panneau - ouvre le panneau de droite : propriétés de l'élément sélectionné, sa checklist et ses commentaires.
4. Actions - historique du canvas, collaborateurs connectés et menu.
5. Navigation - les projets du workspace et leur arborescence, avec la recherche (Cmd+K).
6. Fil d'Ariane - chemin du projet et version.

Les contrôles de zoom se trouvent en bas du canvas, pour agrandir, réduire ou ajuster la vue.

La barre d'outils en détail#

Détail de la barre d'outils du canvas

1. Branche - la branche active (main) et le sélecteur de version/branche (voir Versioning).
2. Aides visuelles - aimantation à la grille et guides d'alignement.
3. Présentation - lance le mode Présentation (Architecture Stories).
4. Checklist - les suggestions d'amélioration ; le badge indique leur nombre.
5. Décisions - le registre des décisions d'architecture (ADR).
6. Compteurs - nombre de composants et de liens du projet.

La barre comprend aussi le bouton Calques et les actions annuler / rétablir.

Découvrir le canvas#

Fonctionnalités clés#

Manipulation des composants#

Les composants se manipulent intuitivement : cliquez et glissez pour les déplacer, utilisez les poignées sur les bords pour les redimensionner. Quand plusieurs composants sont sélectionnés, ils se déplacent ensemble. Toutes les modifications sont sauvegardées automatiquement.

Alignement intelligent#

Pendant le déplacement d'un composant, des guides d'alignement apparaissent automatiquement quand les centres ou les bords s'alignent avec d'autres éléments. Cela fonctionne entre composants, mais aussi avec les conteneurs (zones, régions).

Ordre d'empilement (Z-Order)#

Contrôlez quels éléments apparaissent devant ou derrière les autres. Sélectionnez un composant, puis utilisez les chevrons de sa barre d'affichage (« Avancer » / « Reculer ») pour le remonter ou l'abaisser dans la pile. C'est particulièrement utile quand vous organisez des composants à l'intérieur de zones ou de groupes.

Le chevron « Avancer » de la barre d'affichage remonte le composant dans l'ordre d'empilement

Annuler et rétablir#

Chaque modification peut être annulée avec Cmd+Z (ou Ctrl+Z) et rétablie avec Cmd+Shift+Z. Cet historique d'annulation est propre à la session en cours : il est réinitialisé si vous rechargez la page. Pour conserver des points de restauration durables, utilisez l'historique de versions.

Thème clair et sombre#

Le canvas s'adapte à vos préférences. Basculez entre le mode clair et le mode sombre via l'icône soleil/lune dans le header. Le thème « Auto » suit les préférences de votre système.

Sauvegarde automatique#

Vos modifications sont sauvegardées automatiquement, en continu. L'indicateur dans le header confirme le statut :

• Sauvegarde… - enregistrement en cours.
• Sauvegardé - tout est à jour.
• Erreur - problème de connexion (vos données sont conservées localement).

L'historique de versions est créé intelligemment lors des changements structurels (ajout ou suppression de composants ou de connexions). Les déplacements et modifications de propriétés mettent simplement à jour la version en cours.

Prochaines étapes#

• Navigation - maîtriser le zoom et le déplacement.
• Sélection - travailler efficacement avec plusieurs éléments.
• Types de Nodes - découvrir les composants disponibles.
• Raccourcis clavier - gagner en productivité.