Merge pull request #237 from spect88/ellipse-syntax

Ellipse syntax

dist/mermaid.css

@@ -2,13 +2,14 @@
 /* Sequence Diagram variables */
 /* Gantt chart variables */
 .mermaid .label {
-  color: #333333;
+  color: #333;
 }
 .node rect,
 .node circle,
+.node ellipse,
 .node polygon {
-  fill: #ececff;
-  stroke: #ccccff;
+  fill: #ECECFF;
+  stroke: #CCCCFF;
   stroke-width: 1px;
 }
 .edgePath .path {
@@ -21,11 +22,11 @@
   stroke-width: 1px !important;
 }
 .cluster text {
-  fill: #333333;
+  fill: #333;
 }
 .actor {
-  stroke: #ccccff;
-  fill: #ececff;
+  stroke: #CCCCFF;
+  fill: #ECECFF;
 }
 text.actor {
   fill: black;
@@ -38,27 +39,27 @@ text.actor {
   stroke-width: 1.5;
   stroke-dasharray: "2 2";
   marker-end: "url(#arrowhead)";
-  stroke: #333333;
+  stroke: #333;
 }
 .messageLine1 {
   stroke-width: 1.5;
   stroke-dasharray: "2 2";
-  stroke: #333333;
+  stroke: #333;
 }
 #arrowhead {
-  fill: #333333;
+  fill: #333;
 }
 #crosshead path {
