如何绘制（可视化）Git工作流程

Question

你肯定知道那些漂亮的Git时间线图表，可以可视化Git分支策略和工作流程。

我根据客户的特定需求创建了一个Git工作流程。为了交接我的工作，我不想扫描我的图纸，也不想用Photoshop修饰它们。有没有免费的工具可以创建这些图表？（当然有 - 但这些工具中有哪些特别适合这个任务呢？）理想情况下，它们是基于Web的，或者至少对于这种一次性场合易于学习。 （不，LaTeX不是:)）

谢谢！

- Zsolt Szilagyi

---

你可能会对这个感兴趣：https://github.com/Jubobs/gitdags/wiki - jub0bs

来吧，LaTeX并不是那么糟糕 :) - jub0bs

如果你不知道LaTeX，那么这段话的意思是“如果你不知道LaTeX的话”。我很喜欢gitdags网页上说它可以“轻松”创建图表，但是却在示例中包含了50行类似象形文字的代码。 - Erik Funkenbusch

@ErikFunkenbusch 这都是相对的。LaTeX 有很多样板文件，不是最友好的语言。如果我需要为 Web 生成 Git 图表，而不是学术论文或演示文稿，我很可能不会使用 gitdags。 - jub0bs

Answer 1

您可以使用JS代码描述您的流程。这里是GitGraph.js - 一个简单的JavaScript库，旨在帮助您以可视化方式呈现git分支工作流、棘手的git命令或任何您想象中的git树形结构。

- naXa stands with Ukraine

---

这非常完美，正好满足我的需求。非常容易设置和使用。 - dchayka

最棒的答案就是这个！ - Eric Bishard

虽然 GitGraph.js 提供了一个相当易于使用的机制来生成这些图形，但我发现他们的文档相当缺乏。如果你想做一些超出教程描述范围之外的事情，就要准备深入挖掘了。 - austinbruch

@austinbruch 完全同意。我之前只是看了这个经过验证的答案才开始用它，结果陷入了文档地狱，因为我想做的事情超出了教程范围，而且他们的文档就像你说的那样不够详细。 - Abhinav Thakur

Answer 2

这里有几个工具：

• yWorks - 免费（Java）
• LucidChart - 基于web
• draw.io - 基于web，免费，开源
• OmniGraffle - 仅限mac，需要付费但有免费试用版，是我个人最喜欢的
• MS Visio

只是其中的一些。对于此类工具，有很多图形用户界面可供使用。

如果您想编写一些代码并从中生成图片，请看看GraphViz或Ditaa。

- mik01aj

---

我很喜欢Draw.io。唯一不喜欢的是，它保存为XML文件，必须在draw.io网站上打开。而且，它无法真正以横向方式打印。:( 但它确实很好地帮助我为公司创建了GitFlow。 - JGTaylor

draw.io 允许导出为 .vsdx 文件。 - Frodo Baggins

Draw.io（现在称为diagrams.net）对我非常有帮助。如果有人想要一个模板，可以使用我的作为起点：https://gist.github.com/bryanbraun/8c93e154a93a08794291df1fcdce6918 - bryanbraun

Answer 3

我喜欢Visualizing Git，这是一个开源的工具，在您的浏览器中运行。您输入 Git 命令，它会生成图形。

以下图形由以下命令生成：

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

- Ellen Spertus

Answer 4

现在（截至2022年2月），GitHub Pages支持mermaid，因此您可以集成代表Git工作流程的mermaid图表：

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

结果：

警告：此功能在2021年的Beta版本中出现过链接1，但现在（2022年2月）已经被官方文档所引用链接2，仍处于“实验性”阶段。

- VonC