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

Support old and new syntax

Browse Source
This commit is contained in:
Matthieu MOREL 2020-12-10 09:35:46 +01:00
parent 62768cd617
commit b97e71e83e
8 changed files with 162 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
cypress/platform/click_security_loose.html
View File

@ -16,26 +16,26 @@
<div id="FirstLine" class="mermaid">
graph TB
Function-->URL
click Function call clickByFlow() "Add a div"
click URL href "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div>
<div id="FirstLine" class="mermaid">
graph TB
1Function--->2URL
click 1Function call clickByFlow() "Add a div"
click 2URL href "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div>
<div id="FirstLine" class="mermaid">
flowchart TB
Function-->URL
click Function call clickByFlow() "Add a div"
click URL href "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
</div>
<div id="FirstLine" class="mermaid">
flowchart TB
1Function--->2URL
click 1Function call clickByFlow() "Add a div"
click 2URL href "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
</div>
<div id="FirstLine" class="mermaid">

8
cypress/platform/click_security_other.html
View File

@ -10,14 +10,14 @@
<div id="FirstLine" class="mermaid">
graph TB
Function-->URL
click Function call clickByFlow() "Add a div"
click URL href "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div>
<div id="FirstLine" class="mermaid">
graph TB
1Function-->2URL
click 1Function call clickByFlow() "Add a div"
click 2URL href "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div>
<div class="mermaid">

4
cypress/platform/click_security_strict.html
View File

@ -10,8 +10,8 @@
<div id="FirstLine" class="mermaid">
graph TB
Function-->URL
click Function call clickByFlow() "Add a div"
click URL href "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div>
<div id="FirstLine" class="mermaid">
graph TB

8
cypress/platform/interaction.html
View File

@ -16,14 +16,14 @@
<div id="FirstLine" class="mermaid">
graph TB
Function-->URL
click Function call clickByFlow() "Add a div"
click URL href "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div>
<div id="FirstLine" class="mermaid2">
graph TB
1Function-->2URL
click 1Function call clickByFlow() "Add a div"
click 2URL href "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
</div>
<div id="FirstLine" class="mermaid2">

45
docs/diagrams-and-syntax-and-examples/flowchart.md
View File

