Skip to content

Commit

Permalink
Added notation for dotted links as described in issue #26 and support…
Browse files Browse the repository at this point in the history 
… for thicker links
  • Loading branch information
@knsv
knsv committed Jan 10, 2015
1 parent a7fd522 commit 3027882
Show file tree
Hide file tree
Showing 10 changed files with 576 additions and 250 deletions.
221 changes: 146 additions & 75 deletions dist/mermaid.full.js
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions dist/mermaid.full.min.js
View file

Large diffs are not rendered by default.

221 changes: 146 additions & 75 deletions dist/mermaid.slim.js
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions dist/mermaid.slim.min.js
View file

Large diffs are not rendered by default.

22 changes: 20 additions & 2 deletions src/diagrams/flowchart/flowRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,16 +109,34 @@ exports.addEdges = function (edges, g) {
}

var style = '';



if(typeof edge.style !== 'undefined'){
edge.style.forEach(function(s){
style = style + s +';';
});
}
else{
switch(edge.stroke){
case 'normal':
style = 'stroke: #333; stroke-width: 1.5px;fill:none';
break;
case 'dotted':
style = 'stroke: #333; fill:none;stroke-width:2px;stroke-dasharray:3;';
break;
case 'thick':
style = 'stroke: #333; stroke-width: 3.5px;fill:none';
break;
}


}

