CODEWITHSUNDEEP
git-workflow
holyAsh
holyAsh

Reputation: 343

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

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

Upvotes: 20

Views: 35210

Answers (5)

Ashley Frieze
Ashley Frieze

Reputation: 5443

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/

Upvotes: 0

Se7s
Se7s

Reputation: 11

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.

Upvotes: 1

HeyZiko
HeyZiko

Reputation: 1720

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.

Upvotes: 12

gaoagong
gaoagong

Reputation: 1255

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.

Upvotes: 17

Michael Wild
Michael Wild

Reputation: 26341

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

Upvotes: 4

Related Questions