Modifier et personnaliser des graphiques de dépendance

Vous pouvez modifier des graphiques de dépendance sans affecter le code sous-jacent.Cela est utile lorsque vous souhaitez vous concentrer sur les principaux éléments ou communiquer des idées concernant le code.Par exemple, pour mettre en surbrillance les zones intéressantes, vous pouvez sélectionner des nœuds et les filtrer, modifier le style des nœuds et des liens, la masquer les nœuds ou de suppression, et organiser des nœuds en utilisant des propriétés, des catégories, ou les groupes.

Vous pouvez personnaliser un graphique davantage en modifiant le fichier du langage de balisage du graphique orienté du graphique (.dgml).Par exemple, vous pouvez modifier des éléments pour spécifier des styles personnalisés, assigner des propriétés et des catégories aux nœuds et des liens, ou des nœuds de liens aux éléments, tels que des documents, des URL, ou d'autres graphiques.

[!REMARQUE]

Visual Studio nettoie tous les éléments non utilisés et attributs DGML en les supprimant lorsque vous enregistrez le fichier .dgml.Il crée également des éléments de nœud automatiquement lorsque vous ajoutez manuellement de nouveaux liens. Lorsque vous enregistrez le fichier .dgml, tous les attributs que vous avez ajoutés à un élément peuvent se réorganiser dans l'ordre alphabétique.Pour plus d'informations sur les éléments DGML, consultez Fonctionnement du langage DGML (Directed Graph Markup Language).

Configuration requise

• Visual Studio final, premium de Visual Studio, ou Visual Studio professional

  Pour créer des graphiques de dépendance, vous devez avoir Visual Studio final.Consultez Visualiser des dépendances de code sur les graphiques de dépendance.

Dans cette rubrique

• Sélectionnez les nœuds ou de liens

• Renommez les nœuds ou de liens

• Masquez ou affichez des nœuds et des liens

• Ajoutez des nœuds et des liens

• Ajoutez des commentaires au graphique

• Supprimez les nœuds

• Regrouper des nœuds

• Fusionnez les graphiques

• Modification du style du graphique

• Modification du style des nœuds ou de liens

• Copie des styles d'un graphique dans un autre graphique

• Assignation de propriétés aux nœuds et aux liens

• Assignation de catégories aux nœuds et aux liens

• Liez les éléments aux nœuds ou aux liens

• Création d'alias pour les chemins d'accès fréquemment utilisés

Sélectionnez les nœuds ou de liens

Renommez les nœuds ou de liens

• Sélectionnez le nœud ou le lien.Appuyez sur F2.Lorsque la zone d'édition s'affiche, renommez le nœud ou le lien.

  Si l'étiquette est visible, sélectionnez l'étiquette.

Masquez ou affichez des nœuds et des liens

Masquer les nœuds les conserve de participer à des algorithmes de disposition.Par défaut, les liens entre les groupes sont masqués.Les liens entre les groupes sont de liens individuels qui connectent les nœuds entre groupes.Lorsque les groupes sont réduits, le graphique regroupe tous les liens entre les groupes dans des liens entre les groupes.Lorsque vous développez un groupe et sélectionnez des nœuds dans le groupe, les liens entre les groupes apparaissent et affichent les dépendances à ce groupe.

Attention
Avant de partagiez un graphique qui a été créé dans Visual Studio final avec ceux qui utilisent premium Visual Studio ou le Visual Studio professional, veillez à afficher tous les nœuds ou de liens entre les groupes que vous souhaitez d'autres pour afficher.Sinon, les utilisateurs ne pourront pas afficher ces éléments.

Pour masquer ou afficher des nœuds

Pour afficher ou masquer des liens

Ajoutez des nœuds et des liens

Pour ajouter un lien entre les nœuds existants

1. Sélectionnez le nœud source.

   Une barre d'outils commence à apparaître au-dessus de le nœud.

   

2. Dans la barre d'outils, cliquez sur Créez le lien de ce nœud auquel jamais le nœud que vous cliquez ensuite.Sélectionnez le nœud cible.

   Un lien apparaît entre les deux nœuds.

Ajoutez des commentaires au graphique

1. Sélectionnez le nœud où vous souhaitez ajouter un commentaire attaché.

   Une barre d'outils commence à apparaître au-dessus de le nœud.

   

2. Dans la barre d'outils, cliquez sur Créer un nœud de commentaire avec un nouveau lien vers le nœud sélectionné.

3. Tapez vos commentaires.Pour taper sur une nouvelle ligne, appuyez Maj+Entrée.

Supprimez les nœuds

Vous pouvez supprimer des nœuds d'un graphique sans affecter le code sous-jacent.Pour supprimer un nœud, sélectionnez le nœud, puis appuyez sur la touche Supprimer .Lorsque vous supprimez des nœuds, leurs définitions sont supprimés du fichier DGML (.dgml).

Lorsque vous supprimez des nœuds d'un groupe, le bouton Récupérer à nouveau les enfants apparaît à l'intérieur de le groupe.Pour récupérer les nœuds manquants, choisissez Récupérer à nouveau les enfants.Les graphiques créés en modifiant le langage DGML le, en ajoutant les nœuds non définis, ou à l'aide de versions antérieures de Visual Studio ultimate, ne prennent pas en charge cette fonctionnalité.

Attention
Avant de partagiez un graphique qui a été créé à l'aide de Visual Studio final avec ceux qui utilisent premium Visual Studio ou le Visual Studio professional, assurez-vous que tous les nœuds que vous voulez d'autres pour voir soit visible dans le graphique.Sinon, les utilisateurs ne pourront pas récupérer les nœuds supprimés.

Regrouper des nœuds

Pour regrouper des nœuds en modifiant le fichier .dgml du graphique

1. Pour convertir un nœud dans un groupe, ouvrez le menu contextuel du nœud.Choisissez Atteindre, DGML.

   Visual Studio ouvre le fichier .dgml du graphique et met en surbrillance l'élément d' <Node/> pour ce nœud.

   ou

   Pour ajouter un nouveau groupe :

   1. Ouvrez le menu contextuel pour une zone vide du graphique.Choisissez Atteindre, DGML.

   2. Dans la section <Nodes>, ajoutez un nouvel élément <Node/>.

