{"id":14982746,"url":"https://github.com/tmr232/function-graph-overview","last_synced_at":"2026-02-21T17:07:31.212Z","repository":{"id":255856363,"uuid":"850013055","full_name":"tmr232/function-graph-overview","owner":"tmr232","description":"Control-Flow Graph (CFG) Visualizer for VSCode","archived":false,"fork":false,"pushed_at":"2025-10-01T19:21:52.000Z","size":6196,"stargazers_count":58,"open_issues_count":24,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-10-07T01:28:14.719Z","etag":null,"topics":["control-flow-graph","visualization","vscode-extension"],"latest_commit_sha":null,"homepage":"https://tmr232.github.io/function-graph-overview/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tmr232.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-08-30T17:41:39.000Z","updated_at":"2025-09-20T19:15:00.000Z","dependencies_parsed_at":"2024-09-07T14:29:11.285Z","dependency_job_id":"619cb4e1-9fef-4dfe-813f-1a266a3265a5","html_url":"https://github.com/tmr232/function-graph-overview","commit_stats":{"total_commits":224,"total_committers":1,"mean_commits":224.0,"dds":0.0,"last_synced_commit":"e989a09c5991aea98a7d24e8755e1e11b030fe37"},"previous_names":["tmr232/function-graph-overview"],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/tmr232/function-graph-overview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmr232%2Ffunction-graph-overview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmr232%2Ffunction-graph-overview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmr232%2Ffunction-graph-overview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmr232%2Ffunction-graph-overview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tmr232","download_url":"https://codeload.github.com/tmr232/function-graph-overview/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmr232%2Ffunction-graph-overview/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281654314,"owners_count":26538638,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-29T02:00:06.901Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["control-flow-graph","visualization","vscode-extension"],"created_at":"2024-09-24T14:05:57.012Z","updated_at":"2026-02-21T17:07:31.205Z","avatar_url":"https://github.com/tmr232.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Function Graph Overview\n\n[Control-flow graph](https://en.wikipedia.org/wiki/Control-flow_graph) visualization for VS Code.\n\nThis extension adds a Graph Overview to VS Code, showing the CFG (control-flow graph) for the current function.\n\n![Screenshot of the extension](./media/screenshots/banner_dark.png)\n\n## Getting Started\n\n1. Install via the [extension page](https://marketplace.visualstudio.com/items?itemName=tamir-bahar.function-graph-overview) at the VSCode Marketplace.\n\n2. Open the command-palette (\u003ckbd\u003eCtrl+Shift+P\u003c/kbd\u003e or \u003ckbd\u003e⇧⌘P\u003c/kbd\u003e) and run the `Function Graph Overview: Show Graph Overview` command.\n\n3. Open your code and place your cursor inside a function to see the graph.\n\n4. You can drag the graph view to the other sidebar or to the bottom panel\n\n### JetBrains IDEs\n\nIf you're using a JetBrains IDE, see [the JetBrains plugin](https://github.com/tmr232/jb-function-graph-overview)\nfor further instructions.\n\n### Demo\n\nYou can try it out via an [interactive demo](https://tmr232.github.io/function-graph-overview/) if you don't want to install it.\n\nNote that the demo only supports a single function and ignores the cursor location.\n\n## Dark Mode\n\nBoth dark, light, and custom color schemes are supported.\n\n| Dark                                                             | Light                                                              | Custom                                                               |\n| ---------------------------------------------------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------------- |\n| ![CFG with dark colors](media/screenshots/color-scheme/dark.png) | ![CFG with light colors](media/screenshots/color-scheme/light.png) | ![CFG with custom colors](media/screenshots/color-scheme/custom.png) |\n\nBy default, the color scheme will match the VSCode theme (light or dark).\n\nYou can change to a different preset via the settings:\n\n![The \"Color Scheme\" menu in the VSCode settings](media/screenshots/color-scheme/settings.png)\n\n### Custom Color Schemes\n\nCustom color schemes are created via the [interactive demo](https://tmr232.github.io/function-graph-overview/).\n\n1. Enable the `Color Picker` above the graph\n2. Select the colors you want for your color scheme\u003cbr/\u003e\n   ![The interactive color picker](media/screenshots/color-scheme/color-picker.png)\n3. Press the `Copy` button to copy the color scheme into the clipboard\n4. Paste the config into the `Custom Color Scheme` field in the VSCode extension settings.\u003cbr/\u003e\n   ![The Custom Color Scheme field in the settings](media/screenshots/color-scheme/settings-custom.png)\n\n## Pan \u0026 Zoom\n\nIf the graph is too small, enable the \"Pan \u0026 Zoom\" checkbox.\nYou can zoom with the mouse wheel, and pan by dragging the mouse.\nAdditionally, the view will automatically pan to the highlighted node when it changes.\n\n![Demonstration of pan \u0026 zoom in VSCode](media/gif/panzoom-demo.gif)\n\n## Supported Languages\n\n- [Go](https://tmr232.github.io/function-graph-overview/?language=go)\n- [C](https://tmr232.github.io/function-graph-overview/?language=c)\n- [C++](https://tmr232.github.io/function-graph-overview/?language=cpp)\n- [Python](https://tmr232.github.io/function-graph-overview/?language=python)\n- [TypesScript](https://tmr232.github.io/function-graph-overview/?language=typescript) \u0026 [TSX]((https://tmr232.github.io/function-graph-overview/?language=tsx))\n- [JavaScript](https://tmr232.github.io/function-graph-overview/?language=typescript) \u0026 [JSX]((https://tmr232.github.io/function-graph-overview/?language=tsx))\n- [C#](https://tmr232.github.io/function-graph-overview/?language=csharp)\n- [Java](https://tmr232.github.io/function-graph-overview/?language=java)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftmr232%2Ffunction-graph-overview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftmr232%2Ffunction-graph-overview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftmr232%2Ffunction-graph-overview/lists"}