Skip to content
Branch: master
Find file History
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
assets Set up @gitgraph/js package Mar 26, 2019
src Customize how we render branches labels Apr 18, 2019
CHANGELOG.md Update Changelogs Apr 16, 2019
MIGRATE_FROM_GITGRAPH.JS.md Add "How to migrate from gitgraph.js" guide Apr 6, 2019
README.md
package.json Update changelog commands to run on publish Apr 16, 2019
rollup.config.js Set up @gitgraph/js package Mar 26, 2019
tsconfig.json

README.md

@gitgraph/js

version Changelog

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

You need to have npm installed.

Install the package with npm: npm i --save @gitgraph/js

Now you can use createGitgraph to render your graph in a DOM element:

<!DOCTYPE html>
<html>
<head>
  <!---->
</head>
<body>
  <!-- DOM element in which we'll mount our graph -->
  <div id="#graph-container"></div>
</body>
</html>
const { createGitgraph } = require("@gitgraph/js");

// Get the graph container HTML element.
const graphContainer = document.getElementById("graph-container");

// Instantiate the graph.
const gitgraph = createGitgraph(graphContainer);

// Simulate git commands with Gitgraph API.
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");

This code will render the following graph:

Example of usage

More examples

A bunch of scenarios has been simulated in our Storybook. You can give them a look 👀

You can’t perform that action at this time.