GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Added notation for dotted links as described in issue #26 and support for thicker links

Browse Source
This commit is contained in:
knsv 2015-01-10 14:33:41 +01:00
parent a7fd52237a
commit 3027882847
10 changed files with 582 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

225
dist/mermaid.full.js vendored
View File

File diff suppressed because one or more lines are too long

10
dist/mermaid.full.min.js vendored
View File

File diff suppressed because one or more lines are too long

225
dist/mermaid.slim.js vendored
View File

File diff suppressed because one or more lines are too long

10
dist/mermaid.slim.min.js vendored
View File

File diff suppressed because one or more lines are too long

22
src/diagrams/flowchart/flowRenderer.js
View File

@ -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
@ -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

1
src/diagrams/flowchart/graphDb.js
View File

@ -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);
};

58
src/diagrams/flowchart/parser/flow.jison
View File

@ -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';
@ -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]|
@ -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
@ -238,7 +250,7 @@ vertex: alphaNum SQS text SQE
alphaNum
: alphaNumStatement
{$$=$1;}
| alphaNumStatement alphaNum
| alphaNum alphaNumStatement
{$$=$1+''+$2;}
;
@ -262,16 +274,40 @@ 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:
@ -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 ;

202
src/diagrams/flowchart/parser/flow.js
View File

File diff suppressed because one or more lines are too long

77
src/diagrams/flowchart/parser/flow.spec.js
View File

@ -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;');
@ -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(){

6
test/web.html
View File

@ -41,9 +41,9 @@
<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