-  fill: #333333 !important;
-  stroke: #333333 !important;
+  fill: #333 !important;
+  stroke: #333 !important;
 }
 .messageText {
-  fill: #333333;
+  fill: #333;
   stroke: none;
 }
 .labelBox {
-  stroke: #ccccff;
-  fill: #ececff;
+  stroke: #CCCCFF;
+  fill: #ECECFF;
 }
 .labelText {
   fill: black;
@@ -72,7 +73,7 @@ text.actor {
   stroke-width: 2;
   stroke-dasharray: "2 2";
   marker-end: "url(#arrowhead)";
-  stroke: #ccccff;
+  stroke: #CCCCFF;
 }
 .note {
   stroke: #aaaa33;
@@ -101,16 +102,16 @@ text.actor {
   opacity: 0.2;
 }
 .sectionTitle0 {
-  fill: #333333;
+  fill: #333;
 }
 .sectionTitle1 {
-  fill: #333333;
+  fill: #333;
 }
 .sectionTitle2 {
-  fill: #333333;
+  fill: #333;
 }
 .sectionTitle3 {
-  fill: #333333;
+  fill: #333;
 }
 .sectionTitle {
   text-anchor: start;

dist/mermaid.forest.css

@@ -3,10 +3,11 @@
 /* Gantt chart variables */
 .mermaid .label {
   font-family: 'trebuchet ms', verdana, arial;
-  color: #333333;
+  color: #333;
 }
 .node rect,
 .node circle,
+.node ellipse,
 .node polygon {
   fill: #cde498;
   stroke: #13540c;
@@ -23,7 +24,7 @@
   stroke-width: 1px !important;
 }
 .cluster text {
-  fill: #333333;
+  fill: #333;
 }
 .actor {
   stroke: #13540c;
@@ -40,22 +41,22 @@ text.actor {
   stroke-width: 1.5;
   stroke-dasharray: "2 2";
   marker-end: "url(#arrowhead)";
-  stroke: #333333;
+  stroke: #333;
 }
 .messageLine1 {
   stroke-width: 1.5;
   stroke-dasharray: "2 2";
-  stroke: #333333;
+  stroke: #333;
 }
 #arrowhead {
-  fill: #333333;
+  fill: #333;
 }
 #crosshead path {
-  fill: #333333 !important;
-  stroke: #333333 !important;
+  fill: #333 !important;
+  stroke: #333 !important;
 }
 .messageText {
-  fill: #333333;
+  fill: #333;
   stroke: none;
 }
 .labelBox {
@@ -103,16 +104,16 @@ text.actor {
   opacity: 0.2;
 }
 .sectionTitle0 {
-  fill: #333333;
+  fill: #333;
 }
 .sectionTitle1 {
-  fill: #333333;
+  fill: #333;
 }
 .sectionTitle2 {
-  fill: #333333;
+  fill: #333;
 }
 .sectionTitle3 {
-  fill: #333333;
+  fill: #333;
 }
 .sectionTitle {
   text-anchor: start;

editor/css/editor.css

@@ -1,4 +1,3 @@
-@import url(http://fonts.googleapis.com/css?family=Open+Sans);
 body {
   margin: 0;
   font-family: 'Open sans', sans-serif;

src/diagrams/flowchart/flowRenderer.js

@@ -111,6 +111,9 @@ exports.addVertices = function (vert, g) {
             case 'circle':
                 _shape = 'circle';
                 break;
+            case 'ellipse':
+                _shape = 'ellipse';
+                break;
             case 'group':
                 _shape = 'rect';
                 verticeText = '';

src/diagrams/flowchart/parser/flow.jison

@@ -57,6 +57,8 @@
 \s*\-\-\s*               return '--';
 \s*\-\.\s*               return '-.';
 \s*\=\=\s*               return '==';
+"(-"                  return '(-';
+"-)"                  return '-)';
 \-                    return 'MINUS';
 "."                   return 'DOT';
 \+                    return 'PLUS';
@@ -245,6 +247,10 @@ vertex:  alphaNum SQS text SQE
         {$$ = $1;yy.addVertex($1,$4,'circle');}
     | alphaNum PS PS text PE PE spaceList
         {$$ = $1;yy.addVertex($1,$4,'circle');}
+    | alphaNum '(-' text '-)'
+        {$$ = $1;yy.addVertex($1,$3,'ellipse');}
+    | alphaNum '(-' text '-)' spaceList
+        {$$ = $1;yy.addVertex($1,$3,'ellipse');}
     | alphaNum PS text PE
         {$$ = $1;yy.addVertex($1,$3,'round');}
     | alphaNum PS text PE spaceList

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

@@ -922,6 +922,7 @@ describe('when parsing ',function(){
         expect(vert['A'].type).toBe('square');
         expect(vert['A'].text).toBe('chimpansen hoppar ()[]');
     });
+
     it('should handle text in circle vertices with space',function(){
         var res = flow.parser.parse('graph TD;A((chimpansen hoppar))-->C;');
 
@@ -932,6 +933,16 @@ describe('when parsing ',function(){
         expect(vert['A'].text).toBe('chimpansen hoppar');
     });
 
+    it('should handle text in ellipse vertices', function(){
+        var res = flow.parser.parse('graph TD\nA(-this is an ellipse-)-->B');
+
+        var vert = flow.parser.yy.getVertices();
+        var edges = flow.parser.yy.getEdges();
+
+        expect(vert['A'].type).toBe('ellipse');
+        expect(vert['A'].text).toBe('this is an ellipse');
+    });
+
     it('should handle text in diamond vertices with space',function(){
         var res = flow.parser.parse('graph TD;A(chimpansen hoppar)-->C;');
 

src/less/default/flow.less

@@ -1,6 +1,9 @@
 .mermaid .label { color:#333}
 
-.node rect, .node circle, .node polygon  {
+.node rect,
+.node circle,
+.node ellipse,
+.node polygon {
   fill: @mainBkg;
   stroke: @nodeBorder;
   stroke-width: 1px;
@@ -19,4 +22,4 @@
 
 .cluster text {
   fill:@titleColor;
-}
+}

src/less/forest/flow.less

@@ -3,7 +3,10 @@
 color:#333
 }
 
-.node rect, .node circle, .node polygon  {
+.node rect,
+.node circle,
+.node ellipse,
+.node polygon {
   fill: @mainBkg;
   stroke: @nodeBorder;
   stroke-width: 1px;
@@ -23,4 +26,4 @@ color:#333
 
 .cluster text {
   fill:@titleColor;
-}
+}