marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-14 21:09:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

#1386 Adding support for click events and links

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-05-06 18:51:12 +02:00
parent a20e6086cc
commit 9a3ec31191
7 changed files with 87 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
cypress/platform/current.html
View File

@@ -41,7 +41,14 @@
</div> </div>
<div class="mermaid" style="width: 50%; height: 20%;"> <div class="mermaid" style="width: 50%; height: 20%;">
flowchart LR flowchart LR
id1[[This is the text in the box]] A{{A}}-->B{{B}};
click A callback "Tooltip"
click B "http://www.github.com" "This is a link"
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
flowchart LR
A{{A}}-->B{{B}};
</div> </div>
<div class="mermaid2" style="width: 50%; height: 20%;"> <div class="mermaid2" style="width: 50%; height: 20%;">
@@ -263,8 +270,9 @@ stateDiagram-v2
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif', fontFamily: '"arial", sans-serif',
curve: 'linear', curve: 'linear',
securityLevel: 'loose'
}); });
</script> function callback(){alert('It worked');}
</script> </script>
</body> </body>
</html> </html>

136
docs/flowchart.md
View File

@@ -18,11 +18,11 @@ graph TD
This declares a graph oriented from left to right (`LR`). This declares a graph oriented from left to right (`LR`).
``` ```
graph LR flowchart LR
Start --> Stop Start --> Stop
``` ```
```mermaid ```mermaid
graph LR flowchart LR
Start --> Stop Start --> Stop
``` ```
@@ -44,12 +44,12 @@ This renders a flowchart in the same way as graph but with a new rendering metho
### A node (default) ### A node (default)
``` ```
graph LR flowchart LR
id id
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id id
``` ```
Note that the id is what is displayed in the box. Note that the id is what is displayed in the box.
@@ -61,11 +61,11 @@ found for the node that will be used. Also if you define edges for the node late
one previously defined will be used when rendering the box. one previously defined will be used when rendering the box.
``` ```
graph LR flowchart LR
id1[This is the text in the box] id1[This is the text in the box]
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id1[This is the text in the box] id1[This is the text in the box]
``` ```
@@ -73,7 +73,7 @@ graph LR
### A node with round edges ### A node with round edges
``` ```
graph LR flowchart LR
id1(This is the text in the box) id1(This is the text in the box)
``` ```
```mermaid ```mermaid
@@ -84,7 +84,7 @@ flowchart LR
### A stadium-shaped node ### A stadium-shaped node
``` ```
graph LR flowchart LR
id1([This is the text in the box]) id1([This is the text in the box])
``` ```
```mermaid ```mermaid
@@ -95,44 +95,44 @@ flowchart LR
### A node in a subroutine shape ### A node in a subroutine shape
``` ```
graph LR flowchart LR
id1[[This is the text in the box]] id1[[This is the text in the box]]
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id1[[This is the text in the box]] id1[[This is the text in the box]]
``` ```
### A node in a cylindrical shape ### A node in a cylindrical shape
``` ```
graph LR flowchart LR
id1[(Database)] id1[(Database)]
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id1[(Database)] id1[(Database)]
``` ```
### A node in the form of a circle ### A node in the form of a circle
``` ```
graph LR flowchart LR
id1((This is the text in the circle)) id1((This is the text in the circle))
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id1((This is the text in the circle)) id1((This is the text in the circle))
``` ```
### A node in an asymetric shape ### A node in an asymetric shape
``` ```
graph LR flowchart LR
id1>This is the text in the box] id1>This is the text in the box]
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id1>This is the text in the box] id1>This is the text in the box]
``` ```
Currently only the shape above is possible and not its mirror. *This might change with future releases.* Currently only the shape above is possible and not its mirror. *This might change with future releases.*
@@ -140,22 +140,22 @@ Currently only the shape above is possible and not its mirror. *This might chang
### A node (rhombus) ### A node (rhombus)
``` ```
graph LR flowchart LR
id1{This is the text in the box} id1{This is the text in the box}
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id1{This is the text in the box} id1{This is the text in the box}
``` ```
### A hexagon node ### A hexagon node
``` ```
graph LR flowchart LR
id1{{This is the text in the box}} id1{{This is the text in the box}}
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id1{{This is the text in the box}} id1{{This is the text in the box}}
``` ```
@@ -209,110 +209,110 @@ Nodes can be connected with links/edges. It is possible to have different types
### A link with arrow head ### A link with arrow head
``` ```
graph LR flowchart LR
A-->B A-->B
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A-->B A-->B
``` ```
### An open link ### An open link
``` ```
graph LR flowchart LR
A --- B A --- B
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A --- B A --- B
``` ```
### Text on links ### Text on links
``` ```
graph LR flowchart LR
A-- This is the text ---B A-- This is the text! ---B
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A-- This is the text ---B A-- This is the text ---B
``` ```
or or
``` ```
graph LR flowchart LR
A---|This is the text|B A---|This is the text|B
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A---|This is the text|B A---|This is the text|B
``` ```
### A link with arrow head and text ### A link with arrow head and text
``` ```
graph LR flowchart LR
A-->|text|B A-->|text|B
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A-->|text|B A-->|text|B
``` ```
or or
``` ```
graph LR flowchart LR
A-- text -->B A-- text -->B
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A-- text -->B A-- text -->B
``` ```
### Dotted link ### Dotted link
``` ```
graph LR; flowchart LR;
A-.->B; A-.->B;
``` ```
```mermaid ```mermaid
graph LR; flowchart LR;
A-.->B; A-.->B;
``` ```
### Dotted link with text ### Dotted link with text
``` ```
graph LR flowchart LR
A-. text .-> B A-. text .-> B
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A-. text .-> B A-. text .-> B
``` ```
### Thick link ### Thick link
``` ```
graph LR flowchart LR
A ==> B A ==> B
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A ==> B A ==> B
``` ```
### Thick link with text ### Thick link with text
``` ```
graph LR flowchart LR
A == text ==> B A == text ==> B
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A == text ==> B A == text ==> B
``` ```
@@ -320,31 +320,31 @@ graph LR
It is possible declare many links in the same line as per below: It is possible declare many links in the same line as per below:
``` ```
graph LR flowchart LR
A -- text --> B -- text2 --> C A -- text --> B -- text2 --> C
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A -- text --> B -- text2 --> C A -- text --> B -- text2 --> C
``` ```
It is also possible to declare multiple nodes links in the same line as per below: It is also possible to declare multiple nodes links in the same line as per below:
``` ```
graph LR flowchart LR
a --> b & c--> d a --> b & c--> d
``` ```
```mermaid ```mermaid
graph LR flowchart LR
a --> b & c--> d a --> b & c--> d
``` ```
You can then describe dependencies in a very expressive way. Like the onliner below: You can then describe dependencies in a very expressive way. Like the onliner below:
``` ```
graph TB flowchart TB
A & B--> C & D A & B--> C & D
``` ```
```mermaid ```mermaid
graph TB flowchart TB
A & B--> C & D A & B--> C & D
``` ```
If you describe the same diagram using the the basic syntax, it will take four lines. A If you describe the same diagram using the the basic syntax, it will take four lines. A
@@ -352,7 +352,7 @@ word of warning, one could go overboard with this making the graph harder to rea
markdown form. The Swedish word `lagom` comes to mind. It means, not to much and not to little. markdown form. The Swedish word `lagom` comes to mind. It means, not to much and not to little.
This goes for expressive syntaxes as well. This goes for expressive syntaxes as well.
``` ```
graph TB flowchart TB
A --> C A --> C
A --> D A --> D
B --> C B --> C
@@ -399,11 +399,11 @@ flowchart LR
It is possible to put text within quotes in order to render more troublesome characters. As in the example below: It is possible to put text within quotes in order to render more troublesome characters. As in the example below:
``` ```
graph LR flowchart LR
id1["This is the (text) in the box"] id1["This is the (text) in the box"]
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id1["This is the (text) in the box"] id1["This is the (text) in the box"]
``` ```
@@ -412,11 +412,11 @@ graph LR
It is possible to escape characters using the syntax examplified here. It is possible to escape characters using the syntax examplified here.
``` ```
graph LR flowchart LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"] A["A double quote:#quot;"] -->B["A dec char:#9829;"]
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"] A["A double quote:#quot;"] -->B["A dec char:#9829;"]
``` ```
@@ -431,7 +431,7 @@ end
An example below: An example below:
``` ```
graph TB flowchart TB
c1-->a2 c1-->a2
subgraph one subgraph one
a1-->a2 a1-->a2
@@ -444,7 +444,7 @@ graph TB
end end
``` ```
```mermaid ```mermaid
graph TB flowchart TB
c1-->a2 c1-->a2
subgraph one subgraph one
a1-->a2 a1-->a2
@@ -460,14 +460,14 @@ graph TB
You can also set an excplicit id for the subgraph. You can also set an excplicit id for the subgraph.
``` ```
graph TB flowchart TB
c1-->a2 c1-->a2
subgraph ide1 [one] subgraph ide1 [one]
a1-->a2 a1-->a2
end end
``` ```
```mermaid ```mermaid
graph TB flowchart TB
c1-->a2 c1-->a2
subgraph id1 [one] subgraph id1 [one]
a1-->a2 a1-->a2
@@ -534,7 +534,7 @@ Examples of tooltip usage below:
``` ```
``` ```
graph LR; flowchart LR;
A-->B; A-->B;
click A callback "Tooltip for a callback" click A callback "Tooltip for a callback"
click B "http://www.github.com" "This is a tooltip for a link" click B "http://www.github.com" "This is a tooltip for a link"
@@ -543,7 +543,7 @@ graph LR;
The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip. The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.
```mermaid ```mermaid
graph LR; flowchart LR
A-->B; A-->B;
click A callback "Tooltip" click A callback "Tooltip"
click B "http://www.github.com" "This is a link" click B "http://www.github.com" "This is a link"
@@ -556,7 +556,7 @@ Beginners tip, a full example using interactive links in a html context:
``` ```
<body> <body>
<div class="mermaid"> <div class="mermaid">
graph LR; flowchart LR;
A-->B; A-->B;
click A callback "Tooltip" click A callback "Tooltip"
click B "http://www.github.com" "This is a link" click B "http://www.github.com" "This is a link"
@@ -586,7 +586,7 @@ Beginners tip, a full example using interactive links in a html context:
Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
``` ```
graph LR flowchart LR
%% this is a comment A -- text --> B{node} %% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C A -- text --> B -- text2 --> C
``` ```
@@ -610,13 +610,13 @@ linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
It is possible to apply specific styles such as a thicker border or a different background color to a node. It is possible to apply specific styles such as a thicker border or a different background color to a node.
``` ```
graph LR flowchart LR
id1(Start)-->id2(Stop) id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5 style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5
``` ```
```mermaid ```mermaid
graph LR flowchart LR
id1(Start)-->id2(Stop) id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5 style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5
@@ -650,12 +650,12 @@ It is also possible to attach a class to a list of nodes in one statement:
A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below: A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
``` ```
graph LR flowchart LR
A:::someclass --> B A:::someclass --> B
classDef someclass fill:#f96; classDef someclass fill:#f96;
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A:::someclass --> B A:::someclass --> B
classDef someclass fill:#f96; classDef someclass fill:#f96;
``` ```
@@ -681,13 +681,13 @@ below:
**Example definition** **Example definition**
``` ```
graph LR; flowchart LR;
A-->B[AAA<span>BBB</span>]; A-->B[AAA<span>BBB</span>];
B-->D; B-->D;
class A cssClass; class A cssClass;
``` ```
```mermaid ```mermaid
graph LR; flowchart LR;
A-->B[AAA<span>BBB</span>]; A-->B[AAA<span>BBB</span>];
B-->D; B-->D;
class A cssClass; class A cssClass;
@@ -734,7 +734,7 @@ graph TD
Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges. Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.
``` ```
graph LR flowchart LR
A[Hard edge] -->|Link text| B(Round edge) A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision} B --> C{Decision}
C -->|One| D[Result one] C -->|One| D[Result one]
@@ -742,7 +742,7 @@ graph LR
``` ```
```mermaid ```mermaid
graph LR flowchart LR
A[Hard edge] -->|Link text| B(Round edge) A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision} B --> C{Decision}
C -->|One| D[Result one] C -->|One| D[Result one]

