Comment : modifier et personnaliser des documents de graphique

  • Article

Dans Visual Studio Ultimate, vous pouvez vous concentrer sur la modification des principales relations et zones d'un graphique orienté en modifiant les nœuds et les liens. Cela s'avère particulièrement utile lorsque le graphique affiche de grandes quantités d'informations. Par exemple, vous avez la possibilité d'identifier les principaux composants d'un système logiciel existant et les relations existant entre eux. Vous pouvez ensuite partager ces zones d'intérêt et en discuter avec les membres de votre équipe. Pour plus d'informations sur la génération de graphiques à partir de code, consultez Comment : générer des graphiques de dépendance pour le code .NET.

Pour mettre en évidence les zones d'intérêt, vous pouvez sélectionner et filtrer les nœuds, appliquer des styles prédéfinis aux nœuds et aux liens, et organiser les nœuds en groupes. Vous avez la possibilité de personnaliser davantage le graphique en modifiant son fichier DGML (Directed Graph Markup Language). Par exemple, vous pouvez modifier les données DGML du fichier pour spécifier des styles personnalisés, assigner des propriétés et des catégories à des nœuds et à des liens, et lier des nœuds à des éléments, tels que des documents, des URL et d'autres fichiers .dgml. Pour plus d'informations sur les éléments DGML, consultez Fonctionnement du langage DGML (Directed Graph Markup Language).

Notes

Visual Studio nettoie tous les attributs et éléments DGML inutilisés en les supprimant lorsque vous enregistrez le fichier .dgml. Il crée également automatiquement des éléments de nœud 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 être réorganisés par ordre alphabétique.

Vous pouvez modifier un graphique de différentes façons :

  • Sélection de nœuds

  • Masquage ou affichage de nœuds

  • Affichage ou masquage de liens

  • Modification du style du graphique

  • Modification du style des nœuds et des liens

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

  • Organisation des nœuds en groupes

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

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

  • Lier des éléments à des nœuds

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

Sélection de nœuds

Pour

Exécuter ces étapes

Sélectionner des nœuds de catégories spécifiques

  1. Cliquez avec le bouton droit sur le graphique, puis cliquez sur Afficher la sélection avancée.

  2. Dans la zone Sélection, sous Catégories, cliquez sur les catégories voulues.

Pour créer et assigner une catégorie personnalisée, consultez Assignation de catégories aux nœuds et aux liens.

Sélectionner des nœuds dotés de propriétés ou de valeurs de propriété spécifiques

  1. Cliquez avec le bouton droit sur le graphique, puis cliquez sur Afficher la sélection avancée.

  2. Dans la zone Sélection, sous Propriétés, cliquez sur les propriétés voulues. Pour sélectionner des valeurs de propriété spécifiques, développez la propriété.

Ajouter des nœuds associés aux nœuds sélectionnés

Cliquez avec le bouton droit sur les nœuds sélectionnés, pointez sur Sélection, puis choisissez l'un des éléments suivants :

  • Pour ajouter des nœuds qui sont directement liés au nœud sélectionné, cliquez sur Sélectionner Entrants.

  • Pour ajouter des nœuds qui sont directement liés à partir du nœud sélectionné, cliquez sur Sélectionner Sortants.

  • Pour ajouter des nœuds qui sont directement liés au nœud sélectionné et à partir du nœud sélectionné, cliquez sur Sélectionner les deux.

  • Pour ajouter tous les nœuds qui sont liés au nœud sélectionné et à partir de ce dernier, cliquez sur Sélectionner tous les nœuds connectés.

  • Pour ajouter tous les enfants du nœud sélectionné, cliquez sur Sélectionner les enfants.

Sélectionner tous les nœuds non sélectionnés

Cliquez avec le bouton droit sur les nœuds sélectionnés, pointez sur Sélection, puis cliquez sur Inverser.

Masquage ou affichage de nœuds

Lorsque vous masquez des nœuds sur le graphique, ceux-ci disparaissent du graphique et sont exclus des algorithmes de disposition.

