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

Asked 22/2, 2013 at 10:15 Answered 29/1, 2019 at 11:47

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

Teapot answered 22/2, 2013 at 10:15 Comment(0)

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.

Antiseptic answered 16/7, 2015 at 15:46 Comment(0)

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.

Halfdan answered 2/11, 2015 at 22:55 Comment(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. – Insane 10/4, 2017 at 12:54

Have fun trying to remove ally the sexy sax man references with their level of documentation... – Introvert 9/6, 2020 at 17:37

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

Lail answered 22/2, 2013 at 10:24 Comment(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. – Teapot 22/2, 2013 at 18:22

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.

Mimosaceous answered 17/10, 2018 at 13:9 Comment(0)

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 <[email protected]>",
  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/

Boyles answered 29/1, 2019 at 11:47 Comment(0)

Recommended topics

Hot tags