Système de diagramme

5 min read

Créez des diagrammes de flux, des diagrammes UML, des diagrammes réseau et connectez tous les éléments visuels avec des connecteurs intelligents.

Diagramme de flux

Aperçu général

Le système de diagramme fournit:

  • Formes de diagramme — Flowchart, UML et symboles de réseau
  • Connecteurs intelligents — Flèches d’acheminement automatique qui mettent à jour lorsque les formes se déplacent
  • Connectez n’importe quoi — Liez n’importe quel objet de toile (images, texte, formes, SVGs)
  • Auto-Layout — arranger automatiquement les diagrammes

Accès au panneau de diagramme

  1. Cliquez sur le bouton Diagram dans la barre d’outils de gauche
  2. Le panneau Diagramme s’ouvre montrant les formes disponibles

Diagram Panel

Création de formes de diagramme

Du Groupe

  1. Ouvrir le panneau Diagramme
  2. Sélectionnez une catégorie de forme (Flowchart, UML, Réseau, Basic)
  3. Cliquez sur une forme pour l’ajouter à la toile
  4. Faire glisser vers la position

Catégories de forme

Catégorie Formes Utilisation pour
Diagramme de flux Processus, décision, terminal, données, document, base de données Diagrammes de flux, flux de travail
UML Classe, cas d’utilisation, acteur Diagrammes logiciels
Réseau Nuage, serveur Diagrammes d’architecture
Données de base Rectangle, cercle, triangle, étoile Objectif général

Connecter des éléments

Connexion rapide (tous les éléments)

  1. Sélectionnez l’élément source
  2. Tenez Shift et cliquez sur l’élément cible
  3. Un connecteur est créé automatiquement

Utilisation du mode de connexion

  1. Cliquez sur Connect dans le panneau de diagramme (ou appuyez sur C)
  2. Cliquez sur le port de l’élément source (cercle bleu)
  3. Faites glisser vers le port de l’élément cible
  4. Sortie pour créer la connexion

[Connectez n’importe quoi] (…/images/diagram-connect-anything.png)

Fonctionne avec n’importe quel élément

Les connecteurs ne se limitent pas aux formes de diagramme. Connexion & #160;:

  • Images et SVG importés
  • Éléments textuels
  • Formes personnalisées (cercles, étoiles, rectangles)
  • Éléments créés par un générateur

Styles de connecteur

Styles de routage

Style Désignation des marchandises Meilleur pour
Direct Ligne droite Connexions simples
Orthogonale Chemins à angle droit Schémas techniques
Courbé Courbes plus douces Présentations organiques

Styles de tête d’arche

Style Apparence
Classique Triangle rempli
Voleurs Diamant avec encoche
Aiguë Point allongé
Ouvrir Schéma en forme de V
Diamant Forme du diamant
Cercle Cercle rempli
Aucune Pas de tête de flèche

[Connecteur Styles] (…/images/diagram-connector-styles.png)

Auto-Layout

Organisez automatiquement votre diagramme :

  1. Sélectionnez les formes à organiser (ou n’en sélectionnez aucune pour tous)
  2. Cliquez sur Auto-Layout dans le panneau Diagramme
  3. Choisir un algorithme de mise en page

Types de configuration

Mise en page Désignation des marchandises Meilleur pour
Hiérarchique Mise en couches de haut en bas Tableaux de flux, organigrammes
Arbre Hiérarchie parents-enfants Arbres familiaux, structures de fichiers
Radial Circles concentriques Cartes mentales
Grille Grille régulière Inventaires, galeries
Force dirigée Physique Diagrammes réseau

Layout automatique

Exemples de diagramme

Diagramme de flux

[Plan] (…/images/diagram-flowchart.png)

Un diagramme de processus simple avec:

  • Formes des terminaux pour le début/la fin
  • Formes de processus pour les actions
  • Décision diamant pour conditions
  • Connecteurs orthogonaux

Diagramme réseau

[ Diagramme du réseau] (…/images/diagram-network.png)

Une architecture réseau montrant:

  • Forme Cloud pour Internet
  • Formes de serveur pour l’infrastructure
  • Connecteurs Dashed pour liaisons internes

Cas d’utilisation UML

(…/images/diagram-uml-usecase.png)

Un diagramme de cas d’utilisation avec:

  • Figure du bâton d’acteur
  • Utiliser les ellipses du boîtier
  • Connecteurs d’association

Connecteurs animés

Ajouter l’effet “bolt” pour le flux animé:

  1. Sélectionner un connecteur
  2. Activer l’effet Bolt dans les propriétés
  3. Régler les paramètres & #160;:
    • Couleur — Couleur du bol
    • Vitesse — Vitesse d’animation
    • Taille — Taille du boulon

Le boulon se déplace le long du connecteur, montrant la direction du flux de données.

Conseils

Conseils de diagramme :

  • Utiliser le routage orthogonal pour les diagrammes techniques
  • Utilisez le routage incurvé pour les styles organiques, mind-map
  • Appliquer Auto-Layout après avoir ajouté toutes les formes
  • Maintenez Shift tout en faisant glisser pour snap-to-grid

Raccourcis clavier

Clé Décision
C Saisissez le mode de connexion
Escape Sortie du mode de connexion
Delete Supprimer le connecteur/forme sélectionné

Autres