Added notation for titles on subgraphs

src/diagrams/flowchart/flowRenderer.js

@@ -250,8 +250,10 @@ exports.draw = function (text, id,isDot) {
     subGraphs.forEach(function(subG){
         i = i + 1;
         var id = 'subG'+i;
-        //console.log('Setting id '+id);
-        subG.forEach(function(node){
+
+        d3.selectAll('cluster').append('text');
+
+        subG.nodes.forEach(function(node){
             //console.log('Setting node',node,' to subgraph '+id);
             g.setParent(node,id);
         });
@@ -333,8 +335,55 @@ exports.draw = function (text, id,isDot) {
     render(d3.select("#" + id + " g"), g);
     var svgb = document.querySelector('#mermaidChart0');
 
+/*
+ var xPos = document.querySelectorAll('.clusters rect')[0].x.baseVal.value;
+ var width = document.querySelectorAll('.clusters rect')[0].width.baseVal.value;
+    var cluster = d3.selectAll('.cluster');
+    var te = cluster.append('text');
+    te.attr('x', xPos+width/2);
+    te.attr('y', 12);
+    //te.stroke('black');
+    te.attr('id', 'apa12');
+    te.style('text-anchor', 'middle');
+    te.text('Title for cluster');
+*/
     // Center the graph
     svg.attr("height", g.graph().height );
     svg.attr("width", g.graph().width );
     svg.attr("viewBox", svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height);
+
+
+    setTimeout(function(){
+        console.log('Fixing titles');
+        var i = 0;
+        subGraphs.forEach(function(subG){
+            console.log('Setting id '+id);
+
+
+            var clusterRects = document.querySelectorAll('#' + id + ' .clusters rect');
+            var clusters     = document.querySelectorAll('#' + id + ' .cluster');
+
+
+            if(subG.title !== 'undefined'){
+                console.log(clusterRects[i]);
+                var xPos = clusterRects[i].x.baseVal.value;
+                var yPos = clusterRects[i].y.baseVal.value;
+                var width = clusterRects[i].width.baseVal.value;
+                var cluster = d3.select(clusters[i]);
+                var te = cluster.append('text');
+                te.attr('x', xPos+width/2);
+                te.attr('y', yPos +14);
+                te.attr('fill', 'black');
+                te.attr('stroke','none');
+                te.attr('id', id+'Text');
+                te.style('text-anchor', 'middle');
+                console.log('Title '+subG.title);
+                console.log('i',i);
+                console.log('x'+xPos+width/2);
+                console.log('y'+xPos);
+                te.text(subG.title);
+            }
+            i = i + 1;
+        });
+    },200);
 };

src/diagrams/flowchart/graphDb.js

@@ -212,7 +212,7 @@ exports.defaultStyle = function () {
 /**
  * Clears the internal graph db so that a new graph can be parsed.
  */
-exports.addSubGraph = function (list) {
+exports.addSubGraph = function (list, title) {
     function uniq(a) {
         var prims = {"boolean":{}, "number":{}, "string":{}}, objs = [];
 
@@ -229,7 +229,7 @@ exports.addSubGraph = function (list) {
 
     subG = uniq(subG.concat.apply(subG,list));
 
-    subGraphs.push(subG);
+    subGraphs.push({nodes:subG,title:title});
 };
 exports.getSubGraphs = function (list) {
     return subGraphs;

src/diagrams/flowchart/parser/flow.jison

@@ -204,8 +204,10 @@ statement
     {$$=[];}
     | clickStatement separator
     {$$=[];}
-    | subgraph  document endStatement separator
-    {yy.addSubGraph($2);}
+    | subgraph  text separator document endStatement separator
+    {yy.addSubGraph($4,$2);}
+    | subgraph separator document endStatement separator
+    {yy.addSubGraph($3,undefined);}
     ;
 
 endStatement: end

src/diagrams/flowchart/parser/flow.spec.js

@@ -249,7 +249,7 @@ describe('when parsing ',function(){
         expect(edges[0].type).toBe('arrow_circle');
     });
     it('should handle subgraphs',function(){
-        var res = flow.parser.parse('graph TD;A-->B;subgraph;c-->d;end;');
+        var res = flow.parser.parse('graph TD;A-->B;subgraph myTitle;c-->d;end;');
 
         var vert = flow.parser.yy.getVertices();
         var edges = flow.parser.yy.getEdges();
@@ -259,7 +259,7 @@ describe('when parsing ',function(){
     });
 
     it('should handle subgraphs',function(){
-        var res = flow.parser.parse('graph TD\nA-->B\nsubgraph\nc-->d\nend\n');
+        var res = flow.parser.parse('graph TD\nA-->B\nsubgraph myTitle\nc-->d\nend\n');
 
         var vert = flow.parser.yy.getVertices();
         var edges = flow.parser.yy.getEdges();
@@ -269,7 +269,7 @@ describe('when parsing ',function(){
     });
 
     it('should handle subgraphs',function(){
-        var res = flow.parser.parse('graph TD\nA-->B\nsubgraph\nc-->d\nend;');
+        var res = flow.parser.parse('graph TD\nA-->B\nsubgraph myTitle\nc-->d\nend;');
 
         var vert = flow.parser.yy.getVertices();
         var edges = flow.parser.yy.getEdges();
@@ -279,7 +279,7 @@ describe('when parsing ',function(){
     });
 
     it('should handle subgraphs',function(){
-        var res = flow.parser.parse('graph TD\nA-->B\nsubgraph\nc-- text -->d\nd-->e\n end;');
+        var res = flow.parser.parse('graph TD\nA-->B\nsubgraph myTitle\nc-- text -->d\nd-->e\n end;');
 
         var vert = flow.parser.yy.getVertices();
         var edges = flow.parser.yy.getEdges();

test/web.html

@@ -39,6 +39,19 @@
         class green B;
     </div>
     <h1>Sub graphs</h1>
+    <div class="mermaid">graph TB
+        subgraph one
+        a1-->a2
+        end
+        subgraph two
+        b1-->b2
+        end
+        subgraph three
+        c1-->c2
+        end
+        c1-->a2
+
+    </div>
     <div class="mermaid">graph TB
         subgraph
             sq[Square shape] -.-> ci((Circle shape))
@@ -48,7 +61,7 @@
         end
 
         %% Notice that no text in shape are added here instead that is appended further down
-        subgraph
+        subgraph Go go
             e --> od3>Really long text with linebreak<br>in an Odd shape]
 
             e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)