HOW TO：編輯和自訂圖形文件

  • 發行項

在 Visual Studio Ultimate 中，您可以編輯節點和連結，以將有向圖形的編輯重點放在主要的關聯性和區域。 尤其是當圖形會顯示大量資訊時，這樣的處理方式更為實用。 例如，您可以識別現有軟體系統中的主要元件以及其之間的關聯性， 然後和小組成員分享和討論這些重點區域。 如需由程式碼產生圖形的詳細資訊，請參閱 HOW TO：產生適用於 .NET 程式碼的相依性圖形。

若要突顯重要的區域，您可以選取和篩選節點、將預先定義的樣式套用至節點和連結，以及將節點組織成群組。 您還可以編輯圖形的「有向圖形標記語言」(DGML) 檔案，進一步自訂圖形。 例如，您可以編輯檔案中的 DGML 項目以指定自訂樣式、指派屬性與分類給節點和連結，或是將節點連結到項目 (例如文件、URL 和其他 .dgml 檔案)。 如需 DGML 項目的詳細資訊，請參閱了解有向圖形標記語言 (DGML)。

注意事項注意事項

當您儲存 .dgml 檔案時，Visual Studio 會刪除任何未使用的 DGML 項目和屬性以進行清理， 此外也會在您加入新連結時自動建立節點項目。當您儲存 .dgml 檔案時，任何加入至項目的屬性可能會自動按照字母順序重新排列。

您可以利用下列方式編輯圖形：

  • 選取節點

  • 隱藏或顯示節點

  • 顯示或隱藏連結

  • 變更圖形的樣式

  • 變更節點和連結的樣式

  • 將樣式從一個圖形複製到另一個圖形

  • 將節點組織成群組

  • 指派屬性給節點和連結

  • 指派分類給節點和連結

  • 將項目連結到節點

  • 建立常用路徑的別名

選取節點

若要

請執行這些步驟

選取特定分類中的節點

  1. 以滑鼠右鍵按一下圖形，然後按一下 [顯示進階選取範圍]。

  2. 在 [選取範圍] 方塊中的 [分類] 底下，按一下您想要的分類。

若要建立和指派自訂分類，請參閱指派分類給節點和連結。

選取具有特定屬性或屬性值的節點

  1. 以滑鼠右鍵按一下圖形，然後按一下 [顯示進階選取範圍]。

  2. 在 [選取範圍] 方塊中的 [屬性] 底下，按一下您想要的屬性。 若要選取特定屬性值，請展開屬性。

將相關節點加入至所選節點

以滑鼠右鍵按一下選取的節點、指向 [選取範圍]，然後選擇下列其中一項：

  • 若要加入直接連結至所選節點的節點，請按一下 [選取連入]。

  • 若要加入選取的節點直接連結到的節點，請按一下 [選取連出]。

  • 若要加入與選取之節點有直接連結的節點，請按一下 [加入兩者]。

  • 若要加入所有與選取之節點有連結的節點，請按一下 [選取所有連接的節點]。

  • 若要加入選取之節點的所有子系，按一下 [選取子系]。

選取所有未選取的節點

以滑鼠右鍵按一下選取的節點、指向 [選取範圍]，然後按一下 [反向]。

隱藏或顯示節點

隱藏圖形上的節點，會使這些節點不會出現在圖形上，且不會參與任何配置演算法。

若要

請執行這些步驟

隱藏選取的節點

  1. 選取您要隱藏的節點。

  2. 以滑鼠右鍵按一下選取的節點或是圖形、指向 [選取範圍]，然後按一下 [隱藏]。

隱藏具有特定分類或屬性的節點

  1. 若要顯示 [選取範圍] 方塊，請以滑鼠右鍵按一下圖形介面，然後按一下 [顯示進階選取範圍]。

  2. 在 [選取範圍] 方塊中，按一下您想要的分類或屬性。

  3. 以滑鼠右鍵按一下圖形介面、指向 [選取範圍]，然後按一下 [隱藏]。

隱藏未選取的節點

  1. 選取您不要隱藏的節點。

  2. 以滑鼠右鍵按一下選取的節點或是圖形、指向 [選取範圍]，然後按一下 [隱藏未選取項目]。

顯示所有隱藏的節點

以滑鼠右鍵按一下圖形介面、指向 [選取範圍]，然後按一下 [全部解除隱藏]。

若要編輯 .dgml 檔案來隱藏節點

  1. 以滑鼠右鍵按一下圖形介面，然後按一下 [檢視 DGML]。

    Visual Studio 隨即開啟圖形的 .dgml 檔案。

  2. 在 <Node/> 項目中，加入下列屬性以隱藏節點：

    Visibility="Hidden"

    例如：

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

