GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #20 from mermaid-js/develop

Browse Source 
ll
This commit is contained in:
Justin Greywolf 2020-04-26 05:38:45 -07:00 committed by GitHub
commit 3d185dc622
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
45 changed files with 1508 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -188,6 +188,7 @@ pie
- [Command Line Interface](https://github.com/mermaid-js/mermaid.cli)
- [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)

31
cypress/integration/rendering/flowchart.spec.js
View File

@ -640,4 +640,35 @@ describe('Flowchart', () => {
{ flowchart: { htmlLabels: false } }
);
});
it('31: should not slice off edges that are to the left of the left-most vertex', () => {
imgSnapshotTest(
`graph TD
work --> sleep
sleep --> work
eat --> sleep
work --> eat
`,
{ flowchart: { htmlLabels: false } }
);
});
it('32: Render Subroutine shape', () => {
imgSnapshotTest(
`graph LR
A[[subroutine shape test]]
A -->|Get money| B[[Go shopping]]
B --> C[[Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?]]
C -->|One| D[[Laptop]]
C -->|Two| E[[iPhone]]
C -->|Three| F[[Car<br/>wroom wroom]]
click A "index.html#link-clicked" "link test"
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;
class C someclass;
`,
{ flowchart: { htmlLabels: false } }
);
});
});

32
cypress/integration/rendering/gantt.spec.js
View File

