Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
Untuk menyesuaikan peta kode, Anda dapat mengedit file Directed Graph Markup Language (.dgml). Misalnya, Anda dapat mengedit elemen untuk menentukan gaya kustom, menetapkan properti dan kategori ke elemen kode dan link, atau menautkan dokumen atau URL ke elemen kode atau ke link. Untuk informasi selengkapnya tentang elemen DGML, lihat Referensi Directed Graph Markup Language (DGML).
Edit file .dgml peta kode dalam editor teks atau XML. Jika peta adalah bagian dari solusi Visual Studio Anda, pilih di Penjelajah Solusi, buka menu pintasan, dan pilih Buka Dengan, Editor XML (Teks).
Catatan
Untuk membuat peta kode, Anda harus memiliki edisi Visual Studio Enterprise. Saat Anda mengedit peta kode di Visual Studio, ini akan membersihkan elemen dan atribut DGML yang tidak digunakan dengan menghapusnya saat Anda menyimpan file .dgml. Ini juga membuat elemen kode secara otomatis saat Anda menambahkan link baru secara manual. Saat Anda menyimpan file .dgml, atribut apa pun yang Anda tambahkan ke elemen mungkin akan menyusun ulang dirinya sendiri dalam urutan abjad.
Elemen kode grup
Anda dapat menambahkan grup baru atau mengonversi node yang ada menjadi grup.
Buka file .dgml dalam editor teks atau XML.
Untuk mengonversi elemen kode menjadi grup, temukan elemen
<Node/>
untuk elemen kode tersebut.- atau -
Untuk menambahkan grup baru, temukan bagian
<Nodes>
. Tambahkan elemen<Node/>
baru.Di elemen
<Node/>
, tambahkan atributGroup
untuk menentukan apakah grup tampak diluaskan atau diciutkan. Contohnya:<Nodes> <Node Id="MyFirstGroup" Group="Expanded" /> <Node Id="MySecondGroup" Group="Collapsed" /> </Nodes>
Di bagian
<Links>
, pastikan bahwa elemen<Link/>
yang memiliki atribut berikut ada untuk setiap hubungan antara elemen kode grup dan elemen kode turunannya:Atribut
Source
yang menentukan elemen kode grupAtribut
Target
yang menentukan elemen kode turunanAtribut
Category
yang menentukan hubunganContains
antara elemen kode grup dan elemen kode turunannyaContohnya:
<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>
Untuk informasi selengkapnya tentang atribut
Category
, lihat Menetapkan kategori ke elemen kode dan link.
Mengubah gaya peta
Anda dapat mengubah warna latar belakang dan warna batas peta dengan mengedit file .dgml peta. Untuk mengubah gaya link dan elemen kode, lihat Mengubah gaya elemen kode dan link.
Buka file .dgml dalam editor teks atau XML.
Di elemen
<DirectedGraph>
, tambahkan salah satu atribut berikut untuk mengubah gayanya:Warna latar belakang
Background="ColorNameOrHexadecimalValue"
Warna batas
Stroke="StrokeValue"
Contohnya:
<DirectedGraph Background="Green" xmlns="http://schemas.microsoft.com/vs/2009/dgml" > ... ... </DirectedGraph>
Mengubah gaya elemen kode dan link
Anda dapat menerapkan gaya kustom ke elemen kode berikut:
Elemen kode dan link tunggal
Grup elemen kode dan link
Grup elemen kode dan link berdasarkan kondisi tertentu
Tip
Jika Anda memiliki gaya berulang di banyak elemen kode atau link, Anda dapat mempertimbangkan untuk menerapkan kategori ke elemen kode atau link tersebut, lalu menerapkan gaya ke kategori tersebut. Untuk informasi selengkapnya, lihat Menetapkan Kategori ke Elemen kode dan Link dan Menetapkan Properti ke Elemen kode dan Link.
Untuk menerapkan gaya kustom ke elemen kode tunggal
Buka file .dgml dalam editor teks atau XML.
Temukan elemen
<Node/>
elemen kode. Tambahkan salah satu atribut ini untuk menyesuaikan gayanya:Warna latar belakang
Background="ColorNameOrHexadecimalValue"
Kerangka
Stroke="ColorNameOrHexadecimalValue"
Ketebalan kerangka
StrokeThickness="StrokeValue"
Warna teks
Foreground="ColorNameOrHexadecimalValue"
Ikon
Icon="IconFilePathLocation"
Ukuran teks
FontSize="FontSizeValue"
Jenis Teks
FontFamily="FontFamilyName"
Bobot teks
FontWeight="FontWeightValue"
Gaya teks
FontStyle="FontStyleName"
Misalnya, Anda dapat menentukan
Italic
sebagai gaya teks.Tekstur
Style="Glass"
-atau-
Style="Plain"
Bentuk
Untuk mengganti bentuk dengan ikon, atur properti
Shape
keNone
dan atur propertiIcon
ke jalur dengan file ikon.Shape="ShapeFilePathLocation"
Contohnya:
<Nodes> <Node Id="MyNode" Background="#FF008000" Stroke="#FF000000" Foreground="#FFFFFFFF" Icon="...\Icons\Globe.png"/> </Nodes>
Untuk menerapkan gaya kustom ke satu link
Buka file .dgml dalam editor teks atau XML.
Temukan elemen
<Link/>
yang berisi nama elemen kode sumber dan elemen kode target.Di elemen
<Link/>
, tambahkan salah satu atribut berikut untuk menyesuaikan gayanya:Warna kepala panah dan kerangka
Stroke="ColorNameOrHexadecimalValue"
Ketebalan kerangka
StrokeThickness="StrokeValue"
Gaya kerangka
StrokeDashArray="StrokeArrayValues"
Contohnya:
<Links> <Link Source="MyFirstNode" Target="MySecondNode" Background="Green" Stroke="#FF000000" StrokeDashArray="2,2"/> </Links>
Untuk menerapkan gaya kustom ke sebuah grup elemen kode atau link
Buka file .dgml dalam editor teks atau XML.
Jika elemen
<Styles></Styles>
tidak ada, tambahkan satu di bagian elemen<DirectedGraph></DirectedGraph>
setelah elemen<Links></Links>
.Di elemen
<Styles></Styles>
, di bagian elemen<Style/>
dan tentukan atribut berikut:TargetType="Node
|Link | Graph"
GroupLabel="
NameInLegendBox"
ValueLabel="
NameInStylePickerBox"
Untuk menerapkan gaya kustom ke semua jenis target, jangan gunakan kondisi.
Untuk menerapkan gaya bersyarat ke grup elemen kode atau link
Buka file .dgml dalam editor teks atau XML.
Di elemen
<Style/>
, tambahkan elemen<Condition/>
yang berisi atributExpression
untuk menentukan ekspresi yang mengembalikan nilai Boolean.Contohnya:
<Condition Expression="MyCategory"/>
-atau-
<Condition Expression="MyCategory > 100"/>
-atau-
<Condition Expression="HasCategory('MyCategory')"/>
Ekspresi ini menggunakan sintaksis Backus-Naur Form (BNF) berikut:
<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
Anda dapat menentukan beberapa elemen
<Condition/>
, yang semuanya harus benar untuk menerapkan gaya.Pada baris berikutnya setelah elemen
<Condition/>
, tambahkan satu atau beberapa elemen<Setter/>
untuk menentukan atributProperty
dan atributValue
tetap atau atributExpression
yang dikomputasi untuk diterapkan pada peta, elemen kode, atau link yang memenuhi ketentuan.Contohnya:
<Setter Property="BackGround" Value="Green"/>
Sebagai contoh lengkap sederhana, kondisi berikut menentukan bahwa elemen kode tampak hijau atau merah berdasarkan apakah kategori
Passed
diatur keTrue
atauFalse
:
<?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>
Tabel berikut menyertakan beberapa contoh kondisi yang dapat Anda gunakan:
Atur ukuran font sebagai fungsi dari jumlah baris kode, yang juga mengubah ukuran elemen kode. Contoh ini menggunakan ungkapan bersyarat tunggal untuk mengatur beberapa properti, FontSize
dan 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>
Atur warna latar belakang elemen kode berdasarkan properti Coverage
. Gaya dievaluasi dalam urutan kemunculannya, mirip dengan pernyataan if-else
.
Dalam contoh ini:
Jika
Coverage
adalah > 80, atur propertiBackground
menjadi hijau.Lain jika
Coverage
adalah > 50, atur propertiBackground
menjadi warna oranye berdasarkan nilai propertiCoverage
.Jika tidak, atur properti
Background
menjadi warna merah berdasarkan nilai propertiCoverage
.
<?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>
Atur properti Shape
ke None
sehingga ikon menggantikan bentuk. Gunakan properti Icon
untuk menentukan lokasi ikon.
<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>
Menetapkan properti ke elemen kode dan link
Anda dapat mengatur elemen kode dan link dengan menetapkan properti ke dalamnya. Misalnya, Anda dapat memilih elemen kode yang memiliki properti tertentu sehingga Anda dapat mengelompokkannya, mengubah gayanya, atau menyembunyikannya.
Untuk menetapkan properti ke elemen kode
Buka file .dgml dalam editor teks atau XML.
Temukan elemen
<Node/>
untuk elemen kode tersebut. Tentukan nama properti dan nilainya. Contohnya:<Nodes> <Node Id="MyNode" MyPropertyName="PropertyValue" /> </Nodes>
Tambahkan elemen
<Property/>
ke bagian<Properties>
untuk menentukan atribut seperti nama yang terlihat dan jenis datanya:<Properties> <Property Id="MyPropertyName" Label="My Property" DataType="System.DataType"/> </Properties>
Untuk menetapkan properti ke link
Buka file .dgml dalam editor teks atau XML.
Temukan elemen
<Link/>
yang berisi nama elemen kode sumber dan elemen kode target.Di elemen
<Node/>
, tentukan nama properti dan nilainya. Contohnya:<Links> <Link Source="MyFirstNode" Target="MySecondNode" MyPropertyName="PropertyValue" /> </Links>
Tambahkan elemen
<Property/>
ke bagian<Properties>
untuk menentukan atribut seperti nama yang terlihat dan jenis datanya:<Properties> <Property Id="MyPropertyName" Label="My Property Name" DataType="System.DataType"/> </Properties>
Menetapkan kategori ke elemen kode dan link
Bagian berikut menunjukkan bagaimana Anda dapat mengatur elemen kode dengan menetapkan kategori ke dalamnya, dan bagaimana Anda dapat membuat kategori hierarkis yang membantu Anda mengatur elemen kode dan menambahkan atribut ke kategori turunan dengan menggunakan pewarisan.
Untuk menetapkan kategori ke elemen kode
Buka file .dgml dalam editor teks atau XML.
Temukan elemen
<Node/>
untuk elemen kode yang Anda inginkan.Di elemen
<Node/>
, tambahkan atributCategory
untuk menentukan nama kategori. Contohnya:<Nodes> <Node Id="MyNode" Category="MyCategory" /> </Nodes>
Tambahkan elemen
<Category/>
ke bagian<Categories>
sehingga Anda dapat menggunakan atributLabel
untuk menentukan teks tampilan untuk kategori tersebut:<Categories> <Category Id="MyCategory" Label="My Category" /> </Categories>
Untuk menetapkan kategori ke link
Buka file .dgml dalam editor teks atau XML.
Temukan elemen
<Link/>
yang berisi nama elemen kode sumber dan elemen kode target.Di elemen
<Link/>
, tambahkan atributCategory
untuk menentukan nama kategori. Contohnya:<Links> <Link Source="MyFirstNode" Target="MySecondNode" Category="MyCategory" </Links>
Tambahkan elemen
<Category/>
ke bagian<Categories>
sehingga Anda dapat menggunakan atributLabel
untuk menentukan teks tampilan untuk kategori tersebut:<Categories> <Category Id="MyCategory" Label="My Category" /> </Categories>
Untuk membuat kategori hierarkis
Buka file .dgml dalam editor teks atau XML.
Tambahkan elemen
<Category/>
untuk kategori induk, lalu tambahkan atributBasedOn
ke elemen<Category/>
kategori turunan.Contohnya:
<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>
Dalam contoh ini, latar belakang
MyFirstNode
berwarna hijau karena atributCategory
-nya mewarisi atributBackground
dariMyParentCategory
.
Menautkan dokumen atau URL ke elemen kode dan link
Anda dapat menautkan dokumen atau URL ke elemen kode atau ke link dengan mengedit file .dgml peta dan menambahkan atribut Reference
ke elemen <Node/>
untuk elemen kode atau elemen <Link/>
untuk link. Anda kemudian dapat membuka dan melihat konten tersebut dari elemen kode atau link. Atribut Reference
menentukan jalur konten tersebut. Ini dapat berupa jalur relatif terhadap lokasi file .dgml atau jalur absolut.
Perhatian
Jika Anda menggunakan jalur relatif, dan file .dgml dipindahkan ke lokasi lain, jalur tersebut tidak akan diselesaikan lagi. Saat Anda mencoba membuka dan melihat konten tertaut, kesalahan yang menyatakan bahwa konten tidak dapat dilihat akan terjadi.
Misalnya, Anda mungkin ingin menautkan elemen kode berikut:
Untuk menjelaskan perubahan pada kelas, Anda dapat menautkan URL elemen kode kerja, dokumen, atau file .dgml lainnya ke elemen kode untuk kelas.
Anda dapat menautkan diagram dependensi ke elemen kode grup yang mewakili lapisan dalam arsitektur logis perangkat lunak.
Untuk menampilkan informasi selengkapnya tentang komponen yang mengekspos antarmuka, Anda dapat menautkan diagram komponen ke elemen kode untuk antarmuka tersebut.
Tautkan elemen kode ke item kerja atau bug Team Foundation Server, atau beberapa informasi lain yang terkait dengan elemen kode.
Untuk menautkan dokumen atau URL ke elemen kode
Buka file .dgml dalam editor teks atau XML.
Temukan elemen
<Node/>
untuk elemen kode yang Anda inginkan.Lakukan salah satu tugas dalam tabel berikut:
Elemen kode tunggal
Di elemen
<Node/>
atau<Link/>
, tambahkan atributReference
untuk menentukan lokasi elemen kode.Catatan
Anda hanya dapat memiliki satu atribut
Reference
per elemen.Contohnya:
<Nodes> <Node Id="MyNode" Reference="MyDocument.txt" /> </Nodes> <Properties> <Property Id="Reference" Label="My Document" DataType="System.String" IsReference="True" /> </Properties>
Beberapa elemen kode
Di elemen
<Node/>
atau<Link/>
, tambahkan atribut baru untuk menentukan lokasi setiap referensi.Di bagian
<Properties>
:Tambahkan elemen
<Property/>
untuk setiap jenis referensi baru.Atur atribut
Id
ke nama atribut referensi baru.Tambahkan atribut
IsReference
dan atur keTrue
untuk membuat referensi muncul di menu pintasan Buka Referensi elemen kode.Gunakan atribut
Label
untuk menentukan teks tampilan pada menu pintasan Buka Referensi elemen kode.
Contohnya:
<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>
Pada peta, nama elemen kode muncul digarisbawahi. Saat Anda membuka menu pintasan untuk elemen kode atau link, Anda akan melihat menu pintasan Buka Referensi yang berisi elemen kode tertaut untuk Anda pilih.
Gunakan atribut
ReferenceTemplate
untuk menentukan string umum, seperti URL, yang digunakan oleh banyak referensi sebagai ganti dari mengulangi string tersebut dalam referensi.Atribut
ReferenceTemplate
menentukan tempat penampung untuk nilai referensi. Dalam contoh berikut,{0}
tempat penampung di atributReferenceTemplate
akan diganti dengan nilai atributMyFirstReference
danMySecondReference
di elemen<Node/>
untuk menghasilkan jalur lengkap:<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>
Untuk melihat elemen kode atau elemen kode yang direferensikan dari peta, buka menu pintasan untuk elemen kode atau link. Pilih Buka Referensi lalu elemen kode.