GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-02-04 07:13:25 +08:00
Code Issues Projects Releases Wiki Activity

Syntax clarification and full example

Browse Source
This commit is contained in:
erelling 2019-08-28 20:59:28 +02:00 committed by GitHub
parent d89ceb2125
commit de2b5390cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/flowchart.md
View File

@ -304,7 +304,7 @@ graph TB
## Interaction ## Interaction
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' 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 callback
@ -340,6 +340,32 @@ graph LR;
``` ```
> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2. > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
Beginners tip with a full example using interactive links in html context:
```
<body>
<div class="mermaid">
graph LR;
A-->B;
click A callback "Tooltip"
click B "http://www.github.com" "This is a link"
</div>
<script>
var callback = function(){
alert('A callback was triggered');
}
var config = {
startOnLoad:true,
flowchart:{
useMaxWidth:true,
htmlLabels:true,
curve:'cardinal',
},
securityLevel:'loose',
};
mermaid.initialize(config);
</script>
</body>
```
## Styling and classes ## Styling and classes