CodeGraphyV2

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

★ 16 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://github.com/joesobo/CodeGraphyV2 'Open CodeGraphy on GitHub') extension for [Visual Studio Code](https://code.visualstudio.com).

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](https://marketplace.visualstudio.com/items?itemName=codegraphy.codegraphy)

## Features

![Squid Gif](https://raw.githubusercontent.com/joesobo/CodeGraphyV2/main/src/assets/img/squidgame.gif)

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

## New Features Added in V2

![Sliding Gif](https://raw.githubusercontent.com/joesobo/CodeGraphyV2/main/src/assets/img/slide.gif)

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

![Collapse Gif](https://raw.githubusercontent.com/joesobo/CodeGraphyV2/main/src/assets/img/collapse.gif)

### 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

![screenshot](https://raw.githubusercontent.com/joesobo/CodeGraphyV2/main/src/assets/img/screenshot2.png)

### Settings

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

```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](https://github.com/joesobo/CodeGraphy/blob/main/.github/CONTRIBUTING.md) before making a pull request.

## License

[MIT](https://opensource.org/licenses/MIT)

CodeGraphyV2

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README