brechin/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Git Graph</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.11.4/gitgraph.min.js"></script>
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.11.4/gitgraph.min.css"/>
</head>
<body>
<canvas id="gitGraph"></canvas>

<script type="application/javascript">
    var graphConfig = new GitGraph.Template({
        branch: {
            color: "#000000",
            lineWidth: 3,
            spacingX: 60,
            mergeStyle: "straight",
            showLabel: true,                // display branch names on graph
            labelFont: "normal 10pt Arial",
            labelRotation: 0
        },
        commit: {
            spacingY: -30,
            dot: {
                size: 8,
                strokeColor: "#000000",
                strokeWidth: 4
            },
            tag: {
                font: "normal 10pt Arial",
                color: "yellow"
            },
            message: {
                color: "black",
                font: "normal 12pt Arial",
                displayAuthor: false,
                displayBranch: false,
                displayHash: false,
            }
        },
        arrow: {
            size: 8,
            offset: 3
        }
    });

    var config = {
        template: graphConfig,
        mode: "extended",
        orientation: "horizontal"
    };

    var gitgraph = new GitGraph(config);
    var master = gitgraph.branch({name: "master", column: 0});
    master.commit("initial");
    var feature_branch = master.branch({name: "feature/1", column: 3});
    feature_branch.commit().commit();
    feature_branch.merge(master);
    var feature_branch2 = master.branch({name: "feature/2", column: 3});
    feature_branch2.commit().commit();
    feature_branch2.merge(master);
    var big_feature = master.branch({name: "feature/big3", column: 4})
    big_feature.commit();
    var release = master.branch({name: "release/1", column: 1});
    release.commit({tag: "v1.0.0-rc1", tagColor: 'gray'});

    var releasefix = master.branch({name: "fix/release/1", column:2});
    releasefix.commit();
    releasefix.merge(master);
    master.merge(big_feature);

    release.commit({message: "Picked/Ported fix", dotColor: "red", tag: "v1.0.0"});

    var feature_branch2 = master.branch({name: "feature/4", column: 3});
    feature_branch2.commit();
    feature_branch2.merge(master);
    master.merge(big_feature);

    var release2 = master.branch({name: "release/2", column: 5});
    release2.commit({tag: "v2.0.0-rc1", tagColor: 'gray'});
    release2.commit({tag: "v2.0.0", tagColor: 'yellow'});


    var feature_branch2 = master.branch({name: "feature/5", column: 3});
    feature_branch2.commit();
    feature_branch2.merge(master);
    master.merge(big_feature);
    big_feature.merge(master);

    var hotfix = master.branch({name: "hotfix/1", column: 2});
    hotfix.commit().commit();
    hotfix.merge(master);

    release.commit({message: "Picked/Ported hotfix", dotColor: "red", tag: "v1.0.1"});
    release2.commit({message: "Picked/Ported hotfix", dotColor: "red", tag: "v2.0.1"});

</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Git Graph</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.11.4/gitgraph.min.js"></script>
	<link rel="stylesheet" type="text/css"
	href="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.11.4/gitgraph.min.css"/>
	</head>
	<body>
	<canvas id="gitGraph"></canvas>

	<script type="application/javascript">
	var graphConfig = new GitGraph.Template({
	branch: {
	color: "#000000",
	lineWidth: 3,
	spacingX: 60,
	mergeStyle: "straight",
	showLabel: true, // display branch names on graph
	labelFont: "normal 10pt Arial",
	labelRotation: 0
	},
	commit: {
	spacingY: -30,
	dot: {
	size: 8,
	strokeColor: "#000000",
	strokeWidth: 4
	},
	tag: {
	font: "normal 10pt Arial",
	color: "yellow"
	},
	message: {
	color: "black",
	font: "normal 12pt Arial",
	displayAuthor: false,
	displayBranch: false,
	displayHash: false,
	}
	},
	arrow: {
	size: 8,
	offset: 3
	}
	});

	var config = {
	template: graphConfig,
	mode: "extended",
	orientation: "horizontal"
	};

	var gitgraph = new GitGraph(config);
	var master = gitgraph.branch({name: "master", column: 0});
	master.commit("initial");
	var feature_branch = master.branch({name: "feature/1", column: 3});
	feature_branch.commit().commit();
	feature_branch.merge(master);
	var feature_branch2 = master.branch({name: "feature/2", column: 3});
	feature_branch2.commit().commit();
	feature_branch2.merge(master);
	var big_feature = master.branch({name: "feature/big3", column: 4})
	big_feature.commit();
	var release = master.branch({name: "release/1", column: 1});
	release.commit({tag: "v1.0.0-rc1", tagColor: 'gray'});

	var releasefix = master.branch({name: "fix/release/1", column:2});
	releasefix.commit();
	releasefix.merge(master);
	master.merge(big_feature);

	release.commit({message: "Picked/Ported fix", dotColor: "red", tag: "v1.0.0"});

	var feature_branch2 = master.branch({name: "feature/4", column: 3});
	feature_branch2.commit();
	feature_branch2.merge(master);
	master.merge(big_feature);

	var release2 = master.branch({name: "release/2", column: 5});
	release2.commit({tag: "v2.0.0-rc1", tagColor: 'gray'});
	release2.commit({tag: "v2.0.0", tagColor: 'yellow'});


	var feature_branch2 = master.branch({name: "feature/5", column: 3});
	feature_branch2.commit();
	feature_branch2.merge(master);
	master.merge(big_feature);
	big_feature.merge(master);

	var hotfix = master.branch({name: "hotfix/1", column: 2});
	hotfix.commit().commit();
	hotfix.merge(master);

	release.commit({message: "Picked/Ported hotfix", dotColor: "red", tag: "v1.0.1"});
	release2.commit({message: "Picked/Ported hotfix", dotColor: "red", tag: "v2.0.1"});

	</script>
	</body>
	</html>