WIP-hook up a renderer

src/diagrams/gitGraph/gitGraphRenderer.js

@@ -0,0 +1,39 @@
+
+var db = require('./gitGraphAst.js');
+var gitGraphParser = require('./parser/gitGraph.js');
+var d3 = require('../../d3');
+var Logger = require('../../logger');
+
+var log = new Logger.Log();
+
+exports.draw = function (txt, id, ver) {
+    var parser;
+    parser = gitGraphParser.parser;
+    parser.yy = db;
+
+    // Parse the graph definition
+    parser.parse(txt);
+
+    // Fetch the default direction, use TD if none was found
+    var svg = d3.select('#'+id);
+
+    var g = svg.append('g');
+
+    g.append('text')      // text label for the x axis
+        .attr('x', 100)
+        .attr('y', 40)
+        .attr('class','version')
+        .attr('font-size','32px')
+        .style('text-anchor', 'middle')
+        .text('mermaid '+ ver);
+
+    /*
+    var box = exports.bounds.getBounds();
+
+    var height = box.stopy-box.starty+2*conf.diagramMarginY;
+    var width  = box.stopx-box.startx+2*conf.diagramMarginX;*/
+
+    svg.attr('height',100);
+    svg.attr('width', 400 );
+    //svg.attr('viewBox', '0 0 300 150');
+};

src/mermaidAPI.js

@@ -31,6 +31,9 @@ var ganttDb = require('./diagrams/gantt/ganttDb');
 var classParser = require('./diagrams/classDiagram/parser/classDiagram');
 var classRenderer = require('./diagrams/classDiagram/classRenderer');
 var classDb = require('./diagrams/classDiagram/classDb');
+var gitGraphParser = require('./diagrams/gitGraph/parser/gitGraph');
+var gitGraphRenderer = require('./diagrams/gitGraph/gitGraphRenderer');
+var gitGraphAst = require('./diagrams/gitGraph/gitGraphAst');
 var d3 = require('./d3');
 
 SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) {
@@ -236,6 +239,7 @@ var config = {
         ]
     },
     classDiagram:{},
+    gitGraph: {},
     info:{}
 };
 
@@ -395,6 +399,15 @@ var render = function(id, txt, cb, container){
     var graphType = utils.detectType(txt);
     var classes = {};
     switch(graphType){
+        case 'gitGraph':
+            config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+            gitGraphRenderer.setConf(config.gitGraph);
+            gitGraphRenderer.draw(txt, id, false);
+            if(config.cloneCssStyles){
+                classes = gitGraphRenderer.getClasses(txt, false);
+                utils.cloneCssStyles(element.firstChild, classes);
+            }
+            break;
         case 'graph':
             config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
             flowRenderer.setConf(config.flowchart);

src/utils.js

@@ -47,6 +47,10 @@ var detectType = function(text){
         return 'classDiagram';
     }
 
+    if(text.match(/^\s*gitGraph/)) {
+        log.debug('Detected gitGraph syntax');
+        return 'gitGraph';
+    }
     return 'graph';
 };
 exports.detectType= detectType;

src/utils.spec.js

@@ -29,6 +29,12 @@ describe('when detecting chart type ', function () {
         var type = utils.detectType(str);
         expect(type).toBe('graph');
     });
+    it('should handle a graph defintion for gitGraph', function () {
+        str = '  \n  gitGraph TB:\nbfs1:queue';
+
+        var type = utils.detectType(str);
+        expect(type).toBe('gitGraph');
+    });
 });
 
 describe('when cloning CSS ', function () {