@ -139,7 +139,7 @@ graph LR
id1((This is the text in the circle))
```
### A node in an asymetric shape
### A node in an asymmetric shape
```
graph LR
@ -493,7 +493,7 @@ graph LR
### Entity codes to escape characters
It is possible to escape characters using the syntax examplified here.
It is possible to escape characters using the syntax exemplified here.
```
graph LR
@ -541,7 +541,7 @@ graph TB
end
```
You can also set an excplicit id for the subgraph.
You can also set an explicit id for the subgraph.
```
graph TB
@ -601,6 +601,7 @@ flowchart TB
It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
```
click nodeId callback
click nodeId call callback()
```
@ -620,6 +621,10 @@ Examples of tooltip usage below:
```
graph LR;
A-->B;
B-->C;
C-->D;
click A callback "Tooltip for a callback"
click B "http://www.github.com" "This is a tooltip for a link"
click A call callback() "Tooltip for a callback"
click B href "http://www.github.com" "This is a tooltip for a link"
```
@ -629,8 +634,12 @@ The tooltip text is surrounded in double quotes. The styles of the tooltip are s
```mermaid
graph LR
A-->B;
click A call callback() "Tooltip"
click B href "http://www.github.com" "This is a link"
B-->C;
C-->D;
click A callback "Tooltip"
click B "http://www.github.com" "This is a link"
click C call callback() "Tooltip"
click D href "http://www.github.com" "This is a link"
```
> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
@ -641,16 +650,24 @@ Links are opened in the same browser tab/window by default. It is possible to ch
graph LR;
A-->B;
B-->C;
click A href "http://www.github.com" _blank
click B href "http://www.github.com" "Open this in a new tab" _blank
C-->D;
D-->E;
click A "http://www.github.com" _blank
click B "http://www.github.com" "Open this in a new tab" _blank
click C href "http://www.github.com" _blank
click D href "http://www.github.com" "Open this in a new tab" _blank
```
```mermaid
graph LR;
A-->B;
B-->C;
click A href "http://www.github.com" _blank
click B href "http://www.github.com" "Open this in a new tab" _blank
C-->D;
D-->E;
click A "http://www.github.com" _blank
click B "http://www.github.com" "Open this in a new tab" _blank
click C href "http://www.github.com" _blank
click D href "http://www.github.com" "Open this in a new tab" _blank
```
Beginners tip, a full example using interactive links in a html context:
@ -659,8 +676,12 @@ Beginners tip, a full example using interactive links in a html context:
<div class="mermaid">
graph LR;
A-->B;
click A call callback() "Tooltip"
click B href "http://www.github.com" "This is a link"
B-->C;
C-->D;
click A callback "Tooltip"
click B "http://www.github.com" "This is a link"
click C call callback() "Tooltip"
click D href "http://www.github.com" "This is a link"
</div>
<script>
@ -808,7 +829,7 @@ If a class is named default it will be assigned to all classes without specific
It is possible to add icons from fontawesome.
The icons are acessed via the syntax fa:#icon class name#.
The icons are accessed via the syntax fa:#icon class name#.
```
graph TD

39
docs/flowchart.md
View File

@ -349,7 +349,7 @@ graph LR
a --> b & c--> d
```
You can then describe dependencies in a very expressive way. Like the oneliner below:
You can then describe dependencies in a very expressive way. Like the one-liner below:
```
graph TB
A & B--> C & D
@ -594,6 +594,7 @@ flowchart TB
It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
```
click nodeId callback
click nodeId call callback()
```
@ -613,6 +614,10 @@ Examples of tooltip usage below:
```
graph LR;
A-->B;
B-->C;
C-->D;
click A callback "Tooltip for a callback"
click B "http://www.github.com" "This is a tooltip for a link"
click A call callback() "Tooltip for a callback"
click B href "http://www.github.com" "This is a tooltip for a link"
```
@ -622,8 +627,12 @@ The tooltip text is surrounded in double quotes. The styles of the tooltip are s
```mermaid
graph LR
A-->B;
click A call callback() "Tooltip"
click B href "http://www.github.com" "This is a link"
B-->C;
C-->D;
click A callback "Tooltip"
click B "http://www.github.com" "This is a link"
click C call callback() "Tooltip"
click D href "http://www.github.com" "This is a link"
```
> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
@ -634,16 +643,24 @@ Links are opened in the same browser tab/window by default. It is possible to ch
graph LR;
A-->B;
B-->C;
click A href "http://www.github.com" _blank
click B href "http://www.github.com" "Open this in a new tab" _blank
C-->D;
D-->E;
click A "http://www.github.com" _blank
click B "http://www.github.com" "Open this in a new tab" _blank
click C href "http://www.github.com" _blank
click D href "http://www.github.com" "Open this in a new tab" _blank
```
```mermaid
graph LR;
A-->B;
B-->C;
click A href "http://www.github.com" _blank
click B href "http://www.github.com" "Open this in a new tab" _blank
C-->D;
D-->E;
click A "http://www.github.com" _blank
click B "http://www.github.com" "Open this in a new tab" _blank
click C href "http://www.github.com" _blank
click D href "http://www.github.com" "Open this in a new tab" _blank
```
Beginners tip, a full example using interactive links in a html context:
@ -652,8 +669,12 @@ Beginners tip, a full example using interactive links in a html context:
<div class="mermaid">
graph LR;
A-->B;
click A call callback() "Tooltip"
click B href "http://www.github.com" "This is a link"
B-->C;
C-->D;
click A callback "Tooltip"
click B "http://www.github.com" "This is a link"
click C call callback() "Tooltip"
click D href "http://www.github.com" "This is a link"
</div>
<script>

68
src/diagrams/flowchart/parser/flow-interactions.spec.js
View File

