{"id":652,"date":"2022-04-04T21:00:00","date_gmt":"2022-04-05T02:00:00","guid":{"rendered":"https:\/\/blog.felineflock.com\/?p=652"},"modified":"2024-01-03T21:12:14","modified_gmt":"2024-01-04T03:12:14","slug":"my-new-vs-code-extension-dependency-graph-for-salesforce-visualize-your-project","status":"publish","type":"post","link":"https:\/\/blog.felineflock.com\/index.php\/2022\/04\/04\/my-new-vs-code-extension-dependency-graph-for-salesforce-visualize-your-project\/","title":{"rendered":"My New VS Code Extension: &#8216;Dependency Graph for Salesforce&#8217; \u2013 Visualize Your Project"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"867\" height=\"720\" src=\"https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-25.png\" alt=\"\" class=\"wp-image-653\" srcset=\"https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-25.png 867w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-25-300x249.png 300w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-25-768x638.png 768w\" sizes=\"auto, (max-width: 867px) 100vw, 867px\" \/><\/figure>\n\n\n\n<p id=\"ember1718\">I&#8217;ve just released my first extension for VS Code: <strong>Dependency Graph for Salesforce<\/strong><\/p>\n\n\n\n<p id=\"ember1719\">You can install it via the following link: <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=FernandoFernandez.dependencygraphforsf\">DependencyGraphForSF<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"820\" src=\"https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-26-1024x820.png\" alt=\"\" class=\"wp-image-654\" srcset=\"https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-26-1024x820.png 1024w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-26-300x240.png 300w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-26-768x615.png 768w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-26.png 1249w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p id=\"ember1721\">After installing it, open a workspace with metadata from a Salesforce org (or use SFDX to download the metadata from the Salesforce org using the command &#8220;SFDX: Retrieve Source from Org&#8221;).<\/p>\n\n\n\n<p id=\"ember1722\">Then type Ctrl + Shift + P to open the command palette and select one of the six options below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"712\" src=\"https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-27-1024x712.png\" alt=\"\" class=\"wp-image-655\" srcset=\"https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-27-1024x712.png 1024w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-27-300x209.png 300w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-27-768x534.png 768w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-27.png 1194w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p id=\"ember1724\">The extension will open a browser tab with the graph after scanning the code.<\/p>\n\n\n\n<p id=\"ember1725\">This extension doesn&#8217;t use any Salesforce APIs and relies exclusively on the metadata that you have downloaded from the org using SFDX. It scans the code looking for references between each element, then draws a dependency graph using <a href=\"https:\/\/mermaid-js.github.io\/mermaid\/#\/\">Mermaid.JS<\/a>.<\/p>\n\n\n\n<p id=\"ember1726\">The source code (Node.js) is available at <a href=\"https:\/\/github.com\/fmendes\/dependencygraphforsf\">https:\/\/github.com\/fmendes\/dependencygraphforsf<\/a> .<\/p>\n\n\n\n<p id=\"ember1727\">Here are a few examples of graphs extracted from code:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"841\" src=\"https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-28-1024x841.png\" alt=\"\" class=\"wp-image-656\" srcset=\"https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-28-1024x841.png 1024w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-28-300x246.png 300w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-28-768x631.png 768w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-28.png 1218w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"956\" src=\"https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-29-1024x956.png\" alt=\"\" class=\"wp-image-657\" srcset=\"https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-29-1024x956.png 1024w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-29-300x280.png 300w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-29-768x717.png 768w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-29.png 1071w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"850\" src=\"https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-31-1024x850.png\" alt=\"\" class=\"wp-image-659\" srcset=\"https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-31-1024x850.png 1024w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-31-300x249.png 300w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-31-768x638.png 768w, https:\/\/blog.felineflock.com\/wp-content\/uploads\/2024\/01\/image-31.png 1204w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p id=\"ember1731\">Depending on the number of elements in the org (classes, components, &#8230;) the graph may hit the limits of Mermaid.js but I haven&#8217;t had a chance to find the limit yet.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve just released my first extension for VS Code: Dependency Graph for Salesforce You can install it via the following link: DependencyGraphForSF After installing it, open a workspace with metadata from a Salesforce org (or use SFDX to download the metadata from the Salesforce org using the command &#8220;SFDX: Retrieve Source from Org&#8221;). Then type [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-652","post","type-post","status-publish","format-standard","hentry","category-blog"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/posts\/652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/comments?post=652"}],"version-history":[{"count":1,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/posts\/652\/revisions"}],"predecessor-version":[{"id":660,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/posts\/652\/revisions\/660"}],"wp:attachment":[{"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/media?parent=652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/categories?post=652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/tags?post=652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}