joesobo / codegraphyv2

V2 of CodeGraphy. VSCode force-based graph extension for displaying file connections

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 files, gain valuable insights via a force based node graph, and more!

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

Simply this extension helps you better understand file connections. With its force-based graph you can get a completely different perspective of the architecture of your codebase and make quick informed decisions about the entire repository.

Install CodeGraphy

Install CodeGraphy for VSCode

Features

• D3 physics based graph
• Color coding nodes
• Multiple color palette options
• Customizable overrides
• File blacklist
• and more!

New Features Added in V2

• Favorite
• Filter
• Search
• Add/Update/Delete Files and Nodes
• Multi-line import
• Collapsible nodes
• Displays connections to external packages (node_modules)
• Switch between files through graph nodes
• Switch between different connection display modes (Interactions vs classic Directory)
• Slide to meet your desired node depth to display
• Switch between different node size factors (Connections vs Line count)
• Switch between different base color palette (D3 vs Random)
• Variety of D3 base palettes
• Variety of D3 force sliders to change graph physics
• Variety of options to hide / display different features within the graph
• Analyzed table view of directory contents with color overrides
• Entirely built on Vite & D3

Node Graph

CodeGraphy's main feature is its ability to display the file hierarchy in a completely new perspective. Look within your current directory and visualize the connections between your files. Many of the commonly used features in a normal file hierarchy apply here too!

• Ability to open files directly from nodes
• See the what classic directory mode looks like when graphed

Settings

You can customize the blacklist of any files or folders you want ignored. Add this configuration to your vscode settings.json

"codegraphy.blacklist": [
    ".spec.",
    ".vscode",
    ".git",
    ".github",
    "node_modules",
    "dist",
	...
],

All the customizable settings in Codegraphy can also be added into your workspace settings.json to save state in-between sessions.

Nodes

• connectionType: "Interaction" | "Directory"
• nodeSize: "Lines" | "Connections"
• showNodeModules: boolean
• showOrphans: boolean
• showLabels: boolean
• showOutlines: boolean
• showArrows: boolean
• doCollisions: boolean
• favorites: Array of paths to files

D3 Forces

• chargeForce: number
• linkDistance: number

Colors

• nodeColor: "D3" | "Random"
• selectedD3Color: string
• selectedNodeColor: string
• favoriteNodeColor: string
• outlineColor: string

Known Issues

• This extension is currently being developed for the JS programming language, hopefully more support will come soon.
• This extension does not support custom import paths ex: import x from '@/src/components'

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

codegraphyv2's Issues

How to use the CodeGraphy plugin?

I'm sorry to disturb you. I have some question in using CodeGraphy plugin. When I install this in my vscode, I don't understand how to use it. I run my code, but it is nothing happened. I would appreciate it if you can help me！

Feature Request: Resize to window

Could you please add the feature to resize to window so that when you resize the Explorer window, the graph resizes too.

Depth slider