GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

#835 Backwords compatible syntax for associating classes with nodes/vertices

Browse Source
This commit is contained in:
Knut Sveidqvist 2019-08-26 20:10:44 +02:00
parent e1f0367631
commit 06a91d8564
3 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
e2e/platform/subgraph.html
View File

@ -22,11 +22,12 @@
</div> </div>
<div class="mermaid"> <div class="mermaid">
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A.a[Christmas]:::someclass -->|Get money| B(Go shopping):::someclass
subgraph test["id starting with number"] subgraph test["id starting with number"]
A A.a
end end
style test fill:#F99,stroke-width:2px,stroke:#F0F style test fill:#F99,stroke-width:2px,stroke:#F0F
classDef someclass fill:#f96;
</div> </div>
<div class="mermaid"> <div class="mermaid">
graph TD graph TD

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

@ -31,6 +31,7 @@
"BR" return 'DIR'; "BR" return 'DIR';
[0-9]+ return 'NUM'; [0-9]+ return 'NUM';
\# return 'BRKT'; \# return 'BRKT';
":::" return 'STYLE_SEPARATOR';
":" return 'COLON'; ":" return 'COLON';
";" return 'SEMI'; ";" return 'SEMI';
"," return 'COMMA'; "," return 'COMMA';
@ -266,15 +267,15 @@ separator: NEWLINE | SEMI | EOF ;
verticeStatement: verticeStatement:
vertex link vertex vertex link vertex
{ yy.addLink($1,$3,$2);$$ = [$1,$3];} { yy.addLink($1,$3,$2);$$ = [$1,$3];}
| vertex link vertex DOT idString | vertex link vertex STYLE_SEPARATOR idString
{ yy.addLink($1,$3,$2);$$ = [$1,$3];yy.setClass($3,$5);} { yy.addLink($1,$3,$2);$$ = [$1,$3];yy.setClass($3,$5);}
| vertex DOT idString link vertex | vertex STYLE_SEPARATOR idString link vertex
{ yy.addLink($1,$5,$4);$$ = [$1,$5];yy.setClass($1,$3);} { yy.addLink($1,$5,$4);$$ = [$1,$5];yy.setClass($1,$3);}
| vertex DOT idString link vertex DOT idString | vertex STYLE_SEPARATOR idString link vertex STYLE_SEPARATOR 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 |vertex
{$$ = [$1];} {$$ = [$1];}
|vertex DOT idString |vertex STYLE_SEPARATOR idString
{$$ = [$1];yy.setClass($1,$3)} {$$ = [$1];yy.setClass($1,$3)}
; ;
@ -553,7 +554,7 @@ alphaNumStatement
alphaNumToken : PUNCTUATION | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT ; alphaNumToken : PUNCTUATION | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT ;
idStringToken : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM| COLON | COMMA | PLUS |MINUS| DOWN |EQUALS | MULT | BRKT ; idStringToken : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM| COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION;
graphCodeTokens: TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI ; graphCodeTokens: TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI ;
%% %%

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

@ -1618,7 +1618,7 @@ describe('when parsing ', function () {
statement = statement + 'graph TD;' + '\n' statement = statement + 'graph TD;' + '\n'
statement = statement + 'classDef exClass background:#bbb,border:1px solid red;' + '\n' statement = statement + 'classDef exClass background:#bbb,border:1px solid red;' + '\n'
statement = statement + 'a-->b[test].exClass;' + '\n' statement = statement + 'a-->b[test]:::exClass;' + '\n'
const res = flow.parser.parse(statement) const res = flow.parser.parse(statement)
const vertices = flow.parser.yy.getVertices() const vertices = flow.parser.yy.getVertices()
@ -1635,7 +1635,7 @@ describe('when parsing ', function () {
statement = statement + 'graph TD;' + '\n' statement = statement + 'graph TD;' + '\n'
statement = statement + 'classDef exClass background:#bbb,border:1px solid red;' + '\n' statement = statement + 'classDef exClass background:#bbb,border:1px solid red;' + '\n'
statement = statement + 'b[test].exClass;' + '\n' statement = statement + 'b[test]:::exClass;' + '\n'
const res = flow.parser.parse(statement) const res = flow.parser.parse(statement)
const vertices = flow.parser.yy.getVertices() const vertices = flow.parser.yy.getVertices()
@ -1652,7 +1652,7 @@ describe('when parsing ', function () {
statement = statement + 'graph TD;' + '\n' statement = statement + 'graph TD;' + '\n'
statement = statement + 'classDef exClass background:#bbb,border:1px solid red;' + '\n' statement = statement + 'classDef exClass background:#bbb,border:1px solid red;' + '\n'
statement = statement + 'A[test].exClass-->B[test2];' + '\n' statement = statement + 'A[test]:::exClass-->B[test2];' + '\n'
const res = flow.parser.parse(statement) const res = flow.parser.parse(statement)
const vertices = flow.parser.yy.getVertices() const vertices = flow.parser.yy.getVertices()
@ -1669,7 +1669,7 @@ describe('when parsing ', function () {
statement = statement + 'graph TD;' + '\n' statement = statement + 'graph TD;' + '\n'
statement = statement + 'classDef exClass background:#bbb,border:1px solid red;' + '\n' statement = statement + 'classDef exClass background:#bbb,border:1px solid red;' + '\n'
statement = statement + 'a-->b[1 a a text!.].exClass;' + '\n' statement = statement + 'a-->b[1 a a text!.]:::exClass;' + '\n'
const res = flow.parser.parse(statement) const res = flow.parser.parse(statement)
const vertices = flow.parser.yy.getVertices() const vertices = flow.parser.yy.getVertices()