Pour

Exécuter ces étapes

Masquer les nœuds sélectionnés

  1. Sélectionnez les nœuds que vous voulez masquer.

  2. Cliquez avec le bouton droit sur les nœuds sélectionnés ou sur le graphique, pointez sur Sélection, puis cliquez sur Masquer.

Masquer les nœuds ayant certaines catégories ou propriétés

  1. Pour afficher la zone Sélection, cliquez avec le bouton droit sur la surface du graphique, puis cliquez sur Afficher la sélection avancée

  2. Dans la zone Sélection, cliquez sur les catégories ou propriétés voulues.

  3. Cliquez avec le bouton droit sur la surface du graphique, pointez sur Sélection, puis cliquez sur Masquer.

Masquer les nœuds non sélectionnés

  1. Sélectionnez les nœuds que vous ne voulez pas masquer.

  2. Cliquez avec le bouton droit sur les nœuds sélectionnés ou sur le graphique, pointez sur Sélection, puis cliquez sur Masquer les éléments non sélectionnés.

Afficher tous les nœuds masqués

Cliquez avec le bouton droit sur le graphique, pointez sur Sélection, puis cliquez sur Afficher tout.

Pour masquer des nœuds en modifiant le fichier .dgml

  1. Cliquez avec le bouton droit sur la surface du graphique, puis cliquez sur Afficher DGML.

    Visual Studio ouvre le fichier .dgml du graphique.

  2. Dans l'élément <Node/>, ajoutez l'attribut suivant pour masquer le nœud :

    Visibility="Hidden"

    Par exemple :

    <Nodes>
   <Node Id="MyNode" Visibility="Hidden"/>
</Nodes>

Affichage ou masquage de liens

Vous pouvez contrôler la quantité d'informations présentes sur un graphique en spécifiant les genres de liens que vous voulez afficher. Le graphique présente deux genres de liens : des liens directs entre les nœuds et des liens entre les groupes, qui sont masqués par défaut. Les liens entre les groupes correspondent à tous les liens individuels qui connectent les nœuds de différents groupes.

Lorsque les groupes sont réduits, le graphique rassemble tous les liens entre les groupes au sein de liens uniques. Lorsque les groupes sont développés, vous pouvez sélectionner des nœuds dans un groupe de façon à ce que de nouveaux liens entre les groupes apparaissent et affichent les dépendances réelles à l'intérieur du groupe.

Pour afficher ou masquer des liens

  1. Si la barre d'outils du graphique n'est pas visible, dans le menu Affichage, pointez sur Barres d'outils, puis cliquez sur Graphique orienté.

  2. Sélectionnez une tâche dans le tableau suivant :

    Pour

    Cliquez sur

    Afficher en permanence tous les liens entre les groupes

    Afficher tous les liens entre les groupes

    Afficher uniquement les liens entre les groupes qui sont connectés aux nœuds sélectionnés

    Afficher les liens entre les groupes sur les nœuds sélectionnés

    Masquer en permanence tous les liens entre les groupes

    Masquer tous les liens entre les groupes

    Masquer tous les liens (ou afficher tous les liens)

    Masquer tous les liens

    Pour afficher tous les liens, cliquez sur Masquer tous les liens de façon à désactiver ce mode.

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.

