Skip to content

shixin-guo/repo-visualizer

This branch is 12 commits behind githubocto/repo-visualizer:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
repo-visualizer
Mar 30, 2022
9d29231 · Mar 30, 2022
Aug 15, 2021
Jul 22, 2021
Mar 26, 2022
Aug 15, 2021
Aug 14, 2021
Aug 5, 2021
Mar 16, 2022
Mar 30, 2022
Mar 9, 2022
Mar 26, 2022
Aug 14, 2021
Aug 22, 2021
Aug 15, 2021
Aug 22, 2021

Repository files navigation

Repo Visualizer

A GitHub Action that creates an SVG diagram of your repo. Read more in the writeup.

Please note that this is an experiment. If you have feature requests, please submit a PR or fork and use the code any way you need.

For a full demo, check out the githubocto/repo-visualizer-demo repository.

Inputs

output_file

A path (relative to the root of your repo) to where you would like the diagram to live.

For example: images/diagram.svg

Default: diagram.svg

excluded_paths

A list of paths to folders to exclude from the diagram, separated by commas.

For example: dist,node_modules

Default: node_modules,bower_components,dist,out,build,eject,.next,.netlify,.yarn,.vscode,package-lock.json,yarn.lock

excluded_globs

A semicolon-delimited array of file globs to exclude from the diagram, using micromatch syntax. Provided as an array.

For example:

excluded_globs: "frontend/*.spec.js;**/*.{png,jpg};**/!(*.module).ts"
# Guide:
# - 'frontend/*.spec.js' # exclude frontend tests
# - '**/*.{png,ico,md}'  # all png, ico, md files in any directory
# - '**/!(*.module).ts'  # all TS files except module files

root_path

The directory (and its children) that you want to visualize in the diagram, relative to the repository root.

For example: src/

Default: '' (current directory)

max_depth

The maximum number of nested folders to show files within. A higher number will take longer to render.

Default: 9

should_push

Whether to make a new commit with the diagram and push it to the original repository.

Should be a boolean value, i.e. true or false. See commit_message and branch for how to customise the commit.

Default: true

commit_message

The commit message to use when updating the diagram. Useful for skipping CI. For example: Updating diagram [skip ci]

Default: Repo visualizer: updated diagram

branch

The branch name to push the diagram to (branch will be created if it does not yet exist).

For example: diagram

artifact_name

The name of an artifact to create containing the diagram.

If unspecified, no artifact will be created.

Default: '' (no artifact)

file_colors

You can customize the colors for specific file extensions. Key/value pairs will extend the default colors.

For example: '{"js": "red","ts": "green"}' default: '{}'

Outputs

svg

The contents of the diagram as text. This can be used if you don't want to handle new files.

Example usage

You'll need to run the actions/checkout Action beforehand, to check out the code.

- name: Checkout code
  uses: actions/checkout@master
- name: Update diagram
  uses: githubocto/[email protected]
  with:
    output_file: "images/diagram.svg"
    excluded_paths: "dist,node_modules"

Accessing the diagram

By default, this action will create a new commit with the diagram on the specified branch.

If you want to avoid new commits, you can create an artifact to accompany the workflow run, by specifying an artifact_name. You can then download the diagram using the actions/download-artifact action from a later step in your workflow, or by using the GitHub API.

Example:

- name: Update diagram
  id: make_diagram
  uses: githubocto/[email protected]
  with:
    output_file: "output-diagram.svg"
    artifact_name: "my-diagram"
- name: Get artifact
  uses: actions/download-artifact@v2
  with:
    name: "my-diagram"
    path: "downloads"

In this example, the diagram will be available at downloads/my-diagram.svg Note that this will still also create a commit, unless you specify should_push: false!

Alternatively, the SVG description of the diagram is available in the svg output, which you can refer to in your workflow as e.g. ${{ steps.make_diagram.outputs.svg }}.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 97.2%
  • TypeScript 2.8%