2
src/dagre-wrapper/edges.js
View File

@@ -34,8 +34,10 @@ export const insertEdgeLabel = (elem, edge) => {
export const positionEdgeLabel = edge => { export const positionEdgeLabel = edge => {
logger.info('Moving label', edge.id, edge.label, edgeLabels[edge.id]); logger.info('Moving label', edge.id, edge.label, edgeLabels[edge.id]);
if (edge.label) {
const el = edgeLabels[edge.id]; const el = edgeLabels[edge.id];
el.attr('transform', 'translate(' + edge.x + ', ' + edge.y + ')'); el.attr('transform', 'translate(' + edge.x + ', ' + edge.y + ')');
}
}; };
// const getRelationType = function(type) { // const getRelationType = function(type) {

2
src/dagre-wrapper/nodes.js
View File

@@ -255,7 +255,7 @@ const rect = (parent, node) => {
const rect = shapeSvg.insert('rect', ':first-child'); const rect = shapeSvg.insert('rect', ':first-child');
rect rect
.attr('class', 'basic') .attr('class', 'basic label-container')
.attr('rx', node.rx) .attr('rx', node.rx)
.attr('ry', node.ry) .attr('ry', node.ry)
.attr('x', -bbox.width / 2 - halfPadding) .attr('x', -bbox.width / 2 - halfPadding)

1
src/dagre-wrapper/shapes/util.js
View File

@@ -46,5 +46,6 @@ export function insertPolygonShape(parent, w, h, points) {
}) })
.join(' ') .join(' ')
) )
.attr('class', 'label-container')
.attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')'); .attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')');
} }

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

