Merge pull request #845 from Qix-/style-subgraph

Support styling of subgraphs

dist/index.html

@@ -206,6 +206,35 @@ graph TB
 		a1-->a2
 	end
   </div>
+  <div class="mermaid">
+  graph TB
+  A
+  B
+  subgraph foo[Foo SubGraph]
+    C
+    D
+  end
+  subgraph bar[Bar SubGraph]
+    E
+    F
+  end
+  G
+
+  A-->B
+  B-->C
+  C-->D
+  B-->D
+  D-->E
+  E-->A
+  E-->F
+  F-->D
+  F-->G
+  B-->G
+  G-->D
+
+  style foo fill:#F99,stroke-width:2px,stroke:#F0F
+  style bar fill:#999,stroke-width:10px,stroke:#0F0
+  </div>
   <div class="mermaid">
       graph LR
       456ac9b0d15a8b7f1e71073221059886[1051 AAA fa:fa-check]

src/diagrams/flowchart/flowDb.js

@@ -7,6 +7,7 @@ let vertices = {}
 let edges = []
 let classes = []
 let subGraphs = []
+let subGraphLookup = {}
 let tooltips = {}
 let subCount = 0
 let direction
@@ -18,8 +19,9 @@ let funs = []
  * @param text
  * @param type
  * @param style
+ * @param classes
  */
-export const addVertex = function (id, text, type, style) {
+export const addVertex = function (id, text, type, style, classes) {
   let txt
 
   if (typeof id === 'undefined') {
@@ -52,6 +54,13 @@ export const addVertex = function (id, text, type, style) {
       })
     }
   }
+  if (typeof classes !== 'undefined') {
+    if (classes !== null) {
+      classes.forEach(function (s) {
+        vertices[id].classes.push(s)
+      })
+    }
+  }
 }
 
 /**
@@ -143,6 +152,10 @@ export const setClass = function (ids, className) {
     if (typeof vertices[id] !== 'undefined') {
       vertices[id].classes.push(className)
     }
+
+    if (typeof subGraphLookup[id] !== 'undefined') {
+      subGraphLookup[id].classes.push(className)
+    }
   })
 }
 
@@ -283,6 +296,7 @@ export const clear = function () {
   funs = []
   funs.push(setupToolTips)
   subGraphs = []
+  subGraphLookup = {}
   subCount = 0
   tooltips = []
 }
@@ -297,7 +311,7 @@ export const defaultStyle = function () {
 /**
  * Clears the internal graph db so that a new graph can be parsed.
  */
-export const addSubGraph = function (list, title) {
+export const addSubGraph = function (id, list, title) {
   function uniq (a) {
     const prims = { 'boolean': {}, 'number': {}, 'string': {} }
     const objs = []
@@ -315,10 +329,13 @@ export const addSubGraph = function (list, title) {
 
   nodeList = uniq(nodeList.concat.apply(nodeList, list))
 
-  const subGraph = { id: 'subGraph' + subCount, nodes: nodeList, title: title.trim() }
-  subGraphs.push(subGraph)
+  id = id || ('subGraph' + subCount)
+  title = title || ''
   subCount = subCount + 1
-  return subGraph.id
+  const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [] }
+  subGraphs.push(subGraph)
+  subGraphLookup[id] = subGraph
+  return id
 }
 
 const getPosForId = function (id) {

src/diagrams/flowchart/flowRenderer.js

@@ -272,7 +272,7 @@ export const draw = function (text, id) {
   const subGraphs = flowDb.getSubGraphs()
   for (let i = subGraphs.length - 1; i >= 0; i--) {
     subG = subGraphs[i]
-    flowDb.addVertex(subG.id, subG.title, 'group', undefined)
+    flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes)
   }
 
   // Fetch the verices/nodes and edges/links from the parsed graph definition

src/diagrams/flowchart/parser/flow.jison

@@ -225,10 +225,14 @@ statement
     {$$=[];}
     | clickStatement separator
     {$$=[];}
-    | subgraph text separator document end
-    {$$=yy.addSubGraph($4,$2);}
+    | subgraph SPACE alphaNum 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
+    {$$=yy.addSubGraph($3,$5,$3);}
     | subgraph separator document end
-    {$$=yy.addSubGraph($3,undefined);}
+    {$$=yy.addSubGraph(undefined,$3,undefined);}
     ;
 
 separator: NEWLINE | SEMI | EOF ;

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

@@ -31,8 +31,33 @@ describe('when parsing ', function () {
     expect(subgraph.nodes[0]).toBe('a1')
     expect(subgraph.nodes[1]).toBe('a2')
     expect(subgraph.title).toBe('One')
+    expect(subgraph.id).toBe('One')
   })
 
+  it('should handle subgraph with multiple words in title', function () {
+    const res = flow.parser.parse('graph TB\nsubgraph "Some Title"\n\ta1-->a2\nend')
+    const subgraphs = flow.parser.yy.getSubGraphs()
+    expect(subgraphs.length).toBe(1)
+    const subgraph = subgraphs[0]
+    expect(subgraph.nodes.length).toBe(2)
+    expect(subgraph.nodes[0]).toBe('a1')
+    expect(subgraph.nodes[1]).toBe('a2')
+    expect(subgraph.title).toBe('Some Title')
+    expect(subgraph.id).toBe('subGraph0')
+  });
+
+  it('should handle subgraph with id and title notation', function () {
+    const res = flow.parser.parse('graph TB\nsubgraph some-id[Some Title]\n\ta1-->a2\nend')
+    const subgraphs = flow.parser.yy.getSubGraphs()
+    expect(subgraphs.length).toBe(1)
+    const subgraph = subgraphs[0]
+    expect(subgraph.nodes.length).toBe(2)
+    expect(subgraph.nodes[0]).toBe('a1')
+    expect(subgraph.nodes[1]).toBe('a2')
+    expect(subgraph.title).toBe('Some Title')
+    expect(subgraph.id).toBe('some-id')
+  });
+
   it("should handle angle bracket ' > ' as direction LR", function () {
     const res = flow.parser.parse('graph >;A-->B;')
 

src/themes/flowchart.scss

@@ -30,9 +30,9 @@
 }
 
 .cluster rect {
-  fill: $secondBkg !important;
-  stroke: $clusterBorder !important;
-  stroke-width: 1px !important;
+  fill: $secondBkg;
+  stroke: $clusterBorder;
+  stroke-width: 1px;
 }
 
 .cluster text {