How to draw (visualise) git workflows

Question

You sure know those nice git timeline charts, visualising a git branching strategy and workflow.

I created a git workflow based upon the specific needs of a customer. To hand over my work, I´d prefer not to scan my drawings, nor to fiddle with photoshop. Are there any free tools to create those? (i.e. sure they are - but are any of these especcially well suited for the task?) Ideally theye are web-based, or at least easy to learn for such a one-time-occasion. (No, LaTeX isn´t :) )

Thanks!

You may be interested in this: https://github.com/Jubobs/gitdags/wiki — jub0bs, Dec 08 '14 at 14:57
@Jubobs - if you don't know LaTeX it is. I like how the gitdags page says it allows you to "effortlessly" create the diagrams, and then includes 50 lines of hieroglyphics in an example. — Erik Funkenbusch, Apr 20 '17 at 15:20
@ErikFunkenbusch It's all relative. LaTeX has a lot of boilerplate and isn't the friendliest language. If I had to produce Git graphs for the Web, as opposed to an academic paper or presentation, I most likely wouldn't use gitdags. — jub0bs, Apr 24 '17 at 21:47

naXa stands with Ukraine · Accepted Answer · 2022-03-04T19:06:36.093

56

You can describe your flow using JS code. Here is GitGraph.js

- a simple JavaScript library which is meant to help you visually presenting git branching stuff like a git workflow, a tricky git command or whatever git tree you'd have in mind.

edited Mar 04 '22 at 19:06

answered Dec 28 '17 at 08:20

naXa stands with Ukraine

35,493
19
190
259

1

This is perfect and does exactly what I needed. Very easy to setup and use. – dchayka Mar 22 '18 at 20:49
dopest answer is this! – Eric Bishard May 06 '20 at 23:35
2

While GitGraph.js does give a pretty easy to use mechanism to generate these graph, I have found their documentation to be pretty lacking. If you want to do anything outside what's described in the tutorials, prepare to go digging deep. – austinbruch May 18 '20 at 19:17
@austinbruch Totally agreed. I just picked it up after seeing this verified answer, and got descended into a documentation hell, since what I want to do is off the tutorial, and their documentation, just like you said, is insufficient. – Abhinav Thakur Jul 16 '21 at 21:55

score 23 · Answer 2 · edited Aug 29 '17 at 13:08

23

There are:

yWorks - free (Java)
LucidChart - web-based
draw.io - web-based, free, open source
OmniGraffle - mac only, paid with free trial, my personal favourite
MS Visio

...to name just a few. There's a lot of GUI tools for this.

If you'd like to write some code and generate pictures out of it, take a look at GraphViz or Ditaa.

edited Aug 29 '17 at 13:08

Frodo Baggins

8,290
6
45
55

answered Dec 08 '14 at 14:23

mik01aj

11,928
15
76
119

1

I liked Draw.io. The only thing I did not like about it, is it saves as an XML file that must be open on the draw.io site. And, it does not print in Landscape for real. :( But it sure did a fine job of allowing me to crate a GitFlow for my company. – JGTaylor Jul 12 '16 at 21:30
draw.io allows exporting to .vsdx – Frodo Baggins Aug 29 '17 at 13:09
8

Draw.io (now diagrams.net) worked well for me. If anyone wants a template, you can use mine as a starting place: https://gist.github.com/bryanbraun/8c93e154a93a08794291df1fcdce6918 – bryanbraun Apr 25 '20 at 02:50

score 3 · Answer 3 · answered Mar 08 '22 at 02:11

I like Visualizing Git, which is open source and runs in your browser. You type in git commands, and it creates the graph.

The below graph was generated by this sequence:

git commit -m "second commit"
git commit
git commit
git checkout HEAD^^
git checkout -b feature
git commit
git commit
git checkout master
git merge feature

VonC · Answer 4 · 2022-03-08T09:44:30.127

Now that GitHub pages do support mermaid (Feb. 2022), you can integrate mermaid graph representing a Git workflow:

gitGraph :                     
options                        
{"key": "value",               
"nodeWidth": 150               
}                              
end                            
    commit                     
    branch newbranch           
    checkout newbranch         
    commit                     
    commit                     
    checkout master            
    commit                     
    commit                     
    merge newbranch

Result:

Warning: was in Beta in 2021, but now (Feb. 2022) referenced by the official documentation, still as "experimental".

How to draw (visualise) git workflows

4 Answers4