diff --git a/static/js/variant.js b/static/js/variant.js
index d7b060548a..fb2d8752fd 100644
--- a/static/js/variant.js
+++ b/static/js/variant.js
@@ -248,9 +248,9 @@ var variants = {
 		this.styleGraphGroup( '#menusections', 'MENU-SECTIONS-ACTIVE-BG-color' )
 	},
 
-	generateGraphEdge: function( e ){
+	generateGraphGroupedEdge: function( e ){
 		var edge = '';
-		if( e.fallback ){
+		if( e.fallback && e.group == this.findColor( e.fallback ).group ){
 			edge += e.fallback+':::'+e.fallback+' --> '+e.name+':::'+e.name;
 		}
 		else{
@@ -259,6 +259,14 @@ var variants = {
 		return edge;
 	},
 
+	generateGraphVarGroupedEdge: function( e ){
+		var edge = '';
+		if( e.fallback && e.group != this.findColor( e.fallback ).group ){
+			edge += e.fallback+':::'+e.fallback+' --> '+e.name+':::'+e.name;
+		}
+		return edge;
+	},
+
 	generateGraph: function(){
 		var g_groups = {};
 		var g_handler = '';
@@ -275,33 +283,34 @@ var variants = {
 			'    direction TB\n' +
 			'    subgraph menuheader["header"]\n' +
 			'      direction LR\n' +
-					g_groups[ 'header' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+					g_groups[ 'header' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) +
 			'    end\n' +
 			'    subgraph menusections["sections"]\n' +
 			'      direction LR\n' +
-					g_groups[ 'sections' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+					g_groups[ 'sections' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) +
 			'    end\n' +
 			'  end\n' +
 			'  subgraph maincontent["content"]\n' +
 			'    direction TB\n' +
-					g_groups[ 'content' ].reduce( function( a, e ){ return a + '    ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+					g_groups[ 'content' ].reduce( function( a, e ){ return a + '    ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) +
 			'    subgraph mainheadings["headings"]\n' +
 			'      direction LR\n' +
-					g_groups[ 'headings' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+					g_groups[ 'headings' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) +
 			'    end\n' +
 			'    subgraph inlinecode["inline code"]\n' +
 			'      direction LR\n' +
-					g_groups[ 'inline code' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+					g_groups[ 'inline code' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) +
 			'    end\n' +
 			'    subgraph blockcode["code blocks"]\n' +
 			'      direction LR\n' +
-					g_groups[ 'code blocks' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+					g_groups[ 'code blocks' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) +
 			'    end\n' +
 			'    subgraph coloredboxes["colored boxes"]\n' +
 			'      direction LR\n' +
-					g_groups[ 'colored boxes' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphEdge( e ) + '\n'; }.bind( this ), '' ) +
+					g_groups[ 'colored boxes' ].reduce( function( a, e ){ return a + '      ' + this.generateGraphGroupedEdge( e ) + '\n'; }.bind( this ), '' ) +
 			'    end\n' +
 			'  end\n' +
+				this.variantvariables.reduce( function( a, e ){ return a + '  ' + this.generateGraphVarGroupedEdge( e ) + '\n'; }.bind( this ), '' ) +
 			g_handler;
 
 		console.log( graph );