Visualize your project's architecture in a simple and interactive way.
Broch is a command-line interface (CLI) tool designed to analyze your project's structure and generate an interactive dependency map. With Broch, you can get a clear and graphical view of how your files are interconnected, making it easier to understand, maintain, and debug your code.
Automatic Dependency Analysis: Detects import, require, include, and more relationships in JavaScript, TypeScript, HTML, CSS, and PHP files.
Interactive Visualization: Generates a dynamic HTML map using vis-network that allows you to explore your project's connections intuitively.
High Customization: Configure colors, labels, and output filename through a simple broch.config.json file.
Easy to Use: With just a couple of commands, you can have a complete view of your project's architecture.
To start using Broch, make sure you have Node.js (version 12 or higher) installed on your system. Then, install the package globally through npm:
npm i -g brochBy installing it globally, you'll be able to run the broch command from any directory.
Broch is very simple to use. Here are the available commands.
broch mapThis is the heart of Broch. It scans a directory (of your choice) and generates the dependency map.
Alias:
broch mUsage Examples:
Scan selected directory: Simply run the command in your project's root, and broch will give you a list of current directories, select the one you want, and you're done.
broch previewOnce you've generated the map, this command will allow you to open it directly in your browser.
Alias:
broch pUsage Example:
This command will look for the brochMap.html file (or the name you've configured) and open it.
broch versionShows the version of Broch you have installed.
Alias:
broch vbrochbroch helpShows a summary of available commands and options.
Alias:
broch h{
"outputFileName": "brochMap.html",
"colors": {
"html": "#E44D26",
"css": "#1572B6",
"js": "#F7DF1E",
"php": "#777BB4",
"image": "#4CAF50",
"rust": "#DE3423",
"json": "#000000",
"yml": "#cb171e",
"md": "#000000",
"py": "#3776AB",
"java": "#b07219",
"other": "#CCCCCC"
},
"labels": {
"js": "JS/TS",
"yml": "YML",
"md": "Markdown",
"py": "Python",
"java": "Java"
}
}The first time you run Broch, a broch.config.json file will be automatically created in your directory. This file allows you to customize the tool according to your preferences.
outputFileName: Define the name of the HTML file that will be generated.
colors: Assign a color to each file type according to its extension. Feel free to add or modify as many as you want!
labels: Allows you to define custom labels for the color legend in the map, making visualization even clearer.
Copyright © 2025 Jan Queralt
Hereby, permission is granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
First off, thank you for considering contributing to Broch! Your help is essential for keeping it great.
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated 💕.
We welcome contributions of all kinds, including bug reports, feature requests, documentation improvements, and code enhancements.
Before creating a new contribution, please check the Issues page to see if a similar one already exists.
- To report a bug: Please open an issue and provide as much detail as possible, including steps to reproduce it, the expected outcome, and the actual result. The more information, the better!
- To suggest a feature: Open an issue and describe your idea, explaining why you think it would be a valuable addition to Broch.
If you want to contribute with code, please follow these steps:
-
Fork the Repository Click the "Fork" button at the top right of this page to create your own copy of the repository.
-
Clone Your Fork Clone the repository to your local machine:
git clone https://github.com/YOUR_USERNAME/broch.git
cd broch -
Set Up Your Environment Install the project dependencies and link your local copy to make the
brochcommand available globally for testing.# Install dependencies npm install # Link the package to use the 'broch' command locally npm link
and if npm link doesn't work try
npm link broch
The
npm linkcommand is crucial as it allows you to run and test your local version of Broch from any directory on your system. -
Create a New Branch Create a descriptive branch for your changes. It's a good practice to name it based on the feature or fix you are working on.
# Example for a new feature git checkout -b feature/add-new-parser # Example for a bug fix git checkout -b fix/resolve-rendering-issue
-
Make Your Changes Write your code, fix the bug, or improve the documentation. Make sure your changes are clean and follow the existing code style.
-
Commit Your Changes Commit your changes with a clear and concise message, following conventional commit standards if possible.
git commit -m "feat: Add support for YAML configuration files" -
Push to Your Fork Push your changes to your forked repository.
git push origin feature/add-new-parser
-
Open a Pull Request Go to the original Broch repository and open a new Pull Request. Provide a clear title and a detailed description of the changes you've made, linking to any relevant issues.
To ensure our community is welcoming and respectful, please read and follow our Code of Conduct. By participating in this project, you agree to abide by its terms.
Thank you again for your interest in contributing to Broch!
Features · Installation · Commands · Configuration · License · Contribution · Code of Conduct · Repository · Issues · NPM
Quick commands: broch map · broch preview · broch version · broch help
© 2025 Jan Queralt · MIT License · To contribute or report issues, open an Issue in the repository.