2. Dans l'élément <Node/>, ajoutez un attribut Group pour spécifier si le groupe apparaît développé ou réduit.Par exemple :

   <Nodes>
      <Node Id="MyFirstGroup" Group="Expanded" />
      <Node Id="MySecondGroup" Group="Collapsed" />
   </Nodes>
   

3. Dans la section <Links>, vérifiez qu'un élément <Link/> ayant les attributs suivants existe pour chaque relation entre un nœud de groupe et ses nœuds enfants :

   • Attribut Source qui spécifie le nœud de groupe

   • Attribut Target qui spécifie le nœud enfant

   • Attribut Category qui spécifie une relation Contains entre le nœud de groupe et son nœud enfant

   Par exemple :

   <Links>
      <Link Category="Contains" Source="MyFirstNewGroup" Target="FirstGroupChildOne" />
      <Link Category ="Contains" Source="MyFirstNewGroup" Target="FirstGroupChildTwo" />
      <Link Category ="Contains" Source="MySecondNewGroup" Target="SecondGroupChildOne" />
      <Link Category="Contains" Source="MySecondNewGroup" Target="SecondGroupChildTwo" />
   </Links>
   

   Pour plus d'informations sur l'attribut Category, consultez Assignation de catégories aux nœuds et aux liens.

Fusionnez les graphiques

Vous pouvez fusionner des graphiques en copiant et collant des nœuds entre les graphiques.Si les ID de nœud correspondent, puis coller des nœuds fonctionne comme une opération de fusion.Pour simplifier cette tâche, placez tous les assemblys ou binaires que vous souhaitez visualiser dans le même dossier de sorte que le chemin d'accès complet de chaque assembly ou binaire est le même pour chaque graphique que vous souhaitez fusionner.

Sinon, vous pouvez créer un graphique unique pour les assemblys ou les fichiers binaires que vous souhaitez visualiser en suivant l'une des étapes suivantes :

• Faites glisser les assemblys ou les binaires au même graphique.

  ou

• Ouvrez Navigateur de l'architecture.Sous Système de fichiers, choisissez Sélectionner les fichiers pour parcourir, sélectionnez, puis ouvrez les assemblys ou les fichiers binaires.Pour affiner le graphique, sélectionnez les éléments spécifiques que vous souhaitez visualiser.Lorsque vous avez terminé, cliquez sur Créer un document de graphique à partir de tous les nœuds sélectionnés dans la barre d'outils Navigateur de l'architecture .

Modification du style du graphique

Vous pouvez changer la couleur de l'arrière-plan et de la bordure du graphique en modifiant son fichier .dgml.Pour modifier le style des nœuds et des liens, consultez Modification du style des nœuds et des liens.

1. Ouvrez le menu contextuel de la surface du graphique.Choisissez Atteindre, DGML.

   Visual Studio ouvre le fichier .dgml du graphique.

2. Dans l'élément <DirectedGraph>, ajoutez l'un des attributs suivants pour modifier son style :

   Pour modifier l'élément suivant	Ajouter l'attribut suivant
   Couleur d'arrière-plan	Background="ColorNameOrHexadecimalValue"
   Couleur de la bordure	Stroke="StrokeValue"

   Par exemple :

   <DirectedGraph Background="Green" xmlns="https://schemas.microsoft.com/vs/2009/dgml" >
      ...
      ...
   </DirectedGraph>
   

Modification du style des nœuds et des liens

Vous pouvez modifier les icônes sur les nœuds, ainsi que les couleurs des nœuds et des liens.Vous avez la possibilité d'utiliser les icônes et couleurs prédéfinies ; vous pouvez également spécifier des icônes et couleurs personnalisées en modifiant le fichier .dgml du graphique.Consultez l' Appliquer des styles personnalisés aux nœuds et aux liens.

Par exemple, vous pouvez choisir une couleur pour mettre en évidence des nœuds et des liens ayant une certaine catégorie ou propriété.Vous avez ainsi la possibilité d'identifier des zones spécifiques du graphique et de vous concentrer sur ces dernières.

Pour appliquer une icône ou couleur prédéfinie aux nœuds ayant une certaine catégorie ou propriété

1. Si la zone Légende n'est pas visible, ouvrez le menu contextuel du graphique.Choisissez Afficher la légende.

2. Dans la zone Légende, vérifiez si la propriété ou la catégorie de nœud s'affiche dans la liste.

3. Si la liste n'inclut pas la catégorie ou la propriété, choisissez + dans la zone Légende, Catégorie de nœud ou Propriété de nœud, et la catégorie ou la propriété.

   La catégorie ou la propriété apparaît maintenant dans la zone Légende .

   [!REMARQUE]

   Pour créer une catégorie et l'assigner à un nœud, consultez Assignation de catégories aux nœuds et aux liens.Pour créer une propriété et l'assigner à un nœud, consultez Assignation de propriétés aux nœuds et aux liens.

4. Dans la zone Légende, ouvrez la liste déroulante en regard de la catégorie ou la propriété.

