What is a Gitflow Diagram? How to Make a Gitflow Diagram & Visualize Branching Strategies

What is Gitflow?

Gitflow, which comes from the combination of “Git” and “workflow," is an alternative Git branching model that organizes work into five or more branch types.

These types of branches are the main branch, develop branch, feature branch, release branch, and hotfix branch. Gitflow helps teams organize their work so that they can quickly and visually describe the workflows associated with their branching strategy and releases.

Read on or jump ahead to one of the flowing sections to learn more about gitflow diagramming:

How Gitflow Diagrams Help Your Team

For teams with lots of developers, working through a complex development workflow is the key to success. These teams often adopt a branching strategy to plan and structure releases, manage new changes, and work more productively, but being able to clearly describe that strategy is important. Git does not keep track of these branches — it’s up to you and your team to understand where the branches exist on a tree.

You can use a gitflow diagram, a type of workflow diagram, to map out and describe a potential workflow approach for your team in order to get buy-in and feedback before putting it into place.

Or, you can use gitflow diagrams to explain how existing workflows run throughout your development organization. This is especially important for growing teams; as you learn how to assign work, Gliffy can help you visualize feature branches across different teams of developers.

When your developers have a clear understanding of where their work exists within the whole workflow, they can avoid time-consuming and expensive merge conflicts and work more efficiently. 

Video: Gitflow Diagram Tutorial

How to Make a Gitflow Diagram: Step-by-Step

Some tools automatically visualize your workflows and branching strategy, but you can always do a sketch or create a gitflow diagram with a diagramming app like Gliffy. To follow along with this tutorial, make sure you have Gliffy added to your Confluence space.

Step 1: Start with Your Master Branch

The master branch of your gitflow diagram describes production releases, so all changes and development work completed funnel up to this branch. 

To draw this branch in Gliffy, start by dragging a circle onto the canvas and labeling it with the version of your product where you’d like to start. This could be V0 if your diagram is describing a brand new product or your current version if your diagram will only be showing future branches on an existing product. 

Then, you’ll draw a line extending from that circle to the right. This line is your master or main branch. You can select this line and type to label it, if you’d like.

You can add additional circles to represent additional product releases and versions moving down this branch.

Step 2: Draw a Development Branch for Work in Progress

The second branch in your gitflow workflow diagram is the development branch. This branch is used throughout the development process for pre-production code — so a lot of work between released versions of your product will branch off of this line.

Do add a second branch to your diagram, select the Master branch line and use the keyboard shortcut Cmd + D or Ctrl + D to quickly duplicate it. Drag it to sit beneath the master branch and click to edit the label on the branch if you’d like. 

The builds taking place on this branch may not have names, so you can copy the circles used to describe each version on your main branch and remove their labels to capture work being done on the development branch.

Step 3: Connect Your Branches to Show Where Work is Created and Merged

Using the connector tool, draw arrows between the circles on the master and development branches to show where work is being created and merged.

To create these arrows, just drag and drop end points between shapes and then use the Edit Line Properties menu to style the line and add an arrowhead. For more help on this step, check out our Tips for Drawing Lines & Connectors video.

To help make it easier to see the arrows you’ve added, you can make the lines representing each branch a different color or style them to dashes.

Step 4: Add Additional Branches for Features, Releases, and Hotfixes

While most of the work will take place on the develop branch and the master branch tracks what work is completed and released, there are three additional branches to support your work. These are the release, hotfix, and feature branches. 

Add feature branches below your develop branch; this allows you to describe the workflow of specific features being developed off of and merged back onto the development branch.

If you add a release branch or hotfix branch, it would sit between the develop and master branches because it describes work being done to move work from development to the product. If you're using a different branching strategy, the placement of these branches would vary.

Step 5: Style Your Diagram

Adding colors or additional styling can make it easier to see what work is being done on each branch or understand the gitflow workflow at a glance.

For example, giving each feature branch their own color can help clarify your diagram. To change the colors of shapes or lines in your diagram, just click on them and then click on the Edit Shape Properties icon in the menu that appears. 

Example Gitflow Diagram

If you have multiple releases and multiple teams, you may need to adopt a different branching strategy to guide your developers. Whatever strategy works best for your team, make sure you've got a clear way to describe it so that your developers can avoid merge conflicts, improve productivity, and collaborate efficiently.

Visualize Your Gitflow or Branching Strategy in Gliffy

Ready to make your own gitflow diagram or describe another branching strategy? Gliffy makes it easy, with drag-and-droppable shapes and the ability to easily add descriptions to the branches in your diagram. Get started with a free trial for Confluence and you’ll be able to describe your workflow in no time.

Try GliffY Free