I would like to use GitGraph.js to generate some nice looking graphs for documentation of workflows. Therefor I need these graphs as png files.
My first attempt was to create a static html page, load the gitgraph.js, create the graph, load it browser and take a screenshot to save the result as png.
<html>
<head><script src="https://cdn.jsdelivr.net/npm/@gitgraph/js"></script></head>
<body>
<div id="graph-container"></div>
<script>
const graphContainer = document.getElementById("graph-container");
const gitgraph = GitgraphJS.createGitgraph(graphContainer);
const master = gitgraph.branch("master");
master.commit("Initial commit");
master.commit("Second commit");
</script>
</body>
</html>
Just to get the graph:
As these steps are painful work for more than one picture, I would like to do it automatically.
In my dreams I have a file for each picture containing only the javascript code, e.g. graph_A.js:
const gitgraph = GitgraphJS.createGitgraph(graphContainer);
const master = gitgraph.branch("master");
master.commit("Initial commit");
master.commit("Second commit");
Next step is to call a batch script, press a button or execute a command in my favorite IDE (in this case Visual Studio Code) and after a few seconds I have a graph_A.png with the result as shown above.
As I'm new to javascript can you give me some hints how to solve my problem? Any advice what kind of toolchain I can use?
Thank you very much in advance from a low level embedded C programmer ;-)