5. Utilisez le tableau suivant pour sélectionner le style que vous voulez modifier :

   Pour modifier l'élément suivant	Choose
   Couleur d'arrière-plan	Background
   Couleur du contour	Trait
   Couleur du texte	Foreground
   Icône	Icônes

   La zone Sélecteur de jeu de couleurs apparaît pour vous permettre de sélectionner une couleur (ou l'icône).

6. Dans la boîte de dialogue Sélecteur de jeu de couleurs, effectuez l'une des opérations suivantes :

   Pour appliquer l'élément suivant	Exécuter ces étapes
   Jeu de couleurs (ou d'icônes	Ouvrez la liste Sélectionner une couleur (ou Icône) définir .Sélectionnez un jeu de couleurs (ou d'icônes). Pour rétablir la couleur par défaut (ou l'icône), dans la liste Sélectionner une couleur (Icône) définir, choisissez Aucun.
   Couleur (ou icône) spécifique	Ouvrez la liste de catégories ou de propriété.Sélectionnez une couleur (ou l'icône).

   [!REMARQUE]

   Vous pouvez réorganiser, supprimer ou temporairement désactiver des styles dans la zone Légende.Consultez l' Modifiez la zone de légende.

Pour appliquer une couleur prédéfinie aux liens correspondant à une certaine catégorie ou propriété

1. Si la zone Légende n'est pas visible, ouvrez le menu contextuel du graphique.Choisissez Afficher la légende.

2. Dans la zone Légende, vérifiez si la catégorie ou la propriété s'affiche dans la liste.

3. Si la liste n'inclut pas la catégorie ou la propriété, choisissez + dans la zone Légende, Catégorie de lien ou Propriété de lien, et la catégorie ou la propriété.

   La catégorie ou la propriété apparaît maintenant dans la zone Légende .

   [!REMARQUE]

   Pour créer une catégorie et l'assigner à un lien, consultez Assignation de catégories aux nœuds et aux liens.Pour créer une propriété et l'assigner à un lien, consultez Assignation de propriétés aux nœuds et aux liens.

4. Dans la zone Légende, ouvrez la liste en regard de la catégorie ou la propriété.

5. Sélectionnez Trait pour modifier le plan du lien et la couleur de flèche.

   La zone Sélecteur de jeu de couleurs apparaît pour vous permettre de sélectionner une couleur.

6. Dans la zone Sélecteur de jeu de couleurs, effectuez l'une des opérations suivantes :

   Pour appliquer l'élément suivant	Exécuter ces étapes
   Jeu de couleurs	Ouvrez la liste Sélectionner une couleurdéfinir .Sélectionnez un jeu de couleurs. Pour rétablir la couleur par défaut, dans la liste Sélectionner le jeu de couleurs, choisissez Aucun.
   Couleur spécifique	Ouvrez la liste de type ou de propriété pour sélectionner une couleur.

   [!REMARQUE]

   Vous pouvez réorganiser, supprimer ou temporairement désactiver des styles dans la zone Légende.Consultez l' Modifiez la zone de légende.

Application de styles personnalisés aux nœuds et aux liens

Vous pouvez appliquer des styles personnalisés aux éléments suivants :

• Nœuds et liens uniques

• Groupes de nœuds et de liens

• Groupes de nœuds et de liens selon certaines conditions

Pour appliquer un style personnalisé à un seul nœud

1. Ouvrez le menu contextuel du nœud dont le style vous souhaitez personnaliser.Choisissez Atteindre, DGML.

   Visual Studio ouvre le fichier .dgml du graphique et met en surbrillance l'élément d' <Node/> pour ce nœud.

2. Dans l'élément <Node/>, ajoutez l'un des attributs suivants pour personnaliser son style :

   Pour modifier l'élément suivant	Ajouter l'attribut suivant
   Couleur d'arrière-plan	Background="ColorNameOrHexadecimalValue"
   Contour	Stroke="ColorNameOrHexadecimalValue"
   Épaisseur du contour	StrokeThickness="StrokeValue"
   Couleur du texte	Foreground="ColorNameOrHexadecimalValue"
   Icône	Icon="IconFilePathLocation"
   Taille du texte	FontSize="FontSizeValue"
   Type de texte	FontFamily="FontFamilyName"
   Épaisseur de police du texte	FontWeight="FontWeightValue"
   Style de texte	FontStyle="FontStyleName" Par exemple, vous pouvez spécifier Italic comme style de texte.
   Texture	Style="Glass" - ou - Style="Plain"
   Forme Pour remplacer le formulaire par une icône, affectez à la propriété d' Shape à None et affectez à la propriété d' Icon au chemin d'accès au fichier icône.	Shape="ShapeFilePathLocation"

   Par exemple :

   <Nodes>
      <Node Id="MyNode" Background="#FF008000" Stroke="#FF000000"
      Foreground="#FFFFFFFF" Icon="...\Icons\Globe.png"/>
   </Nodes>
   

Pour appliquer un style personnalisé à un seul lien

1. Sur le graphique, déplacez le pointeur de la souris sur le lien.Une info-bulle s'affiche et identifie le nœud source et le nœud cible du lien.(Clavier : AppuyezOnglet avant le focus est sur le lien.)

2. Ouvrez le menu contextuel du graphique.Choisissez Atteindre, DGML.

   Visual Studio ouvre le fichier .dgml du graphique.

3. Recherchez l'élément <Link/> qui contient à la fois les noms du nœud source et du nœud cible.

4. Dans l'élément <Link/>, ajoutez l'un des attributs suivants pour personnaliser son style :

   Pour modifier l'élément suivant	Ajouter l'attribut suivant
   Plan et couleur de flèche	Stroke="ColorNameOrHexadecimalValue"
   Épaisseur du contour	StrokeThickness="StrokeValue"
   Style de contour	StrokeDashArray="StrokeArrayValues"

   Par exemple :

   <Links>
      <Link Source="MyFirstNode" Target="MySecondNode" Background="Green" Stroke="#FF000000" StrokeDashArray="2,2"/>
   </Links>
   

Pour appliquer des styles personnalisés à un groupe de nœuds ou à des liens

1. Assignez les catégories ou les propriétés voulues aux nœuds ou aux liens.

   Conseil
   Si vous devez répéter des styles entre de nombreux nœuds ou de liens, vous pouvez envisager d'appliquer une catégorie à ces nœuds ou de liens, puis d'appliquer un style à cette catégorie.Pour plus d'informations, consultez Assignation de catégories aux nœuds et aux liens et Assignation de propriétés aux nœuds et aux liens.

2. Ouvrez le menu contextuel pour la surface du graphique.Choisissez Atteindre, DGML.

   Visual Studio ouvre le fichier .dgml du graphique.

3. S'il n'existe pas d'élément <Styles></Styles>, ajoutez-en un sous l'élément <DirectedGraph></DirectedGraph>, après l'élément <Links></Links>.

4. Dans l'élément <Styles></Styles>, sous l'élément <Style/>, spécifiez les attributs suivants :

   • TargetType="Node | Link | Graph"

   • GroupLabel="NameInLegendBox"

   • ValueLabel="NameInStylePickerBox"

   Pour appliquer un style personnalisé à tous les types cibles, n'utilisez pas de condition.

Pour appliquer un style conditionnel à des groupes de nœuds ou de liens

1. Dans l'élément <Style/>, ajoutez un élément <Condition/> contenant un attribut Expression pour spécifier une expression qui retourne une valeur booléenne.

   Par exemple :

   <Condition Expression="MyCategory"/>
   

   - ou -

   <Condition Expression="MyCategory > 100"/>
   

   - ou -

   <Condition Expression="HasCategory('MyCategory')"/>
   

   Cette expression utilise la syntaxe de notation BNF (Backus-Naur) suivante :

   <Expression> ::= <BinaryExpression> | <UnaryExpression> | "("<Expression>")" | <MemberBindings> | <Literal> | <Number>

   <BinaryExpression> ::= <Expression> <Operator> <Expression>

   <UnaryExpression> ::= "!" <Expression> | "+" <Expression> | "-" <Expression>

   <Operator> ::= "<" | "<=" | "=" | ">=" | ">" | "!=" | "or" | "and" | "+" | "*" | "/" | "-"

   <MemberBindings> ::= <MemberBindings> | <MemberBinding> "." <MemberBinding>

   <MemberBinding> ::= <MethodCall> | <PropertyGet>

   <MethodCall> ::= <Identifier> "(" <MethodArgs> ")"

   <PropertyGet> ::= Identifier

   <MethodArgs> ::= <Expression> | <Expression> "," <MethodArgs> | <empty>

   <Identifier> ::= [^.]*

   <Literal> ::= littéral de chaîne entre guillemets simples ou doubles

   <Number> ::= chaîne de chiffres avec virgule décimale facultative

   Vous pouvez spécifier plusieurs éléments d' <Condition/>, qui doivent être true pour appliquer le style.

2. Sur la ligne suivante, après l'élément <Condition/>, ajoutez un ou plusieurs éléments <Setter/> pour spécifier un attribut Property et un attribut Value fixe ou un attribut Expression calculé à appliquer au graphique, aux nœuds ou aux liens qui remplissent la condition.

   Par exemple :

   <Setter Property="BackGround" Value="Green"/>
   

À titre d'exemple simple et complet, la condition suivante spécifie qu'un nœud apparaît en vert ou en rouge selon que sa catégorie Passed a la valeur True ou False :

<?xml version="1.0" encoding="utf-8"?>
<DirectedGraph xmlns="https://schemas.microsoft.com/vs/2009/dgml">
   <Nodes>
      <Node Id="MyFirstNode" Passed="True" />
      <Node Id="MySecondNode" Passed="False" />
   </Nodes>
   <Links>
   </Links>
   <Styles>
      <Style TargetType="Node" GroupLabel="Passed" ValueLabel="True">
         <Condition Expression="Passed='True'"/>
         <Setter Property="Background" Value="Green"/>
      </Style>
      <Style TargetType="Node" GroupLabel="Passed" ValueLabel="False">
         <Condition Expression="Passed='False'"/>
         <Setter Property="Background" Value="Red"/>
      </Style>
   </Styles>
</DirectedGraph>

Le tableau suivant inclut des conditions d'exemple que vous pouvez utiliser :

<?xml version="1.0" encoding="utf-8"?>
<DirectedGraph xmlns="https://schemas.microsoft.com/vs/2009/dgml">
<Nodes>
   <Node Id="Class1" LinesOfCode ="200" />
   <Node Id="Class2" LinesOfCode ="1000" />
   <Node Id="Class3" LinesOfCode ="20" />
</Nodes>
<Properties>
   <Property Id="LinesOfCode" Label="LinesOfCode" Description="LinesOfCode" DataType="System.Int32" />
</Properties>
<Styles>
   <Style TargetType="Node" GroupLabel="LinesOfCode" ValueLabel="Function">
      <Condition Expression="LinesOfCode &gt; 0" />
      <Setter Property="FontSize" Expression="Math.Max(9,Math.Sqrt(LinesOfCode))" />
      <Setter Property="FontFamily" Value="Papyrus" />
   </Style>
</Styles>
</DirectedGraph>

<?xml version="1.0" encoding="utf-8"?>
<DirectedGraph xmlns="https://schemas.microsoft.com/vs/2009/dgml">
<Nodes>
   <Node Id="Class1" Coverage="58" />
   <Node Id="Class2" Coverage="95" />
   <Node Id="Class3" Coverage="32" />
</Nodes>
<Properties>
   <Property Id="Coverage" Label="Coverage" Description="Code coverage as a percentage of blocks" DataType="Double" />
</Properties>
<Styles>
   <Style TargetType="Node" GroupLabel="Coverage" ValueLabel="Good">
      <Condition Expression="Coverage &gt; 80" />
      <Setter Property="Background" Value="Green" />
   </Style>
   <Style TargetType="Node" GroupLabel="Coverage" ValueLabel="OK">
      <Condition Expression="Coverage &gt; 50" />
      <Setter Property="Background" Expression="Color.FromRgb(180 * Math.Max(1, (80 - Coverage) / 30), 180, 0)" />
   </Style>
   <Style TargetType="Node" GroupLabel="Coverage" ValueLabel="Bad">
      <Setter Property="Background" Expression="Color.FromRgb(180, 180 * Coverage / 50, 0)" />
   </Style>
</Styles>
</DirectedGraph>

<DirectedGraph xmlns="https://schemas.microsoft.com/vs/2009/dgml">
<Nodes>
   <Node Id="Automation" Category="Test" Label="Automation" />
   <Node Id="C# Provider" Category="Provider" Label="C# Provider" />
</Nodes>
<Categories>
   <Category Id="Provider" Icon="...\Icons\Module.png" Shape="None" />
   <Category Id="Test" Icon="...\Icons\Page.png" Shape="None" />
</Categories>
<Properties>
   <Property Id="Icon" DataType="System.String" />
   <Property Id="Label" Label="Label" Description="Displayable label of an Annotatable object" DataType="System.String" />
   <Property Id="Shape" DataType="System.String" />
</Properties>
<Styles>
   <Style TargetType="Node" GroupLabel="Group" ValueLabel="Has category">
      <Condition Expression="HasCategory('Group')" />
      <Setter Property="Background" Value="#80008080" />
   </Style>
   <Style TargetType="Node">
      <Setter Property="HorizontalAlignment" Value="Center" />
   </Style>
</Styles>
</DirectedGraph>

Modification de la zone Légende

Vous pouvez réorganiser, supprimer ou temporairement désactiver des styles dans la zone Légende :

1. Ouvrez le menu contextuel d'un style dans la zone Légende .

2. Exécutez l'une des tâches suivantes :

   Pour	Choose
   Déplacer le style vers le haut	Monter
   Déplace l'élément vers le bas	Descendre
   Supprimer l'élément	Supprimer
   Désactiver l'élément	Désactiver
   Réactiver l'élément	Activer

Copie des styles d'un graphique dans un autre graphique

1. Assurez-vous que la zone Légende apparaît sur le graphique source.S'il n'est pas visible, ouvrez le menu contextuel pour une zone vide du graphique source.Choisissez Afficher la légende.

2. Ouvrez le menu contextuel pour la zone Légende .Choisissez Copier la légende.

3. Collez la légende sur le graphique cible.

Assignation de propriétés aux nœuds et aux liens

Vous pouvez organiser des nœuds et des liens en leur assignant des propriétés.Par exemple, vous pouvez sélectionner des nœuds ayant des propriétés spécifiques afin de pouvoir les regrouper, modifier leur style ou les masquer.

Pour assigner une propriété à un nœud

1. Ouvrez le menu contextuel du nœud.Choisissez Atteindre, DGML.

   Visual Studio ouvre le fichier .dgml du graphique et met en surbrillance l'élément d' <Node/> pour ce nœud.

2. Dans l'élément <Node/>, spécifiez le nom de la propriété et sa valeur.Par exemple :

   <Nodes>
      <Node Id="MyNode" MyPropertyName="PropertyValue" />
   </Nodes>
   

3. Ajoutez un élément <Property/> à la section <Properties> pour spécifier des attributs, tels que ses nom visible et type de données :

   <Properties>
      <Property Id="MyPropertyName" Label="My Property" DataType="System.DataType"/>
   </Properties>
   

Pour assigner une propriété à un lien

1. Sur le graphique, déplacez le pointeur de la souris sur le lien.Une info-bulle s'affiche et identifie le nœud source et le nœud cible du lien.(Clavier : Appuyez onglet jusqu'à ce que le focus est sur le lien.)

2. Ouvrez le menu contextuel du graphique.Choisissez Atteindre, DGML.

   Visual Studio ouvre le fichier .dgml du graphique.

3. Recherchez l'élément <Link/> qui contient à la fois les noms du nœud source et du nœud cible.

4. Dans l'élément <Node/>, spécifiez le nom de la propriété et sa valeur.Par exemple :

   <Links>
      <Link Source="MyFirstNode" Target="MySecondNode" MyPropertyName="PropertyValue" />
   </Links>
   

5. Ajoutez un élément <Property/> à la section <Properties> pour spécifier des attributs, tels que ses nom visible et type de données :

   <Properties>
      <Property Id="MyPropertyName" Label="My Property Name" DataType="System.DataType"/>
   </Properties>
   

Assignation de catégories aux nœuds et aux liens

Vous pouvez organiser des nœuds en leur assignant des catégories.Par exemple, vous avez la possibilité de sélectionner des nœuds appartenant à certaines catégories afin de pouvoir les regrouper, modifier leur style ou les masquer.Vous pouvez mettre en évidence des liens ayant certaines catégories.Pour plus d'informations, consultez les sections suivantes :

• Regrouper des nœuds

• Modification du style des nœuds et des liens

• Masquage ou affichage de nœuds

Pour assigner une catégorie à un nœud

• Pour assigner une catégorie prédéfinie, telle que Catégorie 1, ouvrez le menu contextuel du nœud.Choisissez Catégoriser et une catégorie prédéfinie.

- ou -

• Pour créer et assigner une catégorie personnalisée :

  • Sélectionnez le nœud que vous voulez catégoriser.Appuyez F4 pour ouvrir la fenêtre Propriétés .Tapez le nom de catégorie dans la propriété Nouvelle catégorie du nœud.Appuyez sur ENTRÉE.

  - ou -

  1. Ouvrez le menu contextuel du nœud.Choisissez Atteindre, DGML.

     Visual Studio ouvre le fichier .dgml du graphique et met en surbrillance l'élément d' <Node/> pour ce nœud.

  2. Dans l'élément <Node/>, ajoutez un attribut Category pour spécifier le nom de la catégorie.Par exemple :

     <Nodes>
        <Node Id="MyNode" Category="MyCategory" />
     </Nodes>
     

  3. Ajoutez un élément <Category/> à la section <Categories> afin de pouvoir utiliser l'attribut Label pour spécifier le texte affiché de la catégorie :

     <Categories>
        <Category Id="MyCategory" Label="My Category" />
     </Categories>
     

Pour assigner une catégorie à un lien

1. Sur le graphique, déplacez le pointeur de la souris sur le lien pour afficher l'info-bulle et identifier les nœuds source et cible du lien.(Clavier : Appuyez onglet jusqu'à ce que le focus est sur le lien.)

2. Ouvrez le menu contextuel du graphique.Choisissez Atteindre, DGML.

   Visual Studio ouvre le fichier .dgml du graphique.

3. Recherchez l'élément <Link/> qui contient à la fois les noms du nœud source et du nœud cible.

4. Dans l'élément <Link/>, ajoutez un attribut Category pour spécifier le nom de la catégorie.Par exemple :

   <Links>
      <Link Source="MyFirstNode" Target="MySecondNode" Category="MyCategory"
   </Links>
   

5. Ajoutez un élément <Category/> à la section <Categories> afin de pouvoir utiliser l'attribut Label pour spécifier le texte affiché de la catégorie :

   <Categories>
      <Category Id="MyCategory" Label="My Category" />
   </Categories>
   

Vous pouvez créer des catégories hiérarchiques pour pouvoir plus facilement organiser les nœuds et ajouter des attributs aux catégories enfants à l'aide de l'héritage.

Pour créer des catégories hiérarchiques

• Ajoutez d'abord un élément <Category/> pour la catégorie parente, puis l'attribut BasedOn à l'élément <Category/> de la catégorie enfant.

  Par exemple :

  <Nodes>
     <Node Id="MyFirstNode" Label="My First Node" Category= "MyCategory" />
     <Node Id="MySecondNode" Label="My Second Node" />
  </Nodes>
  <Links>
     <Link Source="MyFirstNode" Target="MySecondNode" />
  </Links>
  <Categories>
     <Category Id="MyCategory" Label="My Category" BasedOn="MyParentCategory"/>
     <Category Id="MyParentCategory" Label="My Parent Category" Background="Green"/>
  </Categories>
  

  Dans cet exemple, l'arrière-plan de MyFirstNode est vert car son attribut Category hérite de l'attribut Background de MyParentCategory.

Liez les éléments aux nœuds ou aux liens

Vous pouvez lier des éléments, tels que des documents ou des URL, un nœud ou un lien en modifiant le fichier .dgml du graphique et en ajoutant un attribut d' Reference à l'élément d' <Node/> pour un nœud ou à l'élément d' <Link/> pour un lien.Vous pouvez ensuite ouvrir et afficher le contenu du nœud ou le lien.L'attribut Reference spécifie le chemin d'accès de ce contenu.Il peut s'agir d'un chemin d'accès relatif par rapport à l'emplacement du fichier .dgml ou d'un chemin d'accès absolu.

Attention
Si vous utilisez des chemins d'accès relatif, et le fichier .dgml est déplacé vers un autre emplacement, ensuite ces chemins d'accès ne les seront résolus plus.Lorsque vous essayez d'ouvrir et afficher le contenu lié, une erreur indiquant que le contenu ne peut pas être affiché se produit.

Par exemple, vous pouvez souhaiter lier les éléments suivants :

• Pour décrire les modifications apportées à une classe, vous avez la possibilité de lier l'URL d'un élément de travail, d'un document ou d'un autre fichier .dgml, au nœud d'une classe.

• Vous pouvez lier un diagramme de couche à un nœud de groupe qui représente une couche dans l'architecture logique du logiciel.

• Pour afficher davantage d'informations sur le composant qui expose une interface, vous pouvez lier un diagramme de composant au nœud de l'interface.

• Liez un nœud à un élément de travail de Team Foundation Server ou importer des bogues, ou d'autres informations liées au nœud.

Pour lier un élément à un nœud

1. Sur le graphique, ouvrez le menu contextuel du nœud.Choisissez Atteindre, DGML.

   Visual Studio ouvre le fichier .dgml du graphique et met en surbrillance l'élément d' <Node/> pour ce nœud.

2. Effectuez l'une des tâches présentées dans le tableau suivant :

   Pour lier	Exécuter ces étapes
   Un seul élément	Dans l'élément d' <Node/> ou d' <Link/>, ajoutez un attribut d' Reference pour spécifier l'emplacement de l'élément. Remarque Vous pouvez avoir qu'un seul attribut d' Reference par élément. Par exemple : <Nodes> <Node Id="MyNode" Reference="MyDocument.txt" /> </Nodes> <Properties> <Property Id="Reference" Label="My Document" DataType="System.String" IsReference="True" /> </Properties>
   Plusieurs éléments	Dans l'élément d' <Node/> ou d' <Link/>, ajoutez un nouvel attribut pour spécifier l'emplacement de chaque référence. Dans la section <Properties> : Ajoutez un élément <Property/> pour chaque nouveau type de référence. Définissez l'attribut Id au nom du nouvel attribut de référence. Ajoutez l'attribut d' IsReference et placez-le à True pour faire référence apparaître dans le menu contextuel Atteindre de l'élément. Utilisez l'attribut de Label pour spécifier le texte affiché dans le menu contextuel Atteindre de l'élément. Par exemple : <Nodes> <Node Id="MyNode" SequenceDiagram="MySequenceDiagram.sequencediagram" ActiveBugs="MyActiveBugs.wiq"/> </Nodes> <Properties> <Property Id="SequenceDiagram" Label="My Sequence Diagram" DataType="System.String" IsReference="True" /> <Property Id="ActiveBugs" Label="Active Bugs" DataType="System.String" IsReference="True" /> </Properties>

   Sur le graphique, le nom du nœud apparaît souligné.Lorsque vous ouvrez le menu contextuel du nœud ou le lien, un menu contextuel Atteindre qui contient les éléments liés que vous avez choisi.

3. Utilisez l'attribut ReferenceTemplate pour spécifier une chaîne commune, telle qu'une URL, qui est utilisée par plusieurs références au lieu de répéter cette chaîne dans la référence.

   L'attribut ReferenceTemplate spécifie un espace réservé pour la valeur de la référence.Dans l'exemple suivant, l'espace réservé {0} de l'attribut ReferenceTemplate sera remplacé par les valeurs des attributs MyFirstReference et MySecondReference de l'élément <Node/> pour produire un chemin d'accès complet :

   <Nodes>
      <Node Id="MyNode" MyFirstReference="MyFirstDocument" MySecondReference="MySecondDocument"/>
      <Node Id="MySecondNode" MyFirstReference="AnotherFirstDocument" MySecondReference="AnotherSecondDocument"/>
   </Nodes>
   <Properties>
      <Property Id="MyFirstReference" Label="My First Document" DataType="System.String" IsReference="True" ReferenceTemplate="http://www.Fabrikam.com/FirstDocuments/{0}.asp"/>
      <Property Id="MySecondReference" Label="My Second Document" DataType="System.String" IsReference="True" ReferenceTemplate=" http://www.Fabrikam.com/SecondDocuments/{0}.asp"/>
   </Properties>
   

4. Pour afficher le ou les éléments référencés du graphique, ouvrez le menu contextuel du nœud ou le lien.Choisissez Atteindre puis l'élément.

Création d'alias pour les chemins d'accès fréquemment utilisés

Lorsque vous remplacez des chemins d'accès fréquemment utilisés par des alias, vous réduisez la taille du fichier .dgml, ainsi que la durée nécessaire au téléchargement et à l'enregistrement du fichier.Pour créer un alias, ajoutez une section <Paths></Paths> à la fin du fichier .dgml.Dans cette section, ajoutez un élément <Path/> pour définir un alias pour le chemin d'accès :

<Paths>
   <Path Id="MyPathAlias" Value="C:\...\..." />
</Paths>

Pour référencer l'alias à partir d'un élément du fichier .dgml, mettez la valeur Id de l'élément <Path/> entre parenthèses (()) et faites précéder le tout du signe dollar ($) :

<Nodes>
   <Node Id="MyNode" Reference="$(MyPathAlias)MyDocument.txt" />
</Nodes>
<Properties>
   <Property Id="Reference" Label="My Document" DataType="System.String" IsReference="True" />
</Properties>

Fonctionnement du langage DGML (Directed Graph Markup Language)

Le langage DGML utilise le langage XML simple pour décrire des graphiques orientés cycliques et acycliques.Un graphique orienté est un ensemble de nœuds reliés par des liens (ou bords).Les nœuds et les liens peuvent être utilisés pour représenter des structures interconnectées, telles que les éléments d'un projet logiciel.Vous pouvez utiliser le langage DGML pour visualiser des informations, effectuer une analyse de complexité ou simplement parcourir et modifier des graphiques orientés.

Les nœuds et les liens sont désignés par « éléments de graphique » ou, plus simplement, « éléments ».Le tableau suivant décrit les genres d'éléments qui sont utilisés dans le langage DGML :

[!REMARQUE]

Lorsque vous modifiez un fichier .dgml, IntelliSense vous aide à identifier les attributs qui sont disponibles pour chaque élément, ainsi que leurs valeurs.Pour spécifier la couleur dans un attribut, utilisez le nom des couleurs courantes (« Bleu », par exemple) ou des valeurs hexadécimales ARVB (« #ffa0b1c3 », par exemple).Le langage DGML utilise un sous-ensemble réduit de formats de définition de couleur WPF (Windows Presentation Foundation).Pour plus d'informations, consultez Colors, classe.

Élément	Exemple de format
<DirectedGraph></DirectedGraph> Cet élément est l'élément racine du document de graphique orienté (.dgml).Tous les autres éléments DGML s'inscrivent dans la portée de cet élément. La liste suivante décrit des attributs facultatifs que vous pouvez inclure : Background - Couleur de l'arrière-plan du graphique. BackgroundImage - Emplacement d'un fichier image à utiliser comme arrière-plan pour le graphique. GraphDirection - Lorsque le graphique se présente sous forme d'arborescence (Sugiyama), disposez les nœuds de sorte que la plupart des liens suivent la direction spécifiée : TopToBottom, BottomToTop, LeftToRight ou RightToLeft.Consultez Parcourir et réorganiser des graphiques de dépendance. Layout - Affectez au graphique les dispositions suivantes : None, Sugiyama (présentation sous forme d'arborescence), ForceDirected (clusters rapides) ou DependencyMatrix.Consultez Parcourir et réorganiser des graphiques de dépendance. NeighborhoodDistance - Lorsque le graphique se présente sous forme d'arborescence ou de clusters rapides, seuls les nœuds qui possèdent un nombre spécifié de liens (de 1 à 7) éloignés des nœuds sélectionnés s'affichent.Consultez Parcourir et réorganiser des graphiques de dépendance. Title - Nom du graphique. ZoomLevel - Niveau de zoom utilisé pour afficher le graphique au départ.Affectez une valeur à virgule flottante (où 1 correspond à 100%) ou affectez la valeur Fit pour ajuster le graphique à la taille de la fenêtre.	<?xml version="1.0" encoding="utf-8"?> <DirectedGraph Title="DrivingTest" Background="Blue" xmlns="https://schemas.microsoft.com/vs/2009/dgml"> <Nodes> ... </Nodes> <Links> ... </Links> <Categories> ... </Categories> <Properties> ... </Properties> </DirectedGraph>
<Nodes></Nodes> Cet élément facultatif contient une liste d'éléments <Node/> qui définissent des nœuds sur le graphique.Pour plus d'informations, consultez l'élément <Node/>. Remarque Lorsque vous faites référence à un nœud non défini dans un élément <Link/>, le graphique crée automatiquement un élément <Node/>.	<?xml version="1.0" encoding="utf-8"?> <DirectedGraph Title="DrivingTest" xmlns="https://schemas.microsoft.com/vs/2009/dgml"> <Nodes> <Node ... /> </Nodes> <Links> <Link ... /> </Links> </DirectedGraph>
<Node/> Cet élément définit un nœud unique.Il figure dans la liste des éléments <Nodes><Nodes/>. Cet élément doit inclure les attributs suivants : Id - Nom unique du nœud et valeur par défaut de l'attribut Label, lorsqu'aucun attribut Label séparé n'est spécifié.Ce nom doit correspondre à l'attribut Source ou Target du lien qui y fait référence. La liste suivante décrit certains des attributs facultatifs que vous pouvez inclure : Label - Nom complet du nœud. Attributs Style.Consultez l' Appliquer des styles personnalisés aux nœuds et aux liens. Category - Nom d'une catégorie qui identifie les éléments qui partagent cet attribut.Pour plus d'informations, consultez l'élément <Category/>. Property - Nom d'une propriété qui identifie des éléments qui ont la même valeur de propriété.Pour plus d'informations, consultez l'élément <Property/>. Group - Si le nœud contient d'autres nœuds, affectez à cet attribut la valeur Expanded ou Collapsed pour respectivement en afficher ou en masquer le contenu.Un élément <Link/> doit inclure l'attribut Category="Contains" et spécifier le nœud parent en tant que nœud source et le nœud enfant en tant que nœud cible.Consultez l' Organisation des nœuds en groupes. Visibility - Affectez à cet attribut la valeur Visible, Hidden ou Collapsed.Utilise System.Windows.Visibility.Consultez l' Masquez ou affichez les nœuds. Reference - Définissez cet attribut pour le lier à un document ou une URL.Consultez l' Lier des éléments à des nœuds.	<?xml version="1.0" encoding="utf-8"?> <DirectedGraph Title="DrivingTest" xmlns="https://schemas.microsoft.com/vs/2009/dgml"> <Nodes> <Node Id="Driver" Label="Student" Category="Person" /> <Node Id="Passenger" Label="Instructor" Category="Person" /> <Node Id="Car" Label="Car" Category="Automobile" /> <Node Id="Truck" Label="Truck" Category="Automobile" /> </Nodes> <Links> <Link ... /> </Links> <Categories> <Category Id="Person" Background="Orange" /> <Category Id="Automobile" Background="Yellow"/> </Categories> </DirectedGraph>
<Links></Links> Cet élément contient la liste des éléments <Link> qui définissent des liens entre des nœuds.Pour plus d'informations, consultez l'élément <Link/>.	<?xml version="1.0" encoding="utf-8"?> <DirectedGraph Title="DrivingTest" xmlns="https://schemas.microsoft.com/vs/2009/dgml"> <Links> <Link ... /> </Links> </DirectedGraph>
<Link/> Cet élément définit un lien unique qui relie un nœud source à un nœud cible.Il figure dans la liste des éléments <Links></Links>. Remarque Si cet élément fait référence à un nœud non défini, le document de graphique crée automatiquement un nœud qui possède les attributs spécifiés, le cas échéant. Cet élément doit inclure les attributs suivants : Source - Nœud source du lien. Target - Nœud cible du lien. La liste suivante décrit certains des attributs facultatifs que vous pouvez inclure : Label - Nom complet du lien. Attributs Style.Consultez l' Appliquer des styles personnalisés aux nœuds et aux liens. Category - Nom d'une catégorie qui identifie les éléments qui partagent cet attribut.Pour plus d'informations, consultez l'élément <Category/>. Property - Nom d'une propriété qui identifie des éléments qui ont la même valeur de propriété.Pour plus d'informations, consultez l'élément <Property/>.	<?xml version="1.0" encoding="utf-8"?> <DirectedGraph Title="DrivingTest" xmlns="https://schemas.microsoft.com/vs/2009/dgml"> <Nodes> <Node Id="Driver" Label="Student" Category="Person" /> <Node Id="Passenger" Label="Instructor" Category="Person" /> <Node Id="Car" Label="Car" Category="Automobile" /> <Node Id="Truck" Label="Truck" Category="Automobile" /> </Nodes> <Links> <Category Id="Person" Background="Orange" /> <Category Id="Automobile" Background="Yellow"/> <Link Source="Driver" Target="Car" Label="Passed" Stroke="Black" Background="Green" Category="PassedTest" /> <Link Source="Driver" Target="Truck" Label="Failed" Stroke="Black" Background="Red" Category="PassedTest" /> </Links> </DirectedGraph>
<Categories></Categories> Cet élément contient la liste des éléments <Category/>.Pour plus d'informations, consultez l'élément <Category/>.	<?xml version="1.0" encoding="utf-8"?> <DirectedGraph Title="DrivingTest" xmlns="https://schemas.microsoft.com/vs/2009/dgml"> <Categories> <Category ... /> </Categories> </DirectedGraph>
<Category/> Cet élément définit un attribut Category qui permet d'identifier les éléments qui partagent cet attribut.Un attribut Category peut être utilisé pour organiser des éléments de graphique, proposer des attributs partagés par héritage ou définir d'autres métadonnées. Cet élément doit inclure les attributs suivants : Id - Nom unique de la catégorie et valeur par défaut de l'attribut Label, lorsqu'aucun attribut Label séparé n'est spécifié. La liste suivante décrit certains des attributs facultatifs que vous pouvez inclure : Label - Nom convivial de la catégorie. BasedOn - Catégorie parente dont le <Category/> de l'élément actuel hérite. Dans l'exemple donné pour cet élément, la catégorie FailedTest hérite de son attribut Stroke à partir de la catégorie PassedTest.Consultez « pour créer des catégories hiérarchiques » dans Assignation de catégories aux nœuds et aux liens. Les catégories proposent également un comportement de modèle de base qui contrôle l'apparence des nœuds et des liens lorsqu'ils s'affichent sur un graphique.Consultez l' Appliquer des styles personnalisés aux nœuds et aux liens.	<?xml version="1.0" encoding="utf-8"?> <DirectedGraph Title="DrivingTest" xmlns="https://schemas.microsoft.com/vs/2009/dgml"> <Nodes> <Node Id="Driver" Label="Driver" Category="Person" /> <Node Id="Car" Label="Car" Category="Automobile" /> <Node Id="Truck" Label="Truck" Category="Automobile" /> <Node Id="Passenger" Category="Person" /> </Nodes> <Links> <Link Source="Driver" Target="Car" Label="Passed" Category="PassedTest" /> <Link Source="Driver" Target="Truck" Label="Failed" Category="FailedTest" /> </Links> <Categories> <Category Id="Person" Background="Orange" /> <Category Id="Automobile" Background="Yellow"/> <Category Id="PassedTest" Label="Passed" Stroke="Black" Background="Green" /> <Category Id="FailedTest" Label="Failed" BasedOn="PassedTest" Background="Red" /> </Categories> </DirectedGraph>
<Properties></Properties> Cet élément contient la liste des éléments <Property/>.Pour plus d'informations, consultez l'élément <Property/>.	<?xml version="1.0" encoding="utf-8"?> <DirectedGraph Title="DrivingTest" xmlns="https://schemas.microsoft.com/vs/2009/dgml"> <Properties> <Property ... /> </Properties> </DirectedGraph>
<Property/> Cet élément définit un attribut Property que vous pouvez utiliser pour assigner une valeur à tout attribut ou élément DGML, y compris des catégories et autres propriétés. Cet élément doit inclure les attributs suivants : Id - Nom unique de la propriété et valeur par défaut de l'attribut Label, lorsqu'aucun attribut Label séparé n'est spécifié. DataType - Type de données stockées par la propriété. Si vous souhaitez que la propriété s'affiche dans la fenêtre Propriétés, utilisez la propriété Label pour spécifier le nom complet de la propriété. Consultez l' Assignation de propriétés aux nœuds et aux liens.	<?xml version="1.0" encoding="utf-8"?> <DirectedGraph Title="DrivingTest" xmlns="https://schemas.microsoft.com/vs/2009/dgml"> <Nodes> <Node Id="Driver" Label="Driver" Category="Person" DrivingAge="18"/> <Node Id="Car" Label="Car" Category="Automobile" /> <Node Id="Truck" Label="Truck" Category="Automobile" /> <Node Id="Passenger" Category="Person" /> </Nodes> <Links> <Link Source="Driver" Target="Car" Label="Passed" Category="PassedTest" /> <Link Source="Driver" Target="Truck" Label="Failed" Category="FailedTest" /> </Links> <Categories> <Category Id="Person" Background="Orange" /> <Category Id="Automobile" Background="Yellow"/> <Category Id="PassedTest" Label="Passed" Stroke="Black" Background="Green" /> <Category Id="FailedTest" Label="Failed" BasedOn="PassedTest" Background="Red" /> </Categories> <Properties> <Property Id="DrivingAge" Label="Driving Age" DataType="System.Int32" /> </Properties> </DirectedGraph>

Voir aussi

Concepts

Visualiser des dépendances de code sur les graphiques de dépendance

Parcourir et réorganiser des graphiques de dépendance