Skip to content

What do you think about Visual Studio Marketplace? We are looking for feedback from developers like you! Take the survey

| Marketplace
Sign in
Visual Studio Code>Visualization>CodeGraphyNew to Visual Studio Code? Get it now.

CodeGraphy

joesobo

|
201 installs
| (1) | Free
Graphical file interface
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Marketplace Marketplace Marketplace

CodeGraphy

CodeGraphy enhances files connections inside VSCode and allows for birds eye views of each repository. It helps you to visualize code hierarchy at a glance, seamlessly navigate and explore your file hierarchy, gain valuable insights via a force based node graph UI, and more.

CodeGraphy is an open-source extension for Visual Studio Code.

Simply CodeGraphy helps you better understand file connections. With its force-based graph you can get a completely different view of the architecture of your codebase and make quick informed decisions about where your code is "knotted" in the graph.

Install CodeGraphy

Install CodeGraphy for VSCode

Features

Main Graph

Node Graph

CodeGraphy's main feature is its ability to display the file hierarchy within the current directory and the connections within the files of the directory.

  • Ability to open files directly from CodeGraphy
  • Can change the style of the force-based graph
  • Displays connections between files

Full Extension

Settings

To color of nodes and selected node of the graph add these configurations to your settings.json. You can also blacklist any files or folders you want ignored. These can be manually editted from the Config section of the extension.

"codegraphy.selectedColor": "#fff",
"codegraphy.nodeSettings": [
  {
    "extension": ".js",
    "color": "#4985be"
  },
  {
    "extension": ".ts",
    "color": "#eac73e"
  },
  {
    "extension": ".vue",
    "color": "#74cc4b"
  },
  {
    "extension": ".json",
    "color": "#dc6844"
  }
],
"codegraphy.blacklist": [
    ".spec.",
    ".vscode",
    ".git",
    ".github",
    "node_modules",
    "dist",
],

Node Group Settings

Known Issues

This extension is still a work in progress. It is subject to major changes still.

  • Does not include custom relative pathing (Ex: @/file/to/path.js)

Contributing

Contributions are always welcome for CodeGraphy! Please make sure to read the Contributing Guide before making a pull request.

License

MIT

Copyright (c) 2022-present, Joe Soboleski

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft