whiteinge/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Foo Branching</title>

    <style type="text/css">
    .gitgraph-tooltip {
        position: absolute;
        margin-top: -15px;
        margin-left: 25px;
        padding: 10px;
        border-radius: 5px;
        background: #EEE;
        color: #333;
        text-align: center;
        font-size: 14px;
        line-height: 20px;
    }

    .gitgraph-tooltip:after {
        position: absolute;
        top: 10px;
        left: -18px;
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: transparent;
        border-right-color: #EEE;
        content: "";
    }

    .gitgraph-detail {
        position: absolute;
        padding: 10px;
        text-align: justify;
        width: 600px;
        display: none;
    }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.4.0/gitgraph.min.js"></script>
</head>

<body>
    <canvas id="gitGraph"></canvas>

    <script>
    var config = {
        mode: 'extended',
        orientation: 'vertical',
        template: new GitGraph.Template({
            branch: {
                color: '#000000',
                lineWidth: 3,
                spacingX: 60,
                mergeStyle: 'straight',
                showLabel: true,
                labelFont: 'normal 10pt Arial',
            },
            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 mF = {dotColor: 'gray', message: 'Merge forward'};
    var cols = {
        PR: 6,
        develop: 5,
        mReleases: 1,
        arctis: 0,
        aReleases: 4,
        aHotfix: 3,
        nihilus: 2,
    };

    var gitgraph = new GitGraph(config);

    var develop = gitgraph
        .branch({name: 'develop', column: cols.develop})
        .commit(' ');

    var arctis = gitgraph
        .branch({name: 'release1', parentBranch: develop, column: cols.arctis})
        .commit(' ');

    var pr1 = gitgraph
        .branch({name: 'PR', parentBranch: develop, column: cols.PR})
        .commit(' ')
        .merge(develop, ' ');
    var pr2 = gitgraph
        .branch({name: 'PR', parentBranch: develop, column: cols.PR})
        .commit(' ')
        .merge(develop, ' ');

    var arctisRelease = gitgraph
        .branch({
            name: 'release1 release',
            parentBranch: arctis,
            column: cols.mReleases,
        })
        .commit(' ')
        .commit(' ')
        .merge(develop, mF)
        .commit(' ')
        .merge(arctis, {tag: 'v1.0.0'});
    arctis.merge(develop, mF);

    var pr3 = gitgraph
        .branch({name: 'PR', parentBranch: develop, column: cols.PR})
        .commit('(Long-running branch missed release2 feature-freeze.)');

    var nihilus = gitgraph
        .branch({name: 'release2', parentBranch: develop, column: cols.nihilus})
        .commit(' ')
        .commit(' ')
        .commit(' ');

    develop
        .commit(' ')
        .merge(pr3, {
            dotColor: 'gray',
            message: '(Update long-running branch with latest)',
        });

    pr3
        .commit(' ')
        .commit(' ')
        .merge(develop);

    var nihilusRelease = gitgraph
        .branch({
            'name': 'release2 release',
            parentBranch: nihilus,
            column: cols.aReleases,
        })
        .commit(' ')
        .commit(' ')
        .merge(develop, mF)
        .commit(' ')
        .merge(develop, mF)
        .commit(' ')
        .merge(nihilus, {tag: 'v1.1.0'});
    nihilus.merge(develop, mF);

    var nihilusRelease2 = gitgraph
        .branch({'name': 'release2 release', parentBranch: nihilus, column: cols.aReleases})
        .commit(' ')
        .commit(' ')
        .merge(develop, mF);

    var arctisRelease2 = gitgraph
        .branch({
            name: 'release1 release',
            parentBranch: arctis,
            column: cols.mReleases,
        })
        .commit(' ')
        .commit(' ')
        .merge(arctis, {tag: 'v1.0.1'});
    arctis.merge(nihilus, mF);
    nihilus.merge(nihilusRelease2, mF);
    nihilusRelease2.merge(develop, mF);

    var nihilusHotfix = gitgraph
        .branch({
            name: 'hotfix',
            parentBranch: nihilus,
            column: cols.aHotfix,
        })
        .commit(' ')
        .merge(nihilus, {tag: 'v5.1.1'});
    nihilus.merge(nihilusRelease2, mF);
    nihilusRelease2.merge(develop, mF);

    nihilusRelease2
        .commit(' ')
        .commit(' ')
        .commit(' ')
        .merge(develop, mF)
        .commit(' ')
        .merge(nihilus, {tag: 'v5.1.2'});
    nihilus.merge(develop, mF);
    </script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Foo Branching</title>

	<style type="text/css">
	.gitgraph-tooltip {
	position: absolute;
	margin-top: -15px;
	margin-left: 25px;
	padding: 10px;
	border-radius: 5px;
	background: #EEE;
	color: #333;
	text-align: center;
	font-size: 14px;
	line-height: 20px;
	}

	.gitgraph-tooltip:after {
	position: absolute;
	top: 10px;
	left: -18px;
	width: 0;
	height: 0;
	border-width: 10px;
	border-style: solid;
	border-color: transparent;
	border-right-color: #EEE;
	content: "";
	}

	.gitgraph-detail {
	position: absolute;
	padding: 10px;
	text-align: justify;
	width: 600px;
	display: none;
	}
	</style>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/gitgraph.js/1.4.0/gitgraph.min.js"></script>
	</head>

	<body>
	<canvas id="gitGraph"></canvas>

	<script>
	var config = {
	mode: 'extended',
	orientation: 'vertical',
	template: new GitGraph.Template({
	branch: {
	color: '#000000',
	lineWidth: 3,
	spacingX: 60,
	mergeStyle: 'straight',
	showLabel: true,
	labelFont: 'normal 10pt Arial',
	},
	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 mF = {dotColor: 'gray', message: 'Merge forward'};
	var cols = {
	PR: 6,
	develop: 5,
	mReleases: 1,
	arctis: 0,
	aReleases: 4,
	aHotfix: 3,
	nihilus: 2,
	};

	var gitgraph = new GitGraph(config);

	var develop = gitgraph
	.branch({name: 'develop', column: cols.develop})
	.commit(' ');

	var arctis = gitgraph
	.branch({name: 'release1', parentBranch: develop, column: cols.arctis})
	.commit(' ');

	var pr1 = gitgraph
	.branch({name: 'PR', parentBranch: develop, column: cols.PR})
	.commit(' ')
	.merge(develop, ' ');
	var pr2 = gitgraph
	.branch({name: 'PR', parentBranch: develop, column: cols.PR})
	.commit(' ')
	.merge(develop, ' ');

	var arctisRelease = gitgraph
	.branch({
	name: 'release1 release',
	parentBranch: arctis,
	column: cols.mReleases,
	})
	.commit(' ')
	.commit(' ')
	.merge(develop, mF)
	.commit(' ')
	.merge(arctis, {tag: 'v1.0.0'});
	arctis.merge(develop, mF);

	var pr3 = gitgraph
	.branch({name: 'PR', parentBranch: develop, column: cols.PR})
	.commit('(Long-running branch missed release2 feature-freeze.)');

	var nihilus = gitgraph
	.branch({name: 'release2', parentBranch: develop, column: cols.nihilus})
	.commit(' ')
	.commit(' ')
	.commit(' ');

	develop
	.commit(' ')
	.merge(pr3, {
	dotColor: 'gray',
	message: '(Update long-running branch with latest)',
	});

	pr3
	.commit(' ')
	.commit(' ')
	.merge(develop);

	var nihilusRelease = gitgraph
	.branch({
	'name': 'release2 release',
	parentBranch: nihilus,
	column: cols.aReleases,
	})
	.commit(' ')
	.commit(' ')
	.merge(develop, mF)
	.commit(' ')
	.merge(develop, mF)
	.commit(' ')
	.merge(nihilus, {tag: 'v1.1.0'});
	nihilus.merge(develop, mF);

	var nihilusRelease2 = gitgraph
	.branch({'name': 'release2 release', parentBranch: nihilus, column: cols.aReleases})
	.commit(' ')
	.commit(' ')
	.merge(develop, mF);

	var arctisRelease2 = gitgraph
	.branch({
	name: 'release1 release',
	parentBranch: arctis,
	column: cols.mReleases,
	})
	.commit(' ')
	.commit(' ')
	.merge(arctis, {tag: 'v1.0.1'});
	arctis.merge(nihilus, mF);
	nihilus.merge(nihilusRelease2, mF);
	nihilusRelease2.merge(develop, mF);

	var nihilusHotfix = gitgraph
	.branch({
	name: 'hotfix',
	parentBranch: nihilus,
	column: cols.aHotfix,
	})
	.commit(' ')
	.merge(nihilus, {tag: 'v5.1.1'});
	nihilus.merge(nihilusRelease2, mF);
	nihilusRelease2.merge(develop, mF);

	nihilusRelease2
	.commit(' ')
	.commit(' ')
	.commit(' ')
	.merge(develop, mF)
	.commit(' ')
	.merge(nihilus, {tag: 'v5.1.2'});
	nihilus.merge(develop, mF);
	</script>
	</body>
	</html>