mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
#1620 Fix arrow heads to be visible for all flowchart node shapes
This commit is contained in:
Marc Faber
parent
03edd00014
commit
1514ef18ec
225
dist/flowchart.html
vendored
225
dist/flowchart.html
vendored
@ -886,55 +886,196 @@
|
|||||||
<h3>graph</h3>
|
<h3>graph</h3>
|
||||||
<div class="mermaid">
|
<div class="mermaid">
|
||||||
graph LR
|
graph LR
|
||||||
A[red text] -->|default style| B(blue text)
|
A1[red text] -->|default style| A2[blue text]
|
||||||
C([red text]) -->|default style| D[[blue text]]
|
B1(red text) -->|default style| B2(blue text)
|
||||||
E[(red text)] -->|default style| F((blue text))
|
C1([red text]) -->|default style| C2([blue text])
|
||||||
G>red text] -->|default style| H{blue text}
|
D1[[red text]] -->|default style| D2[[blue text]]
|
||||||
I{{red text}} -->|default style| J[/blue text/]
|
E1[(red text)] -->|default style| E2[(blue text)]
|
||||||
K[\red text\] -->|default style| L[/blue text\]
|
F1((red text)) -->|default style| F2((blue text))
|
||||||
M[\red text/] -->|default style| N[blue text]
|
G1>red text] -->|default style| G2>blue text]
|
||||||
|
H1{red text} -->|default style| H2{blue text}
|
||||||
|
I1{{red text}} -->|default style| I2{{blue text}}
|
||||||
|
J1[/red text/] -->|default style| J2[/blue text/]
|
||||||
|
K1[\red text\] -->|default style| K2[\blue text\]
|
||||||
|
L1[/red text\] -->|default style| L2[/blue text\]
|
||||||
|
M1[\red text/] -->|default style| M2[\blue text/]
|
||||||
|
N1[red text] -->|default style| N2[blue text]
|
||||||
linkStyle default color:Sienna;
|
linkStyle default color:Sienna;
|
||||||
style A stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style B stroke:#0000ff,fill:#ccccff,color:#0000ff
|
style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
|
style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style E stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style F stroke:#0000ff,fill:#ccccff,color:#0000ff
|
style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style G stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style H stroke:#0000ff,fill:#ccccff,color:#0000ff
|
style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style I stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style J stroke:#0000ff,fill:#ccccff,color:#0000ff
|
style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style K stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style L stroke:#0000ff,fill:#ccccff,color:#0000ff
|
style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style M stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style N stroke:#0000ff,fill:#ccccff,color:#0000ff
|
style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>flowchart</h3>
|
<h3>flowchart</h3>
|
||||||
<div class="mermaid">
|
<div class="mermaid">
|
||||||
flowchart LR
|
flowchart LR
|
||||||
A[red text] -->|default style| B(blue text)
|
A1[red text] <-->|default style| A2[blue text]
|
||||||
C([red text]) -->|default style| D[[blue text]]
|
B1(red text) <-->|default style| B2(blue text)
|
||||||
E[(red text)] -->|default style| F((blue text))
|
C1([red text]) <-->|default style| C2([blue text])
|
||||||
G>red text] -->|default style| H{blue text}
|
D1[[red text]] <-->|default style| D2[[blue text]]
|
||||||
I{{red text}} -->|default style| J[/blue text/]
|
E1[(red text)] <-->|default style| E2[(blue text)]
|
||||||
K[\red text\] -->|default style| L[/blue text\]
|
F1((red text)) <-->|default style| F2((blue text))
|
||||||
M[\red text/] -->|default style| N[blue text]
|
G1>red text] <-->|default style| G2>blue text]
|
||||||
|
H1{red text} <-->|default style| H2{blue text}
|
||||||
|
I1{{red text}} <-->|default style| I2{{blue text}}
|
||||||
|
J1[/red text/] <-->|default style| J2[/blue text/]
|
||||||
|
K1[\red text\] <-->|default style| K2[\blue text\]
|
||||||
|
L1[/red text\] <-->|default style| L2[/blue text\]
|
||||||
|
M1[\red text/] <-->|default style| M2[\blue text/]
|
||||||
|
N1[red text] <-->|default style| N2[blue text]
|
||||||
linkStyle default color:Sienna;
|
linkStyle default color:Sienna;
|
||||||
style A stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style B stroke:#0000ff,fill:#ccccff,color:#0000ff
|
style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
|
style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style E stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style F stroke:#0000ff,fill:#ccccff,color:#0000ff
|
style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style G stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style H stroke:#0000ff,fill:#ccccff,color:#0000ff
|
style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style I stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style J stroke:#0000ff,fill:#ccccff,color:#0000ff
|
style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style K stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style L stroke:#0000ff,fill:#ccccff,color:#0000ff
|
style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style M stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
style N stroke:#0000ff,fill:#ccccff,color:#0000ff
|
style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<h2>Sample 19</h2>
|
||||||
|
|
||||||
|
<h3>graph</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
graph TB
|
||||||
|
A1[red text] -->|default style| A2[blue text]
|
||||||
|
B1(red text) -->|default style| B2(blue text)
|
||||||
|
C1([red text]) -->|default style| C2([blue text])
|
||||||
|
D1[[red text]] -->|default style| D2[[blue text]]
|
||||||
|
E1[(red text)] -->|default style| E2[(blue text)]
|
||||||
|
F1((red text)) -->|default style| F2((blue text))
|
||||||
|
G1>red text] -->|default style| G2>blue text]
|
||||||
|
H1{red text} -->|default style| H2{blue text}
|
||||||
|
I1{{red text}} -->|default style| I2{{blue text}}
|
||||||
|
J1[/red text/] -->|default style| J2[/blue text/]
|
||||||
|
K1[\red text\] -->|default style| K2[\blue text\]
|
||||||
|
L1[/red text\] -->|default style| L2[/blue text\]
|
||||||
|
M1[\red text/] -->|default style| M2[\blue text/]
|
||||||
|
N1[red text] -->|default style| N2[blue text]
|
||||||
|
linkStyle default color:Sienna;
|
||||||
|
style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>flowchart</h3>
|
||||||
|
<div class="mermaid">
|
||||||
|
flowchart TB
|
||||||
|
A1[red text] <-->|default style| A2[blue text]
|
||||||
|
B1(red text) <-->|default style| B2(blue text)
|
||||||
|
C1([red text]) <-->|default style| C2([blue text])
|
||||||
|
D1[[red text]] <-->|default style| D2[[blue text]]
|
||||||
|
E1[(red text)] <-->|default style| E2[(blue text)]
|
||||||
|
F1((red text)) <-->|default style| F2((blue text))
|
||||||
|
G1>red text] <-->|default style| G2>blue text]
|
||||||
|
H1{red text} <-->|default style| H2{blue text}
|
||||||
|
I1{{red text}} <-->|default style| I2{{blue text}}
|
||||||
|
J1[/red text/] <-->|default style| J2[/blue text/]
|
||||||
|
K1[\red text\] <-->|default style| K2[\blue text\]
|
||||||
|
L1[/red text\] <-->|default style| L2[/blue text\]
|
||||||
|
M1[\red text/] <-->|default style| M2[\blue text/]
|
||||||
|
N1[red text] <-->|default style| N2[blue text]
|
||||||
|
linkStyle default color:Sienna;
|
||||||
|
style A1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style B1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style C1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style D1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style E1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style F1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style G1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style H1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style I1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style J1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style K1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style L1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style M1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style N1 stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style A2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style B2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style C2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style D2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style E2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style F2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style G2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style H2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style I2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style J2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style K2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style L2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style M2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
style N2 stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr/>
|
<hr/>
|
||||||
|
|||||||
@ -53,7 +53,7 @@ const hexagon = (parent, node) => {
|
|||||||
updateNodeBounds(node, hex);
|
updateNodeBounds(node, hex);
|
||||||
|
|
||||||
node.intersect = function(point) {
|
node.intersect = function(point) {
|
||||||
return intersect.polygon(node, point);
|
return intersect.polygon(node, points, point);
|
||||||
};
|
};
|
||||||
|
|
||||||
return shapeSvg;
|
return shapeSvg;
|
||||||
@ -74,10 +74,12 @@ const rect_left_inv_arrow = (parent, node) => {
|
|||||||
|
|
||||||
const el = insertPolygonShape(shapeSvg, w, h, points);
|
const el = insertPolygonShape(shapeSvg, w, h, points);
|
||||||
el.attr('style', node.style);
|
el.attr('style', node.style);
|
||||||
updateNodeBounds(node, el);
|
|
||||||
|
node.width = w + h;
|
||||||
|
node.height = h;
|
||||||
|
|
||||||
node.intersect = function(point) {
|
node.intersect = function(point) {
|
||||||
return intersect.polygon(node, point);
|
return intersect.polygon(node, points, point);
|
||||||
};
|
};
|
||||||
|
|
||||||
return shapeSvg;
|
return shapeSvg;
|
||||||
@ -100,7 +102,7 @@ const lean_right = (parent, node) => {
|
|||||||
updateNodeBounds(node, el);
|
updateNodeBounds(node, el);
|
||||||
|
|
||||||
node.intersect = function(point) {
|
node.intersect = function(point) {
|
||||||
return intersect.polygon(node, point);
|
return intersect.polygon(node, points, point);
|
||||||
};
|
};
|
||||||
|
|
||||||
return shapeSvg;
|
return shapeSvg;
|
||||||
@ -123,7 +125,7 @@ const lean_left = (parent, node) => {
|
|||||||
updateNodeBounds(node, el);
|
updateNodeBounds(node, el);
|
||||||
|
|
||||||
node.intersect = function(point) {
|
node.intersect = function(point) {
|
||||||
return intersect.polygon(node, point);
|
return intersect.polygon(node, points, point);
|
||||||
};
|
};
|
||||||
|
|
||||||
return shapeSvg;
|
return shapeSvg;
|
||||||
@ -146,7 +148,7 @@ const trapezoid = (parent, node) => {
|
|||||||
updateNodeBounds(node, el);
|
updateNodeBounds(node, el);
|
||||||
|
|
||||||
node.intersect = function(point) {
|
node.intersect = function(point) {
|
||||||
return intersect.polygon(node, point);
|
return intersect.polygon(node, points, point);
|
||||||
};
|
};
|
||||||
|
|
||||||
return shapeSvg;
|
return shapeSvg;
|
||||||
@ -169,7 +171,7 @@ const inv_trapezoid = (parent, node) => {
|
|||||||
updateNodeBounds(node, el);
|
updateNodeBounds(node, el);
|
||||||
|
|
||||||
node.intersect = function(point) {
|
node.intersect = function(point) {
|
||||||
return intersect.polygon(node, point);
|
return intersect.polygon(node, points, point);
|
||||||
};
|
};
|
||||||
|
|
||||||
return shapeSvg;
|
return shapeSvg;
|
||||||
@ -193,7 +195,7 @@ const rect_right_inv_arrow = (parent, node) => {
|
|||||||
updateNodeBounds(node, el);
|
updateNodeBounds(node, el);
|
||||||
|
|
||||||
node.intersect = function(point) {
|
node.intersect = function(point) {
|
||||||
return intersect.polygon(node, point);
|
return intersect.polygon(node, points, point);
|
||||||
};
|
};
|
||||||
|
|
||||||
return shapeSvg;
|
return shapeSvg;
|
||||||
@ -470,7 +472,7 @@ const subroutine = (parent, node) => {
|
|||||||
updateNodeBounds(node, el);
|
updateNodeBounds(node, el);
|
||||||
|
|
||||||
node.intersect = function(point) {
|
node.intersect = function(point) {
|
||||||
return intersect.polygon(node, point);
|
return intersect.polygon(node, points, point);
|
||||||
};
|
};
|
||||||
|
|
||||||
return shapeSvg;
|
return shapeSvg;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user