Dostosowanie map kodu przez edycję plików DGML

Artykuł
08/25/2023

Aby dostosować mapę kodu, możesz edytować plik Języka znaczników grafów skierowanych (dgml). Można na przykład edytować elementy, aby określić niestandardowe style, przypisać właściwości i kategorie do elementów kodu i łączyć dokumenty lub adresy URL z elementami kodu lub linkami. Aby uzyskać więcej informacji na temat elementów DGML, zobacz Dokumentacja języka DGML (Directed Graph Markup Language).

Edytuj plik .dgml mapy kodu w edytorze tekstów lub XML. Jeśli mapa jest częścią rozwiązania programu Visual Studio, wybierz ją w Eksplorator rozwiązań, otwórz menu skrótów, a następnie wybierz pozycję Otwórz za pomocą, edytor XML (tekst).

Uwaga

Aby utworzyć mapy kodu, musisz mieć wersję Visual Studio Enterprise. Podczas edytowania mapy kodu w programie Visual Studio program czyści wszystkie nieużywane elementy i atrybuty DGML, usuwając je podczas zapisywania pliku .dgml. Tworzy również elementy kodu automatycznie po ręcznym dodaniu nowych linków. Podczas zapisywania pliku .dgml wszelkie atrybuty, które są dodawane do elementu, mogą się ponownie rozmieszczać w kolejności alfabetycznej.

Grupowanie elementów kodu

Możesz dodać nowe grupy lub przekonwertować istniejące węzły na grupę.

Otwórz plik dgml w edytorze tekstów lub XML.
Aby przekonwertować element kodu na grupę, znajdź <Node/> element dla tego elementu kodu.

- lub -

Aby dodać nową grupę, znajdź sekcję <Nodes> . Dodaj nowy <Node/> element.
W elemecie <Node/> dodaj Group atrybut, aby określić, czy grupa jest wyświetlana rozwinięte, czy zwinięte. Na przykład:
```
<Nodes>
   <Node Id="MyFirstGroup" Group="Expanded" />
   <Node Id="MySecondGroup" Group="Collapsed" />
</Nodes>
```
<Links> W sekcji upewnij się, że <Link/> dla każdej relacji między elementem kodu grupy a elementami kodu podrzędnego istnieje element zawierający następujące atrybuty:
- Atrybut Source określający element kodu grupy
- Atrybut Target określający element kodu podrzędnego
- Atrybut Category określający relację Contains między elementem kodu grupy a elementem kodu podrzędnego
  
  Na przykład:
```
<Links>
   <Link Category="Contains" Source="MyFirstGroup" Target="FirstGroupChildOne" />
   <Link Category ="Contains" Source="MyFirstGroup" Target="FirstGroupChildTwo" />
   <Link Category ="Contains" Source="MySecondGroup" Target="SecondGroupChildOne" />
   <Link Category="Contains" Source="MySecondGroup" Target="SecondGroupChildTwo" />
</Links>
```
Aby uzyskać więcej informacji na temat atrybutu Category , zobacz Przypisywanie kategorii do elementów kodu i linków.

Zmienianie stylu mapy

Kolor tła i kolor obramowania mapy można zmienić, edytując plik .dgml mapy. Aby zmienić styl elementów kodu i łączy, zobacz Zmienianie stylu elementów kodu i linków.

Otwórz plik dgml w edytorze tekstów lub XML.

W elemecie <DirectedGraph> dodaj dowolny z następujących atrybutów, aby zmienić jego styl:

Kolor tła

Background="ColorNameOrHexadecimalValue"

Kolor obramowania

Stroke="StrokeValue"

Na przykład:

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

Zmienianie stylu elementów kodu i łączy

Style niestandardowe można zastosować do następujących elementów kodu:

Pojedyncze elementy kodu i linki
Grupy elementów kodu i łączy
Grupy elementów i linków kodu na podstawie określonych warunków

Napiwek

Jeśli masz powtarzające się style w wielu elementach kodu lub linkach, możesz rozważyć zastosowanie kategorii do tych elementów kodu lub linków, a następnie zastosowanie stylu do tej kategorii. Aby uzyskać więcej informacji, zobacz Przypisywanie kategorii do elementów kodu i linków oraz Przypisywanie właściwości do elementów kodu i łączy.

Aby zastosować styl niestandardowy do pojedynczego elementu kodu

Otwórz plik dgml w edytorze tekstów lub XML.

Znajdź element elementu <Node/> kodu. Dodaj dowolny z tych atrybutów, aby dostosować jego styl:

Kolor tła

Background="ColorNameOrHexadecimalValue"

Kontur

Stroke="ColorNameOrHexadecimalValue"

Grubość konturu

StrokeThickness="StrokeValue"

Kolor tekstu