@ -1,7 +1,7 @@
/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util.js';
describe('Sequencediagram', () => {
describe('Gantt diagram', () => {
it('should render a gantt chart', () => {
imgSnapshotTest(
`
@ -130,4 +130,34 @@ describe('Sequencediagram', () => {
{}
);
});
it('should hide today marker', () => {
imgSnapshotTest(
`
gantt
title Hide today marker (vertical line should not be visible)
dateFormat YYYY-MM-DD
axisFormat %d
todayMarker off
section Section1
Today: 1, -1h
`,
{}
);
});
it('should style today marker', () => {
imgSnapshotTest(
`
gantt
title Style today marker (vertical line should be 5px wide and half-transparent blue)
dateFormat YYYY-MM-DD
axisFormat %d
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
section Section1
Today: 1, -1h
`,
{}
);
});
});

13
cypress/integration/rendering/sequencediagram.spec.js
View File

@ -182,5 +182,18 @@ context('Sequence diagram', () => {
{}
);
});
it('should render autonumber with different line breaks', () => {
imgSnapshotTest(
`
sequenceDiagram
autonumber
Alice->>John: Hello John,<br>how are you?
Alice->>John: John,<br/>can you hear me?
John-->>Alice: Hi Alice,<br />I can hear you!
John-->>Alice: I feel great!
`,
{}
);
});
});
});

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">
<style>
body {
background: white;
background: rgb(221, 208, 208);
font-family: 'Arial';
}
h1 { color: white;}
@ -32,13 +32,31 @@
G-->c
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
flowchart LR
subgraph id1 [Test]
b
end
a-->id1
stateDiagram-v2
[*] --> monkey
state monkey {
Sitting
--
Eating
}
</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
[*] --> Still
Still --> [*]
@ -51,16 +69,67 @@
Moving --> Still
Moving --> Crash
Crash --> [*]
</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%;">
stateDiagram-v2
State1: The state with a note
note right of State1
Important information! You can write
notes.
end note
State1 --> State2
note left of State2 : This is the note to the left.
flowchart TD
subgraph A
a
end
subgraph B
b
end
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 class="mermaid2" style="width: 100%; height: 100%;">
stateDiagram-v2

47
dist/index.html vendored
View File

@ -16,6 +16,9 @@
<div class="mermaid">
info
</div>
<hr/>
<div class="mermaid">
gantt
title Exclusive end dates (Manual date should end on 3d)
@ -25,7 +28,6 @@
2 Days: 1, 2019-01-01,2d
Manual Date: 2, 2019-01-01,2019-01-03
</div>
<div class="mermaid">
gantt
title Inclusive end dates (Manual date should end on 4th)
@ -36,6 +38,27 @@
2 Days: 1, 2019-01-01,2d
Manual Date: 2, 2019-01-01,2019-01-03
</div>
<div class="mermaid">
gantt
title Hide today marker (vertical line should not be visible)
dateFormat YYYY-MM-DD
axisFormat %d
todayMarker off
section Section1
Today: 1, -1h
</div>
<div class="mermaid">
gantt
title Style today marker (vertical line should be 5px wide and half-transparent blue)
dateFormat YYYY-MM-DD
axisFormat %d
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
section Section1
Today: 1, -1h
</div>
<hr/>
<div class="mermaid">
graph LR
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
@ -315,6 +338,20 @@ graph TB
class A someclass;
class C someclass;
</div>
<div class="mermaid">
graph LR
A[[subroutine shape test]]
A -->|Get money| B[[Go shopping]]
B --> C[[Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?]]
C -->|One| D[[Laptop]]
C -->|Two| E[[iPhone]]
C -->|Three| F[[Car<br/>wroom wroom]]
click A "index.html#link-clicked" "link test"
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;
class C someclass;
</div>
<div class="mermaid">
graph LR
A[(cylindrical<br />shape<br />test)]
@ -441,6 +478,14 @@ end
4->>1: multiline<br />using #lt;br /#gt;
note right of 1: multiline<br />using #lt;br /#gt;
</div>
<div class="mermaid">
sequenceDiagram
autonumber
Alice->>John: Hello John,<br>how are you?
Alice->>John: John,<br/>can you hear me?
John-->>Alice: Hi Alice,<br />I can hear you!
John-->>Alice: I feel great!
</div>
<hr/>

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.**
## 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
@ -137,6 +137,18 @@ merge newbranch
![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
### CDN

14
docs/entityRelationshipDiagram.md
View File

@ -2,20 +2,20 @@
> An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia.
Note that practitioners of ER modelling almost always refer to entity types simply as entities. For example the CUSTOMER entity type would be referred to simply as the CUSTOMER entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.
Note that practitioners of ER modelling almost always refer to *entity types* simply as *entities*. For example the CUSTOMER entity type would be referred to simply as the CUSTOMER entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract *instance* of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.
Mermaid can render ER diagrams
```
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ : DELIVERY-ADDRESS : uses
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
```
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
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.
@ -24,7 +24,7 @@ Relationships between entities are represented by lines with end markers represe
## Status
ER diagrams are a new feature in Mermaid and are **experimental**. There are likely to be a few bugs and constraints, and enhancements will be made in due course.
ER diagrams are a new feature in Mermaid and are **experimental**. There are likely to be a few bugs and constraints, and enhancements will be made in due course. Currently you can only define entities and relationships, but not attributes.
## Syntax
@ -61,10 +61,10 @@ Cardinality is a property that describes how many elements of another entity can
| Value (left) | Value (right) | Meaning |
|:------------:|:-------------:|--------------------------------------------------------|
| `|o` | `o|` | Zero or one |
| `||` | `||` | Exactly one |
| `\|o` | `o\|` | Zero or one |
| `\|\|` | `\|\|` | Exactly one |
| `}o` | `o{` | Zero or more (no upper limit) |
| `}|` | `|{` | One or more (no upper limit) |
| `}\|` | `\|{` | One or more (no upper limit) |
### Identification

63
docs/examples.md
View File

@ -5,7 +5,7 @@ pie title NETFLIX
"Time spent looking for movie" : 90
"Time spent watching it" : 10
```
``` mermaid
```mermaid
pie title NETFLIX
"Time spent looking for movie" : 90
"Time spent watching it" : 10
@ -35,8 +35,6 @@ sequenceDiagram
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
```
```mermaid
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
@ -49,9 +47,15 @@ sequenceDiagram
Alice->John: Yes... John, how are you?
```
## Basic flowchart
```
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
```
```mermaid
graph LR
A[Square Rect] -- Link text --> B((Circle))
@ -63,6 +67,29 @@ graph LR
## 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
graph TB
sq[Square shape] --> ci((Circle shape))
@ -90,6 +117,21 @@ graph TB
## 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
sequenceDiagram
loop Daily query
@ -109,6 +151,19 @@ sequenceDiagram
## 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
sequenceDiagram
participant Alice

11
docs/flowchart.md
View File

@ -89,6 +89,17 @@ graph LR
id1([This is the text in the box])
```
### A node in a subroutine shape
```
graph LR
id1[[This is the text in the box]]
```
```mermaid
graph LR
id1[[This is the text in the box]]
```
### A node in a cylindrical shape
```

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

2
docs/index.html
View File

@ -7,7 +7,7 @@
<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.4.7/dist/mermaid.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/mermaid@8.5.0/dist/mermaid.min.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),

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)
- [Reveal CK](https://github.com/jedcn/reveal-ck)
- [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)

38
docs/mermaidAPI.md
View File

@ -263,6 +263,43 @@ The number of alternating section styles.
Datetime format of the axis. This might need adjustment to match your locale and preferences
**Default value '%Y-%m-%d'**.
## er
The object containing configurations specific for entity relationship diagrams
### diagramPadding
The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels
### layoutDirection
Directional bias for layout of entities. Can be either 'TB', 'BT', 'LR', or 'RL',
where T = top, B = bottom, L = left, and R = right.
### minEntityWidth
The mimimum width of an entity box, expressed in pixels
### minEntityHeight
The minimum height of an entity box, expressed in pixels
### entityPadding
The minimum internal padding between the text in an entity box and the enclosing box borders, expressed in pixels
### stroke
Stroke color of box edges and lines
### fill
Fill color of entity boxes
### fontSize
Font size
## render
Function that renders an svg with a graph from a chart definition. Usage example below.
@ -318,6 +355,7 @@ mermaidAPI.initialize({
boxTextMargin:5,
noteMargin:10,
messageMargin:35,
messageAlign:'center',
mirrorActors:true,
bottomMarginAdj:1,
useMaxWidth:true,

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "mermaid",
"version": "8.4.7",
"version": "8.5.0",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"main": "dist/mermaid.core.js",
"keywords": [
@ -13,7 +13,7 @@
"git graph"
],
"scripts": {
"build": "webpack --progress --colors",
"build": "webpack --progress --colors -p",
"postbuild": "documentation build src/mermaidAPI.js --shallow -f md --markdown-toc false -o docs/mermaidAPI.md",
"build:watch": "yarn build --watch",
"minify": "minify ./dist/mermaid.js > ./dist/mermaid.min.js",

72
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
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:
```json
{
"labelType":"svg",
"labelStyle":"",
"shape":"rect",
"label":{},
"labelText":"Test",
"rx":0,"ry":0,
"rx":0,
"ry":0,
"class":"default",
"style":"",
"id":"Test",
@ -24,18 +74,16 @@ This is set by the renderer of the diagram and insert the data that the wrapper
| 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. Not currently used. |
| shape | The shape of the node. Currently on rect is suppoerted. This will change. |
| label | ?? |
| labelStyle | Css styles for the label. User for instance for stylling the labels for clusters |
| shape | The shape of the node. |
| labelText | The text on the label |
| rx | The corner radius - maybe part of the shape instead? |
| ry | The corner radius - maybe part of the shape instead? |
| class | Class to be set for the shape |
| rx | The corner radius - maybe part of the shape instead? Used for rects. |
| ry | The corner radius - maybe part of the shape instead? Used for rects. |
| classes | Classes to be set for the shape. Not used |
| style | Css styles for the actual shape |
| id | id of the shape |
| 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

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

@ -1,8 +1,10 @@
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';
const rect = (parent, node) => {
log.trace('Creating subgraph rect for ', node.id, node);
// Add outer g element
const shapeSvg = parent
.insert('g')
@ -23,6 +25,7 @@ const rect = (parent, node) => {
const padding = 0 * node.padding;
const halfPadding = padding / 2;
log.trace('Data ', node, JSON.stringify(node));
// center the rect around its coordinate
rect
.attr('rx', node.rx)
@ -32,9 +35,7 @@ const rect = (parent, node) => {
.attr('width', node.width + padding)
.attr('height', node.height + padding);
// logger.info('bbox', bbox.width, node.x, node.width);
// Center the label
// label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')');
label.attr(
'transform',
'translate(' +
@ -127,9 +128,7 @@ const roundedWithTitle = (parent, node) => {
.attr('width', node.width + padding)
.attr('height', node.height + padding - bbox.height - 3);
// logger.info('bbox', bbox.width, node.x, node.width);
// Center the label
// label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')');
label.attr(
'transform',
'translate(' +
@ -155,7 +154,9 @@ const shapes = { rect, roundedWithTitle, noteGroup };
let clusterElems = {};
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) => {
const label = createLabel(node.labelText, node.labelStyle);
@ -170,6 +171,8 @@ export const clear = () => {
};
export const positionCluster = node => {
log.info('Position cluster');
const el = clusterElems[node.id];
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 svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
svgLabel.setAttribute('style', style.replace('color:', 'fill:'));
const rows = vertexText.split(/\n|<br\s*\/?>/gi);
let rows = [];
if (vertexText) {
rows = vertexText.split(/\n|<br\s*\/?>/gi);
}
for (let j = 0; j < rows.length; j++) {
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;
};
// 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) => {
// logger.info('intersection', outsidePoint, insidePoint, node);
logger.trace('intersection o:', outsidePoint, ' i:', insidePoint, node);
const x = node.x;
const y = node.y;
const dx = Math.abs(x - insidePoint.x);
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 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 R = Math.abs(outsidePoint.x - insidePoint.x);
@ -105,20 +88,20 @@ const intersection = (node, outsidePoint, insidePoint) => {
};
} else {
q = (Q * r) / R;
r = (R * q) / Q;
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
};
}
};
export const insertEdge = function(elem, edge, clusterDb, diagramType) {
logger.info('\n\n\n\n');
let points = edge.points;
if (edge.toCluster) {
// logger.info('edge', edge);
// logger.info('to cluster', clusterDb[edge.toCluster]);
logger.trace('edge', edge);
logger.trace('to cluster', clusterDb[edge.toCluster]);
points = [];
let lastPointOutside;
let isInside = false;
@ -126,13 +109,12 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
const node = clusterDb[edge.toCluster].node;
if (!outsideNode(node, point) && !isInside) {
// logger.info('inside', edge.toCluster, point);
logger.trace('inside', edge.toCluster, point, lastPointOutside);
// First point inside the rect
const insterection = intersection(node, lastPointOutside, point);
// logger.info('intersect', inter.rect(node, lastPointOutside));
logger.trace('intersect', insterection);
points.push(insterection);
// points.push(insterection);
isInside = true;
} else {
if (!isInside) points.push(point);
@ -142,8 +124,8 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
}
if (edge.fromCluster) {
// logger.info('edge', edge);
// logger.info('from cluster', clusterDb[edge.toCluster]);
logger.trace('edge', edge);
logger.trace('from cluster', clusterDb[edge.toCluster]);
const updatedPoints = [];
let lastPointOutside;
let isInside = false;
@ -152,17 +134,17 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
const node = clusterDb[edge.fromCluster].node;
if (!outsideNode(node, point) && !isInside) {
// logger.info('inside', edge.toCluster, point);
logger.trace('inside', edge.toCluster, point);
// First point inside the rect
const insterection = intersection(node, lastPointOutside, point);
// logger.info('intersect', intersection(node, lastPointOutside, point));
// logger.trace('intersect', intersection(node, lastPointOutside, point));
updatedPoints.unshift(insterection);
// points.push(insterection);
isInside = true;
} else {
// at the outside
// logger.info('Outside point', point);
logger.trace('Outside point', point);
if (!isInside) updatedPoints.unshift(point);
}
lastPointOutside = point;
@ -170,10 +152,6 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
points = updatedPoints;
}
// logger.info('Poibts', points);
// logger.info('Edge', edge);
// The data for our line
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, '\\)');
}
// logger.info('arrowType', edge.arrowType);
logger.info('arrowType', edge.arrowType);
switch (edge.arrowType) {
case 'arrow_cross':
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')');

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

@ -1,45 +1,66 @@
import dagre from 'dagre';
import graphlib from 'graphlib';
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 { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges';
import { logger } 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();
import { logger as log } from '../logger';
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 edgePaths = elem.insert('g').attr('class', 'edgePaths');
const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');
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
// to the abstract node and is later used by dagre for the layout
graph.nodes().forEach(function(v) {
const node = graph.node(v);
logger.warn('Node ' + v + ': ' + JSON.stringify(graph.node(v)));
if (node.type !== 'group') {
insertNode(nodes, graph.node(v));
if (typeof parentCluster !== 'undefined') {
const data = JSON.parse(JSON.stringify(parentCluster.clusterData));
// 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 {
// const width = getClusterTitleWidth(clusters, node);
const children = graph.children(v);
logger.info('Cluster identified', node.id, children[0]);
// nodes2expand.push({ id: children[0], width });
clusterDb[node.id] = { id: children[0] };
logger.info('Clusters ', clusterDb);
if (graph.children(v).length > 0) {
// This is a cluster but not to be rendered recusively
// Render as before
log.trace('Cluster - the non recursive path', v, node.id, node, graph);
log.trace(findNonClusterChild(node.id, graph));
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.
// TODO: pick optimal child in the cluster to us as link anchor
graph.edges().forEach(function(e) {
const edge = graph.edge(e);
logger.warn('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
// logger.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e)));
const v = translateClusterId(e.v);
const w = translateClusterId(e.w);
if (v !== e.v || w !== 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);
}
const edge = graph.edge(e.v, e.w, e.name);
log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
log.trace('Edge ' + e.v + ' -> ' + e.w + ': ', e, ' ', JSON.stringify(graph.edge(e)));
// 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]);
insertEdgeLabel(edgeLabels, edge);
});
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('#############################################');
logger.info('### Layout ###');
logger.info('#############################################');
logger.info(graph);
log.trace('#############################################');
log.trace('### Layout ###');
log.trace('#############################################');
log.trace(graph);
dagre.layout(graph);
log.warn('Graph after layout:', graphlib.json.write(graph));
// Move the nodes to the correct place
graph.nodes().forEach(function(v) {
const node = graph.node(v);
logger.info('Node ' + v + ': ' + JSON.stringify(graph.node(v)));
if (node.type !== 'group') {
// log.trace('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
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);
} else {
// Non cluster 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
graph.edges().forEach(function(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);
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 = {};

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

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

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

@ -248,7 +248,7 @@ const cylinder = (parent, node) => {
const rect = (parent, node) => {
const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes);
logger.info('Classes = ', node.classes);
logger.trace('Classes = ', node.classes);
// add the rect
const rect = shapeSvg.insert('rect', ':first-child');
@ -387,11 +387,31 @@ let nodeElems = {};
export const insertNode = (elem, node) => {
nodeElems[node.id] = shapes[node.shape](elem, node);
};
export const setNodeElem = (elem, node) => {
nodeElems[node.id] = elem;
};
export const clear = () => {
nodeElems = {};
};
export const positionNode = node => {
const el = nodeElems[node.id];
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 + ')');
}
};

7
src/diagrams/common/common.js
View File

@ -25,8 +25,10 @@ export const sanitizeText = (text, config) => {
return txt;
};
export const lineBreakRegex = /<br\s*\/?>/gi;
const breakToPlaceholder = s => {
return s.replace(/<br\s*\/?>/gi, '#br#');
return s.replace(lineBreakRegex, '#br#');
};
const placeholderToBreak = s => {
@ -35,5 +37,6 @@ const placeholderToBreak = s => {
export default {
getRows,
sanitizeText
sanitizeText,
lineBreakRegex
};

24
src/diagrams/flowchart/flowChartShapes.js
View File

@ -154,6 +154,28 @@ function stadium(parent, bbox, node) {
return shapeSvg;
}
function subroutine(parent, bbox, node) {
const w = bbox.width;
const h = bbox.height;
const points = [
{ x: 0, y: 0 },
{ x: w, y: 0 },
{ x: w, y: -h },
{ x: 0, y: -h },
{ x: 0, y: 0 },
{ x: -8, y: 0 },
{ x: w + 8, y: 0 },
{ x: w + 8, y: -h },
{ x: -8, y: -h },
{ x: -8, y: 0 }
];
const shapeSvg = insertPolygonShape(parent, w, h, points);
node.intersect = function(point) {
return dagreD3.intersect.polygon(node, points, point);
};
return shapeSvg;
}
function cylinder(parent, bbox, node) {
const w = bbox.width;
const rx = w / 2;
@ -221,6 +243,7 @@ export function addToRender(render) {
render.shapes().question = question;
render.shapes().hexagon = hexagon;
render.shapes().stadium = stadium;
render.shapes().subroutine = subroutine;
render.shapes().cylinder = cylinder;
// Add custom shape for box with inverted arrow on left side
@ -246,6 +269,7 @@ export function addToRenderV2(addShape) {
addShape({ question });
addShape({ hexagon });
addShape({ stadium });
addShape({ subroutine });
addShape({ cylinder });
// Add custom shape for box with inverted arrow on left side

3
src/diagrams/flowchart/flowChartShapes.spec.js
View File

@ -65,7 +65,8 @@ describe('flowchart shapes', function() {
['lean_right', 4, useWidth, useHeight],
['lean_left', 4, useWidth, useHeight],
['trapezoid', 4, useWidth, useHeight],
['inv_trapezoid', 4, useWidth, useHeight]
['inv_trapezoid', 4, useWidth, useHeight],
['subroutine', 10, useWidth, useHeight],
].forEach(function([shapeType, expectedPointCount, getW, getH]) {
it(`should add a ${shapeType} shape that renders a properly translated polygon element`, function() {
const mockRender = MockRender();

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

@ -1,6 +1,5 @@
import graphlib from 'graphlib';
import * as d3 from 'd3';
import dagre from 'dagre';
import flowDb from './flowDb';
import flow from './parser/flow';
@ -9,6 +8,7 @@ import { getConfig } from '../../config';
import { render } from '../../dagre-wrapper/index.js';
import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
import { logger } from '../../logger';
import common from '../common/common';
import { interpolateToCurve, getStylesFromArray } from '../../utils';
const conf = {};
@ -62,7 +62,7 @@ export const addVertices = function(vert, g, svgId) {
const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
const rows = vertexText.split(/<br\s*\/?>/gi);
const rows = vertexText.split(common.lineBreakRegex);
for (let j = 0; j < rows.length; j++) {
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
@ -119,6 +119,9 @@ export const addVertices = function(vert, g, svgId) {
case 'stadium':
_shape = 'stadium';
break;
case 'subroutine':
_shape = 'subroutine';
break;
case 'cylinder':
_shape = 'cylinder';
break;
@ -130,10 +133,8 @@ export const addVertices = function(vert, g, svgId) {
}
// Add the node
g.setNode(vertex.id, {
labelType: 'svg',
labelStyle: styles.labelStyle,
shape: _shape,
label: vertexNode,
labelText: vertexText,
rx: radious,
ry: radious,
@ -146,10 +147,8 @@ export const addVertices = function(vert, g, svgId) {
});
logger.info('setNode', {
labelType: 'svg',
labelStyle: styles.labelStyle,
shape: _shape,
label: vertexNode,
labelText: vertexText,
rx: radious,
ry: radious,
@ -190,6 +189,8 @@ export const addEdges = function(edges, g) {
} else {
edgeData.arrowhead = 'normal';
}
logger.info(edgeData, edge);
edgeData.arrowType = edge.type;
let style = '';
@ -243,7 +244,7 @@ export const addEdges = function(edges, g) {
edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
} else {
edgeData.labelType = 'text';
edgeData.label = edge.text.replace(/<br\s*\/?>/gi, '\n');
edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
if (typeof edge.style === 'undefined') {
edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
@ -318,8 +319,10 @@ export const draw = function(text, id) {
let subG;
const subGraphs = flowDb.getSubGraphs();
logger.info('Subgraphs - ', subGraphs);
for (let i = subGraphs.length - 1; i >= 0; i--) {
subG = subGraphs[i];
logger.info('Subgraph - ', subG);
flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);
}
@ -351,7 +354,7 @@ export const draw = function(text, id) {
// Run the renderer. This is what draws the final graph.
const element = d3.select('#' + id + ' g');
render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);
dagre.layout(g);
// dagre.layout(g);
element.selectAll('g.node').attr('title', function() {
return flowDb.getTooltip(this.id);
@ -382,27 +385,27 @@ export const draw = function(text, id) {
// Index nodes
flowDb.indexNodes('subGraph' + i);
// reposition labels
for (i = 0; i < subGraphs.length; i++) {
subG = subGraphs[i];
// // reposition labels
// for (i = 0; i < subGraphs.length; i++) {
// subG = subGraphs[i];
if (subG.title !== 'undefined') {
const clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect');
const clusterEl = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"]');
// if (subG.title !== 'undefined') {
// const clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect');
// const clusterEl = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"]');
const xPos = clusterRects[0].x.baseVal.value;
const yPos = clusterRects[0].y.baseVal.value;
const width = clusterRects[0].width.baseVal.value;
const cluster = d3.select(clusterEl[0]);
const te = cluster.select('.label');
te.attr('transform', `translate(${xPos + width / 2}, ${yPos + 14})`);
te.attr('id', id + 'Text');
// const xPos = clusterRects[0].x.baseVal.value;
// const yPos = clusterRects[0].y.baseVal.value;
// const width = clusterRects[0].width.baseVal.value;
// const cluster = d3.select(clusterEl[0]);
// const te = cluster.select('.label');
// te.attr('transform', `translate(${xPos + width / 2}, ${yPos + 14})`);
// te.attr('id', id + 'Text');
for (let j = 0; j < subG.classes.length; j++) {
clusterEl[0].classList.add(subG.classes[j]);
}
}
}
// for (let j = 0; j < subG.classes.length; j++) {
// clusterEl[0].classList.add(subG.classes[j]);
// }
// }
// }
// Add label rects for non html labels
if (!conf.htmlLabels) {

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

@ -8,6 +8,7 @@ import { getConfig } from '../../config';
import dagreD3 from 'dagre-d3';
import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
import { logger } from '../../logger';
import common from '../common/common';
import { interpolateToCurve, getStylesFromArray } from '../../utils';
import flowChartShapes from './flowChartShapes';
@ -62,7 +63,7 @@ export const addVertices = function(vert, g, svgId) {
const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
const rows = vertexText.split(/<br\s*\/?>/gi);
const rows = vertexText.split(common.lineBreakRegex);
for (let j = 0; j < rows.length; j++) {
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
@ -119,6 +120,9 @@ export const addVertices = function(vert, g, svgId) {
case 'stadium':
_shape = 'stadium';
break;
case 'subroutine':
_shape = 'subroutine';
break;
case 'cylinder':
_shape = 'cylinder';
break;
@ -222,7 +226,7 @@ export const addEdges = function(edges, g) {
edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
} else {
edgeData.labelType = 'text';
edgeData.label = edge.text.replace(/<br\s*\/?>/gi, '\n');
edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
if (typeof edge.style === 'undefined') {
edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
@ -380,10 +384,6 @@ export const draw = function(text, id) {
const svgBounds = svg.node().getBBox();
const width = svgBounds.width + padding * 2;
const height = svgBounds.height + padding * 2;
logger.debug(
`new ViewBox 0 0 ${width} ${height}`,
`translate(${padding - g._label.marginx}, ${padding - g._label.marginy})`
);
if (conf.useMaxWidth) {
svg.attr('width', '100%');
@ -393,10 +393,10 @@ export const draw = function(text, id) {
svg.attr('width', width);
}
svg.attr('viewBox', `0 0 ${width} ${height}`);
svg
.select('g')
.attr('transform', `translate(${padding - g._label.marginx}, ${padding - svgBounds.y})`);
// Ensure the viewBox includes the whole svgBounds area with extra space for padding
const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
logger.debug(`viewBox ${vBox}`);
svg.attr('viewBox', vBox);
// Index nodes
flowDb.indexNodes('subGraph' + i);

1
src/diagrams/flowchart/flowRenderer.spec.js
View File

@ -23,6 +23,7 @@ describe('the flowchart renderer', function() {
['circle', 'circle'],
['ellipse', 'ellipse'],
['stadium', 'stadium'],
['subroutine', 'subroutine'],
['cylinder', 'cylinder'],
['group', 'rect']
].forEach(function([type, expectedShape, expectedRadios = 0]) {

6
src/diagrams/flowchart/parser/flow.jison
View File

@ -87,6 +87,8 @@
"-)" return '-)';
"([" return 'STADIUMSTART';
"])" return 'STADIUMEND';
"[[" return 'SUBROUTINESTART';
"]]" return 'SUBROUTINEEND';
"[(" return 'CYLINDERSTART';
")]" return 'CYLINDEREND';
\- return 'MINUS';
@ -316,6 +318,8 @@ vertex: idString SQS text SQE
{$$ = $1;yy.addVertex($1,$3,'ellipse');}
| idString STADIUMSTART text STADIUMEND
{$$ = $1;yy.addVertex($1,$3,'stadium');}
| idString SUBROUTINESTART text SUBROUTINEEND
{$$ = $1;yy.addVertex($1,$3,'subroutine');}
| idString CYLINDERSTART text CYLINDEREND
{$$ = $1;yy.addVertex($1,$3,'cylinder');}
| idString PS text PE
@ -474,5 +478,5 @@ alphaNumToken : PUNCTUATION | AMP | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA |
idStringToken : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM| COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION | AMP;
graphCodeTokens: STADIUMSTART | STADIUMEND | CYLINDERSTART | CYLINDEREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI;
graphCodeTokens: STADIUMSTART | STADIUMEND | SUBROUTINESTART | SUBROUTINEEND | CYLINDERSTART | CYLINDEREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI;
%%

12
src/diagrams/gantt/ganttDb.js
View File

@ -6,6 +6,7 @@ import { getConfig } from '../../config';
const config = getConfig();
let dateFormat = '';
let axisFormat = '';
let todayMarker = '';
let excludes = [];
let title = '';
let sections = [];
@ -27,6 +28,7 @@ export const clear = function() {
rawTasks = [];
dateFormat = '';
axisFormat = '';
todayMarker = '';
excludes = [];
inclusiveEndDates = false;
};
@ -39,6 +41,14 @@ export const getAxisFormat = function() {
return axisFormat;
};
export const setTodayMarker = function(txt) {
todayMarker = txt;
};
export const getTodayMarker = function() {
return todayMarker;
};
export const setDateFormat = function(txt) {
dateFormat = txt;
};
@ -572,6 +582,8 @@ export default {
endDatesAreInclusive,
setAxisFormat,
getAxisFormat,
setTodayMarker,
getTodayMarker,
setTitle,
getTitle,
addSection,

11
src/diagrams/gantt/ganttDb.spec.js
View File

@ -21,6 +21,7 @@ describe('when using the ganttDb', function() {
beforeEach(function() {
ganttDb.setDateFormat('YYYY-MM-DD');
ganttDb.enableInclusiveEndDates();
ganttDb.setTodayMarker('off');
ganttDb.setExcludes('weekends 2019-02-06,friday');
ganttDb.addSection('weekends skip test');
ganttDb.addTask('test1', 'id1,2019-02-01,1d');
@ -34,6 +35,7 @@ describe('when using the ganttDb', function() {
${'getTitle'} | ${''}
${'getDateFormat'} | ${''}
${'getAxisFormat'} | ${''}
${'getTodayMarker'} | ${''}
${'getExcludes'} | ${[]}
${'getSections'} | ${[]}
${'endDatesAreInclusive'} | ${false}
@ -216,4 +218,13 @@ describe('when using the ganttDb', function() {
expect(tasks[1].task).toEqual('test2');
});
});
it.each`
type | expected
${'hide'} | ${'off'}
${'style'} | ${'stoke:stroke-width:5px,stroke:#00f,opacity:0.5'}
`('should ${type} today marker', ({ expected }) => {
ganttDb.setTodayMarker(expected);
expect(ganttDb.getTodayMarker()).toEqual(expected);
});
});

17
src/diagrams/gantt/ganttRenderer.js
View File

@ -1,6 +1,7 @@
import * as d3 from 'd3';
import { parser } from './parser/gantt';
import common from '../common/common';
import ganttDb from './ganttDb';
parser.yy = ganttDb;
@ -358,7 +359,7 @@ export const draw = function(text, id) {
.data(numOccurances)
.enter()
.append(function(d) {
const rows = d[0].split(/<br\s*\/?>/gi);
const rows = d[0].split(common.lineBreakRegex);
const dy = -(rows.length - 1) / 2;
const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
@ -396,17 +397,25 @@ export const draw = function(text, id) {
}
function drawToday(theSidePad, theTopPad, w, h) {
const todayMarker = ganttDb.getTodayMarker();
if (todayMarker === 'off') {
return;
}
const todayG = svg.append('g').attr('class', 'today');
const today = new Date();
const todayLine = todayG.append('line');
todayG
.append('line')
todayLine
.attr('x1', timeScale(today) + theSidePad)
.attr('x2', timeScale(today) + theSidePad)
.attr('y1', conf.titleTopMargin)
.attr('y2', h - conf.titleTopMargin)
.attr('class', 'today');
if (todayMarker !== '') {
todayLine.attr('style', todayMarker.replace(/,/g, ';'));
}
}
// from this stackexchange question: http://stackoverflow.com/questions/1890203/unique-for-arrays-in-javascript

2
src/diagrams/gantt/parser/gantt.jison
View File

@ -58,6 +58,7 @@ that id.
"inclusiveEndDates" return 'inclusiveEndDates';
"axisFormat"\s[^#\n;]+ return 'axisFormat';
"excludes"\s[^#\n;]+ return 'excludes';
"todayMarker"\s[^\n;]+ return 'todayMarker';
\d\d\d\d"-"\d\d"-"\d\d return 'date';
"title"\s[^#\n;]+ return 'title';
"section"\s[^#:\n;]+ return 'section';
@ -96,6 +97,7 @@ statement
| inclusiveEndDates {yy.enableInclusiveEndDates();$$=$1.substr(18);}
| axisFormat {yy.setAxisFormat($1.substr(11));$$=$1.substr(11);}
| excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);}
| todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);}
| title {yy.setTitle($1.substr(6));$$=$1.substr(6);}
| section {yy.addSection($1.substr(8));$$=$1.substr(8);}
| clickStatement

8
src/diagrams/gantt/parser/gantt.spec.js
View File

@ -37,6 +37,14 @@ describe('when parsing a gantt diagram it', function() {
expect(parserFnConstructor(str)).not.toThrow();
});
it('should handle a todayMarker definition', function() {
spyOn(ganttDb, 'setTodayMarker');
const str =
'gantt\ndateFormat yyyy-mm-dd\ntitle Adding gantt diagram functionality to mermaid\nexcludes weekdays 2019-02-01\ntodayMarker off';
expect(parserFnConstructor(str)).not.toThrow();
expect(ganttDb.setTodayMarker).toHaveBeenCalledWith('off');
});
it('should handle a section definition', function() {
const str =
'gantt\n' +

7
src/diagrams/sequence/sequenceRenderer.js
View File

@ -3,6 +3,7 @@ import * as d3 from 'd3';
import svgDraw from './svgDraw';
import { logger } from '../../logger';
import { parser } from './parser/sequenceDiagram';
import common from '../common/common';
import sequenceDb from './sequenceDb';
parser.yy = sequenceDb;
@ -170,7 +171,7 @@ export const bounds = {
const _drawLongText = (text, x, y, g, width) => {
let textHeight = 0;
const lines = text.split(/<br\s*\/?>/gi);
const lines = text.split(common.lineBreakRegex);
for (const line of lines) {
const textObj = svgDraw.getTextObj();
textObj.x = x;
@ -235,7 +236,7 @@ const drawMessage = function(elem, startx, stopx, verticalPos, msg, sequenceInde
let textElems = [];
let counterBreaklines = 0;
let breaklineOffset = 17;
const breaklines = msg.message.split(/<br\s*\/?>/gi);
const breaklines = msg.message.split(common.lineBreakRegex);
for (const breakline of breaklines) {
textElems.push(
g
@ -362,7 +363,7 @@ const drawMessage = function(elem, startx, stopx, verticalPos, msg, sequenceInde
line.attr('marker-start', 'url(' + url + '#sequencenumber)');
g.append('text')
.attr('x', startx)
.attr('y', verticalPos + 4)
.attr('y', verticalPos + 4 + totalOffset)
.attr('font-family', 'sans-serif')
.attr('font-size', '12px')
.attr('text-anchor', 'middle')

6
src/diagrams/sequence/svgDraw.js
View File

@ -1,3 +1,5 @@
import common from '../common/common';
export const drawRect = function(elem, rectData) {
const rectElem = elem.append('rect');
rectElem.attr('x', rectData.x);
@ -18,7 +20,7 @@ export const drawRect = function(elem, rectData) {
export const drawText = function(elem, textData) {
// Remove and ignore br:s
const nText = textData.text.replace(/<br\s*\/?>/gi, ' ');
const nText = textData.text.replace(common.lineBreakRegex, ' ');
const textElem = elem.append('text');
textElem.attr('x', textData.x);
@ -321,7 +323,7 @@ const _drawTextCandidateFunc = (function() {
function byTspan(content, g, x, y, width, height, textAttrs, conf) {
const { actorFontSize, actorFontFamily } = conf;
const lines = content.split(/<br\s*\/?>/gi);
const lines = content.split(common.lineBreakRegex);
for (let i = 0; i < lines.length; i++) {
const dy = i * actorFontSize - (actorFontSize * (lines.length - 1)) / 2;
const text = g

4
src/diagrams/state/shapes.js
View File

@ -282,7 +282,7 @@ const drawForkJoinState = (g, stateDef) => {
export const drawText = function(elem, textData) {
// Remove and ignore br:s
const nText = textData.text.replace(/<br\s*\/?>/gi, ' ');
const nText = textData.text.replace(common.lineBreakRegex, ' ');
const textElem = elem.append('text');
textElem.attr('x', textData.x);
@ -310,7 +310,7 @@ const _drawLongText = (_text, x, y, g) => {
let text = _text.replace(/\r\n/g, '<br/>');
text = text.replace(/\n/g, '<br/>');
const lines = text.split(/<br\s*\/?>/gi);
const lines = text.split(common.lineBreakRegex);
let tHeight = 1.25 * getConfig().state.noteMargin;
for (const line of lines) {

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

@ -1,4 +1,7 @@
import { logger } from '../../logger';
import { generateId } from '../../utils';
const clone = o => JSON.parse(JSON.stringify(o));
let rootDoc = [];
const setRootDoc = o => {
@ -22,6 +25,34 @@ const docTranslator = (parent, node, first) => {
}
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));
}
}
@ -31,8 +62,14 @@ const getRootDocV2 = () => {
return { id: 'root', doc: rootDoc };
};
const extract = doc => {
const extract = _doc => {
// const res = { states: [], relations: [] };
let doc;
if (_doc.doc) {
doc = _doc.doc;
} else {
doc = _doc;
}
// let doc = root.doc;
// if (!doc) {
// doc = root;
@ -40,6 +77,8 @@ const extract = doc => {
logger.info(doc);
clear();
logger.info('Extract', doc);
doc.forEach(item => {
if (item.stmt === 'state') {
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 = {
labelType: 'svg',
labelStyle: '',
shape: nodeDb[node.id].shape,
label: node.id,
labelText: nodeDb[node.id].description,
classes: nodeDb[node.id].classes, //classStr,
style: '', //styles.style,
@ -87,10 +85,8 @@ const setupNode = (g, parent, node, altFlag) => {
if (node.note) {
// Todo: set random id
const noteData = {
labelType: 'svg',
labelStyle: '',
shape: 'note',
label: node.id,
labelText: node.note.text,
classes: 'statediagram-note', //classStr,
style: '', //styles.style,
@ -99,10 +95,8 @@ const setupNode = (g, parent, node, altFlag) => {
padding: 15 //getConfig().flowchart.padding
};
const groupData = {
labelType: 'svg',
labelStyle: '',
shape: 'noteGroup',
label: node.id + '----parent',
labelText: node.note.text,
classes: nodeDb[node.id].classes, //classStr,
style: '', //styles.style,
@ -133,8 +127,7 @@ const setupNode = (g, parent, node, altFlag) => {
classes: 'note-edge',
arrowheadStyle: 'fill: #333',
labelpos: 'c',
labelType: 'text',
label: ''
labelType: 'text'
});
} else {
g.setNode(node.id, nodeData);
@ -143,12 +136,12 @@ const setupNode = (g, parent, node, altFlag) => {
if (parent) {
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);
}
}
if (node.doc) {
logger.trace('Adding nodes children ');
logger.info('Adding nodes children ');
setupDoc(g, node, node.doc, !altFlag);
}
};
@ -168,8 +161,7 @@ const setupDoc = (g, parent, doc, altFlag) => {
labelStyle: '',
arrowheadStyle: 'fill: #333',
labelpos: 'c',
labelType: 'text',
label: ''
labelType: 'text'
};
let startId = item.state1.id;
let endId = item.state2.id;
@ -214,7 +206,7 @@ export const draw = function(text, id) {
compound: true
})
.setGraph({
rankdir: 'LR',
rankdir: 'TB',
nodesep: nodeSpacing,
ranksep: rankSpacing,
marginx: 8,
@ -224,8 +216,8 @@ export const draw = function(text, id) {
return {};
});
// logger.info(stateDb.getRootDoc());
stateDb.extract(stateDb.getRootDocV2().doc);
logger.info(stateDb.getRootDocV2());
stateDb.extract(stateDb.getRootDocV2());
logger.info(stateDb.getRootDocV2());
setupNode(g, undefined, stateDb.getRootDocV2(), true);

5
src/diagrams/state/stateRenderer.js
View File

@ -75,8 +75,13 @@ export const draw = function(text, id) {
const width = bounds.width + padding * 2;
const height = bounds.height + padding * 2;
if (conf.useMaxWidth) {
diagram.attr('width', '100%');
diagram.attr('style', `max-width: ${width * 1.75}px;`);
} else {
// Zoom in a bit
diagram.attr('width', width * 1.75);
}
// diagram.attr('height', bounds.height * 3 + conf.padding * 2);
diagram.attr(
'viewBox',

2
src/logger.js
View File

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

16
src/utils.js
View File

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