顯示或隱藏連結

您可以指定希望看見的連結類型，控制圖形上的詳細資料數量。 圖形會顯示兩種連結：節點間的直接連結和跨群組連結 (預設會隱藏後者)。 跨群組連結是連接不同群組之節點的所有個別連結。

當群組摺疊起來時，圖形會將所有跨群組連結彙總成單一的群組間連結。 當群組展開時，您可以選取群組中的節點，新的跨群組連結便會出現，並顯示該群組內部的實際相依性。

若要顯示或隱藏連結

  1. 如果沒有顯示圖形工具列，請在 [檢視] 功能表上，指向 [工具列]，然後按一下 [有向圖形]。

  2. 選取下表中的工作：

    若要

    請按一下

    任何時候都顯示所有跨群組連結

    顯示所有跨群組連結

    只顯示連接至已選取之節點的跨群組連結

    顯示所選取節點上的跨群組連結

    任何時候都隱藏所有跨群組連結

    隱藏所有跨群組連結

    隱藏所有連結 (或顯示所有連結)

    隱藏所有連結

    若要顯示所有連結，請再按一下 [隱藏所有連結]，即可關閉此模式。

變更圖形的樣式

您可以編輯圖形的 .dgml 檔案，變更圖形的背景色彩和框線色彩。 若要變更節點和連結的樣式，請參閱變更節點和連結的樣式。

若要變更圖形的樣式

  1. 以滑鼠右鍵按一下圖形介面，然後按一下 [檢視 DGML]。

    Visual Studio 隨即開啟圖形的 .dgml 檔案。

  2. 在 <DirectedGraph> 項目中，加入下列任何屬性以變更其樣式：

    若要變更

    加入下列屬性

    背景色彩

    		 
    Background="ColorNameOrHexadecimalValue"

    框線色彩

    		 
    Stroke="StrokeValue"

    例如：

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

變更節點和連結的樣式

您可以變更節點的圖示以及節點和連結的色彩。 您可以使用預先定義的色彩和圖示，也可以藉由編輯圖形的 .dgml 檔案來指定自訂色彩。 如需詳細資訊，請參閱將自訂樣式套用至節點和連結。

例如，您可以選擇色彩來標示具有特定分類或屬性的節點和連結。 這樣就能識別和注意圖形的特定區域。

若要將預先定義的色彩或圖示套用至具有特定分類或屬性的節點

  1. 如果看不到 [圖例] 方塊，請在圖形上按一下滑鼠右鍵，然後按一下 [顯示圖例]。

  2. 在 [圖例] 方塊中，查看清單是否包含節點分類或屬性。

  3. 如果清單沒有包含分類或屬性，請按一下 [加入]、指向 [節點類別] 或 [節點屬性]，然後選取分類或屬性。

    注意事項注意事項

    若要建立和指派分類給節點，請參閱指派分類給節點和連結。 若要建立屬性並指派給節點，請參閱指派屬性給節點和連結。

  4. 在 [圖例] 方塊中，按一下分類或屬性旁邊的下拉式清單。

  5. 使用下表選取您想要變更的樣式：

    若要變更

    請選取

    背景色彩

    背景

    外框色彩

    筆劃

    文字色彩

    前景

    圖示

    圖示

  6. 在選擇器對話方塊中，選擇下列其中一項：

    若要套用

    請依照下列步驟：

    一組色彩 (或圖示)

    按一下 [選取色彩設定] ([選取圖示設定]) 下拉式清單，然後按一下一組色彩 (或圖示)。

    若要回復預設色彩 (或圖示)，請在 [選取色彩設定] ([選取圖示設定]) 下拉式清單中按一下 [無]。

    特定色彩 (或圖示)

    按一下分類或屬性值的下拉式清單，然後選取色彩 (或圖示)。

  7. 完成後，請按一下 [確定]。

    注意事項注意事項

    您可以重新整理、刪除或暫時停用 [圖例] 方塊中的樣式。 如需詳細資訊，請參閱修改圖例方塊。

