Learn how to use Vxplain’s Code-to-Diagram feature to generate instant visualizations of code snippets, helping you understand complex logic and control flow.
Generate diagrams from code snippets to quickly understand control flow and business logic. This is particularly useful for analyzing small, complex pieces of code without needing to visualize the entire application.To use this feature, simply select a piece of code in your editor, right-click, and choose Vxplain: Generate Diagram.
Was this page helpful?
⌘I
{"docsConfig":{"theme":"maple","$schema":"https://mintlify.com/docs.json","name":"Documentation","description":"Learn how to use Vxplain, a VS Code extension for code visualization and analysis.","colors":{"primary":"#5609DB","light":"#CCB0FC","dark":"#15803D"},"logo":{"light":"https://mintcdn.com/vxplain/FHf24DsTSE9UlH1m/images/logo/light.svg?fit=max\u0026auto=format\u0026n=FHf24DsTSE9UlH1m\u0026q=85\u0026s=a727f66669ad063347ce4783554064c9","dark":"https://mintcdn.com/vxplain/FHf24DsTSE9UlH1m/images/logo/dark.svg?fit=max\u0026auto=format\u0026n=FHf24DsTSE9UlH1m\u0026q=85\u0026s=19603ac5ae988a807a58048de22162f2"},"favicon":"/favicon.svg","background":{"color":{"light":"#fff","dark":"#000"}},"footer":{"socials":{"x":"https://x.com/Vxplain_ai","github":"https://github.com/vxplain","linkedin":"https://www.linkedin.com/company/vxplain","discord":"https://discord.com/invite/FKxaBdyBJY","youtube":"https://www.youtube.com/@vxplain_ai"},"links":[{"header":"Product","items":[{"label":"Pricing","href":"https://www.vxplain.com/pricing"},{"label":"Features","href":"https://www.vxplain.com/features"},{"label":"Blog","href":"https://www.vxplain.com/blog"}]},{"header":"Company","items":[{"label":"Contact","href":"https://www.vxplain.com/contact"},{"label":"Privacy Policy","href":"https://www.vxplain.com/privacy"},{"label":"Terms \u0026 Conditions","href":"https://www.vxplain.com/terms"}]}]},"seo":{"metatags":{"viewport":"width=device-width, initial-scale=1.0","og:title":"Vxplain Documentation","og:description":"Vxplain is a visualisation tool for coding agents, it provides you ability to autogenerate architecture diagrams, call graphs, flowcharts etc, helping your team understand codebase 5x faster.","og:image":"https://cdn.jsdelivr.net/gh/vxplain/media@main/website/meta/og-image.webp","twitter:card":"summary_large_image","twitter:site":"@Vxplain_ai","twitter:creator":"@Vxplain_ai","canonical":"https://docs.vxplain.com","keywords":"vxplain, vscode extension, code visualization, architecture diagram, call graph, code understanding, developer tool, static analysis"}},"contextual":{"options":["copy","view","chatgpt","claude","perplexity","mcp","cursor","vscode"]},"navigation":{"global":{"anchors":[{"anchor":"Website","icon":"book-open-cover","href":"https://www.vxplain.com"},{"anchor":"Community","icon":"discord","href":"https://discord.com/invite/FKxaBdyBJY"}]},"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"vxplain","hasAudioNarration":false,"actualSubdomain":"vxplain","customDomains":["docs.vxplain.com"],"gitSource":{"type":"github","owner":"vxplain","repo":"docs","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6a20cb2597ef5ad2ffa9b4bf","collectionId":"7d0c328b-22b9-4dfe-930b-e462c1507417","schemaVersion":"v2"},"feedback":{"thumbs":true},"entitlements":{},"buildId":"6a20cb2597ef5ad2ffa9b4bf:success","clientVersion":"0.0.3880","searchFilterCounts":[{"language":"default","tag":"Guides","count":11},{"language":"default","tag":"Features","count":6},{"language":"default","tag":"Customization","count":3},{"language":"default","tag":"Getting started","count":2}]},"assistantConfig":{},"hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-v7-file-tree","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"pause-universal-search-reconcile","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"per-site-search-delta","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-branches-v2-autocommit","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-branches-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-private-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"teamspace","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-nav-generations","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-agent-model-picker","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"client-snapshot-docs-config","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"isAtlas":false,"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"src/features/code-to-diagram","slug":"/src/features/code-to-diagram","pageMetadata":{"title":"Code-to-Diagram","description":"Learn how to use Vxplain's Code-to-Diagram feature to generate instant visualizations of code snippets, helping you understand complex logic and control flow.","icon":"diagram-project","href":"/src/features/code-to-diagram"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Learn how to use Vxplain’s Code-to-Diagram feature to generate instant visualizations of code snippets, helping you understand complex logic and control flow.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={code:`code`,p:`p`,..._provideComponents(),...props.components},{Frame}=_components;if(!Frame)_missingMdxReference(`Frame`,true);return _jsxs(_Fragment,{children:[_jsx(_components.p,{children:`Generate diagrams from code snippets to quickly understand control flow and business logic. This is particularly useful for analyzing small, complex pieces of code without needing to visualize the entire application.`}),`\n`,_jsxs(_components.p,{children:[`To use this feature, simply select a piece of code in your editor, right-click, and choose `,_jsx(_components.code,{children:`Vxplain: Generate Diagram`}),`.`]}),`\n`,_jsx(Frame,{children:_jsx(`img`,{src:`https://mintcdn.com/vxplain/FHf24DsTSE9UlH1m/images/gif/diagram_usage.gif?s=8ea94957346d9c39e9057c3970ae4c59`,alt:`Generating a diagram from a selected code snippet in Vxplain`,className:`mint-rounded-lg`,noZoom:true,\"data-og-width\":`786`,width:`786`,\"data-og-height\":`480`,height:`480`,\"data-path\":`images/gif/diagram_usage.gif`,\"data-optimize\":`true`,\"data-opv\":`3`})})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Code-to-Diagram","description":"Learn how to use Vxplain's Code-to-Diagram feature to generate instant visualizations of code snippets, helping you understand complex logic and control flow.","icon":"diagram-project","href":"/src/features/code-to-diagram"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[],"codeExamples":{}},"jsLinks":[],"dynamicCss":".mint-rounded-lg {\n border-radius: 0.5rem\n}","subdomain":"vxplain","siteName":"Documentation","title":"Vxplain Documentation","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2025-10-09T23:00:55.831Z","originalFileLocation":"src/features/code-to-diagram.mdx"},"headHtml":"\u003cmeta data-mint-head name=\"description\" content=\"Learn how to use Vxplain\u0026#x27;s Code-to-Diagram feature to generate instant visualizations of code snippets, helping you understand complex logic and control flow.\">\u003cmeta data-mint-head name=\"keywords\" content=\"vxplain, vscode extension, code visualization, architecture diagram, call graph, code understanding, developer tool, static analysis\">\u003cmeta data-mint-head name=\"application-name\" content=\"Documentation\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/vxplain/3STesFzscpmt-Oul/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/vxplain/3STesFzscpmt-Oul/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/vxplain/3STesFzscpmt-Oul/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/vxplain/3STesFzscpmt-Oul/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/vxplain/3STesFzscpmt-Oul/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/vxplain/3STesFzscpmt-Oul/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/vxplain/3STesFzscpmt-Oul/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/vxplain/3STesFzscpmt-Oul/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/vxplain/3STesFzscpmt-Oul/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Vxplain Documentation\">\u003cmeta data-mint-head property=\"og:description\" content=\"Vxplain is a visualisation tool for coding agents, it provides you ability to autogenerate architecture diagrams, call graphs, flowcharts etc, helping your team understand codebase 5x faster.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Documentation\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.vxplain.com/src/features/code-to-diagram\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://cdn.jsdelivr.net/gh/vxplain/media@main/website/meta/og-image.webp\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Vxplain Documentation\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Vxplain is a visualisation tool for coding agents, it provides you ability to autogenerate architecture diagrams, call graphs, flowcharts etc, helping your team understand codebase 5x faster.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://cdn.jsdelivr.net/gh/vxplain/media@main/website/meta/og-image.webp\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/vxplain/3STesFzscpmt-Oul/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Documentation\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#5609DB\">\u003cmeta data-mint-head name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\u003cmeta data-mint-head name=\"twitter:creator\" content=\"@Vxplain_ai\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.vxplain.com/src/features/code-to-diagram\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/src/features/code-to-diagram.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.vxplain.com/#organization\",\"name\":\"Documentation\",\"url\":\"https://docs.vxplain.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/vxplain/FHf24DsTSE9UlH1m/images/logo/light.svg?fit=max\u0026auto=format\u0026n=FHf24DsTSE9UlH1m\u0026q=85\u0026s=a727f66669ad063347ce4783554064c9\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.vxplain.com#website\",\"name\":\"Documentation\",\"url\":\"https://docs.vxplain.com\",\"publisher\":{\"@id\":\"https://docs.vxplain.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.vxplain.com/src/features/code-to-diagram#webpage\",\"url\":\"https://docs.vxplain.com/src/features/code-to-diagram\",\"name\":\"Code-to-Diagram\",\"description\":\"Learn how to use Vxplain's Code-to-Diagram feature to generate instant visualizations of code snippets, helping you understand complex logic and control flow.\",\"dateModified\":\"2025-10-09T23:00:55.831Z\",\"isPartOf\":{\"@id\":\"https://docs.vxplain.com#website\"},\"breadcrumb\":{\"@id\":\"https://docs.vxplain.com/src/features/code-to-diagram#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.vxplain.com/src/features/code-to-diagram#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Features\",\"item\":\"https://docs.vxplain.com/src/features/navigation\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Code-to-Diagram\",\"item\":\"https://docs.vxplain.com/src/features/code-to-diagram\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.vxplain.com/src/features/code-to-diagram#article\",\"headline\":\"Code-to-Diagram\",\"name\":\"Code-to-Diagram\",\"description\":\"Learn how to use Vxplain's Code-to-Diagram feature to generate instant visualizations of code snippets, helping you understand complex logic and control flow.\",\"url\":\"https://docs.vxplain.com/src/features/code-to-diagram\",\"mainEntityOfPage\":{\"@id\":\"https://docs.vxplain.com/src/features/code-to-diagram#webpage\"},\"image\":\"https://cdn.jsdelivr.net/gh/vxplain/media@main/website/meta/og-image.webp\",\"dateModified\":\"2025-10-09T23:00:55.831Z\",\"publisher\":{\"@id\":\"https://docs.vxplain.com/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.vxplain.com#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Documentation\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Documentation","nav":{"global":{"anchors":[{"anchor":"Website","icon":"book-open-cover","href":"https://www.vxplain.com"},{"anchor":"Community","icon":"discord","href":"https://discord.com/invite/FKxaBdyBJY"}]},"tabs":[{"tab":"Guides","groups":[{"group":"Getting started","pages":[{"title":"Introduction","icon":"book-open-cover","href":""},{"title":"Quickstart","icon":"rocket","href":"/src/quickstart"}]},{"group":"Features","pages":[{"title":"Navigations","icon":"arrow-pointer","href":"/src/features/navigation"},{"title":"Architecture Diagrams","description":"Learn how to generate and interpret architecture diagrams in Vxplain to get a high-level overview of your project for both the entire codebase and specific folders.","icon":"map","href":"/src/features/arch-diagrams"},{"title":"Code-to-Diagram","icon":"diagram-project","href":"/src/features/code-to-diagram"},{"title":"Call Graphs","description":"Visualize function call relationships and trace code execution with interactive call graphs in Vxplain.","icon":"arrow-up-right","href":"/src/features/call-graphs"},{"title":"Directory Tree","icon":"folder-tree","href":"/src/features/directory-tree"},{"title":"Summaries","icon":"align-justify","href":"/src/features/summaries"}]},{"group":"Customization","pages":[{"title":"Settings \u0026 Configurations","icon":"gear","href":"/src/customization/settings"},{"title":"Configuring LLM Providers","icon":"robot","href":"/src/customization/llm-providers"},{"title":"Keyboard Shortcuts","icon":"keyboard","href":"/src/customization/keyboard-shortcuts"}]}]}]},"title":"Vxplain Documentation","buildId":"dpl_8yzRtH9eErzJnpfBBed2uBNYhAmY","deploymentId":"dpl_8yzRtH9eErzJnpfBBed2uBNYhAmY","dynamics":["07c022d89b"],"chunks":["Frame-DdQVcPWg.js","DynamicMarkdown-CgudvU3l.js"]}