@ -13,6 +13,16 @@ describe('[Interactions] when parsing', () => {
});
it('it should be possible to use click to a callback', function() {
spyOn(flowDb, 'setClickEvent');
const res = flow.parser.parse('graph TD\nA-->B\nclick A callback');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(flowDb.setClickEvent).toHaveBeenCalledWith('A', 'callback');
});
it('it should be possible to use click to a click and call callback', function() {
spyOn(flowDb, 'setClickEvent');
const res = flow.parser.parse('graph TD\nA-->B\nclick A call callback()');
@ -23,6 +33,18 @@ describe('[Interactions] when parsing', () => {
});
it('it should be possible to use click to a callback with toolip', function() {
spyOn(flowDb, 'setClickEvent');
spyOn(flowDb, 'setTooltip');
const res = flow.parser.parse('graph TD\nA-->B\nclick A callback "tooltip"');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(flowDb.setClickEvent).toHaveBeenCalledWith('A', 'callback');
expect(flowDb.setTooltip).toHaveBeenCalledWith('A','tooltip');
});
it('it should be possible to use click to a click and call callback with toolip', function() {
spyOn(flowDb, 'setClickEvent');
spyOn(flowDb, 'setTooltip');
const res = flow.parser.parse('graph TD\nA-->B\nclick A call callback() "tooltip"');
@ -45,6 +67,16 @@ describe('[Interactions] when parsing', () => {
});
it('should handle interaction - click to a link', function() {
spyOn(flowDb, 'setLink');
const res = flow.parser.parse('graph TD\nA-->B\nclick A "click.html"');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html');
});
it('should handle interaction - click to a click and href link', function() {
spyOn(flowDb, 'setLink');
const res = flow.parser.parse('graph TD\nA-->B\nclick A href "click.html"');
@ -55,6 +87,18 @@ describe('[Interactions] when parsing', () => {
});
it('should handle interaction - click to a link with tooltip', function() {
spyOn(flowDb, 'setLink');
spyOn(flowDb, 'setTooltip');
const res = flow.parser.parse('graph TD\nA-->B\nclick A "click.html" "tooltip"');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html');
expect(flowDb.setTooltip).toHaveBeenCalledWith('A','tooltip');
});
it('should handle interaction - click to a click and href link with tooltip', function() {
spyOn(flowDb, 'setLink');
spyOn(flowDb, 'setTooltip');
const res = flow.parser.parse('graph TD\nA-->B\nclick A href "click.html" "tooltip"');
@ -67,6 +111,16 @@ describe('[Interactions] when parsing', () => {
});
it('should handle interaction - click to a link with target', function() {
spyOn(flowDb, 'setLink');
const res = flow.parser.parse('graph TD\nA-->B\nclick A "click.html" _blank');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', '_blank');
});
it('should handle interaction - click to a click and href link with target', function() {
spyOn(flowDb, 'setLink');
const res = flow.parser.parse('graph TD\nA-->B\nclick A href "click.html" _blank');
@ -79,7 +133,7 @@ describe('[Interactions] when parsing', () => {
it('should handle interaction - click to a link with tooltip and target', function() {
spyOn(flowDb, 'setLink');
spyOn(flowDb, 'setTooltip');
const res = flow.parser.parse('graph TD\nA-->B\nclick A href "click.html" "tooltip" _blank');
const res = flow.parser.parse('graph TD\nA-->B\nclick A "click.html" "tooltip" _blank');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
@ -88,4 +142,16 @@ describe('[Interactions] when parsing', () => {
expect(flowDb.setTooltip).toHaveBeenCalledWith('A','tooltip');
});
it('should handle interaction - click to a click and href link with tooltip and target', function() {
spyOn(flowDb, 'setLink');
spyOn(flowDb, 'setTooltip');
const res = flow.parser.parse('graph TD\nA-->B\nclick A href "click.html" "tooltip" _blank');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', '_blank');
expect(flowDb.setTooltip).toHaveBeenCalledWith('A','tooltip');
});
});

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

@ -450,14 +450,20 @@ classStatement:CLASS SPACE alphaNum SPACE alphaNum
;
clickStatement
: CLICK CALLBACKNAME {$$ = $1;yy.setClickEvent($1, $2);}
| CLICK CALLBACKNAME SPACE STR {$$ = $1;yy.setClickEvent($1, $2);yy.setTooltip($1, $4)}
| CLICK CALLBACKNAME CALLBACKARGS {$$ = $1;yy.setClickEvent($1, $2, $3);}
| CLICK CALLBACKNAME CALLBACKARGS SPACE STR {$$ = $1;yy.setClickEvent($1, $2, $3);yy.setTooltip($1, $5)}
| CLICK HREF {$$ = $1;yy.setLink($1, $2);}
| CLICK HREF SPACE STR {$$ = $1;yy.setLink($1, $2);yy.setTooltip($1, $4)}
| CLICK HREF SPACE LINK_TARGET {$$ = $1;yy.setLink($1, $2, $4);}
| CLICK HREF SPACE STR SPACE LINK_TARGET {$$ = $1;yy.setLink($1, $2, $6);yy.setTooltip($1, $4)}
: CLICK CALLBACKNAME {$$ = $1;yy.setClickEvent($1, $2);}
| CLICK CALLBACKNAME SPACE STR {$$ = $1;yy.setClickEvent($1, $2);yy.setTooltip($1, $4);}
| CLICK CALLBACKNAME CALLBACKARGS {$$ = $1;yy.setClickEvent($1, $2, $3);}
| CLICK CALLBACKNAME CALLBACKARGS SPACE STR {$$ = $1;yy.setClickEvent($1, $2, $3);yy.setTooltip($1, $5);}
| CLICK HREF {$$ = $1;yy.setLink($1, $2);}
| CLICK HREF SPACE STR {$$ = $1;yy.setLink($1, $2);yy.setTooltip($1, $4);}
| CLICK HREF SPACE LINK_TARGET {$$ = $1;yy.setLink($1, $2, $4);}
| CLICK HREF SPACE STR SPACE LINK_TARGET {$$ = $1;yy.setLink($1, $2, $6);yy.setTooltip($1, $4);}
| CLICK SPACE alphaNum {$$ = $1;yy.setClickEvent($1, $3);}
| CLICK SPACE alphaNum SPACE STR {$$ = $1;yy.setClickEvent($1, $3);yy.setTooltip($1, $5);}
| CLICK SPACE STR {$$ = $1;yy.setLink($1, $3);}
| CLICK SPACE STR SPACE STR {$$ = $1;yy.setLink($1, $3);yy.setTooltip($1, $5);}
| CLICK SPACE STR SPACE LINK_TARGET {$$ = $1;yy.setLink($1, $3, $5);}
| CLICK SPACE STR SPACE STR SPACE LINK_TARGET {$$ = $1;yy.setLink($1, $3, $7);yy.setTooltip($1, $5);}
;
styleStatement:STYLE SPACE alphaNum SPACE stylesOpt