Foreground="ColorNameOrHexadecimalValue"

Ikona

Icon="IconFilePathLocation"

Rozmiar tekstu

FontSize="FontSizeValue"

Typ tekstu

FontFamily="FontFamilyName"

Waga tekstu

FontWeight="FontWeightValue"

Styl tekstu

FontStyle="FontStyleName"

Można na przykład określić Italic styl tekstu.

Tekstura

Style="Glass"

— lub —

Style="Plain"

Kształt

Aby zastąpić kształt ikoną, ustaw Shape właściwość na None i ustaw Icon właściwość na ścieżkę za pomocą pliku ikony.

Shape="ShapeFilePathLocation"

Na przykład:

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

Aby zastosować styl niestandardowy do pojedynczego łącza

Otwórz plik dgml w edytorze tekstów lub XML.
<Link/> Znajdź element zawierający zarówno nazwy elementu kodu źródłowego, jak i docelowy element kodu.

W elemecie <Link/> dodaj dowolny z następujących atrybutów, aby dostosować jego styl:

Kolor konturu i grotu strzałki

Stroke="ColorNameOrHexadecimalValue"

Grubość konturu

StrokeThickness="StrokeValue"

Styl konturu

StrokeDashArray="StrokeArrayValues"

Na przykład:

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

Aby zastosować style niestandardowe do grupy elementów kodu lub łączy

Otwórz plik dgml w edytorze tekstów lub XML.
<Styles></Styles> Jeśli element nie istnieje, dodaj jeden pod <DirectedGraph></DirectedGraph> elementem po elemecie <Links></Links> .
W elemecie <Styles></Styles> w obszarze <Style/> elementu i określ następujące atrybuty:
- TargetType="Node | Link | Graph"
- GroupLabel="NameInLegendBox "
- ValueLabel="NameInStylePickerBox "
  
  Aby zastosować niestandardowy styl do wszystkich typów docelowych, nie należy używać warunku.

Aby zastosować styl warunkowy do grup elementów kodu lub łączy

Otwórz plik dgml w edytorze tekstów lub XML.

W elemecie <Style/> dodaj <Condition/> element zawierający Expression atrybut, aby określić wyrażenie zwracające wartość logiczną.

Na przykład:

<Condition Expression="MyCategory"/>

— lub —

<Condition Expression="MyCategory > 100"/>

— lub —

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

Wyrażenie to używa następującej składni notacji Backusa-Naura (BNF):

<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> ::= single or double-quoted string literal

<Number> ::= string of digits with optional decimal point

Można określić wiele <Condition/> elementów, które muszą mieć wartość true, aby zastosować styl.

W następnym wierszu po elemecie <Condition/> dodaj jeden lub wiele <Setter/> elementów, aby określić Property atrybut i stały Value atrybut lub obliczony Expression atrybut do zastosowania do mapy, elementów kodu lub łączy spełniających warunek.

Na przykład:
```
<Setter Property="BackGround" Value="Green"/>
```
W prostym przykładzie poniższy warunek określa, że element kodu jest wyświetlany na zielono lub czerwony w zależności od tego, czy jego Passed kategoria jest ustawiona na True , czy False:

<?xml version="1.0" encoding="utf-8"?>
<DirectedGraph xmlns="http://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>

Poniższa tabela zawiera niektóre przykładowe warunki, których można użyć:

Ustaw rozmiar czcionki jako funkcję liczby wierszy kodu, które również zmieniają rozmiar elementu kodu. W tym przykładzie użyto pojedynczego wyrażenia warunkowego do ustawienia wielu właściwości FontSize i FontFamily.

<?xml version="1.0" encoding="utf-8"?>
<DirectedGraph xmlns="http://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 > 0" />
      <Setter Property="FontSize" Expression="Math.Max(9,Math.Sqrt(LinesOfCode))" />
      <Setter Property="FontFamily" Value="Papyrus" />
   </Style>
</Styles>
</DirectedGraph>

Ustaw kolor tła elementu kodu na Coverage podstawie właściwości . Style są oceniane w kolejności, w której się pojawiają, podobnie jak if-else w przypadku instrukcji.

W tym przykładzie:

Jeśli Coverage wartość to > 80, ustaw właściwość na zieloną Background .
W przeciwnym razie, jeśli Coverage ma wartość > 50, ustaw Background właściwość na odcień pomarańczy Coverage na podstawie wartości właściwości.
W przeciwnym razie ustaw Background właściwość na odcień koloru czerwonego na podstawie wartości Coverage właściwości.

<?xml version="1.0" encoding="utf-8"?>
<DirectedGraph xmlns="http://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 > 80" />
      <Setter Property="Background" Value="Green" />
   </Style>
   <Style TargetType="Node" GroupLabel="Coverage" ValueLabel="OK">
      <Condition Expression="Coverage > 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>