@@ -424,7 +424,7 @@ export const draw = function(text, id) {
} }
// Add label rects for non html labels // Add label rects for non html labels
if (!conf.htmlLabels) { if (!conf.htmlLabels || true) { // eslint-disable-line
const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label'); const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
for (let k = 0; k < labels.length; k++) { for (let k = 0; k < labels.length; k++) {
const label = labels[k]; const label = labels[k];

3
src/mermaidAPI.js
View File

@@ -736,7 +736,7 @@ const render = function(id, _txt, cb, container) {
} }
// classDef // classDef
if (graphType === 'flowchart') { if (graphType === 'flowchart' || graphType === 'flowchart-v2') {
const classes = flowRenderer.getClasses(txt); const classes = flowRenderer.getClasses(txt);
for (const className in classes) { for (const className in classes) {
style += `\n.${className} > * { ${classes[className].styles.join( style += `\n.${className} > * { ${classes[className].styles.join(
@@ -858,6 +858,7 @@ const render = function(id, _txt, cb, container) {
if (typeof cb !== 'undefined') { if (typeof cb !== 'undefined') {
switch (graphType) { switch (graphType) {
case 'flowchart': case 'flowchart':
case 'flowchart-v2':
cb(svgCode, flowDb.bindFunctions); cb(svgCode, flowDb.bindFunctions);
break; break;
case 'gantt': case 'gantt':