若要將預先定義的色彩套用至具有特定分類或屬性的連結

  1. 如果看不到 [圖例] 方塊，請在圖形上按一下滑鼠右鍵，然後按一下 [顯示圖例]。

  2. 在 [圖例] 方塊中，查看清單是否包含分類或屬性。

  3. 如果清單沒有包含分類或屬性，按一下 [加入]、指向 [連結類別] 或 [連結屬性]，然後選取分類或屬性。

    注意事項注意事項

    若要建立分類並指派給連結，請參閱指派分類給節點和連結。 若要建立屬性並指派給連結，請參閱指派屬性給節點和連結。

  4. 在 [圖例] 方塊中，按一下分類或屬性旁邊的下拉式清單。

  5. 使用下表選取您想要變更的樣式：

    若要變更

    請選取

    箭頭色彩

    背景

    外框色彩

    筆劃

  6. 在 [色彩集選擇器] 方塊中，選擇下列其中一項：

    若要套用

    請依照下列步驟：

    一組色彩

    按一下 [選取色彩設定] 下拉式清單，然後按一下一組色彩。

    若要回復預設色彩，請在 [選取色彩設定] 下拉式清單中按一下 [無]。

    特定色彩

    按一下類型或屬性值的下拉式清單以選取色彩。

  7. 完成後，請按一下 [確定]。

    注意事項注意事項

    您可以重新整理、刪除或暫時停用 [圖例] 方塊中的樣式。 如需詳細資訊，請參閱修改圖例方塊。

將自訂樣套用至節點和連結

您可以將自訂樣式套用至下列項目：

  • 單一節點和連結

  • 節點和連結的群組

  • 根據特定條件組成的節點和連結群組

若要將自訂樣式套用至單一節點

  1. 以滑鼠右鍵按一下您要自訂樣式的節點，然後按一下 [檢視 DGML]。

    Visual Studio 隨即開啟圖形的 .dgml 檔案並反白顯示該節點的 <Node/> 項目。

  2. 在 <Node/> 項目中，加入下列任何屬性以自訂其樣式：

    若要變更

    請加入下列屬性

    背景色彩

    		 
    Background="ColorNameOrHexadecimalValue"

    外框

    		 
    Stroke="ColorNameOrHexadecimalValue"

    外框粗細

    		 
    StrokeThickness="StrokeValue"

    文字色彩

    		 
    Foreground="ColorNameOrHexadecimalValue"

    圖示

    		 
    Icon="IconFilePathLocation"

    文字大小

    		 
    FontSize="FontSizeValue"

    文字類型

    		 
    FontFamily="FontFamilyName"

    文字粗細

    		 
    FontWeight="FontWeightValue"

    文字樣式

    		 
    FontStyle="FontStyleName"

    例如，您可以指定 Italic 做為文字樣式。

    紋理

    		 
    Style="Glass"

    -或-

    Style="Plain"

    圖案

    		 
    Shape

    例如：

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

若要將自訂樣式套用至單一連結

  1. 在此圖形上，將滑鼠指標移至連結上方，以顯示工具提示並識別連結的來源節點和目標節點。

  2. 以滑鼠右鍵按一下圖形，然後按一下 [檢視 DGML]。

    Visual Studio 隨即開啟圖形的 .dgml 檔案。

  3. 尋找同時包含來源節點與目標節點名稱的 <Link/> 項目。

  4. 在 <Link/> 項目中，加入下列任何屬性以自訂其樣式：

    若要變更

    請加入下列屬性

    箭頭色彩

    		 
    Background="ColorNameOrHexadecimalValue"

    外框色彩

    		 
    Stroke="ColorNameOrHexadecimalValue"

    外框粗細

    		 
    StrokeThickness="StrokeValue"

    外框樣式

    		 
    StrokeDashArray="StrokeArrayValues"

    例如：

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

若要將自訂樣式套用至一組節點或連結

  1. 將您想要的任何分類或屬性指派給節點或連結。

    如需詳細資訊，請參閱指派分類給節點和連結和指派屬性給節點和連結。

  2. 以滑鼠右鍵按一下圖形介面，然後按一下 [檢視 DGML]。

    Visual Studio 隨即開啟圖形的 .dgml 檔案。

  3. 如果 <Styles></Styles> 項目不存在，請在 <Links></Links> 項目之後的 <DirectedGraph></DirectedGraph> 項目底下加入該項目。

  4. 在 <Styles></Styles> 項目中的 <Style/> 項目底下，指定下列屬性：

    • TargetType="Node | Link | Graph"

    • GroupLabel="NameInLegendBox"

    • ValueLabel="NameInStylePickerBox"

    若要將自訂樣式套用至所有目標類型，請勿使用條件。