Shape Ustaw właściwość na wartość None , aby ikona zamieniła kształt. Icon Użyj właściwości , aby określić lokalizację ikony.

<DirectedGraph xmlns="http://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>

Przypisywanie właściwości do elementów kodu i łączy

Elementy kodu i linki można organizować, przypisując do nich właściwości. Możesz na przykład wybrać elementy kodu, które mają określone właściwości, aby można je było grupować, zmieniać ich styl lub ukrywać.

Aby przypisać właściwość do elementu kodu

Otwórz plik dgml w edytorze tekstów lub XML.
<Node/> Znajdź element dla tego elementu kodu. Określ nazwę właściwości i jej wartość. Na przykład:
```
<Nodes>
   <Node Id="MyNode" MyPropertyName="PropertyValue" />
</Nodes>
```
<Property/> Dodaj element do sekcji, <Properties> aby określić atrybuty, takie jak jego widoczna nazwa i typ danych:
```
<Properties>
   <Property Id="MyPropertyName" Label="My Property" DataType="System.DataType"/>
</Properties>
```

Aby przypisać właściwość do łącza

Otwórz plik dgml w edytorze tekstów lub XML.
<Link/> Znajdź element zawierający zarówno nazwy elementu kodu źródłowego, jak i docelowy element kodu.

W elemecie <Node/> określ nazwę właściwości i jej wartość. Na przykład:

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

<Property/> Dodaj element do sekcji, <Properties> aby określić atrybuty, takie jak jego widoczna nazwa i typ danych:

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

Przypisywanie kategorii do elementów kodu i linków

W poniższych sekcjach pokazano, jak można organizować elementy kodu, przypisując do nich kategorie oraz jak utworzyć kategorie hierarchiczne, które ułatwiają organizowanie elementów kodu i dodawanie atrybutów do kategorii podrzędnych przy użyciu dziedziczenia.

Aby przypisać kategorię do elementu kodu

Otwórz plik dgml w edytorze tekstów lub XML.
<Node/> Znajdź element dla żądanego elementu kodu.
W elemecie <Node/> dodaj Category atrybut, aby określić nazwę kategorii. Na przykład:
```
<Nodes>
   <Node Id="MyNode" Category="MyCategory" />
</Nodes>
```
<Category/> Dodaj element do <Categories> sekcji, aby można było użyć atrybutu Label w celu określenia tekstu wyświetlanego dla tej kategorii:
```
<Categories>
   <Category Id="MyCategory" Label="My Category" />
</Categories>
```

Przypisywanie kategorii do łącza

Otwórz plik dgml w edytorze tekstów lub XML.
<Link/> Znajdź element zawierający zarówno nazwy elementu kodu źródłowego, jak i docelowy element kodu.

W elemecie <Link/> dodaj Category atrybut, aby określić nazwę kategorii. Na przykład:

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

<Category/> Dodaj element do <Categories> sekcji, aby można było użyć atrybutu Label w celu określenia tekstu wyświetlanego dla tej kategorii:
```
<Categories>
   <Category Id="MyCategory" Label="My Category" />
</Categories>
```

Tworzenie kategorii hierarchicznych

Otwórz plik dgml w edytorze tekstów lub XML.

<Category/> Dodaj element dla kategorii nadrzędnej, a następnie dodaj BasedOn atrybut do elementu kategorii podrzędnej<Category/>.

Na przykład:

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

W tym przykładzie tło MyFirstNode elementu jest zielone, ponieważ jego Category atrybut dziedziczy Background atrybut .MyParentCategory

Łączenie dokumentów lub adresów URL z elementami kodu i linkami

Dokumenty lub adresy URL można połączyć z elementami kodu lub linkami, edytując plik dgml mapy i dodając Reference atrybut do <Node/> elementu dla elementu kodu lub <Link/> elementu linku. Następnie możesz otworzyć i wyświetlić zawartość z elementu kodu lub linku. Atrybut Reference określa ścieżkę tej zawartości. Może to być ścieżka względem lokalizacji pliku .dgml lub ścieżka bezwzględna.

Uwaga

Jeśli używane są ścieżki względne, a plik .dgml zostanie przeniesiony do innej lokalizacji, ścieżki te nie zostaną rozpoznane. Podczas próby otwarcia i wyświetlenia połączonej zawartości pojawi się komunikat o błędzie z informacją, że nie można wyświetlić zawartości.

Możesz na przykład połączyć następujące elementy kodu:

Aby opisać zmiany w klasie, możesz połączyć adres URL elementu kodu roboczego, dokumentu lub innego pliku dgml z elementem kodu dla klasy.
Diagram zależności można połączyć z elementem kodu grupy reprezentującym warstwę w architekturze logicznej oprogramowania.
Aby wyświetlić więcej informacji o składniku, który uwidacznia interfejs, możesz połączyć diagram składników z elementem kodu dla tego interfejsu.
Połącz element kodu z elementem roboczym lub usterką serwera Team Foundation Server albo z innymi informacjami powiązanymi z elementem kodu.

Aby połączyć dokument lub adres URL z elementem kodu

Otwórz plik dgml w edytorze tekstów lub XML.
<Node/> Znajdź element dla żądanego elementu kodu.
Wykonaj jedno z zadań z tabeli poniżej:

Pojedynczy element kodu
- W elemecie <Node/> or <Link/> dodaj Reference atrybut, aby określić lokalizację elementu kodu.
  
  Uwaga
  
  Można mieć tylko jeden Reference atrybut na element.
  
  Na przykład:
```
<Nodes>
   <Node Id="MyNode" Reference="MyDocument.txt" />
</Nodes>
<Properties>
   <Property Id="Reference" Label="My Document" DataType="System.String" IsReference="True" />
</Properties>
```
Wiele elementów kodu
1. W elemencie <Node/> or <Link/> dodaj nowy atrybut, aby określić lokalizację każdego odwołania.
2. <Properties> W sekcji:
  1. <Property/> Dodaj element dla każdego nowego typu odwołania.
  2. Id Ustaw atrybut na nazwę nowego atrybutu odwołania.
  3. IsReference Dodaj atrybut i ustaw go tak, aby True odwołanie było wyświetlane w menu skrótów Przejdź do odwołania elementu kodu.
  4. Użyj atrybutu Label , aby określić tekst wyświetlany w menu skrótów Przejdź do odwołania elementu kodu.
  Na przykład:
```
<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>
```
Na mapie nazwa elementu kodu jest podkreślony. Po otwarciu menu skrótów dla elementu kodu lub linku zostanie wyświetlone menu skrótów Przejdź do odwołania zawierające połączone elementy kodu do wyboru.

Użyj atrybutu ReferenceTemplate , aby określić wspólny ciąg, taki jak adres URL, używany przez wiele odwołań zamiast powtarzać ten ciąg w odwołaniu.

Atrybut ReferenceTemplate określa symbol zastępczy dla wartości odwołania. W poniższym przykładzie {0} symbol zastępczy w atrybucie ReferenceTemplate zostanie zastąpiony wartościami atrybutów MyFirstReference i MySecondReference w elemecie <Node/> w celu utworzenia pełnej ścieżki:

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

Aby wyświetlić przywołyny element kodu lub elementy kodu z mapy, otwórz menu skrótów dla elementu kodu lub linku. Wybierz pozycję Przejdź do odwołania , a następnie element kodu.

Udostępnij za pośrednictwem

Dostosowanie map kodu przez edycję plików DGML

Grupowanie elementów kodu

Zmienianie stylu mapy

Zmienianie stylu elementów kodu i łączy

Aby zastosować styl niestandardowy do pojedynczego elementu kodu

Aby zastosować styl niestandardowy do pojedynczego łącza

Aby zastosować style niestandardowe do grupy elementów kodu lub łączy

Aby zastosować styl warunkowy do grup elementów kodu lub łączy

Przypisywanie właściwości do elementów kodu i łączy

Aby przypisać właściwość do elementu kodu

Aby przypisać właściwość do łącza

Przypisywanie kategorii do elementów kodu i linków

Aby przypisać kategorię do elementu kodu

Przypisywanie kategorii do łącza

Tworzenie kategorii hierarchicznych

Łączenie dokumentów lub adresów URL z elementami kodu i linkami

Aby połączyć dokument lub adres URL z elementem kodu

Opinia

Dodatkowe zasoby

Udostępnij za pośrednictwem

Dostosowanie map kodu przez edycję plików DGML

Grupowanie elementów kodu

Zmienianie stylu mapy

Zmienianie stylu elementów kodu i łączy

Aby zastosować styl niestandardowy do pojedynczego elementu kodu

Aby zastosować styl niestandardowy do pojedynczego łącza

Aby zastosować style niestandardowe do grupy elementów kodu lub łączy

Aby zastosować styl warunkowy do grup elementów kodu lub łączy

Przypisywanie właściwości do elementów kodu i łączy

Aby przypisać właściwość do elementu kodu

Aby przypisać właściwość do łącza

Przypisywanie kategorii do elementów kodu i linków

Aby przypisać kategorię do elementu kodu

Przypisywanie kategorii do łącza

Tworzenie kategorii hierarchicznych

Łączenie dokumentów lub adresów URL z elementami kodu i linkami

Aby połączyć dokument lub adres URL z elementem kodu

Powiązana zawartość

Opinia

Dodatkowe zasoby