Pour modifier le style du graphique

  1. Cliquez avec le bouton droit sur la surface du graphique, puis cliquez sur Afficher 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. Pour plus d'informations, consultez Application de 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, cliquez avec le bouton droit sur le graphique, puis cliquez sur 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é, cliquez sur Ajouter, pointez sur Catégorie de nœud ou Propriété de nœud, puis sélectionnez la catégorie ou la propriété.

    Notes

    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, cliquez sur la liste déroulante en regard de la catégorie ou de la propriété.

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

    Pour modifier l'élément suivant

    Sélectionner

    Couleur d'arrière-plan

    Background

    Couleur du contour

    Trait

    Couleur du texte

    Foreground

    Icône

    Icônes

  6. Dans la boîte de dialogue du sélecteur, choisissez l'un des éléments suivants :

    Pour appliquer l'élément suivant

    Procédez comme suit

    Jeu de couleurs (ou d'icônes)

    Cliquez sur la liste déroulante Sélectionner le jeu de couleurs (d'icônes), puis sur un jeu de couleurs (ou d'icônes).

    Pour rétablir la couleur (ou l'icône) par défaut, dans la liste déroulante Sélectionner le jeu de couleurs (d'icônes), cliquez sur Aucun.

    Couleur (ou icône) spécifique

    Cliquez sur la liste déroulante des valeurs de catégorie ou de propriété, puis sélectionnez une couleur (ou une icône).

  7. Lorsque vous avez terminé, cliquez sur OK.

    Notes

    Vous pouvez réorganiser, supprimer ou temporairement désactiver des styles dans la zone Légende. Pour plus d'informations, consultez Modification de la zone 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, cliquez avec le bouton droit sur le graphique, puis cliquez sur 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é, cliquez sur Ajouter, pointez sur Catégorie de lien ou Propriété de lien, puis sélectionnez la catégorie ou la propriété.

    Notes

    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, cliquez sur la liste déroulante en regard de la catégorie ou de la propriété.

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

    Pour modifier l'élément suivant

    Sélectionner

    Couleur de la pointe de flèche

    Background

    Couleur du contour

    Trait

  6. Dans la zone Sélecteur de jeu de couleurs, choisissez l'un des éléments suivants :

    Pour appliquer l'élément suivant

    Procédez comme suit

    Jeu de couleurs

    Cliquez sur la liste déroulante Sélectionner le jeu de couleurs, puis sur un jeu de couleurs.

    Pour rétablir la couleur par défaut, dans la liste déroulante Sélectionner le jeu de couleurs, cliquez sur Aucun.

    Couleur spécifique

    Cliquez sur la liste déroulante des valeurs de type ou de propriété pour sélectionner une couleur.

  7. Lorsque vous avez terminé, cliquez sur OK.

    Notes

    Vous pouvez réorganiser, supprimer ou temporairement désactiver des styles dans la zone Légende. Pour plus d'informations, consultez Modification de la zone 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. Cliquez avec le bouton droit sur le nœud dont vous voulez personnaliser le style, puis cliquez sur Afficher DGML.

    Visual Studio ouvre le fichier .dgml du graphique et met en surbrillance l'élément <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

    		 
    Shape

    Par exemple :

    <Nodes>
   <Node Id="MyNode" Background="Green" Stroke="#FF000000"
   Foreground="White" Icon="...\Graph Icons\MyNodeIcon.jpg"/>
</Nodes>

Pour appliquer un style personnalisé à un seul 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.

  2. Cliquez avec le bouton droit sur le graphique, puis cliquez sur Afficher 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

    Couleur de la pointe de flèche

    		 
    Background="ColorNameOrHexadecimalValue"

    Couleur du contour

    		 
    Stroke="ColorNameOrHexadecimalValue"

    Épaisseur du contour

    		 
    StrokeThickness="StrokeValue"

    Style de contour

    		 
    StrokeDashArray="StrokeArrayValues"

    Par exemple :

    <Links>
   <Link Source="MyFirstNode" Target="MySecondNode" Background="Green" Stroke="#FF000000" />
</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.

    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. Cliquez avec le bouton droit sur la surface du graphique, puis cliquez sur Afficher 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 <Condition/> , qui doivent tous avoir la valeur 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 :

Pour

Exemple utilisant le langage DGML

Définir la taille de police en fonction du nombre de lignes de code, qui modifie également la taille du nœud. Cet exemple utilise une expression conditionnelle unique pour définir plusieurs propriétés : FontSize et FontFamily.

 
<?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>

Définir la couleur d'arrière-plan d'un nœud en fonction de la propriété Coverage. Les styles sont évalués dans leur ordre d'apparition, comme les instructions if-else.

Dans cet exemple :

  1. Si la valeur de Coverage est supérieure à 80, affectez la couleur verte à la propriété Background.

  2. Si la valeur de Coverage est supérieure à 50, affectez une nuance orange à la propriété Background en fonction de la valeur de la propriété Coverage.

  3. Sinon, affectez une nuance rouge à la propriété Background en fonction de la valeur de la propriété Coverage.

 
<?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>

Affecter à la propriété Shape la valeur None afin que l'icône remplace la forme. Utilisez la propriété Icon pour spécifier l'emplacement de l'icône.

 
<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\AddIn.png" Shape="None" />
   <Category Id="Test" Icon="..\Icons\Macro.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. Cliquez avec le bouton droit sur un style dans la zone Légende.

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

    Pour

    Cliquer sur

    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

  • Cliquez avec le bouton droit sur une zone vide du graphique source, cliquez sur Copier la légende, puis collez le style sur le graphique cible.

Organisation des nœuds en groupes

Pour

Exécuter ces étapes

Afficher des nœuds avec des relations contenant-contenu sous forme de groupes ou de liens

Pour afficher les liens sous forme de groupes, sélectionnez les nœuds conteneurs, cliquez avec le bouton droit sur votre sélection, pointez sur Groupe, puis cliquez sur Afficher en tant que groupe.

Pour afficher les groupes sous forme de liens, sélectionnez les nœuds conteneurs, cliquez avec le bouton droit sur votre sélection, pointez sur Groupe, puis cliquez sur Afficher en tant que lien.

Pour afficher tous les groupes sous forme de liens, cliquez avec le bouton droit sur le graphique, pointez sur Groupe, puis cliquez sur Afficher tout en tant que liens.

Pour afficher tous les liens sous forme de groupes, cliquez avec le bouton droit sur le graphique, pointez sur Groupe, puis cliquez sur Afficher tout en tant que groupes.

Ajouter un nouveau groupe incluant les nœuds sélectionnés

  1. Cliquez avec le bouton droit sur votre sélection, pointez sur Groupe, puis cliquez sur Ajouter un groupe parent.

  2. Cliquez avec le bouton droit sur le nouveau groupe, puis cliquez sur Propriétés.

  3. Dans la propriété Étiquette, renommez le groupe.

Ajouter un nouveau groupe incluant les nœuds qui ont des catégories ou des propriétés spécifiques

  1. Pour afficher la zone Sélection, cliquez avec le bouton droit sur la surface du graphique, puis cliquez sur Afficher la sélection avancée

  2. Dans la zone Sélection, cliquez sur les catégories ou propriétés voulues.

  3. Cliquez avec le bouton droit sur la surface du graphique, pointez sur Groupe, puis cliquez sur Ajouter un groupe parent.

  4. Cliquez avec le bouton droit sur le nouveau groupe, puis cliquez sur Propriétés.

  5. Dans la propriété Étiquette, renommez le groupe.

Regrouper des nœuds en fonction de leur conteneur

  1. Dans le menu Architecture, pointez sur Fenêtres, puis cliquez sur Navigateur de l'architecture.

  2. Utilisez le navigateur de l'architecture pour rechercher et sélectionner tous les nœuds que vous voulez regrouper.

    Pour plus d'informations, consultez Comment : rechercher du code à l'aide du navigateur de l'architecture.

  3. À droite de la colonne actuelle, cliquez sur la colonne d'action réduite pour la développer.

    RemarqueRemarque
    La colonne d'action apparaît en surbrillance lorsque vous placez le pointeur dessus.

  4. Dans la colonne d'action, cliquez sur Contenu par.

  5. À partir de la colonne suivante, faites glisser les groupes conteneurs vers le graphique.

  6. Cliquez avec le bouton droit sur la surface du graphique, pointez sur Groupe, puis cliquez sur Afficher tout en tant que groupes.

Regrouper des nœuds en fonction de leurs valeurs de propriété

  1. Enregistrez le graphique sous forme de fichier .dgml sur le disque.

  2. Dans le menu Architecture, pointez sur Fenêtres, puis cliquez sur Navigateur de l'architecture.

  3. Dans le Navigateur de l'architecture, sous Système de fichiers, cliquez sur Sélectionner les fichiers.

  4. Dans la colonne suivante, cliquez sur votre fichier .dgml enregistré.

  5. Utilisez le navigateur de l'architecture pour rechercher et sélectionner tous les nœuds que vous voulez regrouper.

    Pour plus d'informations, consultez Comment : rechercher du code à l'aide du navigateur de l'architecture.

  6. À droite de la colonne actuelle, cliquez sur la colonne d'action réduite pour la développer.

    RemarqueRemarque
    La colonne d'action apparaît en surbrillance lorsque vous placez le pointeur dessus.

  7. Dans la colonne d'action, sous Regroupement, cliquez sur Grouper par propriétés.

  8. Dans la colonne suivante, sélectionnez les propriétés que vous voulez utiliser en tant que groupes.

    La colonne suivante apparaît et affiche les valeurs de propriété disponibles.

  9. À partir de la colonne suivante, faites glisser les groupes de valeurs de propriété vers le graphique.

  10. Cliquez avec le bouton droit sur la surface du graphique, pointez sur Groupe, puis cliquez sur Afficher tout en tant que groupes.

Supprimer des groupes

Sélectionnez le ou les groupes que vous voulez supprimer, cliquez avec le bouton droit sur votre sélection, pointez sur Groupe, puis cliquez sur Supprimer le groupe.

Supprimer des nœuds de leur groupe parent en les remontant jusqu'a leur grand-parent, ou à l'extérieur d'un groupe s'ils n'ont pas de groupe grand-parent

Sélectionnez les nœuds que vous voulez déplacer, cliquez avec le bouton droit sur votre sélection, pointez sur Groupe, puis cliquez sur Supprimer du parent.

Vous pouvez également organiser des nœuds en groupes en modifiant le fichier .dgml du graphique.

Pour utiliser un nœud existant en tant que groupe ou ajouter un nouveau groupe

  1. Pour utiliser un nœud existant en tant que groupe, cliquez avec le bouton droit sur le nœud que vous voulez employer comme nœud de groupe, puis cliquez sur Afficher DGML.

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

    ou

    1. Pour ajouter un nouveau groupe, cliquez avec le bouton droit sur une zone vide du graphique, puis cliquez sur Afficher 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.

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. Cliquez avec le bouton droit sur le nœud, puis cliquez sur Afficher DGML.

    Visual Studio ouvre le fichier .dgml du graphique et met en surbrillance l'élément <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 pour afficher l'info-bulle et identifier les nœuds source et cible du lien.

  2. Cliquez avec le bouton droit sur le graphique, puis cliquez sur Afficher 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 :

  • Organisation des nœuds en groupes

  • 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, cliquez avec le bouton droit sur le nœud, pointez sur Catégoriser, puis cliquez sur une catégorie prédéfinie.

- ou -

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

    • Cliquez sur le nœud que vous voulez catégoriser, appuyez sur F4 pour ouvrir la fenêtre Propriétés, tapez le nom de la catégorie dans la propriété Nouvelle catégorie du nœud, puis appuyez sur ENTRÉE.

    - ou -

    1. Cliquez avec le bouton droit sur le nœud, puis cliquez sur Afficher DGML.

      Visual Studio ouvre le fichier .dgml du graphique et met en surbrillance l'élément <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.

  2. Cliquez avec le bouton droit sur le graphique, puis cliquez sur Afficher 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.

Lier des éléments à des nœuds

Vous pouvez lier des éléments, tels que des documents ou des URL, à un nœud en modifiant le fichier .dgml du graphique et en ajoutant un attribut Reference à l'élément <Node/> de ce nœud. 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. Vous pouvez ensuite ouvrir et afficher ce contenu à partir du nœud du graphique.

Notes

Les éléments référencés doivent exister pour que vous puissiez les afficher.

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 bogue ou un élément de travail Team Foundation Server, ou à d'autres informations qui lui sont relatives.

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

  1. Sur le graphique, cliquez avec le bouton droit sur le nœud, puis cliquez sur Afficher DGML.

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

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

    Pour lier

    Procédez comme suit

    Un seul élément

    • Dans l'élément <Node/>, ajoutez un attribut Reference pour spécifier l'emplacement de l'élément item.

      RemarqueRemarque
      Il ne peut exister qu'un seul attribut Reference par élément <Node/>.

    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

    1. Dans l'élément <Node/>, ajoutez un nouvel attribut pour spécifier l'emplacement de chaque référence.

    2. Dans la section <Properties> :

      1. Ajoutez un élément <Property/> pour chaque nouveau type de référence.

      2. Définissez l'attribut Id au nom du nouvel attribut de référence.

      3. Ajoutez l'attribut IsReference et affectez-lui la valeur True pour faire apparaître la référence dans le menu contextuel Atteindre du nœud.

      4. Utilisez l'attribut Label pour spécifier le texte affiché dans le menu contextuel Atteindre du nœud.

    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é.

  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. Exécutez l'une des tâches suivantes pour afficher l'élément référencé :

    Pour afficher

    Exécutez l'opération suivante

    Un seul élément

    Double-cliquez sur le nœud.

    - ou -

    Cliquez avec le bouton droit sur le nœud, pointez sur Atteindre, puis cliquez sur l'élément.

    Plusieurs éléments

    Cliquez avec le bouton droit sur le nœud, pointez sur Atteindre, puis cliquez un é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 :

Notes

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.

  • ButterflyMode - En cas de valeur True, n'affiche que les nœuds liés qui se trouvent sur le même chemin d'accès que les nœuds sélectionnés. Si aucun nœud n'est sélectionné, le graphique sélectionne le concentrateur principal.

    RemarqueRemarque
    Les liens circulaires ne s'affichent pas dans ce mode.À la place, les nœuds qui participent aux relations circulaires sont copiés afin d'apparaître des deux côtés des nœuds sélectionnés.Les dépendances qui sont situées à plusieurs niveaux de distance du nœud sélectionné ne s'afficheront pas nécessairement dans l'ordre approprié car la disposition du graphique est basée sur le chemin d'accès le plus court à partir du nœud sélectionné.

    Pour plus d'informations, consultez Comment : parcourir des documents de graphique et y accéder.

  • 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. Pour plus d'informations, consultez Comment : parcourir des documents de graphique et y accéder.

  • Layout - Affectez au graphique les dispositions suivantes : None, Sugiyama (présentation sous forme d'arborescence), ForceDirected (clusters rapides) ou DependencyMatrix. Pour plus d'informations, consultez Comment : parcourir des documents de graphique et y accéder.

  • 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. Pour plus d'informations, consultez Comment : parcourir des documents de graphique et y accéder.

  • 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/>.

RemarqueRemarque
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. Pour plus d'informations, consultez Application de 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. Pour plus d'informations, consultez Organisation des nœuds en groupes.

  • Visibility - Affectez à cet attribut la valeur Visible, Hidden ou Collapsed. Utilise System.Windows.Visibility. Pour plus d'informations, consultez Masquage ou affichage de nœuds.

  • Reference - Définissez cet attribut pour le lier à un document ou une URL. Pour plus d'informations, consultez 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" ategory="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>.

RemarqueRemarque
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. Pour plus d'informations, consultez Application de 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. Pour plus d'informations, 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. Pour plus d'informations, consultez Application de 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é.

Pour plus d'informations, consultez 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

Comment : générer des graphiques de dépendance pour le code .NET

Autres ressources

Comment : parcourir des documents de graphique et y accéder

Comment : explorer du code avec des graphiques de dépendance