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

Merge pull request #1438 from mermaid-js/1436_intersection_with_circles

Browse Source 
1436 intersection with circles
This commit is contained in:
Knut Sveidqvist 2020-05-30 18:54:30 +02:00 committed by GitHub
commit 2c271acfe9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 91 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
cypress/platform/current.html
View File

@ -19,17 +19,17 @@
<body>
<h1>info below</h1>
<div class="mermaid" style="width: 100%; height: 20%;">
stateDiagram-v2
[*] --> S1
state "Some long name" as S1: The
flowchart TD
db[(PostgreSQL<br/>database)]
broker{RabbitMQ<br/>broker}
db --> broker
box --> broker
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
stateDiagram-v2
broker --> db
broker --> box
db --> broker
box --> broker
[*] --> S1
state "Some long name" as S1: The description\nwith multiple lines
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
flowchart LR
A{{A}}-- apa -->B{{B}};
@ -59,11 +59,6 @@ graph LR
State4 --> [*]
}
</div>
<div class="mermaid2 mermaid-apa" style="width: 100%; height: 20%;">
stateDiagram
[*] --> Still
Still --> [*]
</div>
<div class="mermaid2" style="width: 100%; height: 100%;">
stateDiagram-v2
[*] --> Still

90
docs/flowchart.md
View File

