@gitgraph/js
Draw pretty git graphs with vanilla JS.
This is the vanilla JS rendering library of GitGraph.js.
If you're coming from gitgraph.js
package
Here's a guide to help you migrate to @gitgraph/js
.
Get started
Example with ParcelJS
You need to have npm installed.
Create a new folder for your project and go there: mkdir your-project && cd your-project
Initialize your npm project: npm init -y
Install the package with npm: npm i --save @gitgraph/js
Install Parcel bundler: npm i --save-dev parcel-bundler
Now you can use createGitgraph
to render your graph in a DOM element:
Create an index.html
file:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="graph-container"></div>
<script src="./index.js"></script>
</body>
</html>
Create an index.js
file:
import { createGitgraph } from "@gitgraph/js";
const graphContainer = document.getElementById("graph-container");
const gitgraph = createGitgraph(graphContainer);
const master = gitgraph.branch("master");
master.commit("Initial commit");
const develop = gitgraph.branch("develop");
develop.commit("Add TypeScript");
const aFeature = gitgraph.branch("a-feature");
aFeature
.commit("Make it work")
.commit("Make it right")
.commit("Make it fast");
develop.merge(aFeature);
develop.commit("Prepare v1");
master.merge(develop).tag("v1.0.0");
Add start command in your package.json
:
{
"name": "your-project",
"version": "1.0.0",
"scripts": {
+ "start": "parcel index.html"
}
Run npm start
. You should see the following graph:
Example with browser bundle
TODO: fill
More examples
A bunch of scenarios has been simulated in our Storybook. You can give them a look 👀