若要將條件式樣式套用至節點或連結的群組

  1. 在 <Style/> 項目中加入包含 Expression 屬性的 <Condition/> 項目，以指定傳回布林值的運算式。

    例如：

    <Condition Expression="MyCategory"/>

    -或-

    <Condition Expression="MyCategory > 100"/>

    -或-

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

    這個運算式會使用下列 Backus-Naur 格式 (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> ::= 單引號或雙引號括住的字串常值

    <Number> ::= 包含選擇性小數點的數字字串

    您可以指定多個 <Condition/> 項目，而這些項目必須全部為 True 才能套用樣式。

  2. 在 <Condition/> 項目的下一行加入一個或多個 <Setter/> 項目來指定 Property 屬性與固定的 Value 屬性或經過計算的 Expression 屬性，以套用至符合條件的圖形、節點或連結。

    例如：

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

下列條件是一個簡單的完整範例，它會指定讓節點根據其 Passed 分類是設為 True 還是 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>

下表包含一些您可以使用的範例條件：

若要

範例 DGML

將字型大小設定成以程式碼行數為參數的函式，而此函式同時也會變更節點的大小。 這個範例會使用單一條件運算式來設定多個屬性，亦即 FontSize 和 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>

根據 Coverage 屬性設定節點的背景色彩。 與 if-else 陳述式類似，會依照樣式出現的順序來評估樣式。

在這個範例中：

  1. 如果 Coverage > 80，則將 Background 屬性設定為綠色。

  2. 如果 Coverage > 50，則根據 Coverage 屬性值，將 Background 屬性設定為深淺程度不同的橙色。

  3. 如果是上述所有條件以外的情況，則根據 Coverage 屬性值，將 Background 屬性設定為深淺程度不同的紅色。

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

將 Shape 屬性設定為 None，讓圖示取代該圖案。 使用 Icon 屬性來指定圖示的位置。

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

修改圖例方塊

您可以重新整理、刪除或暫時停用 [圖例] 方塊中的樣式：

  1. 以滑鼠右鍵按一下 [圖例] 方塊中的樣式。

  2. 請執行下列其中一項工作：

    若要

    按一下

    將樣式向上移動

    上移

    將項目向下移動

    下移

    刪除項目

    刪除

    停用項目

    停用

    重新啟動項目

    啟用

將樣式從一個圖形複製到另一個圖形

  • 在來源圖形的空白區域上按一下滑鼠右鍵，然後按一下 [複製圖例]，再將樣式貼到目標圖形中。

將節點組織成群組

若要

請執行這些步驟

將具有內含項目關聯性的節點顯示為群組或連結

若要將連結顯示為群組，請選取容器節點、以滑鼠右鍵按一下選取項目、指向 [群組]，然後按一下 [顯示為群組]。

若要將群組顯示為連結，請選取容器節點、以滑鼠右鍵按一下選取項目、指向 [群組]，然後按一下 [顯示為連結]。

若要將所有群組顯示為連結，請以滑鼠右鍵按一下圖形、指向 [群組]，然後按一下 [將全部顯示為連結]。

若要將所有連結顯示為群組，請以滑鼠右鍵按一下圖形、指向 [群組]，然後按一下 [將全部顯示為群組]。

加入包含選取之節點的新群組

  1. 以滑鼠右鍵按一下選取項目、指向 [群組]，然後按一下 [加入父群組]。

  2. 以滑鼠右鍵按一下新群組，然後按一下 [屬性]。

  3. 在 [標籤] 屬性中重新命名群組。

加入包含具有特定分類或屬性之節點的新群組

  1. 若要顯示 [選取範圍] 方塊，請以滑鼠右鍵按一下圖形介面，然後按一下 [顯示進階選取範圍]。

  2. 在 [選取範圍] 方塊中，按一下您想要的分類或屬性。

  3. 以滑鼠右鍵按一下圖形介面、指向 [群組]，然後按一下 [加入父群組]。

  4. 以滑鼠右鍵按一下新群組，然後按一下 [屬性]。

  5. 在 [標籤] 屬性中重新命名群組。

根據節點的容器組成節點群組

  1. 在 [架構] 功能表中指向 [視窗]，然後按一下 [架構總管]。

  2. 使用 [架構總管] 尋找和選取您要組成群組的所有節點。

    如需詳細資訊，請參閱 HOW TO：使用架構總管尋找程式碼。

  3. 在目前資料行的右側，按一下摺疊的動作資料行加以展開。

    注意事項注意事項
    當您將指標移至動作欄上方時，它就會反白顯示。

  4. 按一下動作資料行中的 [由下列包含]。

  5. 從下一個資料行拖曳容器群組至圖形。

  6. 以滑鼠右鍵按一下圖形介面、指向 [群組]，然後按一下 [將全部顯示為群組]。

根據節點的屬性值組成節點群組

  1. 在磁碟中將圖形儲存為 .dgml 檔案。

  2. 在 [架構] 功能表中指向 [視窗]，然後按一下 [架構總管]。

  3. 在 [架構總管] 中的 [檔案系統] 底下，按一下 [選取檔案]。

  4. 在下一個資料行中，按一下您儲存的 .dgml 檔案。

  5. 使用 [架構總管] 尋找和選取您要組成群組的所有節點。

    如需詳細資訊，請參閱 HOW TO：使用架構總管尋找程式碼。

  6. 在目前資料行的右側，按一下摺疊的動作資料行加以展開。

    注意事項注意事項
    當您將指標移至動作欄上方時，它就會反白顯示。

  7. 在動作資料行的 [群組] 底下，按一下 [依屬性群組]。

  8. 在下一個資料行中，選取要用來組成群組的屬性。

    下一個資料行隨即出現並顯示可用的屬性值。

  9. 從下一個資料行拖曳屬性值群組至圖形。

  10. 以滑鼠右鍵按一下圖形介面、指向 [群組]，然後按一下 [將全部顯示為群組]。

移除群組

選取您要移除的群組、以滑鼠右鍵按一下選取項目、指向 [群組]，然後按一下 [移除群組]。

從節點的父群組至上一層父群組 (如果沒有上一層父群組，則是群組外部) 移除節點

選取您要移除的節點、以滑鼠右鍵按一下選取項目、指向 [群組]，然後按一下 [從父代移除]。

您也可以編輯圖形的 .dgml 檔案，將節點組織成群組。

若要使用現有節點做為群組或加入新群組

  1. 若要使用現有節點做為群組，請以滑鼠右鍵按一下要用來當做群組節點的節點，然後按一下 [檢視 DGML]。

    Visual Studio 隨即開啟圖形的 .dgml 檔案並反白顯示該節點的 <Node/> 項目。

    -或-

    1. 若要加入新群組，請以滑鼠右鍵按一下圖形的空白區域，然後按一下 [檢視 DGML]。

    2. 在 <Nodes> 區段中，加入新的 <Node/> 項目。

  2. 在 <Node/> 項目中加入 Group 屬性，指定群組呈現為展開或摺疊的狀態。 例如：

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

  3. 在 <Links> 區段中，針對群組節點與其子節點之間的每一個關聯性，確定其中存在具有下列屬性的 <Link/> 項目：

    • Source 屬性，指定群組節點

    • Target 屬性，指定子節點

    • Category 屬性，指定群組節點與其子節點之間的 Contains 關聯性

    例如：

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

    如需 Category 屬性的詳細資訊，請參閱指派分類給節點和連結。

指派屬性給節點和連結

您可以指派屬性給節點和連結，將它們組織起來。 例如，您可以選取具有特定屬性的節點，以便組成群組、變更樣式或隱藏節點。

若要將屬性指派給節點

  1. 以滑鼠右鍵按一下節點，然後按一下 [檢視 DGML]。

    Visual Studio 隨即開啟圖形的 .dgml 檔案並反白顯示該節點的 <Node/> 項目。

  2. 在 <Node/> 項目中，指定屬性名稱及其值。 例如：

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

  3. 將 <Property/> 項目加入至 <Properties> 區段，以指定其顯示名稱和資料型別等屬性：

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

若要將屬性指派給連結

  1. 在此圖形上，將滑鼠指標移至連結上方，以顯示工具提示並識別連結的來源節點和目標節點。

  2. 以滑鼠右鍵按一下圖形，然後按一下 [檢視 DGML]。

    Visual Studio 隨即開啟圖形的 .dgml 檔案。

  3. 尋找同時包含來源節點與目標節點名稱的 <Link/> 項目。

  4. 在 <Node/> 項目中，指定屬性名稱及其值。 例如：

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

  5. 將 <Property/> 項目加入至 <Properties> 區段，以指定其顯示名稱和資料型別等屬性：

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

指派分類給節點和連結

您可以指派分類給節點，將它們組織起來。 例如，您可以選取屬於特定分類的節點，以便組成群組、變更樣式或隱藏節點。 您可以反白顯示具有特定分類的連結。 如需詳細資訊，請參閱下列章節：

  • 將節點組織成群組

  • 變更節點和連結的樣式

  • 隱藏或顯示節點

若要將分類指派給節點

  • 若要指派預先定義的分類 (例如 [分類 1])，請以滑鼠右鍵按一下節點、指向 [分類]，然後按一下預先定義的分類。

-或-

  • 若要建立和指派自訂分類：

    • 按一下要分類的節點、按 F4 開啟 [屬性] 視窗、在節點的 [新增類別] 屬性中輸入分類的名稱，然後按 ENTER。

    -或-

    1. 以滑鼠右鍵按一下節點，然後按一下 [檢視 DGML]。

      Visual Studio 隨即開啟圖形的 .dgml 檔案並反白顯示該節點的 <Node/> 項目。

    2. 在 <Node/> 項目中加入 Category 屬性，以指定分類的名稱。 例如：

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

    3. 將 <Category/> 項目加入至 <Categories> 區段，如此即可使用 Label 屬性來指定該分類的顯示文字：

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

若要將分類指派給連結

  1. 在此圖形上，將滑鼠指標移至連結上方，以顯示工具提示並識別連結的來源節點和目標節點。

  2. 以滑鼠右鍵按一下圖形，然後按一下 [檢視 DGML]。

    Visual Studio 隨即開啟圖形的 .dgml 檔案。

  3. 尋找同時包含來源節點與目標節點名稱的 <Link/> 項目。

  4. 在 <Link/> 項目中加入 Category 屬性，以指定分類的名稱。 例如：

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

  5. 將 <Category/> 項目加入至 <Categories> 區段，如此即可使用 Label 屬性來指定該分類的顯示文字：

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

您可以建立階層式分類來協助您組織節點，然後使用繼承將屬性加入至子分類。

若要建立階層式分類

  • 加入父分類的 <Category/> 項目，然後將 BasedOn 屬性加入至子分類的 <Category/> 項目。

    例如：

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

    在本範例中，MyFirstNode 的背景為綠色，這是因為其 Category 屬性繼承了 MyParentCategory 的 Background 屬性。

將項目連結到節點

您可以將項目 (例如文件或 URL) 連結到節點，只要編輯圖形的 .dgml 檔並將 Reference 屬性加入至該節點的 <Node/> 項目即可。 Reference 屬性會指定該內容的路徑。 此路徑可以是相對於 .dgml 檔案位置的路徑，或是絕對路徑。 然後，您即可從圖形上的這個節點開啟和檢視該內容。

注意事項注意事項

參考的項目必須存在，才能供您檢視。

例如，您可能會想要連結下列項目：

  • 為了描述類別的變更，您可能會將工作項目、文件或其他 .dgml 檔的 URL 連結到類別的節點。

  • 您可能會將圖層圖表連結到代表軟體邏輯架構中之圖層的群組節點。

  • 為了顯示會公開介面之元件的詳細資訊，您可能會將元件圖表連結到該介面的節點。

  • 將節點連結至 Team Foundation Server 工作項目或 Bug，或者節點的某些其他相關資訊。

若要將項目連結到節點

  1. 在圖形上，以滑鼠右鍵按一下節點，然後按一下 [檢視 DGML]。

    Visual Studio 隨即開啟圖形的 .dgml 檔案並反白顯示該節點的 <Node/> 項目。

  2. 執行下表的其中一項工作：

    若要連結

    請依照下列步驟：

    單一項目

    • 在 <Node/> 項目中加入 Reference 屬性，以指定項目的位置。

      注意事項注意事項
      每個 <Node/> 項目只能有一個 Reference 屬性。

    例如：

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

    多個項目

    1. 在 <Node/> 項目中加入新屬性，以指定每個參考的位置。

    2. 在 <Properties> 區段中：

      1. 針對每一個新的參考型別加入 <Property/> 項目。

      2. 將 Id 屬性設定為新參考屬性的名稱。

      3. 加入 IsReference 屬性並將其設為 True，讓參考出現在節點的 [移至] 捷徑功能表。

      4. 使用 Label 屬性指定節點之 [移至] 捷徑功能表上的顯示文字。

    例如：

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

    顯示在圖形中的節點名稱會加上底線。

  3. 使用 ReferenceTemplate 屬性來指定多個參考使用的共同字串 (例如 URL)，而不要在參考中重複設定該字串。

    ReferenceTemplate 屬性會指定參考之值的預留位置。 在下列範例中，ReferenceTemplate 屬性中的 {0} 預留位置將會由 <Node/> 項目中的 MyFirstReference 及 MySecondReference 屬性值取代，以產生完整路徑：

    <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. 執行下列其中一項工作以檢視參考的項目：

    若要檢視

    執行下列步驟

    單一項目

    按兩下節點。

    -或-

    以滑鼠右鍵按一下節點、指向 [移至]，然後按一下項目。

    多個項目

    以滑鼠右鍵按一下節點、指向 [移至]，然後按一下項目。

建立常用路徑的別名

以別名取代常用路徑，有助於縮減 .dgml 檔案的大小以及載入或儲存檔案所需的時間。 若要建立別名，請在 .dgml 檔案的結尾加入 <Paths></Paths> 區段。 在這個區段加入 <Path/> 項目，以定義路徑的別名：

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

若要從 .dgml 檔案中的某個項目參考別名，請以貨幣符號 ($) 和括號 (()) 括住 <Path/> 項目的 Id 值：

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

了解有向圖形標記語言 (DGML)

DGML 使用簡單的 XML 來描述循環與非循環的有向圖形。 有向圖形是一組用連結或邊緣相連的節點。 節點和連結可用來表示網路結構，例如軟體專案中的項目。 使用 DGML 可將資訊視覺化、執行複雜性分析，或單純瀏覽及編輯有向圖形。

節點和連結都稱為圖形項目，或簡稱項目。 下表說明 DGML 中所使用的項目類型：

注意事項注意事項

當您編輯 .dgml 檔案時，IntelliSense 會協助您識別每個項目的可用屬性和其值。 若要以屬性指定色彩，請使用常見色彩名稱 (例如 "Blue") 或 ARGB 十六進位值 (例如 "#ffa0b1c3")。 DGML 使用一小部分的 Windows Presentation Foundation (WPF) 色彩定義格式。 如需詳細資訊，請參閱色彩類別 (英文)。

項目

範例格式

<DirectedGraph></DirectedGraph>

這個項目是有向圖形 (.dgml) 文件的根項目。 其他所有 DGML 項目都會出現在這個項目的範圍內。

下列清單說明您可以加入的選擇性屬性：

  • Background - 圖形背景的色彩

  • BackgroundImage - 要做為圖形背景之影像檔的位置。

  • ButterflyMode - 如果為 True，則只會顯示與所選節點位於相同路徑的已連結節點。 如果沒有選取節點，則圖形會選取主要集線器。

    注意事項注意事項
    循環連結不會出現在此模式中。但是會複製參與循環關聯性的節點，以便顯示在選取的節點兩端。與選取節點相距一個層級以上的相依性不一定會按照順序出現，因為圖形配置是根據與選取節點間的最短路徑所產生。

    如需詳細資訊，請參閱 HOW TO：瀏覽和巡覽圖形文件。

  • GraphDirection - 在圖形設定為樹狀配置 (Sugiyama) 時排列節點，使大部分的連結能夠朝指定的方向排列：TopToBottom、BottomToTop、LeftToRight 或 RightToLeft。 如需詳細資訊，請參閱 HOW TO：瀏覽和巡覽圖形文件。

  • Layout - 將圖形設定為下列配置：None、Sugiyama (樹狀配置)、ForceDirected (快速叢集) 或 DependencyMatrix。 如需詳細資訊，請參閱 HOW TO：瀏覽和巡覽圖形文件。

  • NeighborhoodDistance - 在圖形設定為樹狀配置或快速叢集配置時，僅顯示距所選節點在指定連結數量 (1-7) 之遠的連結。 如需詳細資訊，請參閱 HOW TO：瀏覽和巡覽圖形文件。

  • Title - 圖形的名稱

  • ZoomLevel - 一開始顯示圖形時所使用的縮放層級。 請指定浮點值 (1 表示 100%)，或指定 Fit 讓圖形具有最適於視窗的大小。

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

此選擇性項目包含 <Node/> 項目的清單，用以定義圖形上的節點。 如需詳細資訊，請參閱 <Node/> 項目。

注意事項注意事項
當您在 <Link/> 項目中參考未定義的節點時，圖形會自動建立 <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/>

這個項目會定義單一節點。 它會出現在 <Nodes><Nodes/> 項目清單內。

這個項目必須包括下列屬性：

  • Id - 節點的唯一名稱以及 Label 屬性的預設值 (如果未指定個別的 Label 屬性)。 此名稱必須符合參考該節點之連結的 Source 或 Target 屬性。

下列清單會描述一些您可以加入的選擇性屬性：

  • Label - 節點的顯示名稱

  • 樣式屬性。 如需詳細資訊，請參閱將自訂樣式套用至節點和連結。

  • Category - 分類的名稱，這個分類識別共用此屬性的項目。 如需詳細資訊，請參閱 <Category/> 項目。

  • Property - 屬性的名稱，這個屬性識別具有相同屬性值的項目。 如需詳細資訊，請參閱 <Property/> 項目。

  • Group - 如果節點中包含其他節點，請將此屬性設定為 Expanded 或 Collapsed，以顯示或隱藏其內容。 此時必須要有 <Link/> 項目，用以加入 Category="Contains" 屬性，以及將父節點指定為來源節點，將子節點指定為目標節點。 如需詳細資訊，請參閱將節點組織成群組。

  • Visibility - 請將此屬性設為 Visible、Hidden 或 Collapsed。 使用System.Windows.Visibility。 如需詳細資訊，請參閱隱藏或顯示節點。

  • Reference - 請將此屬性設為連結到文件或 URL。 如需詳細資訊，請參閱將項目連結到節點。

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

這個項目包含 <Link> 項目的清單，可用以定義節點之間的連結。 如需詳細資訊，請參閱 <Link/> 項目。

 
<?xml version="1.0" encoding="utf-8"?>
<DirectedGraph Title="DrivingTest" xmlns="https://schemas.microsoft.com/vs/2009/dgml">
   <Links>
      <Link ... />
   </Links>
</DirectedGraph>

<Link/>

這個項目定義將來源節點連接至目標節點的單一連結。 它會出現在 <Links></Links> 項目清單內。

注意事項注意事項
如果這個項目參考未定義的節點，圖形文件會自動建立具有指定屬性 (如有指定的話) 的節點。

這個項目必須包括下列屬性：

  • Source - 連結的來源節點

  • Target - 連結的目標節點

下列清單會描述一些您可以加入的選擇性屬性：

  • Label - 連結的顯示名稱

  • 樣式屬性。 如需詳細資訊，請參閱將自訂樣式套用至節點和連結。

  • Category - 分類的名稱，這個分類識別共用此屬性的項目。 如需詳細資訊，請參閱 <Category/> 項目。

  • Property - 屬性的名稱，這個屬性識別具有相同屬性值的項目。 如需詳細資訊，請參閱 <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>

這個項目包含 <Category/> 項目的清單。 如需詳細資訊，請參閱 <Category/> 項目。

 
<?xml version="1.0" encoding="utf-8"?>
<DirectedGraph Title="DrivingTest" xmlns="https://schemas.microsoft.com/vs/2009/dgml">
   <Categories>
       <Category ... />
   </Categories>
</DirectedGraph>

<Category/>

這個項目定義 Category 屬性，用以識別共用此屬性的項目。 Category 屬性可用以組織圖形項目、提供可繼承的共用屬性，或定義其他中繼資料。

這個項目必須包括下列屬性：

  • Id - 分類的唯一名稱以及 Label 屬性的預設值 (如果未指定個別的 Label 屬性)。

下列清單會描述一些您可以加入的選擇性屬性：

  • Label - 方便讀者理解的分類名稱。

  • BasedOn - 目前項目的 <Category/> 所繼承自的父分類。

    在這個項目的範例中，FailedTest 分類會從 PassedTest 分類繼承 Stroke 屬性。 如需詳細資訊，請參閱指派分類給節點和連結中的＜若要建立階層式分類＞。

分類也提供一些基本的範本行為，用以控制節點和連結顯示於圖形時的外觀。 如需詳細資訊，請參閱將自訂樣式套用至節點和連結。

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

這個項目包含 <Property/> 項目的清單。 如需詳細資訊，請參閱 <Property/> 項目。

 
<?xml version="1.0" encoding="utf-8"?>
<DirectedGraph Title="DrivingTest" xmlns="https://schemas.microsoft.com/vs/2009/dgml">
   <Properties>
       <Property ... />
   </Properties>
</DirectedGraph>

<Property/>

這個項目定義 Property 屬性 (Attribute)，供您指派值給任何 DGML 項目或屬性 (Attribute)，包括分類和其他屬性 (Property) 在內。

這個項目必須包括下列屬性：

  • Id - 屬性 (Property) 的唯一名稱以及 Label 屬性 (Attribute) 的預設值 (如果未指定個別的 Label 屬性 (Attribute))。

  • DataType - 屬性所儲存的資料型別

如果您要讓屬性出現在 [屬性] 視窗中，請使用 Label 屬性指定該屬性的顯示名稱。

如需詳細資訊，請參閱指派屬性給節點和連結。

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

請參閱

概念

HOW TO：產生適用於 .NET 程式碼的相依性圖形

其他資源

HOW TO：瀏覽和巡覽圖形文件

HOW TO：使用相依性圖形探索程式碼