CircleCI Config Visualizer

The circleci-config-visualizer is a webapp that can be used to visualize circlei config.yml files. It provides a clear overview of CI workflows and jobs in the config files.

Built using Reactjs, Redux, and Typescript.

How to use 📝

1. Go to https://syngenta.github.io/circleci-config-visualizer

2. Click on Upload button and choose your config file to visualize:

   

3. Alternatively, you can now connect your GitHub account using a Personal Access Token (PAT) and load config files directly from your repositories:

   

   If config.yml is present in the repo, the status will be shown. Click on Load Config button to load the config:

   

4. The file gets opened in a visual editor:

   

Folder structure 📁

my-app/
├─ node_modules/
├─ public/
├─ src/
│  ├─ components/
|  |  ├─ ...
|  |  ├─ Widgets/
│  ├─ data/
│  ├─ pages/
│  ├─ redux/
│  ├─ utils/
│  ├─ index.css
│  ├─ index.tsx
│  ├─ App.tsx
│  ├─ App.css
├─ .gitignore
├─ package.json
├─ README.md
├─ ...

The src directory:

1. components - Contains all react components. Contains a Widgets folder where all reusable widgets like toggle switches, inputs, buttons, etc. are kept.
2. data - Contains all files that serve static data in the application.
3. pages - Contains actual pages that compose of components and are used in react router navigation.
4. redux - Contains all the files related to redux, store, slices, reducers, etc.
5. utils - Contains reusable utility functions which are frequently used anywhere and serve a specific purpose.

Contributing 📌

See CONTRIBUTING.md file for understanding how to contribute.

License 🔐

This project is licensed under the MIT License. See the LICENSE file for more details.