mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/develop' into feature/user-journey

This commit is contained in:
Russell Geraghty 2020-04-17 07:30:53 +01:00
parent 433f88b459 10fdc45dea
commit 249a14f84a
22 changed files with 1211 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -211,6 +211,7 @@ pie
- [Command Line Interface](https://github.com/mermaid-js/mermaid.cli) - [Command Line Interface](https://github.com/mermaid-js/mermaid.cli)
- [Live Editor](https://github.com/mermaid-js/mermaid-live-editor) - [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
- [HTTP Server](https://github.com/TomWright/mermaid-server)
# Contributors [![Help wanted](https://img.shields.io/github/labels/mermaid-js/mermaid/Help%20wanted!)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Help+wanted%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) # Contributors [![Help wanted](https://img.shields.io/github/labels/mermaid-js/mermaid/Help%20wanted!)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Help+wanted%21%22) [![Contributors](https://img.shields.io/github/contributors/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors) [![Commits](https://img.shields.io/github/commit-activity/m/mermaid-js/mermaid)](https://github.com/mermaid-js/mermaid/graphs/contributors)

99
cypress/platform/current.html
View File

@ -7,7 +7,7 @@
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
background: white; background: rgb(221, 208, 208);
font-family: 'Arial'; font-family: 'Arial';
} }
h1 { color: white;} h1 { color: white;}
@ -32,13 +32,31 @@
G-->c G-->c
</div> </div>
<div class="mermaid2" style="width: 50%; height: 20%;"> <div class="mermaid2" style="width: 50%; height: 20%;">
flowchart LR stateDiagram-v2
subgraph id1 [Test] [*] --> monkey
b state monkey {
end Sitting
a-->id1 --
Eating
}
</div> </div>
<div class="mermaid mermaid-apa" style="width: 100%; height: 20%;"> <div class="mermaid2" style="width: 50%; height: 20%;">
stateDiagram-v2
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
</div>
<div class="mermaid2 mermaid-apa" style="width: 100%; height: 20%;">
stateDiagram stateDiagram
[*] --> Still [*] --> Still
Still --> [*] Still --> [*]
@ -52,15 +70,66 @@
Moving --> Crash Moving --> Crash
Crash --> [*] Crash --> [*]
</div> </div>
<div class="mermaid2" style="width: 100%; height: 100%;">
stateDiagram-v2
[*] --> First
First --> Second
% First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
</div>
<div class="mermaid" style="width: 100%; height: 100%;"> <div class="mermaid" style="width: 100%; height: 100%;">
stateDiagram-v2 flowchart TD
State1: The state with a note subgraph A
note right of State1 a
Important information! You can write end
notes. subgraph B
end note b
State1 --> State2 end
note left of State2 : This is the note to the left. subgraph C
subgraph D
d
end
end
A -- oAo --o B
A --> C
</div>
<div class="mermaid" style="width: 100%; height: 100%;">
flowchart TD
subgraph A
a
end
subgraph B
b
end
c-->A
c-->B
</div>
<div class="mermaid2" style="width: 100%; height: 100%;">
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {
[*] --> thi
thi --> [*]
}
</div> </div>
<div class="mermaid2" style="width: 100%; height: 100%;"> <div class="mermaid2" style="width: 100%; height: 100%;">
stateDiagram-v2 stateDiagram-v2

18
docs/README.md
View File

@ -16,11 +16,11 @@ Check out the list of [Integrations and Usages of Mermaid](./integrations.md)
**Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!! Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project.** **Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!! Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project.**
## New diagrams in 8.4 ## New diagrams in 8.5
With version 8.4 class diagrams have got some new features, bug fixes and documentation. Another new feature in 8.4 is the new diagram type, state diagrams. With version 8.5 there are some bug fixes and enhancements, plus a new diagram type, entity relationship diagrams.
![Image show the two new diagram types](./img/new-diagrams.png) ![Image showing the new ER diagram type](./img/er.png)
## Special note regarding version 8.2 ## Special note regarding version 8.2
@ -137,6 +137,18 @@ merge newbranch
![Git graph](./img/git.png) ![Git graph](./img/git.png)
### Entity Relationship Diagram - :exclamation: experimental
```
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
![ER diagram](./img/simple-er.png)
## Installation ## Installation
### CDN ### CDN

4
docs/entityRelationshipDiagram.md
View File

@ -9,13 +9,13 @@ Mermaid can render ER diagrams
erDiagram erDiagram
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ : DELIVERY-ADDRESS : uses CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
``` ```
```mermaid ```mermaid
erDiagram erDiagram
CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ : DELIVERY-ADDRESS : uses CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
``` ```
Entity names are often capitalised, although there is no accepted standard on this, and it is not required in Mermaid. Entity names are often capitalised, although there is no accepted standard on this, and it is not required in Mermaid.

63
docs/examples.md
View File

@ -5,7 +5,7 @@ pie title NETFLIX
"Time spent looking for movie" : 90 "Time spent looking for movie" : 90
"Time spent watching it" : 10 "Time spent watching it" : 10
``` ```
``` mermaid ```mermaid
pie title NETFLIX pie title NETFLIX
"Time spent looking for movie" : 90 "Time spent looking for movie" : 90
"Time spent watching it" : 10 "Time spent watching it" : 10
@ -35,8 +35,6 @@ sequenceDiagram
Bob-->Alice: Checking with John... Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you? Alice->John: Yes... John, how are you?
``` ```
```mermaid ```mermaid
sequenceDiagram sequenceDiagram
Alice ->> Bob: Hello Bob, how are you? Alice ->> Bob: Hello Bob, how are you?
@ -49,9 +47,15 @@ sequenceDiagram
Alice->John: Yes... John, how are you? Alice->John: Yes... John, how are you?
``` ```
## Basic flowchart ## Basic flowchart
```
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
```
```mermaid ```mermaid
graph LR graph LR
A[Square Rect] -- Link text --> B((Circle)) A[Square Rect] -- Link text --> B((Circle))
@ -63,6 +67,29 @@ graph LR
## Larger flowchart with some styling ## Larger flowchart with some styling
```
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with linebreak<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
```
```mermaid ```mermaid
graph TB graph TB
sq[Square shape] --> ci((Circle shape)) sq[Square shape] --> ci((Circle shape))
@ -90,6 +117,21 @@ graph TB
## Loops, alt and opt ## Loops, alt and opt
```
sequenceDiagram
loop Daily query
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
end
```
```mermaid ```mermaid
sequenceDiagram sequenceDiagram
loop Daily query loop Daily query
@ -109,6 +151,19 @@ sequenceDiagram
## Message to self in loop ## Message to self in loop
```
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts<br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
```mermaid ```mermaid
sequenceDiagram sequenceDiagram
participant Alice participant Alice

BIN
docs/img/er.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
docs/img/simple-er.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

1
docs/integrations.md
View File

@ -137,3 +137,4 @@ The following is a list of different integrations and plugins where mermaid is b
- [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid) - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
- [Reveal CK](https://github.com/jedcn/reveal-ck) - [Reveal CK](https://github.com/jedcn/reveal-ck)
- [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin) - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)

74
src/dagre-wrapper/GraphObjects.md
View File

@ -1,3 +1,55 @@
# Cluster handling
Dagre does not support edges between nodes and clusters or between clusters to other clusters. In order to remedy this shortcoming the dagre wrapper implements a few work-arounds.
In the diagram below there are two clusters and there are no edges to nodes outside the own cluster.
```mermaid
flowchart
subgraph C1
a --> b
end
subgraph C2
c
end
C1 --> C2
```
In this case the dagre-wrapper will transform the graph to the graph below.
```mermaid
flowchart
C1 --> C2
```
The new nodes C1 and C2 are a special type of nodes, clusterNodes. ClusterNodes have have the nodes in the cluster including the cluster attached in a graph object.
When rendering this diagram it it beeing rendered recursivly. The diagram is rendered by the dagre-mermaid:render function which in turn will be used to render the node C1 and the node C2. The result of those renderings will be inserted as nodes in the "root" diagram. With this recursive approach it would be possible to have different layout direction for each cluster.
```
{ clusterNode: true, graph }
```
*Data for a clusterNode*
When a cluster has edges to or from some of its nodes leading outside the cluster the approach of recursive rendering can not be used as the layout of the graph needs to take responsibility for nodes outside of the cluster.
```mermaid
flowchart
subgraph C1
a
end
subgraph C2
b
end
a --> C2
```
To handle this case a special type of edge is inserted. The edge to/from the cluster is replaced with an edge to/from a node in the cluster which is tagged with toCluster/fromCluster. When rendering this edge the intersection between the edge and the border of the cluster is calculated making the edge start/stop there. In practice this renders like an an edge to/from the cluster.
In the diagram above the root diagram would be rendered with C1 whereas C2 would be rendered recursively.
Of these two approaches the top one renders better and is used when possible. When this is not possible, ie an edge is added crossing the border the non recursive approach is used.
# Graph objects and their properties # Graph objects and their properties
Explains the representation of various objects used to render the flow charts and what the properties mean. This ofc from the perspective of the dagre-wrapper. Explains the representation of various objects used to render the flow charts and what the properties mean. This ofc from the perspective of the dagre-wrapper.
@ -7,12 +59,10 @@ Explains the representation of various objects used to render the flow charts an
Sample object: Sample object:
```json ```json
{ {
"labelType":"svg",
"labelStyle":"",
"shape":"rect", "shape":"rect",
"label":{},
"labelText":"Test", "labelText":"Test",
"rx":0,"ry":0, "rx":0,
"ry":0,
"class":"default", "class":"default",
"style":"", "style":"",
"id":"Test", "id":"Test",
@ -24,18 +74,16 @@ This is set by the renderer of the diagram and insert the data that the wrapper
| property | description | | property | description |
| ---------- | ----------------------------------------------------------------------------------------------------------- | | ---------- | ----------------------------------------------------------------------------------------------------------- |
| labelType | If the label should be html label or a svg label. Should we continue to support both? | | labelStyle | Css styles for the label. User for instance for stylling the labels for clusters |
| labelStyle | Css styles for the label. Not currently used. | | shape | The shape of the node. |
| shape | The shape of the node. Currently on rect is suppoerted. This will change. |
| label | ?? |
| labelText | The text on the label | | labelText | The text on the label |
| rx | The corner radius - maybe part of the shape instead? | | rx | The corner radius - maybe part of the shape instead? Used for rects. |
| ry | The corner radius - maybe part of the shape instead? | | ry | The corner radius - maybe part of the shape instead? Used for rects. |
| class | Class to be set for the shape | | classes | Classes to be set for the shape. Not used |
| style | Css styles for the actual shape | | style | Css styles for the actual shape |
| id | id of the shape | | id | id of the shape |
| type | if set to group then this node indicates *a cluster*. | | type | if set to group then this node indicates *a cluster*. |
| padding | Padding. Passed from the renderr as this might differ between react for different diagrams. Maybe obsolete. | | padding | Padding. Passed from the render as this might differ between different diagrams. Maybe obsolete. |
# edge # edge

15
src/dagre-wrapper/clusters.js
View File

@ -1,8 +1,10 @@
import intersectRect from './intersect/intersect-rect'; import intersectRect from './intersect/intersect-rect';
import { logger } from '../logger'; // eslint-disable-line import { logger as log } from '../logger'; // eslint-disable-line
import createLabel from './createLabel'; import createLabel from './createLabel';
const rect = (parent, node) => { const rect = (parent, node) => {
log.trace('Creating subgraph rect for ', node.id, node);
// Add outer g element // Add outer g element
const shapeSvg = parent const shapeSvg = parent
.insert('g') .insert('g')
@ -23,6 +25,7 @@ const rect = (parent, node) => {
const padding = 0 * node.padding; const padding = 0 * node.padding;
const halfPadding = padding / 2; const halfPadding = padding / 2;
log.trace('Data ', node, JSON.stringify(node));
// center the rect around its coordinate // center the rect around its coordinate
rect rect
.attr('rx', node.rx) .attr('rx', node.rx)
@ -32,9 +35,7 @@ const rect = (parent, node) => {
.attr('width', node.width + padding) .attr('width', node.width + padding)
.attr('height', node.height + padding); .attr('height', node.height + padding);
// logger.info('bbox', bbox.width, node.x, node.width);
// Center the label // Center the label
// label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')');
label.attr( label.attr(
'transform', 'transform',
'translate(' + 'translate(' +
@ -127,9 +128,7 @@ const roundedWithTitle = (parent, node) => {
.attr('width', node.width + padding) .attr('width', node.width + padding)
.attr('height', node.height + padding - bbox.height - 3); .attr('height', node.height + padding - bbox.height - 3);
// logger.info('bbox', bbox.width, node.x, node.width);
// Center the label // Center the label
// label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')');
label.attr( label.attr(
'transform', 'transform',
'translate(' + 'translate(' +
@ -155,7 +154,9 @@ const shapes = { rect, roundedWithTitle, noteGroup };
let clusterElems = {}; let clusterElems = {};
export const insertCluster = (elem, node) => { export const insertCluster = (elem, node) => {
clusterElems[node.id] = shapes[node.shape](elem, node); log.trace('Inserting cluster');
const shape = node.shape || 'rect';
clusterElems[node.id] = shapes[shape](elem, node);
}; };
export const getClusterTitleWidth = (elem, node) => { export const getClusterTitleWidth = (elem, node) => {
const label = createLabel(node.labelText, node.labelStyle); const label = createLabel(node.labelText, node.labelStyle);
@ -170,6 +171,8 @@ export const clear = () => {
}; };
export const positionCluster = node => { export const positionCluster = node => {
log.info('Position cluster');
const el = clusterElems[node.id]; const el = clusterElems[node.id];
el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')'); el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
}; };

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

@ -1,8 +1,10 @@
const createLabel = (vertexText, style) => { const createLabel = (vertexText, style) => {
const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text'); const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
svgLabel.setAttribute('style', style.replace('color:', 'fill:')); svgLabel.setAttribute('style', style.replace('color:', 'fill:'));
let rows = [];
const rows = vertexText.split(/\n|<br\s*\/?>/gi); if (vertexText) {
rows = vertexText.split(/\n|<br\s*\/?>/gi);
}
for (let j = 0; j < rows.length; j++) { for (let j = 0; j < rows.length; j++) {
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan'); const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');

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

@ -63,34 +63,17 @@ const outsideNode = (node, point) => {
return false; return false;
}; };
// const intersection = (node, outsidePoint, insidePoint) => {
// const x = node.x;
// const y = node.y;
// const dx = Math.abs(x - insidePoint.x);
// const w = node.width / 2;
// let r = w - dx;
// const dy = Math.abs(y - insidePoint.y);
// const h = node.height / 2;
// const q = h - dy;
// const Q = Math.abs(outsidePoint.y - insidePoint.y);
// const R = Math.abs(outsidePoint.x - insidePoint.x);
// r = (R * q) / Q;
// return { x: insidePoint.x + r, y: insidePoint.y + q };
// };
const intersection = (node, outsidePoint, insidePoint) => { const intersection = (node, outsidePoint, insidePoint) => {
// logger.info('intersection', outsidePoint, insidePoint, node); logger.trace('intersection o:', outsidePoint, ' i:', insidePoint, node);
const x = node.x; const x = node.x;
const y = node.y; const y = node.y;
const dx = Math.abs(x - insidePoint.x); const dx = Math.abs(x - insidePoint.x);
const w = node.width / 2; const w = node.width / 2;
let r = w - dx; let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx;
const dy = Math.abs(y - insidePoint.y); const dy = Math.abs(y - insidePoint.y);
const h = node.height / 2; const h = node.height / 2;
let q = h - dy; let q = insidePoint.y < outsidePoint.y ? h - dy : h - dy;
const Q = Math.abs(outsidePoint.y - insidePoint.y); const Q = Math.abs(outsidePoint.y - insidePoint.y);
const R = Math.abs(outsidePoint.x - insidePoint.x); const R = Math.abs(outsidePoint.x - insidePoint.x);
@ -105,20 +88,20 @@ const intersection = (node, outsidePoint, insidePoint) => {
}; };
} else { } else {
q = (Q * r) / R; q = (Q * r) / R;
r = (R * q) / Q;
return { return {
x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - r, x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x + dx - w,
y: insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q y: insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q
}; };
} }
}; };
export const insertEdge = function(elem, edge, clusterDb, diagramType) { export const insertEdge = function(elem, edge, clusterDb, diagramType) {
logger.info('\n\n\n\n');
let points = edge.points; let points = edge.points;
if (edge.toCluster) { if (edge.toCluster) {
// logger.info('edge', edge); logger.trace('edge', edge);
// logger.info('to cluster', clusterDb[edge.toCluster]); logger.trace('to cluster', clusterDb[edge.toCluster]);
points = []; points = [];
let lastPointOutside; let lastPointOutside;
let isInside = false; let isInside = false;
@ -126,13 +109,12 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
const node = clusterDb[edge.toCluster].node; const node = clusterDb[edge.toCluster].node;
if (!outsideNode(node, point) && !isInside) { if (!outsideNode(node, point) && !isInside) {
// logger.info('inside', edge.toCluster, point); logger.trace('inside', edge.toCluster, point, lastPointOutside);
// First point inside the rect // First point inside the rect
const insterection = intersection(node, lastPointOutside, point); const insterection = intersection(node, lastPointOutside, point);
// logger.info('intersect', inter.rect(node, lastPointOutside)); logger.trace('intersect', insterection);
points.push(insterection); points.push(insterection);
// points.push(insterection);
isInside = true; isInside = true;
} else { } else {
if (!isInside) points.push(point); if (!isInside) points.push(point);
@ -142,8 +124,8 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
} }
if (edge.fromCluster) { if (edge.fromCluster) {
// logger.info('edge', edge); logger.trace('edge', edge);
// logger.info('from cluster', clusterDb[edge.toCluster]); logger.trace('from cluster', clusterDb[edge.toCluster]);
const updatedPoints = []; const updatedPoints = [];
let lastPointOutside; let lastPointOutside;
let isInside = false; let isInside = false;
@ -152,17 +134,17 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
const node = clusterDb[edge.fromCluster].node; const node = clusterDb[edge.fromCluster].node;
if (!outsideNode(node, point) && !isInside) { if (!outsideNode(node, point) && !isInside) {
// logger.info('inside', edge.toCluster, point); logger.trace('inside', edge.toCluster, point);
// First point inside the rect // First point inside the rect
const insterection = intersection(node, lastPointOutside, point); const insterection = intersection(node, lastPointOutside, point);
// logger.info('intersect', intersection(node, lastPointOutside, point)); // logger.trace('intersect', intersection(node, lastPointOutside, point));
updatedPoints.unshift(insterection); updatedPoints.unshift(insterection);
// points.push(insterection); // points.push(insterection);
isInside = true; isInside = true;
} else { } else {
// at the outside // at the outside
// logger.info('Outside point', point); logger.trace('Outside point', point);
if (!isInside) updatedPoints.unshift(point); if (!isInside) updatedPoints.unshift(point);
} }
lastPointOutside = point; lastPointOutside = point;
@ -170,10 +152,6 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
points = updatedPoints; points = updatedPoints;
} }
// logger.info('Poibts', points);
// logger.info('Edge', edge);
// The data for our line // The data for our line
const lineData = points.filter(p => !Number.isNaN(p.y)); const lineData = points.filter(p => !Number.isNaN(p.y));
@ -216,7 +194,7 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
url = url.replace(/\(/g, '\\('); url = url.replace(/\(/g, '\\(');
url = url.replace(/\)/g, '\\)'); url = url.replace(/\)/g, '\\)');
} }
// logger.info('arrowType', edge.arrowType); logger.info('arrowType', edge.arrowType);
switch (edge.arrowType) { switch (edge.arrowType) {
case 'arrow_cross': case 'arrow_cross':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')'); svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')');

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

@ -1,45 +1,66 @@
import dagre from 'dagre'; import dagre from 'dagre';
import graphlib from 'graphlib';
import insertMarkers from './markers'; import insertMarkers from './markers';
import { insertNode, positionNode, clear as clearNodes } from './nodes'; import { updateNodeBounds } from './shapes/util';
import {
clear as clearGraphlib,
clusterDb,
adjustClustersAndEdges,
findNonClusterChild
} from './mermaid-graphlib';
import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes';
import { insertCluster, clear as clearClusters } from './clusters'; import { insertCluster, clear as clearClusters } from './clusters';
import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges'; import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges';
import { logger } from '../logger'; import { logger as log } from '../logger';
let clusterDb = {};
const translateClusterId = id => {
if (clusterDb[id]) return clusterDb[id].id;
return id;
};
export const render = (elem, graph, markers, diagramtype, id) => {
insertMarkers(elem, markers, diagramtype, id);
clusterDb = {};
clearNodes();
clearEdges();
clearClusters();
const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
log.trace('Graph in recursive render:', graphlib.json.write(graph), parentCluster);
const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line
if (!graph.nodes()) {
log.trace('No nodes found for', graph);
} else {
log.trace('Recursive render', graph.nodes());
}
if (graph.edges().length > 0) {
log.trace('Recursive edges', graph.edge(graph.edges()[0]));
}
const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line
const edgePaths = elem.insert('g').attr('class', 'edgePaths'); const edgePaths = elem.insert('g').attr('class', 'edgePaths');
const edgeLabels = elem.insert('g').attr('class', 'edgeLabels'); const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');
const nodes = elem.insert('g').attr('class', 'nodes'); const nodes = elem.insert('g').attr('class', 'nodes');
logger.warn('graph', graph);
// Insert nodes, this will insert them into the dom and each node will get a size. The size is updated // Insert nodes, this will insert them into the dom and each node will get a size. The size is updated
// to the abstract node and is later used by dagre for the layout // to the abstract node and is later used by dagre for the layout
graph.nodes().forEach(function(v) { graph.nodes().forEach(function(v) {
const node = graph.node(v); const node = graph.node(v);
logger.warn('Node ' + v + ': ' + JSON.stringify(graph.node(v))); if (typeof parentCluster !== 'undefined') {
if (node.type !== 'group') { const data = JSON.parse(JSON.stringify(parentCluster.clusterData));
insertNode(nodes, graph.node(v)); // data.clusterPositioning = true;
log.trace('Setting data for cluster', data);
graph.setNode(parentCluster.id, data);
graph.setParent(v, parentCluster.id, data);
}
log.trace('(Insert) Node ' + v + ': ' + JSON.stringify(graph.node(v)));
if (node.clusterNode) {
// const children = graph.children(v);
log.trace('Cluster identified', v, node, graph.node(v));
const newEl = recursiveRender(nodes, node.graph, diagramtype, graph.node(v));
updateNodeBounds(node, newEl);
setNodeElem(newEl, node);
log.warn('Recursive render complete', newEl, node);
} else { } else {
// const width = getClusterTitleWidth(clusters, node); if (graph.children(v).length > 0) {
const children = graph.children(v); // This is a cluster but not to be rendered recusively
logger.info('Cluster identified', node.id, children[0]); // Render as before
// nodes2expand.push({ id: children[0], width }); log.trace('Cluster - the non recursive path', v, node.id, node, graph);
clusterDb[node.id] = { id: children[0] }; log.trace(findNonClusterChild(node.id, graph));
logger.info('Clusters ', clusterDb); clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node };
// insertCluster(clusters, graph.node(v));
} else {
log.trace('Node - the non recursive path', v, node.id, node);
insertNode(nodes, graph.node(v));
}
} }
}); });
@ -48,49 +69,77 @@ export const render = (elem, graph, markers, diagramtype, id) => {
// Edges from/to clusters really points to the first child in the cluster. // Edges from/to clusters really points to the first child in the cluster.
// TODO: pick optimal child in the cluster to us as link anchor // TODO: pick optimal child in the cluster to us as link anchor
graph.edges().forEach(function(e) { graph.edges().forEach(function(e) {
const edge = graph.edge(e); const edge = graph.edge(e.v, e.w, e.name);
logger.warn('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e)); log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
// logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e))); log.trace('Edge ' + e.v + ' -> ' + e.w + ': ', e, ' ', JSON.stringify(graph.edge(e)));
const v = translateClusterId(e.v);
const w = translateClusterId(e.w); // Check if link is either from or to a cluster
if (v !== e.v || w !== e.w) { log.trace('Fix', clusterDb, 'ids:', e.v, e.w, 'Translateing: ', clusterDb[e.v], clusterDb[e.w]);
graph.removeEdge(e.v, e.w, e.name);
if (v !== e.v) edge.fromCluster = e.v;
if (w !== e.w) edge.toCluster = e.w;
graph.setEdge(v, w, edge, e.name);
}
insertEdgeLabel(edgeLabels, edge); insertEdgeLabel(edgeLabels, edge);
}); });
graph.edges().forEach(function(e) { graph.edges().forEach(function(e) {
logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e)); log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
}); });
logger.info('#############################################'); log.trace('#############################################');
logger.info('### Layout ###'); log.trace('### Layout ###');
logger.info('#############################################'); log.trace('#############################################');
logger.info(graph); log.trace(graph);
dagre.layout(graph); dagre.layout(graph);
log.warn('Graph after layout:', graphlib.json.write(graph));
// Move the nodes to the correct place // Move the nodes to the correct place
graph.nodes().forEach(function(v) { graph.nodes().forEach(function(v) {
const node = graph.node(v); const node = graph.node(v);
logger.info('Node ' + v + ': ' + JSON.stringify(graph.node(v))); // log.trace('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
if (node.type !== 'group') { log.trace(
'Position ' + v + ': (' + node.x,
',' + node.y,
') width: ',
node.width,
' height: ',
node.height
);
if (node && node.clusterNode) {
// clusterDb[node.id].node = node;
positionNode(node); positionNode(node);
} else { } else {
insertCluster(clusters, node); // Non cluster node
clusterDb[node.id].node = node; if (graph.children(v).length > 0) {
// A cluster in the non-recurive way
// positionCluster(node);
insertCluster(clusters, node);
clusterDb[node.id].node = node;
} else {
positionNode(node);
}
} }
}); });
// Move the edge labels to the correct place after layout // Move the edge labels to the correct place after layout
graph.edges().forEach(function(e) { graph.edges().forEach(function(e) {
const edge = graph.edge(e); const edge = graph.edge(e);
logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge); log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
insertEdge(edgePaths, edge, clusterDb, diagramtype); insertEdge(edgePaths, edge, clusterDb, diagramtype);
positionEdgeLabel(edge); positionEdgeLabel(edge);
}); });
return elem;
};
export const render = (elem, graph, markers, diagramtype, id) => {
insertMarkers(elem, markers, diagramtype, id);
clearNodes();
clearEdges();
clearClusters();
clearGraphlib();
log.warn('Graph before:', graphlib.json.write(graph));
adjustClustersAndEdges(graph);
log.warn('Graph after:', graphlib.json.write(graph));
recursiveRender(elem, graph, diagramtype);
}; };
// const shapeDefinitions = {}; // const shapeDefinitions = {};

24
src/dagre-wrapper/markers.js
View File

@ -16,7 +16,7 @@ const extension = (elem, type, id) => {
elem elem
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', 'extensionStart') .attr('id', type + '-extensionStart')
.attr('class', 'extension ' + type) .attr('class', 'extension ' + type)
.attr('refX', 0) .attr('refX', 0)
.attr('refY', 7) .attr('refY', 7)
@ -29,7 +29,7 @@ const extension = (elem, type, id) => {
elem elem
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', 'extensionEnd ' + type) .attr('id', type + '-extensionEnd ' + type)
.attr('class', 'extension ' + type) .attr('class', 'extension ' + type)
.attr('refX', 19) .attr('refX', 19)
.attr('refY', 7) .attr('refY', 7)
@ -44,7 +44,7 @@ const composition = (elem, type) => {
elem elem
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', 'compositionStart') .attr('id', type + '-compositionStart')
.attr('class', 'extension ' + type) .attr('class', 'extension ' + type)
.attr('refX', 0) .attr('refX', 0)
.attr('refY', 7) .attr('refY', 7)
@ -57,7 +57,7 @@ const composition = (elem, type) => {
elem elem
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', 'compositionEnd') .attr('id', type + '-compositionEnd')
.attr('class', 'extension ' + type) .attr('class', 'extension ' + type)
.attr('refX', 19) .attr('refX', 19)
.attr('refY', 7) .attr('refY', 7)
@ -71,7 +71,7 @@ const aggregation = (elem, type) => {
elem elem
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', 'aggregationStart') .attr('id', type + '-aggregationStart')
.attr('class', 'extension ' + type) .attr('class', 'extension ' + type)
.attr('refX', 0) .attr('refX', 0)
.attr('refY', 7) .attr('refY', 7)
@ -84,7 +84,7 @@ const aggregation = (elem, type) => {
elem elem
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', 'aggregationEnd') .attr('id', type + '-aggregationEnd')
.attr('class', type) .attr('class', type)
.attr('refX', 19) .attr('refX', 19)
.attr('refY', 7) .attr('refY', 7)
@ -98,7 +98,7 @@ const dependency = (elem, type) => {
elem elem
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', 'dependencyStart') .attr('id', type + '-dependencyStart')
.attr('class', 'extension ' + type) .attr('class', 'extension ' + type)
.attr('refX', 0) .attr('refX', 0)
.attr('refY', 7) .attr('refY', 7)
@ -111,7 +111,7 @@ const dependency = (elem, type) => {
elem elem
.append('defs') .append('defs')
.append('marker') .append('marker')
.attr('id', 'dependencyEnd') .attr('id', type + '-dependencyEnd')
.attr('class', type) .attr('class', type)
.attr('refX', 19) .attr('refX', 19)
.attr('refY', 7) .attr('refY', 7)
@ -158,7 +158,7 @@ const point = (elem, type) => {
const circle = (elem, type) => { const circle = (elem, type) => {
elem elem
.append('marker') .append('marker')
.attr('id', 'circleEnd') .attr('id', type + '-circleEnd')
.attr('class', type) .attr('class', type)
.attr('viewBox', '0 0 10 10') .attr('viewBox', '0 0 10 10')
.attr('refX', 11) .attr('refX', 11)
@ -177,7 +177,7 @@ const circle = (elem, type) => {
elem elem
.append('marker') .append('marker')
.attr('id', 'circleStart') .attr('id', type + '-circleStart')
.attr('class', type) .attr('class', type)
.attr('viewBox', '0 0 10 10') .attr('viewBox', '0 0 10 10')
.attr('refX', -1) .attr('refX', -1)
@ -197,7 +197,7 @@ const circle = (elem, type) => {
const cross = (elem, type) => { const cross = (elem, type) => {
elem elem
.append('marker') .append('marker')
.attr('id', 'crossEnd') .attr('id', type + '-crossEnd')
.attr('class', type) .attr('class', type)
.attr('viewBox', '0 0 11 11') .attr('viewBox', '0 0 11 11')
.attr('refX', 12) .attr('refX', 12)
@ -215,7 +215,7 @@ const cross = (elem, type) => {
elem elem
.append('marker') .append('marker')
.attr('id', 'crossStart') .attr('id', type + '-crossStart')
.attr('class', type) .attr('class', type)
.attr('viewBox', '0 0 11 11') .attr('viewBox', '0 0 11 11')
.attr('refX', -1) .attr('refX', -1)

372
src/dagre-wrapper/mermaid-graphlib.js Normal file
View File

@ -0,0 +1,372 @@
/**
* Decorates with functions required by mermaids dagre-wrapper.
*/
import { logger as log } from '../logger';
import graphlib from 'graphlib';
export let clusterDb = {};
let decendants = {};
let parents = {};
export const clear = () => {
decendants = {};
parents = {};
clusterDb = {};
};
const isDecendant = (id, ancenstorId) => {
// if (id === ancenstorId) return true;
log.debug(
'In isDecendant',
ancenstorId,
' ',
id,
' = ',
decendants[ancenstorId].indexOf(id) >= 0
);
if (decendants[ancenstorId].indexOf(id) >= 0) return true;
return false;
};
const edgeInCluster = (edge, clusterId) => {
// Edges to/from the cluster is not in the cluster, they are in the parent
if (!(edge.v === clusterId || edge.w === clusterId)) return false;
if (!decendants[clusterId]) {
log.debug('Tilt, ', clusterId, ',not in decendants');
return false;
}
if (decendants[clusterId].indexOf(edge.v) >= 0) return true;
if (isDecendant(edge.v, clusterId)) return true;
if (isDecendant(edge.w, clusterId)) return true;
if (decendants[clusterId].indexOf(edge.w) >= 0) return true;
return false;
};
const copy = (clusterId, graph, newGraph, rootId) => {
log.trace(
'Copying children of ',
clusterId,
rootId,
' from ',
clusterId,
graph.node(clusterId),
rootId
);
const nodes = graph.children(clusterId) || [];
// Include cluster node if it is not the root
if (clusterId !== rootId) {
nodes.push(clusterId);
}
log.debug('Copying (nodes)', nodes);
nodes.forEach(node => {
if (graph.children(node).length > 0) {
copy(node, graph, newGraph, rootId);
} else {
const data = graph.node(node);
log.trace('cp ', node, ' to ', rootId, ' with parent ', clusterId); //,node, data, ' parent is ', clusterId);
newGraph.setNode(node, data);
if (clusterId !== rootId && node !== clusterId) {
log.debug('Setting parent', node, clusterId);
newGraph.setParent(node, clusterId);
}
const edges = graph.edges(node);
log.debug('Copying Edges', edges);
edges.forEach(edge => {
log.trace('Edge', edge);
const data = graph.edge(edge.v, edge.w, edge.name);
log.trace('Edge data', data, rootId);
try {
// Do not copy edges in and out of the root cluster, they belong to the parent graph
if (edgeInCluster(edge, rootId)) {
log.trace('Copying as ', edge.v, edge.w, data, edge.name);
newGraph.setEdge(edge.v, edge.w, data, edge.name);
log.trace('newGraph edges ', newGraph.edges(), newGraph.edge(newGraph.edges()[0]));
} else {
log.trace('Skipping copy of edge as ', rootId, edge.v, edge.w, clusterId);
}
} catch (e) {
log.error(e);
}
});
}
log.debug('Removing node', node);
graph.removeNode(node);
});
};
export const extractDecendants = (id, graph) => {
// log.debug('Extracting ', id);
const children = graph.children(id);
let res = [].concat(children);
for (let i = 0; i < children.length; i++) {
parents[children[i]] = id;
res = res.concat(extractDecendants(children[i], graph));
}
return res;
};
/**
* Validates the graph, checking that all parent child relation points to existing nodes and that
* edges between nodes also ia correct. When not correct the function logs the discrepancies.
* @param {graphlib graph} g
*/
export const validate = graph => {
const edges = graph.edges();
log.trace('Edges: ', edges);
for (let i = 0; i < edges.length; i++) {
if (graph.children(edges[i].v).length > 0) {
log.trace('The node ', edges[i].v, ' is part of and edge even though it has children');
return false;
}
if (graph.children(edges[i].w).length > 0) {
log.trace('The node ', edges[i].w, ' is part of and edge even though it has children');
return false;
}
}
return true;
};
/**
* Finds a child that is not a cluster. When faking a edge between a node and a cluster.
* @param {Finds a } id
* @param {*} graph
*/
export const findNonClusterChild = (id, graph) => {
// const node = graph.node(id);
log.trace('Searching', id);
const children = graph.children(id);
if (children.length < 1) {
log.trace('This is a valid node', id);
return id;
}
for (let i = 0; i < children.length; i++) {
const _id = findNonClusterChild(children[i], graph);
if (_id) {
log.trace('Found replacement for', id, ' => ', _id);
return _id;
}
}
};
const getAnchorId = id => {
if (!clusterDb[id]) {
return id;
}
// If the cluster has no external connections
if (!clusterDb[id].externalConnections) {
return id;
}
// Return the replacement node
if (clusterDb[id]) {
return clusterDb[id].id;
}
return id;
};
export const adjustClustersAndEdges = (graph, depth) => {
if (!graph || depth > 10) {
log.debug('Opting out, no graph ');
return;
} else {
log.debug('Opting in, graph ');
}
// Go through the nodes and for each cluster found, save a replacment node, this can be used when
// faking a link to a cluster
graph.nodes().forEach(function(id) {
const children = graph.children(id);
if (children.length > 0) {
log.trace(
'Cluster identified',
id,
' Replacement id in edges: ',
findNonClusterChild(id, graph)
);
decendants[id] = extractDecendants(id, graph);
clusterDb[id] = { id: findNonClusterChild(id, graph), clusterData: graph.node(id) };
}
});
// Check incoming and outgoing edges for each cluster
graph.nodes().forEach(function(id) {
const children = graph.children(id);
const edges = graph.edges();
if (children.length > 0) {
log.debug('Cluster identified', id, decendants);
edges.forEach(edge => {
// log.debug('Edge, decendants: ', edge, decendants[id]);
// Check if any edge leaves the cluster (not the actual cluster, thats a link from the box)
if (edge.v !== id && edge.w !== id) {
// Any edge where either the one of the nodes is decending to the cluster but not the other
// if (decendants[id].indexOf(edge.v) < 0 && decendants[id].indexOf(edge.w) < 0) {
const d1 = isDecendant(edge.v, id);
const d2 = isDecendant(edge.w, id);
// d1 xor d2 - if either d1 is true and d2 is false or the other way around
if (d1 ^ d2) {
log.debug('Edge: ', edge, ' leaves cluster ', id);
log.debug('Decendants of ', id, ': ', decendants[id]);
clusterDb[id].externalConnections = true;
}
}
});
}
});
extractor(graph, 0);
// For clusters with incoming and/or outgoing edges translate those edges to a real node
// in the cluster inorder to fake the edge
graph.edges().forEach(function(e) {
const edge = graph.edge(e);
log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e)));
let v = e.v;
let w = e.w;
// Check if link is either from or to a cluster
log.trace('Fix', clusterDb, 'ids:', e.v, e.w, 'Translateing: ', clusterDb[e.v], clusterDb[e.w]);
if (clusterDb[e.v] || clusterDb[e.w]) {
log.trace('Fixing and trixing - removing', e.v, e.w, e.name);
v = getAnchorId(e.v);
w = getAnchorId(e.w);
graph.removeEdge(e.v, e.w, e.name);
if (v !== e.v) edge.fromCluster = e.v;
if (w !== e.w) edge.toCluster = e.w;
log.trace('Replacing with', v, w, e.name);
graph.setEdge(v, w, edge, e.name);
}
});
log.debug('Adjusted Graph', graphlib.json.write(graph));
log.trace(clusterDb);
// Remove references to extracted cluster
// graph.edges().forEach(edge => {
// if (isDecendant(edge.v, clusterId) || isDecendant(edge.w, clusterId)) {
// graph.removeEdge(edge);
// }
// });
};
export const extractor = (graph, depth) => {
log.debug('extractor - ', depth, graphlib.json.write(graph), graph.children('D'));
if (depth > 10) {
log.error('Bailing out');
return;
}
// For clusters without incoming and/or outgoing edges, create a new cluster-node
// containing the nodes and edges in the custer in a new graph
// for (let i = 0;)
let nodes = graph.nodes();
let hasChildren = false;
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i];
const children = graph.children(node);
hasChildren = hasChildren || children.length > 0;
}
if (!hasChildren) {
log.debug('Done, no node has children', graph.nodes());
return;
}
// const clusters = Object.keys(clusterDb);
// clusters.forEach(clusterId => {
log.debug('Nodes = ', nodes, depth);
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i];
log.debug(
'Extracting node',
node,
clusterDb,
clusterDb[node] && !clusterDb[node].externalConnections,
!graph.parent(node),
graph.node(node),
graph.children('D'),
' Depth ',
depth
);
// Note that the node might have been removed after the Object.keys call so better check
// that it still is in the game
if (!clusterDb[node]) {
// Skip if the node is not a cluster
log.debug('Not a cluster', node, depth);
// break;
} else if (
!clusterDb[node].externalConnections &&
!graph.parent(node) &&
graph.children(node) &&
graph.children(node).length > 0
) {
log.debug(
'Cluster without external connections, without a parent and with children',
node,
depth
);
const clusterGraph = new graphlib.Graph({
multigraph: true,
compound: true
})
.setGraph({
rankdir: 'TB',
// Todo: set proper spacing
nodesep: 50,
ranksep: 50,
marginx: 8,
marginy: 8
})
.setDefaultEdgeLabel(function() {
return {};
});
copy(node, graph, clusterGraph, node);
graph.setNode(node, {
clusterNode: true,
id: node,
clusterData: clusterDb[node].clusterData,
labelText: clusterDb[node].labelText,
graph: clusterGraph
});
log.debug('New graph after copy', graphlib.json.write(clusterGraph));
log.debug('Old graph after copy', graphlib.json.write(graph));
} else {
log.debug(
'Cluster ** ',
node,
' **not meeting the criteria !externalConnections:',
!clusterDb[node].externalConnections,
' no parent: ',
!graph.parent(node),
' children ',
graph.children(node) && graph.children(node).length > 0,
graph.children('D'),
depth
);
log.debug(clusterDb);
}
}
nodes = graph.nodes();
log.debug('New list of nodes', nodes);
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i];
const data = graph.node(node);
log.debug(' Now next leveö', node, data);
if (data.clusterNode) {
extractor(data.graph, depth + 1);
}
}
};

370
src/dagre-wrapper/mermaid-graphlib.spec.js Normal file
View File

@ -0,0 +1,370 @@
import graphlib from 'graphlib';
import dagre from 'dagre';
import { validate, adjustClustersAndEdges, extractDecendants } from './mermaid-graphlib';
import { setLogLevel, logger } from '../logger';
describe('Graphlib decorations', () => {
let g;
beforeEach(function () {
setLogLevel(1);
g = new graphlib.Graph({
multigraph: true,
compound: true
});
g.setGraph({
rankdir: 'TB',
nodesep: 10,
ranksep: 10,
marginx: 8,
marginy: 8
});
g.setDefaultEdgeLabel(function () {
return {};
});
});
describe('validate', function () {
it('Validate should detect edges between clusters', function () {
/*
subgraph C1
a --> b
end
subgraph C2
c
end
C1 --> C2
*/
g.setNode('a', { data:1});
g.setNode('b', { data: 2 });
g.setNode('c', { data: 3 });
g.setParent('a', 'C1');
g.setParent('b', 'C1');
g.setParent('c', 'C2');
g.setEdge('a', 'b');
g.setEdge('C1', 'C2');
console.log(g.nodes())
expect(validate(g)).toBe(false);
});
it('Validate should not detect edges between clusters after adjustment', function () {
/*
subgraph C1
a --> b
end
subgraph C2
c
end
C1 --> C2
*/
g.setNode('a', {});
g.setNode('b', {});
g.setNode('c', {});
g.setParent('a', 'C1');
g.setParent('b', 'C1');
g.setParent('c', 'C2');
g.setEdge('a', 'b');
g.setEdge('C1', 'C2');
console.log(g.nodes())
adjustClustersAndEdges(g);
logger.info(g.edges())
expect(validate(g)).toBe(true);
});
it('Validate should detect edges between clusters and transform clusters GLB4', function () {
/*
a --> b
subgraph C1
subgraph C2
a
end
b
end
C1 --> c
*/
g.setNode('a', { data: 1 });
g.setNode('b', { data: 2 });
g.setNode('c', { data: 3 });
g.setNode('C1', { data: 4 });
g.setNode('C2', { data: 5 });
g.setParent('a', 'C2');
g.setParent('b', 'C1');
g.setParent('C2', 'C1');
g.setEdge('a', 'b', { name: 'C1-internal-link' });
g.setEdge('C1', 'c', { name: 'C1-external-link' });
adjustClustersAndEdges(g);
logger.info(g.nodes())
expect(g.nodes().length).toBe(2);
expect(validate(g)).toBe(true);
});
it('Validate should detect edges between clusters and transform clusters GLB5', function () {
/*
a --> b
subgraph C1
a
end
subgraph C2
b
end
C1 -->
*/
g.setNode('a', { data: 1 });
g.setNode('b', { data: 2 });
g.setParent('a', 'C1');
g.setParent('b', 'C2');
// g.setEdge('a', 'b', { name: 'C1-internal-link' });
g.setEdge('C1', 'C2', { name: 'C1-external-link' });
logger.info(g.nodes())
adjustClustersAndEdges(g);
logger.info(g.nodes())
expect(g.nodes().length).toBe(2);
expect(validate(g)).toBe(true);
});
it('adjustClustersAndEdges GLB6', function () {
/*
subgraph C1
a
end
C1 --> b
*/
g.setNode('a', { data: 1 });
g.setNode('b', { data: 2 });
g.setNode('C1', { data: 3 });
g.setParent('a', 'C1');
g.setEdge('C1', 'b', { data: 'link1' }, '1');
// logger.info(g.edges())
adjustClustersAndEdges(g);
logger.info(g.edges())
expect(g.nodes()).toEqual(['b', 'C1']);
expect(g.edges().length).toBe(1);
expect(validate(g)).toBe(true);
expect(g.node('C1').clusterNode).toBe(true);
const C1Graph = g.node('C1').graph;
expect(C1Graph.nodes()).toEqual(['a']);
});
it('adjustClustersAndEdges GLB7', function () {
/*
subgraph C1
a
end
C1 --> b
C1 --> c
*/
g.setNode('a', { data: 1 });
g.setNode('b', { data: 2 });
g.setNode('c', { data: 3 });
g.setParent('a', 'C1');
g.setNode('C1', { data: 4 });
g.setEdge('C1', 'b', { data: 'link1' }, '1');
g.setEdge('C1', 'c', { data: 'link2' }, '2');
logger.info(g.node('C1'))
adjustClustersAndEdges(g);
logger.info(g.edges())
expect(g.nodes()).toEqual(['b', 'c', 'C1']);
expect(g.nodes().length).toBe(3);
expect(g.edges().length).toBe(2);
expect(g.edges().length).toBe(2);
const edgeData = g.edge(g.edges()[1]);
expect(edgeData.data).toBe('link2');
expect(validate(g)).toBe(true);
const C1Graph = g.node('C1').graph;
expect(C1Graph.nodes()).toEqual(['a']);
});
it('adjustClustersAndEdges GLB8', function () {
/*
subgraph A
a
end
subgraph B
b
end
subgraph C
c
end
A --> B
A --> C
*/
g.setNode('a', { data: 1 });
g.setNode('b', { data: 2 });
g.setNode('c', { data: 3 });
g.setParent('a', 'A');
g.setParent('b', 'B');
g.setParent('c', 'C');
g.setEdge('A', 'B', { data: 'link1' }, '1');
g.setEdge('A', 'C', { data: 'link2' }, '2');
// logger.info(g.edges())
adjustClustersAndEdges(g);
expect(g.nodes()).toEqual(['A', 'B', 'C']);
expect(g.edges().length).toBe(2);
expect(g.edges().length).toBe(2);
const edgeData = g.edge(g.edges()[1]);
expect(edgeData.data).toBe('link2');
expect(validate(g)).toBe(true);
const CGraph = g.node('C').graph;
expect(CGraph.nodes()).toEqual(['c']);
});
it('adjustClustersAndEdges the extracted graphs shall contain the correct data GLB10', function () {
/*
subgraph C
subgraph D
d
end
end
*/
g.setNode('C', { data: 1 });
g.setNode('D', { data: 2 });
g.setNode('d', { data: 3 });
g.setParent('d', 'D');
g.setParent('D', 'C');
// logger.info('Graph before', g.node('D'))
// logger.info('Graph before', graphlib.json.write(g))
adjustClustersAndEdges(g);
// logger.info('Graph after', graphlib.json.write(g), g.node('C').graph)
const CGraph = g.node('C').graph;
const DGraph = CGraph.node('D').graph;
expect(CGraph.nodes()).toEqual(['D']);
expect(DGraph.nodes()).toEqual(['d']);
expect(g.nodes()).toEqual(['C']);
expect(g.nodes().length).toBe(1);
});
it('adjustClustersAndEdges the extracted graphs shall contain the correct data GLB11', function () {
/*
subgraph A
a
end
subgraph B
b
end
subgraph C
subgraph D
d
end
end
A --> B
A --> C
*/
g.setNode('C', { data: 1 });
g.setNode('D', { data: 2 });
g.setNode('d', { data: 3 });
g.setNode('B', { data: 4 });
g.setNode('b', { data: 5 });
g.setNode('A', { data: 6 });
g.setNode('a', { data: 7 });
g.setParent('a', 'A');
g.setParent('b', 'B');
g.setParent('d', 'D');
g.setParent('D', 'C');
g.setEdge('A', 'B', { data: 'link1' }, '1');
g.setEdge('A', 'C', { data: 'link2' }, '2');
logger.info('Graph before', g.node('D'))
logger.info('Graph before', graphlib.json.write(g))
adjustClustersAndEdges(g);
logger.trace('Graph after', graphlib.json.write(g))
expect(g.nodes()).toEqual(['C', 'B', 'A']);
expect(g.nodes().length).toBe(3);
expect(g.edges().length).toBe(2);
const AGraph = g.node('A').graph;
const BGraph = g.node('B').graph;
const CGraph = g.node('C').graph;
// logger.info(CGraph.nodes());
const DGraph = CGraph.node('D').graph;
// logger.info('DG', CGraph.children('D'));
logger.info('A', AGraph.nodes());
expect(AGraph.nodes().length).toBe(1);
expect(AGraph.nodes()).toEqual(['a']);
logger.trace('Nodes', BGraph.nodes())
expect(BGraph.nodes().length).toBe(1);
expect(BGraph.nodes()).toEqual(['b']);
expect(CGraph.nodes()).toEqual(['D']);
expect(CGraph.nodes().length).toEqual(1);
expect(AGraph.edges().length).toBe(0);
expect(BGraph.edges().length).toBe(0);
expect(CGraph.edges().length).toBe(0);
expect(DGraph.nodes()).toEqual(['d']);
expect(DGraph.edges().length).toBe(0);
// expect(CGraph.node('D')).toEqual({ data: 2 });
expect(g.edges().length).toBe(2);
// expect(g.edges().length).toBe(2);
// const edgeData = g.edge(g.edges()[1]);
// expect(edgeData.data).toBe('link2');
// expect(validate(g)).toBe(true);
});
});
});
describe('extractDecendants', function () {
let g;
beforeEach(function () {
setLogLevel(1);
g = new graphlib.Graph({
multigraph: true,
compound: true
});
g.setGraph({
rankdir: 'TB',
nodesep: 10,
ranksep: 10,
marginx: 8,
marginy: 8
});
g.setDefaultEdgeLabel(function () {
return {};
});
});
it('Simple case of one level decendants GLB9', function () {
/*
subgraph A
a
end
subgraph B
b
end
subgraph C
c
end
A --> B
A --> C
*/
g.setNode('a', { data: 1 });
g.setNode('b', { data: 2 });
g.setNode('c', { data: 3 });
g.setParent('a', 'A');
g.setParent('b', 'B');
g.setParent('c', 'C');
g.setEdge('A', 'B', { data: 'link1' }, '1');
g.setEdge('A', 'C', { data: 'link2' }, '2');
// logger.info(g.edges())
const d1 = extractDecendants('A',g)
const d2 = extractDecendants('B',g)
const d3 = extractDecendants('C',g)
expect(d1).toEqual(['a']);
expect(d2).toEqual(['b']);
expect(d3).toEqual(['c']);
});
});

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

@ -248,7 +248,7 @@ const cylinder = (parent, node) => {
const rect = (parent, node) => { const rect = (parent, node) => {
const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes); const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes);
logger.info('Classes = ', node.classes); logger.trace('Classes = ', node.classes);
// add the rect // add the rect
const rect = shapeSvg.insert('rect', ':first-child'); const rect = shapeSvg.insert('rect', ':first-child');
@ -387,11 +387,31 @@ let nodeElems = {};
export const insertNode = (elem, node) => { export const insertNode = (elem, node) => {
nodeElems[node.id] = shapes[node.shape](elem, node); nodeElems[node.id] = shapes[node.shape](elem, node);
}; };
export const setNodeElem = (elem, node) => {
nodeElems[node.id] = elem;
};
export const clear = () => { export const clear = () => {
nodeElems = {}; nodeElems = {};
}; };
export const positionNode = node => { export const positionNode = node => {
const el = nodeElems[node.id]; const el = nodeElems[node.id];
el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')'); logger.trace(
'Transforming node',
node,
'translate(' + (node.x - node.width / 2 - 5) + ', ' + (node.y - node.height / 2 - 5) + ')'
);
const padding = 8;
if (node.clusterNode) {
el.attr(
'transform',
'translate(' +
(node.x - node.width / 2 - padding) +
', ' +
(node.y - node.height / 2 - padding) +
')'
);
} else {
el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
}
}; };

47
src/diagrams/flowchart/flowRenderer-v2.js
View File

@ -1,6 +1,5 @@
import graphlib from 'graphlib'; import graphlib from 'graphlib';
import * as d3 from 'd3'; import * as d3 from 'd3';
import dagre from 'dagre';
import flowDb from './flowDb'; import flowDb from './flowDb';
import flow from './parser/flow'; import flow from './parser/flow';
@ -133,10 +132,8 @@ export const addVertices = function(vert, g, svgId) {
} }
// Add the node // Add the node
g.setNode(vertex.id, { g.setNode(vertex.id, {
labelType: 'svg',
labelStyle: styles.labelStyle, labelStyle: styles.labelStyle,
shape: _shape, shape: _shape,
label: vertexNode,
labelText: vertexText, labelText: vertexText,
rx: radious, rx: radious,
ry: radious, ry: radious,
@ -149,10 +146,8 @@ export const addVertices = function(vert, g, svgId) {
}); });
logger.info('setNode', { logger.info('setNode', {
labelType: 'svg',
labelStyle: styles.labelStyle, labelStyle: styles.labelStyle,
shape: _shape, shape: _shape,
label: vertexNode,
labelText: vertexText, labelText: vertexText,
rx: radious, rx: radious,
ry: radious, ry: radious,
@ -193,6 +188,8 @@ export const addEdges = function(edges, g) {
} else { } else {
edgeData.arrowhead = 'normal'; edgeData.arrowhead = 'normal';
} }
logger.info(edgeData, edge);
edgeData.arrowType = edge.type; edgeData.arrowType = edge.type;
let style = ''; let style = '';
@ -321,8 +318,10 @@ export const draw = function(text, id) {
let subG; let subG;
const subGraphs = flowDb.getSubGraphs(); const subGraphs = flowDb.getSubGraphs();
logger.info('Subgraphs - ', subGraphs);
for (let i = subGraphs.length - 1; i >= 0; i--) { for (let i = subGraphs.length - 1; i >= 0; i--) {
subG = subGraphs[i]; subG = subGraphs[i];
logger.info('Subgraph - ', subG);
flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes); flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);
} }
@ -354,7 +353,7 @@ export const draw = function(text, id) {
// Run the renderer. This is what draws the final graph. // Run the renderer. This is what draws the final graph.
const element = d3.select('#' + id + ' g'); const element = d3.select('#' + id + ' g');
render(element, g, ['point', 'circle', 'cross'], 'flowchart', id); render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);
dagre.layout(g); // dagre.layout(g);
element.selectAll('g.node').attr('title', function() { element.selectAll('g.node').attr('title', function() {
return flowDb.getTooltip(this.id); return flowDb.getTooltip(this.id);
@ -385,27 +384,27 @@ export const draw = function(text, id) {
// Index nodes // Index nodes
flowDb.indexNodes('subGraph' + i); flowDb.indexNodes('subGraph' + i);
// reposition labels // // reposition labels
for (i = 0; i < subGraphs.length; i++) { // for (i = 0; i < subGraphs.length; i++) {
subG = subGraphs[i]; // subG = subGraphs[i];
if (subG.title !== 'undefined') { // if (subG.title !== 'undefined') {
const clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect'); // const clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect');
const clusterEl = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"]'); // const clusterEl = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"]');
const xPos = clusterRects[0].x.baseVal.value; // const xPos = clusterRects[0].x.baseVal.value;
const yPos = clusterRects[0].y.baseVal.value; // const yPos = clusterRects[0].y.baseVal.value;
const width = clusterRects[0].width.baseVal.value; // const width = clusterRects[0].width.baseVal.value;
const cluster = d3.select(clusterEl[0]); // const cluster = d3.select(clusterEl[0]);
const te = cluster.select('.label'); // const te = cluster.select('.label');
te.attr('transform', `translate(${xPos + width / 2}, ${yPos + 14})`); // te.attr('transform', `translate(${xPos + width / 2}, ${yPos + 14})`);
te.attr('id', id + 'Text'); // te.attr('id', id + 'Text');
for (let j = 0; j < subG.classes.length; j++) { // for (let j = 0; j < subG.classes.length; j++) {
clusterEl[0].classList.add(subG.classes[j]); // clusterEl[0].classList.add(subG.classes[j]);
} // }
} // }
} // }
// Add label rects for non html labels // Add label rects for non html labels
if (!conf.htmlLabels) { if (!conf.htmlLabels) {

41
src/diagrams/state/stateDb.js
View File

@ -1,4 +1,7 @@
import { logger } from '../../logger'; import { logger } from '../../logger';
import { generateId } from '../../utils';
const clone = o => JSON.parse(JSON.stringify(o));
let rootDoc = []; let rootDoc = [];
const setRootDoc = o => { const setRootDoc = o => {
@ -22,6 +25,34 @@ const docTranslator = (parent, node, first) => {
} }
if (node.doc) { if (node.doc) {
const doc = [];
// Check for concurrency
let i = 0;
let currentDoc = [];
for (i = 0; i < node.doc.length; i++) {
if (node.doc[i].type === 'divider') {
// debugger;
const newNode = clone(node.doc[i]);
newNode.doc = clone(currentDoc);
doc.push(newNode);
currentDoc = [];
} else {
currentDoc.push(node.doc[i]);
}
}
// If any divider was encountered
if (doc.length > 0 && currentDoc.length > 0) {
const newNode = {
stmt: 'state',
id: generateId(),
type: 'divider',
doc: clone(currentDoc)
};
doc.push(clone(newNode));
node.doc = doc;
}
node.doc.forEach(docNode => docTranslator(node, docNode, true)); node.doc.forEach(docNode => docTranslator(node, docNode, true));
} }
} }
@ -31,8 +62,14 @@ const getRootDocV2 = () => {
return { id: 'root', doc: rootDoc }; return { id: 'root', doc: rootDoc };
}; };
const extract = doc => { const extract = _doc => {
// const res = { states: [], relations: [] }; // const res = { states: [], relations: [] };
let doc;
if (_doc.doc) {
doc = _doc.doc;
} else {
doc = _doc;
}
// let doc = root.doc; // let doc = root.doc;
// if (!doc) { // if (!doc) {
// doc = root; // doc = root;
@ -40,6 +77,8 @@ const extract = doc => {
logger.info(doc); logger.info(doc);
clear(); clear();
logger.info('Extract', doc);
doc.forEach(item => { doc.forEach(item => {
if (item.stmt === 'state') { if (item.stmt === 'state') {
addState(item.id, item.type, item.doc, item.description, item.note); addState(item.id, item.type, item.doc, item.description, item.note);

22
src/diagrams/state/stateRenderer-v2.js
View File

@ -72,10 +72,8 @@ const setupNode = (g, parent, node, altFlag) => {
} }
const nodeData = { const nodeData = {
labelType: 'svg',
labelStyle: '', labelStyle: '',
shape: nodeDb[node.id].shape, shape: nodeDb[node.id].shape,
label: node.id,
labelText: nodeDb[node.id].description, labelText: nodeDb[node.id].description,
classes: nodeDb[node.id].classes, //classStr, classes: nodeDb[node.id].classes, //classStr,
style: '', //styles.style, style: '', //styles.style,
@ -87,10 +85,8 @@ const setupNode = (g, parent, node, altFlag) => {
if (node.note) { if (node.note) {
// Todo: set random id // Todo: set random id
const noteData = { const noteData = {
labelType: 'svg',
labelStyle: '', labelStyle: '',
shape: 'note', shape: 'note',
label: node.id,
labelText: node.note.text, labelText: node.note.text,
classes: 'statediagram-note', //classStr, classes: 'statediagram-note', //classStr,
style: '', //styles.style, style: '', //styles.style,
@ -99,10 +95,8 @@ const setupNode = (g, parent, node, altFlag) => {
padding: 15 //getConfig().flowchart.padding padding: 15 //getConfig().flowchart.padding
}; };
const groupData = { const groupData = {
labelType: 'svg',
labelStyle: '', labelStyle: '',
shape: 'noteGroup', shape: 'noteGroup',
label: node.id + '----parent',
labelText: node.note.text, labelText: node.note.text,
classes: nodeDb[node.id].classes, //classStr, classes: nodeDb[node.id].classes, //classStr,
style: '', //styles.style, style: '', //styles.style,
@ -133,8 +127,7 @@ const setupNode = (g, parent, node, altFlag) => {
classes: 'note-edge', classes: 'note-edge',
arrowheadStyle: 'fill: #333', arrowheadStyle: 'fill: #333',
labelpos: 'c', labelpos: 'c',
labelType: 'text', labelType: 'text'
label: ''
}); });
} else { } else {
g.setNode(node.id, nodeData); g.setNode(node.id, nodeData);
@ -143,12 +136,12 @@ const setupNode = (g, parent, node, altFlag) => {
if (parent) { if (parent) {
if (parent.id !== 'root') { if (parent.id !== 'root') {
logger.trace('Setting node ', node.id, ' to be child of its parent ', parent.id); logger.info('Setting node ', node.id, ' to be child of its parent ', parent.id);
g.setParent(node.id, parent.id); g.setParent(node.id, parent.id);
} }
} }
if (node.doc) { if (node.doc) {
logger.trace('Adding nodes children '); logger.info('Adding nodes children ');
setupDoc(g, node, node.doc, !altFlag); setupDoc(g, node, node.doc, !altFlag);
} }
}; };
@ -168,8 +161,7 @@ const setupDoc = (g, parent, doc, altFlag) => {
labelStyle: '', labelStyle: '',
arrowheadStyle: 'fill: #333', arrowheadStyle: 'fill: #333',
labelpos: 'c', labelpos: 'c',
labelType: 'text', labelType: 'text'
label: ''
}; };
let startId = item.state1.id; let startId = item.state1.id;
let endId = item.state2.id; let endId = item.state2.id;
@ -214,7 +206,7 @@ export const draw = function(text, id) {
compound: true compound: true
}) })
.setGraph({ .setGraph({
rankdir: 'LR', rankdir: 'TB',
nodesep: nodeSpacing, nodesep: nodeSpacing,
ranksep: rankSpacing, ranksep: rankSpacing,
marginx: 8, marginx: 8,
@ -224,8 +216,8 @@ export const draw = function(text, id) {
return {}; return {};
}); });
// logger.info(stateDb.getRootDoc()); logger.info(stateDb.getRootDocV2());
stateDb.extract(stateDb.getRootDocV2().doc); stateDb.extract(stateDb.getRootDocV2());
logger.info(stateDb.getRootDocV2()); logger.info(stateDb.getRootDocV2());
setupNode(g, undefined, stateDb.getRootDocV2(), true); setupNode(g, undefined, stateDb.getRootDocV2(), true);

2
src/logger.js
View File

@ -1,5 +1,5 @@
import moment from 'moment-mini'; import moment from 'moment-mini';
//
export const LEVELS = { export const LEVELS = {
debug: 1, debug: 1,
info: 2, info: 2,

16
src/utils.js
View File

@ -214,6 +214,19 @@ export const getStylesFromArray = arr => {
return { style: style, labelStyle: labelStyle }; return { style: style, labelStyle: labelStyle };
}; };
let cnt = 0;
export const generateId = () => {
cnt++;
return (
'id-' +
Math.random()
.toString(36)
.substr(2, 12) +
'-' +
cnt
);
};
export default { export default {
detectType, detectType,
isSubstringInArray, isSubstringInArray,
@ -221,5 +234,6 @@ export default {
calcLabelPosition, calcLabelPosition,
calcCardinalityPosition, calcCardinalityPosition,
formatUrl, formatUrl,
getStylesFromArray getStylesFromArray,
generateId
}; };