diff --git a/e2e/platform/subgraph.html b/e2e/platform/subgraph.html
index 5b8ca8c93..e4c8d772e 100644
--- a/e2e/platform/subgraph.html
+++ b/e2e/platform/subgraph.html
@@ -5,15 +5,29 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Mermaid Quick Test Page</title>
   <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+  <style>
+    body {
+      font-family: 'trebuchet ms', verdana, arial;
+    }
+  </style>
 </head>
 <body>
-  <div id="FirstLine" class="mermaid">
+  <div class="mermaid">
     graph TD
-    A[Christmas] -->|Get money| B(Go shopping)
-    subgraph 1test["Text"]
-    A
-    end
-</div>
+      A[Christmas] -->|Get money| B(Go shopping)
+      subgraph 1test["id starting with number"]
+      A
+      end
+      style 1test fill:#F99,stroke-width:2px,stroke:#F0F
+  </div>
+  <div class="mermaid">
+    graph TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      subgraph test["id starting with number"]
+      A
+      end
+      style test fill:#F99,stroke-width:2px,stroke:#F0F
+  </div>
   <script src="./mermaid.js"></script>
   <script>
      function showFullFirstSquad(elemName) {
diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
index 9fbffc409..e0f57547f 100644
--- a/src/diagrams/flowchart/flowDb.js
+++ b/src/diagrams/flowchart/flowDb.js
@@ -37,9 +37,9 @@ const sanitize = text => {
  * @param style
  * @param classes
  */
-export const addVertex = function (id, text, type, style, classes) {
+export const addVertex = function (_id, text, type, style, classes) {
   let txt
-
+  let id = _id
   if (typeof id === 'undefined') {
     return
   }
@@ -47,6 +47,8 @@ export const addVertex = function (id, text, type, style, classes) {
     return
   }
 
+  if (id[0].match(/\d/)) id = 's' + id
+
   if (typeof vertices[id] === 'undefined') {
     vertices[id] = { id: id, styles: [], classes: [] }
   }
@@ -338,7 +340,12 @@ export const defaultStyle = function () {
 /**
  * Clears the internal graph db so that a new graph can be parsed.
  */
-export const addSubGraph = function (id, list, title) {
+export const addSubGraph = function (_id, list, _title) {
+  let id = _id
+  let title = _title
+  if (_id === _title && _title.match(/\s/)) {
+    id = undefined
+  }
   function uniq (a) {
     const prims = { 'boolean': {}, 'number': {}, 'string': {} }
     const objs = []
@@ -357,7 +364,7 @@ export const addSubGraph = function (id, list, title) {
   nodeList = uniq(nodeList.concat.apply(nodeList, list))
 
   id = id || ('subGraph' + subCount)
-  id = 's' + id
+  if (id[0].match(/\d/)) id = 's' + id
   title = title || ''
   title = sanitize(title)
   subCount = subCount + 1
diff --git a/src/diagrams/flowchart/parser/flow.jison b/src/diagrams/flowchart/parser/flow.jison
index c9f05e151..90c2fc83c 100644
--- a/src/diagrams/flowchart/parser/flow.jison
+++ b/src/diagrams/flowchart/parser/flow.jison
@@ -251,12 +251,12 @@ statement
     {$$=[];}
     | clickStatement separator
     {$$=[];}
-    | subgraph SPACE alphaNum SQS text SQE separator document end
+    | subgraph SPACE text SQS text SQE separator document end
     {$$=yy.addSubGraph($3,$8,$5);}
-    | subgraph SPACE STR separator document end
-    {$$=yy.addSubGraph(undefined,$5,$3);}
-    | subgraph SPACE alphaNum separator document end
+    | subgraph SPACE text separator document end
     {$$=yy.addSubGraph($3,$5,$3);}
+    // | subgraph SPACE text separator document end
+    // {$$=yy.addSubGraph($3,$5,$3);}
     | subgraph separator document end
     {$$=yy.addSubGraph(undefined,$3,undefined);}
     ;
@@ -265,20 +265,20 @@ separator: NEWLINE | SEMI | EOF ;
 
 verticeStatement:
     vertex link vertex
-        { yy.addLink($1,$3,$2);$$ = [$1,$3];}  
+        { yy.addLink($1,$3,$2);$$ = [$1,$3];}
     | vertex link vertex DOT idString
        { yy.addLink($1,$3,$2);$$ = [$1,$3];yy.setClass($3,$5);}
-    | vertex DOT idString link vertex 
+    | vertex DOT idString link vertex
        { yy.addLink($1,$5,$4);$$ = [$1,$5];yy.setClass($1,$3);}
     | vertex DOT idString link vertex DOT idString
-       { yy.addLink($1,$5,$4);$$ = [$1,$5];yy.setClass($5,$7);yy.setClass($1,$3);}   
+       { yy.addLink($1,$5,$4);$$ = [$1,$5];yy.setClass($5,$7);yy.setClass($1,$3);}
     |vertex
         {$$ = [$1];}
     |vertex DOT idString
-        {$$ = [$1];yy.setClass($1,$3)}    
+        {$$ = [$1];yy.setClass($1,$3)}
     ;
 
-vertex:  idString SQS text SQE 
+vertex:  idString SQS text SQE
         {$$ = $1;yy.addVertex($1,$3,'square');}
     |  idString SQS text SQE spaceList
         {$$ = $1;yy.addVertex($1,$3,'square');}
@@ -403,25 +403,25 @@ linkStatement: ARROW_POINT
     | DOTTED_ARROW_CIRCLE
         {$$ = {"type":"arrow_circle","stroke":"dotted"};}
     | DOUBLE_DOTTED_ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"dotted"};}        
+        {$$ = {"type":"double_arrow_circle","stroke":"dotted"};}
     | DOTTED_ARROW_CROSS
         {$$ = {"type":"arrow_cross","stroke":"dotted"};}
     | DOUBLE_DOTTED_ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"dotted"};}        
+        {$$ = {"type":"double_arrow_cross","stroke":"dotted"};}
     | DOTTED_ARROW_OPEN
         {$$ = {"type":"arrow_open","stroke":"dotted"};}
     | THICK_ARROW_POINT
         {$$ = {"type":"arrow","stroke":"thick"};}
     | DOUBLE_THICK_ARROW_POINT
-        {$$ = {"type":"double_arrow_point","stroke":"thick"};}        
+        {$$ = {"type":"double_arrow_point","stroke":"thick"};}
     | THICK_ARROW_CIRCLE
         {$$ = {"type":"arrow_circle","stroke":"thick"};}
     | DOUBLE_THICK_ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"thick"};}        
+        {$$ = {"type":"double_arrow_circle","stroke":"thick"};}
     | THICK_ARROW_CROSS
         {$$ = {"type":"arrow_cross","stroke":"thick"};}
     | DOUBLE_THICK_ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"thick"};}        
+        {$$ = {"type":"double_arrow_cross","stroke":"thick"};}
     | THICK_ARROW_OPEN
         {$$ = {"type":"arrow_open","stroke":"thick"};}
         ;
diff --git a/src/diagrams/flowchart/parser/subgraph.spec.js b/src/diagrams/flowchart/parser/subgraph.spec.js
index 547c4a189..66ff1fb3e 100644
--- a/src/diagrams/flowchart/parser/subgraph.spec.js
+++ b/src/diagrams/flowchart/parser/subgraph.spec.js
@@ -71,7 +71,7 @@ describe('when parsing subgraphs', function () {
     const subgraph = subgraphs[0]
     expect(subgraph.nodes.length).toBe(1)
     expect(subgraph.nodes[0]).toBe('A')
-    expect(subgraph.id).toBe('1test')
+    expect(subgraph.id).toBe('s1test')
   });
 
   it('should handle subgraphs1', function () {
@@ -82,6 +82,93 @@ describe('when parsing subgraphs', function () {
 
     expect(edges[0].type).toBe('arrow')
   })
+  it('should handle subgraphs with title in quotes', function () {
+    const res = flow.parser.parse('graph TD;A-->B;subgraph "title in quotes";c-->d;end;')
+
+    const vert = flow.parser.yy.getVertices()
+    const edges = flow.parser.yy.getEdges()
+
+    const subgraphs = flow.parser.yy.getSubGraphs()
+    expect(subgraphs.length).toBe(1)
+    const subgraph = subgraphs[0]
+
+    expect(subgraph.title).toBe('title in quotes')
+
+    expect(edges[0].type).toBe('arrow')
+  })
+  it('should handle subgraphs in old style that was broken', function () {
+    const res = flow.parser.parse('graph TD;A-->B;subgraph old style that is broken;c-->d;end;')
+
+    const vert = flow.parser.yy.getVertices()
+    const edges = flow.parser.yy.getEdges()
+
+    const subgraphs = flow.parser.yy.getSubGraphs()
+    expect(subgraphs.length).toBe(1)
+    const subgraph = subgraphs[0]
+
+    expect(subgraph.title).toBe('old style that is broken')
+
+    expect(edges[0].type).toBe('arrow')
+  })
+  it('should handle subgraphs with dashes in the title', function () {
+    const res = flow.parser.parse('graph TD;A-->B;subgraph a-b-c;c-->d;end;')
+
+    const vert = flow.parser.yy.getVertices()
+    const edges = flow.parser.yy.getEdges()
+
+    const subgraphs = flow.parser.yy.getSubGraphs()
+    expect(subgraphs.length).toBe(1)
+    const subgraph = subgraphs[0]
+
+    expect(subgraph.title).toBe('a-b-c')
+
+    expect(edges[0].type).toBe('arrow')
+  })
+  it('should handle subgraphs with id and title in brackets', function () {
+    const res = flow.parser.parse('graph TD;A-->B;subgraph uid1[text of doom];c-->d;end;')
+
+    const vert = flow.parser.yy.getVertices()
+    const edges = flow.parser.yy.getEdges()
+
+    const subgraphs = flow.parser.yy.getSubGraphs()
+    expect(subgraphs.length).toBe(1)
+    const subgraph = subgraphs[0]
+
+    expect(subgraph.title).toBe('text of doom')
+    expect(subgraph.id).toBe('uid1')
+
+    expect(edges[0].type).toBe('arrow')
+  })
+  it('should handle subgraphs with id and title in brackets and quotes', function () {
+    const res = flow.parser.parse('graph TD;A-->B;subgraph uid2["text of doom"];c-->d;end;')
+
+    const vert = flow.parser.yy.getVertices()
+    const edges = flow.parser.yy.getEdges()
+
+    const subgraphs = flow.parser.yy.getSubGraphs()
+    expect(subgraphs.length).toBe(1)
+    const subgraph = subgraphs[0]
+
+    expect(subgraph.title).toBe('text of doom')
+    expect(subgraph.id).toBe('uid2')
+
+    expect(edges[0].type).toBe('arrow')
+  })
+  it('should handle subgraphs with id and title in brackets without spaces', function () {
+    const res = flow.parser.parse('graph TD;A-->B;subgraph uid2[textofdoom];c-->d;end;')
+
+    const vert = flow.parser.yy.getVertices()
+    const edges = flow.parser.yy.getEdges()
+
+    const subgraphs = flow.parser.yy.getSubGraphs()
+    expect(subgraphs.length).toBe(1)
+    const subgraph = subgraphs[0]
+
+    expect(subgraph.title).toBe('textofdoom')
+    expect(subgraph.id).toBe('uid2')
+
+    expect(edges[0].type).toBe('arrow')
+  })
 
   it('should handle subgraphs2', function () {
     const res = flow.parser.parse('graph TD\nA-->B\nsubgraph myTitle\n\n c-->d \nend\n')