@ -65,7 +65,7 @@ graph LR
id1[This is the text in the box]
```
```mermaid
flowchart LR
graph LR
id1[This is the text in the box]
```
@ -73,66 +73,66 @@ flowchart LR
### A node with round edges
```
flowchart LR
graph LR
id1(This is the text in the box)
```
```mermaid
flowchart LR
graph LR
id1(This is the text in the box)
```
### A stadium-shaped node
```
flowchart LR
graph LR
id1([This is the text in the box])
```
```mermaid
flowchart LR
graph LR
id1([This is the text in the box])
```
### A node in a subroutine shape
```
flowchart LR
graph LR
id1[[This is the text in the box]]
```
```mermaid
flowchart LR
graph LR
id1[[This is the text in the box]]
```
### A node in a cylindrical shape
```
flowchart LR
graph LR
id1[(Database)]
```
```mermaid
flowchart LR
graph LR
id1[(Database)]
```
### A node in the form of a circle
```
flowchart LR
graph LR
id1((This is the text in the circle))
```
```mermaid
flowchart LR
graph LR
id1((This is the text in the circle))
```
### A node in an asymetric shape
```
flowchart LR
graph LR
id1>This is the text in the box]
```
```mermaid
flowchart LR
graph LR
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.*
@ -140,22 +140,22 @@ Currently only the shape above is possible and not its mirror. *This might chang
### A node (rhombus)
```
flowchart LR
graph LR
id1{This is the text in the box}
```
```mermaid
flowchart LR
graph LR
id1{This is the text in the box}
```
### A hexagon node
```
flowchart LR
graph LR
id1{{This is the text in the box}}
```
```mermaid
flowchart LR
graph LR
id1{{This is the text in the box}}
```
@ -209,22 +209,22 @@ Nodes can be connected with links/edges. It is possible to have different types
### A link with arrow head
```
flowchart LR
graph LR
A-->B
```
```mermaid
flowchart LR
graph LR
A-->B
```
### An open link
```
flowchart LR
graph LR
A --- B
```
```mermaid
flowchart LR
graph LR
A --- B
```
@ -235,84 +235,84 @@ graph LR
A-- This is the text! ---B
```
```mermaid
flowchart LR
graph LR
A-- This is the text ---B
```
or
```
flowchart LR
graph LR
A---|This is the text|B
```
```mermaid
flowchart LR
graph LR
A---|This is the text|B
```
### A link with arrow head and text
```
flowchart LR
graph LR
A-->|text|B
```
```mermaid
flowchart LR
graph LR
A-->|text|B
```
or
```
flowchart LR
graph LR
A-- text -->B
```
```mermaid
flowchart LR
graph LR
A-- text -->B
```
### Dotted link
```
flowchart LR;
graph LR;
A-.->B;
```
```mermaid
flowchart LR;
graph LR;
A-.->B;
```
### Dotted link with text
```
flowchart LR
graph LR
A-. text .-> B
```
```mermaid
flowchart LR
graph LR
A-. text .-> B
```
### Thick link
```
flowchart LR
graph LR
A ==> B
```
```mermaid
flowchart LR
graph LR
A ==> B
```
### Thick link with text
```
flowchart LR
graph LR
A == text ==> B
```
```mermaid
flowchart LR
graph LR
A == text ==> B
```
@ -320,21 +320,21 @@ flowchart LR
It is possible declare many links in the same line as per below:
```
flowchart LR
graph LR
A -- text --> B -- text2 --> C
```
```mermaid
flowchart LR
graph LR
A -- text --> B -- text2 --> C
```
It is also possible to declare multiple nodes links in the same line as per below:
```
flowchart LR
graph LR
a --> b & c--> d
```
```mermaid
flowchart LR
graph LR
a --> b & c--> d
```
@ -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:
```
flowchart LR
graph LR
id1["This is the (text) in the box"]
```
```mermaid
flowchart LR
graph LR
id1["This is the (text) in the box"]
```
@ -412,11 +412,11 @@ flowchart LR
It is possible to escape characters using the syntax examplified here.
```
flowchart LR
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
```
```mermaid
flowchart LR
graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
```
@ -534,7 +534,7 @@ Examples of tooltip usage below:
```
```
flowchart LR;
graph LR;
A-->B;
click A callback "Tooltip for a callback"
click B "http://www.github.com" "This is a tooltip for a link"

6
docs/index.html
View File

@ -7,8 +7,8 @@
<meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@8.5.0/dist/mermaid.min.js"></script> -->
<script src="http://localhost:9000/mermaid.js"></script>
<script src="//cdn.jsdelivr.net/npm/mermaid@8.5.1/dist/mermaid.min.js"></script>
<!-- <script src="http://localhost:9000/mermaid.js"></script> -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@ -70,4 +70,4 @@
<scrpt src="//unpkg.com/docsify/lib/plugins/ga.min.js"></scrpt>
</body>
</html>
<!-- -->
<!-- -->

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "mermaid",
"version": "8.5.0",
"version": "8.5.1",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"main": "dist/mermaid.core.js",
"keywords": [

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

@ -107,8 +107,24 @@ const intersection = (node, outsidePoint, insidePoint) => {
}
};
export const insertEdge = function(elem, edge, clusterDb, diagramType) {
//(edgePaths, e, edge, clusterDb, diagramtype, graph)
export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph) {
let points = edge.points;
const tail = graph.node(e.v);
var head = graph.node(e.w);
if (head.intersect && tail.intersect) {
points = points.slice(1, edge.points.length - 1);
points.unshift(tail.intersect(points[0]));
logger.info(
'Last point',
points[points.length - 1],
head,
head.intersect(points[points.length - 1])
);
points.push(head.intersect(points[points.length - 1]));
}
if (edge.toCluster) {
logger.trace('edge', edge);
logger.trace('to cluster', clusterDb[edge.toCluster]);

6
src/dagre-wrapper/index.js
View File

@ -93,8 +93,8 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
// Move the nodes to the correct place
graph.nodes().forEach(function(v) {
const node = graph.node(v);
// log.trace('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
log.trace(
log.trace('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
log.info(
'Position ' + v + ': (' + node.x,
',' + node.y,
') width: ',
@ -124,7 +124,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
const edge = graph.edge(e);
log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
insertEdge(edgePaths, edge, clusterDb, diagramtype);
insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph);
positionEdgeLabel(edge);
});

1
src/dagre-wrapper/intersect/intersect-node.js
View File

@ -1,5 +1,6 @@
module.exports = intersectNode;
function intersectNode(node, point) {
console.info('Intersect Node');
return node.intersect(point);
}

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

@ -11,7 +11,7 @@ const question = (parent, node) => {
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
const s = (w + h) * 0.9;
const s = w + h;
const points = [
{ x: s / 2, y: 0 },
{ x: s, y: -s / 2 },
@ -19,10 +19,13 @@ const question = (parent, node) => {
{ x: 0, y: -s / 2 }
];
logger.info('Question main (Circle)');
const questionElem = insertPolygonShape(shapeSvg, s, s, points);
updateNodeBounds(node, questionElem);
node.intersect = function(point) {
return intersect.polugon(node, points, point);
logger.warn('Intersect called');
return intersect.polygon(node, points, point);
};
return shapeSvg;
@ -411,10 +414,13 @@ const circle = (parent, node) => {
.attr('width', bbox.width + node.padding)
.attr('height', bbox.height + node.padding);
logger.info('Circle main');
updateNodeBounds(node, circle);
node.intersect = function(point) {
return intersect.circle(node, point);
logger.info('Circle intersect', node, bbox.width / 2 + halfPadding, point);
return intersect.circle(node, bbox.width / 2 + halfPadding, point);
};
return shapeSvg;
@ -464,7 +470,7 @@ const start = (parent, node) => {
updateNodeBounds(node, circle);
node.intersect = function(point) {
return intersect.circle(node, point);
return intersect.circle(node, 7, point);
};
return shapeSvg;
@ -527,7 +533,7 @@ const end = (parent, node) => {
updateNodeBounds(node, circle);
node.intersect = function(point) {
return intersect.circle(node, point);
return intersect.circle(node, 7, point);
};
return shapeSvg;

2
src/mermaidAPI.js
View File

@ -551,7 +551,7 @@ function parse(text) {
break;
case 'flowchart-v2':
flowDb.clear();
parser = flowRendererV2;
parser = flowParser;
parser.parser.yy = flowDb;
break;
case 'sequence':