Git workflow diagram creation is done through a graph/flowchart design tool?

Question

When I look at most of the websites people demonstrate their git workflow in pictorial fashion. I would like to know which tool is used for the same ?
For example https://wiki.phpbb.com/images/c/c8/Phpbb-git-workflow-small.png
and http://nvie.com/posts/a-successful-git-branching-model/

I am implementing git for the enterprise and would like to show a similar diagrammatic representation (as show in example), so I was wondering if there was a tool which will help me build it

score 17 · Answer 1 · answered Jul 16 '15 at 15:46

I asked Vincent Driessen about the diagram creator program he used for his blog post http://nvie.com/posts/a-successful-git-branching-model/ and he mentioned that he used Apple Keynote.

Personally I am playing around with draw.io for diagram creation and I'm liking it so far. It is free thus far and is pretty simple to use.

If your question is about creating diagrams specific to your git repository history then I would suggest using GitFlowChart. Vincent has an example showing GitFlowChart here.

score 12 · Answer 2 · answered Nov 02 '15 at 22:55

12

I'm putting together a git workflow manual for my team and discovered GitGraph.js, which is open source and does the trick for me.

answered Nov 02 '15 at 22:55

HeyZiko

1,660
15
28

2

I have played with GitGraph and found it really hard to use properly. The documentation is non-existent and the implementation contains a few bugs and missing settings. – nicbou Apr 10 '17 at 12:54
Have fun trying to remove ally the sexy sax man references with their level of documentation... – Sinaesthetic Jun 09 '20 at 17:37

score 4 · Answer 3 · answered Feb 22 '13 at 10:24

4

The ProGit Book uses Dia. See the repo for some inspiration.

answered Feb 22 '13 at 10:24

Michael Wild

24,977
3
43
43

1

I have been playing with dia until now and must say that its not that great to use and the diagrams shown in the example seems to be coming from some other tools, could not create them in Dia - those fonts , properties etc not modifiable . I wonder which other tool that could be. – holyAsh Feb 22 '13 at 18:22

score 1 · Answer 4 · answered Oct 17 '18 at 13:09

1

You can use this gitgraphjs is a java script library that gives you the ability to create a visualization for git repos or git concepts.

answered Oct 17 '18 at 13:09

Se7s

11
1

score 0 · Answer 5 · answered Jan 29 '19 at 11:47

http://gitgraphjs.com/ is an option:

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.15.1/gitgraph.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.15.1/gitgraph.min.js" />
</head>

<body>

<canvas id="gitGraph"></canvas>

<script>
var gitgraph = new GitGraph({
  template: "metro",
  orientation: "horizontal",
  mode: "compact"
});

var master = gitgraph.branch("master");

gitgraph.commit().commit().commit();         // 3 commits upon HEAD
var develop = gitgraph.branch("develop");    // New branch from HEAD
var myfeature = develop.branch("myfeature"); // New branch from develop

// Well, if you need to go deeper…

var hotfix = gitgraph.branch({
  parentBranch: develop,
  name: "hotfix",
  column: 2             // which column index it should be displayed in
});

master.commit("This commit is mine"); // Add a commit on master branch

develop.commit({
  dotColor: "white",
  dotSize: 10,
  dotStrokeWidth: 10,
  sha1: "666",
  message: "Pimp dat commit",
  author: "Jacky <prince@dutunning.com>",
  tag: "a-super-tag",
  onClick: function(commit) {
    console.log("Oh, you clicked my commit?!", commit);
  }
});
</script>
</body>

Demonstrated by this fiddle - https://jsfiddle.net/h5mrLesu/

Git workflow diagram creation is done through a graph/flowchart design tool?

5 Answers5