[Feature Request] Save dependency graph to image file

[ThibaudAV]

Expected Behavior

Be able to save the dependency graph in an image file. Something like: yarn nx affected:dep-graph --saveAs="dep-graph.png"

Current Behavior

It is not possible to save the graph as an image with yarn nx dep-graph cmd

Context

The final goal would be to be able to post this image in new pull request with github actions for example

[dopsonbr]

An option to save it as an html file would also be nice. I would like to include it in my compodoc generated documentation. Right now I have a build step that starts the server, curls it, and writes the output to file. package.json

...
scripts: {
"affected:dep-graph": "nx affected:dep-graph",
"scrape-dep-graph": "sleep 10; mkdir -p dist/dep-graph && curl -s http://localhost:4211 > dist/dep-graph/index.html && exit 0",
}

yarn run-p --race affected:dep-graph scrape-dep-graph

then my .compodocrc.json

{
  "assetsFolder": "dist/dep-graph"
}

[mehrad-rafigh]

Hi all,

I would like to implement this feature behind the file flag, as it currently outputs the dep graph as a json file. So, once implemented, one could invoke it with: nx affected:dep-graph --file=output.html or nx affected:dep-graph --file=output.png

The easiest option to implement is the "export to html". The implementation is there already. It just needs a bit of refactoring.

About the possibility to export to png...The only thing I came up with is to use puppeeter to make a screenshot of the html. TBH, I am not a fan of this, because this includes another dependency (:-1: ), which will increase nx's size and has to be maintained.

What do you guys say? Do you know any better alternative on how to generate a png?

[ThibaudAV]

I came to almost the same conclusion. I wasn't a fan of adding a dependency to make a dom in image (or capturing a url).

The other idea I had is to redo the graph with a tool supporting Command Line Rendering ( anychart, vega, ...) but 🤷‍♂

[philipjfulcher]

I'm investigating how we can implement outputting the dep graph as an image. A recent PR added the ability to output a static HTML version of the dep graph: https://github.com/nrwl/nx/pull/3049. Look for the static HTML option in our next release.

[FrozenPandaz]

Hi, sorry about this.

This was mislabeled as stale. We are testing ways to mark not reproducible issues as stale so that we can focus on actionable items but our initial experiment was too broad and unintentionally labeled this issue as stale.

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[petergrau]

@FrozenPandaz marked as stale again?

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[hadrien-toma]

I would like to serve it from Compodoc too (focused on different things along the documentation goes).

~Also having it statically saved as HTML would be interesting too, thank you @dopsonbr for the trick about it!~

We can generate the HTML natively :heart: : yarn run nx dep-graph --file=dist/dep-graph/index.html

[flo-sch]

Just in case in can be useful, there are some external tools available to do that, such as capture-website (using puppeteer under the hood --> may not work on every single system though)

# First get html file
nx dep-graph --file dist/dep-graph/index.html
# Then take a screenshot of it
capture-website dist/dep-graph/index.html --output dist/dep-graph/screenshot.jpg

It comes with plenty of options to tweak the capture

 # 1- automatically overwrite last screenshot
 # 2- adding a white background
 # 3- clicking on "Select all" before taking the screenshot
 # 4- waiting for the #graph-container element (not really needed here but just to illustate)
 # 5- only capturing the #graph-container element (take out the sidebar)
 # 6- setting image height & scale (adjust those to your needs)
capture-website dist/dep-graph/index.html --output dist/dep-graph/screenshot.png\
 --overwrite\
 --style 'body { background-color: white; }'\
 --click-element 'button[data-cy="selectAllButton"]'\
 --wait-for-element '#graph-container'\
 --element '#graph-container'\
 --scale-factor 1 --height 640

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[philipjfulcher]

This issue wasn't mentioned when the original PR was merged to save the project graph to an image. Downloading the graph as an image has been available in the browser for awhile, but not as an option at the CLI. This is because most project graphs are very large, and rendering the entire thing is pretty resource-intensive. The browser client intentionally has tools to filter the project graph down to a small, understandable chunk using filters, focusing, and path tracing. Some of those options are available at the CLI, but not all of them. Until we can easily provide the same filtering functionality at the CLI, the image download will stay in the browser.

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.