// Add the edge to the graph
if (typeof edge.text === 'undefined') {
if(typeof edge.style === 'undefined'){
g.setEdge(edge.start, edge.end,{ style: "stroke: #333; stroke-width: 1.5px;fill:none", arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
g.setEdge(edge.start, edge.end,{ style: style, arrowhead: aHead},cnt);
}else{
g.setEdge(edge.start, edge.end, {
style: style, arrowheadStyle: "fill: #333", arrowhead: aHead
Expand All @@ -129,7 +147,7 @@ exports.addEdges = function (edges, g) {
else {

if(typeof edge.style === 'undefined'){
g.setEdge(edge.start, edge.end,{labelType: "html",style: "stroke: #333; stroke-width: 1.5px;fill:none", labelpos:'c', label: '<span style="background:#e8e8e8">'+edge.text+'</span>', arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
g.setEdge(edge.start, edge.end,{labelType: "html",style: style, labelpos:'c', label: '<span style="background:#e8e8e8">'+edge.text+'</span>', arrowheadStyle: "fill: #333", arrowhead: aHead},cnt);
}else{
g.setEdge(edge.start, edge.end, {
labelType: "html",style: style, arrowheadStyle: "fill: #333", label: edge.text, arrowhead: aHead
Expand Down
1 change: 1 addition & 0 deletions src/diagrams/flowchart/graphDb.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ exports.addLink = function (start, end, type, linktext) {

if (typeof type !== 'undefined') {
edge.type = type.type;
edge.stroke = type.stroke;
}
edges.push(edge);
};
Expand Down
60 changes: 48 additions & 12 deletions src/diagrams/flowchart/parser/flow.jison
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,12 @@
"BT" return 'DIR';
"TD" return 'DIR';
"BR" return 'DIR';
[0-9] return 'NUM';
[0-9]+ return 'NUM';
\# return 'BRKT';
":" return 'COLON';
";" return 'SEMI';
"," return 'COMMA';
"=" return 'EQUALS';
"*" return 'MULT';
"." return 'DOT';
"<" return 'TAGSTART';
">" return 'TAGEND';
"^" return 'UP';
Expand All @@ -34,10 +32,26 @@
\-\-\> return 'ARROW_POINT';
\-\-[o] return 'ARROW_CIRCLE';
\-\-\- return 'ARROW_OPEN';
\-\.\-[x] return 'DOTTED_ARROW_CROSS';
\-\.\-\> return 'DOTTED_ARROW_POINT';
\-\.\-[o] return 'DOTTED_ARROW_CIRCLE';
\-\.\- return 'DOTTED_ARROW_OPEN';
.\-[x] return 'DOTTED_ARROW_CROSS';
\.\-\> return 'DOTTED_ARROW_POINT';
\.\-[o] return 'DOTTED_ARROW_CIRCLE';
\.\- return 'DOTTED_ARROW_OPEN';
\=\=[x] return 'THICK_ARROW_CROSS';
\=\=\> return 'THICK_ARROW_POINT';
\=\=[o] return 'THICK_ARROW_CIRCLE';
\=\=[\=] return 'THICK_ARROW_OPEN';
\-\- return '--';
\-\. return '-.';
\=\= return '==';
\- return 'MINUS';
"." return 'DOT';
\+ return 'PLUS';
\% return 'PCT';
"=" return 'EQUALS';
\= return 'EQUALS';
[\u0021-\u0027\u002A-\u002E\u003F\u0041-\u005A\u005C\u005F-\u007A\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]|
[\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377]|
Expand Down Expand Up @@ -227,8 +241,6 @@ vertex: alphaNum SQS text SQE
{$$ = $1;yy.addVertex($1,$3,'odd');}
| alphaNum TAGEND text SQE SPACE
{$$ = $1;yy.addVertex($1,$3,'odd');}
| alphaNum TAGSTART text TAGEND
{$$ = $1;yy.addVertex($1,$3,'diamond');}
| alphaNum
{$$ = $1;yy.addVertex($1);}
| alphaNum SPACE
Expand All @@ -238,7 +250,7 @@ vertex: alphaNum SQS text SQE
alphaNum
: alphaNumStatement
{$$=$1;}
| alphaNumStatement alphaNum
| alphaNum alphaNumStatement
{$$=$1+''+$2;}
;

Expand All @@ -262,17 +274,41 @@ link: linkStatement arrowText
{$5.text = $3;$$ = $5;}
| '--' SPACE text SPACE linkStatement SPACE
{$5.text = $3;$$ = $5;}
| '-.' SPACE text SPACE linkStatement
{$5.text = $3;$$ = $5;}
| '-.' SPACE text SPACE linkStatement SPACE
{$5.text = $3;$$ = $5;}
| '==' SPACE text SPACE linkStatement
{$5.text = $3;$$ = $5;}
| '==' SPACE text SPACE linkStatement SPACE
{$5.text = $3;$$ = $5;}
;

linkStatement: ARROW_POINT
{$$ = {"type":"arrow"};}
{$$ = {"type":"arrow","stroke":"normal"};}
| ARROW_CIRCLE
{$$ = {"type":"arrow_circle"};}
{$$ = {"type":"arrow_circle","stroke":"normal"};}
| ARROW_CROSS
{$$ = {"type":"arrow_cross"};}
{$$ = {"type":"arrow_cross","stroke":"normal"};}
| ARROW_OPEN
{$$ = {"type":"arrow_open"};}
;
{$$ = {"type":"arrow_open","stroke":"normal"};}
| DOTTED_ARROW_POINT
{$$ = {"type":"arrow","stroke":"dotted"};}
| DOTTED_ARROW_CIRCLE
{$$ = {"type":"arrow_circle","stroke":"dotted"};}
| DOTTED_ARROW_CROSS
{$$ = {"type":"arrow_cross","stroke":"dotted"};}
| DOTTED_ARROW_OPEN
{$$ = {"type":"arrow_open","stroke":"dotted"};}
| THICK_ARROW_POINT
{$$ = {"type":"arrow","stroke":"thick"};}
| THICK_ARROW_CIRCLE
{$$ = {"type":"arrow_circle","stroke":"thick"};}
| THICK_ARROW_CROSS
{$$ = {"type":"arrow_cross","stroke":"thick"};}
| THICK_ARROW_OPEN
{$$ = {"type":"arrow_open","stroke":"thick"};}
;

arrowText:
PIPE text PIPE
Expand Down Expand Up @@ -347,7 +383,7 @@ styleComponent: ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT |

commentToken : textToken | graphCodeTokens ;

textToken : textNoTagsToken | TAGSTART | TAGEND ;
textToken : textNoTagsToken | TAGSTART | TAGEND | '==' | '--' ;

textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;

Expand Down
198 changes: 125 additions & 73 deletions src/diagrams/flowchart/parser/flow.js
View file

Large diffs are not rendered by default.

77 changes: 77 additions & 0 deletions src/diagrams/flowchart/parser/flow.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -308,6 +308,28 @@ describe('when parsing ',function(){
expect(edges[0].type).toBe('arrow');
});

it('should handle style definitons with more then 1 digit in a row',function(){
var res = flow.parser.parse('graph TD\n' +
'A-->B1\n' +
'A-->B2\n' +
'A-->B3\n' +
'A-->B4\n' +
'A-->B5\n' +
'A-->B6\n' +
'A-->B7\n' +
'A-->B8\n' +
'A-->B9\n' +
'A-->B10\n' +
'A-->B11\n' +
'linkStyle 10 stroke-width:1px;');

var vert = flow.parser.yy.getVertices();
var edges = flow.parser.yy.getEdges();


expect(edges[0].type).toBe('arrow');
});

describe("it should handle text on edges",function(){
it('it should handle text without space',function(){
var res = flow.parser.parse('graph TD;A--x|textNoSpace|B;');
Expand Down Expand Up @@ -405,6 +427,61 @@ describe('when parsing ',function(){

});

describe("it should handle new line type notation",function() {
it('it should handle regular lines', function () {
var res = flow.parser.parse('graph TD;A-->B;');

var vert = flow.parser.yy.getVertices();
var edges = flow.parser.yy.getEdges();

expect(edges[0].stroke).toBe('normal');
});
it('it should handle dotted lines', function () {
var res = flow.parser.parse('graph TD;A-.->B;');

var vert = flow.parser.yy.getVertices();
var edges = flow.parser.yy.getEdges();


expect(edges[0].stroke).toBe('dotted');
});
it('it should handle dotted lines', function () {
var res = flow.parser.parse('graph TD;A==>B;');

var vert = flow.parser.yy.getVertices();
var edges = flow.parser.yy.getEdges();


expect(edges[0].stroke).toBe('thick');
});
it('it should handle text on lines', function () {
var res = flow.parser.parse('graph TD;A-- test text with == -->B;');

var vert = flow.parser.yy.getVertices();
var edges = flow.parser.yy.getEdges();


expect(edges[0].stroke).toBe('normal');
});
it('it should handle text on lines', function () {
var res = flow.parser.parse('graph TD;A-. test text with == .->B;');

var vert = flow.parser.yy.getVertices();
var edges = flow.parser.yy.getEdges();


expect(edges[0].stroke).toBe('dotted');
});
it('it should handle text on lines', function () {
var res = flow.parser.parse('graph TD;A== test text with -- ==>B;');

var vert = flow.parser.yy.getVertices();
var edges = flow.parser.yy.getEdges();


expect(edges[0].stroke).toBe('thick');
});
});

describe("it should handle text on edges using the new notation",function(){
it('it should handle text without space',function(){
Expand Down
6 changes: 3 additions & 3 deletions test/web.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@ <h1>Shapes</h1>
<h1>Sub graphs</h1>
<div class="mermaid">graph TB
subgraph
sq[Square shape] --> ci((Circle shape))
od>Odd shape]-- Two line<br>edge comment --> ro
di{Diamond with <br/> line break} --> ro(Rounded<br>square<br>shape)
sq[Square shape] -.-> ci((Circle shape))
od>Odd shape]-. Two line<br>edge comment .-> ro
di{Diamond with <br/> line break} ==> ro(Rounded<br>square<br>shape)
di-->ro2(Rounded square shape)
end

Expand Down

0 comments on commit 3027882

Please sign in to comment.