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

Merge branch 'release/8.4.3'

This commit is contained in:
Knut Sveidqvist 2019-12-01 07:52:44 +01:00
parent cb07a729e5 bea2e73b82
commit eec45dfff9
22 changed files with 1223 additions and 923 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
.github/workflows/build.yml vendored Normal file
View File

@ -0,0 +1,58 @@
name: Build
on: [push, pull_request]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [10.x, 12.x]
steps:
- uses: actions/checkout@v1
- name: Setup Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: Install Yarn
run: npm i yarn --global
- name: Cache Node Modules
uses: actions/cache@v1
with:
path: .cache
key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
- name: Install Packages
run: |
yarn config set cache-folder $GITHUB_WORKSPACE/.cache/yarn
yarn install --frozen-lockfile
env:
CYPRESS_CACHE_FOLDER: ../../.cache/Cypress
- name: Run Build
run: yarn build
- name: Run Unit Tests
run: |
yarn test --coverage
- name: Upload Test Results
uses: coverallsapp/github-action@v1.0.1
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
parallel: true
- name: Run E2E Tests
run: yarn e2e
env:
PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
CYPRESS_CACHE_FOLDER: .cache/Cypress
- name: Post Upload Test Results
uses: coverallsapp/github-action@master
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
parallel-finished: true

6
cypress/helpers/util.js
View File

@ -26,3 +26,9 @@ export const imgSnapshotTest = (graphStr, options, api) => {
cy.get('svg');
cy.percySnapshot();
};
export const renderGraph = (graphStr, options, api) => {
const url = mermaidUrl(graphStr, options, api);
cy.visit(url);
};

100
cypress/integration/other/configuration.spec.js Normal file
View File

@ -0,0 +1,100 @@
import { renderGraph } from '../../helpers/util';
/* eslint-env jest */
describe('Configuration', () => {
describe('arrowMarkerAbsolute', () => {
it('should handle default value false of arrowMarkerAbsolute', () => {
renderGraph(
`graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{ }
);
// Check the marker-end property to make sure it is properly set to
// start with #
cy.get('.edgePath path').first().should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(#');
});
it('should handle default value false of arrowMarkerAbsolute', () => {
renderGraph(
`graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{ }
);
// Check the marker-end property to make sure it is properly set to
// start with #
cy.get('.edgePath path').first().should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(#');
});
it('should handle arrowMarkerAbsolute excplicitly set to false', () => {
renderGraph(
`graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{
arrowMarkerAbsolute: false
}
);
// Check the marker-end property to make sure it is properly set to
// start with #
cy.get('.edgePath path').first().should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(#');
});
it('should handle arrowMarkerAbsolute excplicitly set to "false" as false', () => {
renderGraph(
`graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{
arrowMarkerAbsolute: "false"
}
);
// Check the marker-end property to make sure it is properly set to
// start with #
cy.get('.edgePath path').first().should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(#');
});
it('should handle arrowMarkerAbsolute set to true', () => {
renderGraph(
`graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{
arrowMarkerAbsolute: true
}
);
cy.get('.edgePath path').first().should('have.attr', 'marker-end')
.should('exist')
.and('include', 'url(http://localhost');
});
});
});

10
cypress/integration/other/interaction.spec.js
View File

@ -16,7 +16,7 @@ describe('Interaction', () => {
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('g#mermaid-dom-id-1Function')
.find('g[id="1Function"]')
.click();
cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
@ -38,7 +38,7 @@ describe('Interaction', () => {
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('g#mermaid-dom-id-2URL')
.find('g[id="2URL"]')
.click();
cy.location().should(location => {
@ -108,7 +108,7 @@ describe('Interaction', () => {
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('g#mermaid-dom-id-1Function')
.find('g[id="1Function"]')
.click();
cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
@ -130,7 +130,7 @@ describe('Interaction', () => {
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('g#mermaid-dom-id-2URL')
.find('g[id="2URL"]')
.click();
cy.location().should(location => {
@ -200,7 +200,7 @@ describe('Interaction', () => {
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('g#mermaid-dom-id-1Function')
.find('g[id="1Function"]')
.click();
cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');

74
cypress/integration/rendering/classDiagram.spec.js
View File

@ -19,6 +19,9 @@ describe('Class diagram', () => {
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class01 : -int privateChimp
Class01 : +int publicGorilla
Class01 : #int protectedMarmoset
Class08 <--> C2: Cool label
class Class10 {
&lt;&lt;service&gt;&gt;
@ -58,4 +61,75 @@ describe('Class diagram', () => {
);
cy.get('svg');
});
it('should render a simple class diagram with different visibilities', () => {
imgSnapshotTest(
`
classDiagram
Class01 <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class01 : -int privateMethod()
Class01 : +int publicMethod()
Class01 : #int protectedMethod()
Class01 : -int privateChimp
Class01 : +int publicGorilla
Class01 : #int protectedMarmoset
`,
{}
);
cy.get('svg');
});
it('should render multiple class diagrams', () => {
imgSnapshotTest(
[
`
classDiagram
Class01 "1" <|--|> "*" AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class03 "1" *-- "*" Class04
Class05 "1" o-- "many" Class06
Class07 "1" .. "*" Class08
Class09 "1" --> "*" C2 : Where am i?
Class09 "*" --* "*" C3
Class09 "1" --|> "1" Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 "1" <--> "*" C2: Cool label
class Class10 {
&lt;&lt;service&gt;&gt;
int id
test()
}
`,
`
classDiagram
Class01 "1" <|--|> "*" AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class03 "1" *-- "*" Class04
Class05 "1" o-- "many" Class06
Class07 "1" .. "*" Class08
Class09 "1" --> "*" C2 : Where am i?
Class09 "*" --* "*" C3
Class09 "1" --|> "1" Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 "1" <--> "*" C2: Cool label
class Class10 {
&lt;&lt;service&gt;&gt;
int id
test()
}
`,
],
{}
);
cy.get('svg');
});
});

5
cypress/platform/e2e.html
View File

@ -4,9 +4,8 @@
<link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" />
<style>
body {
/* font-family: 'Mansalva', cursive;
font-family: 'Mansalva', cursive; */
font-family: 'times';
/* font-family: 'Mansalva', cursive;*/
font-family: 'Mansalva', cursive;
}
/* .mermaid-main-font {
font-family: "trebuchet ms", verdana, arial;

80
cypress/platform/viewer.js
View File

@ -14,11 +14,22 @@ const contentLoaded = function() {
const graphObj = JSON.parse(Base64.decode(graphBase64));
// const graph = 'hello'
console.log(graphObj);
const div = document.createElement('div');
div.id = 'block';
div.className = 'mermaid';
div.innerHTML = graphObj.code;
document.getElementsByTagName('body')[0].appendChild(div);
if (Array.isArray(graphObj.code)) {
const numCodes = graphObj.code.length;
for (let i = 0; i < numCodes; i++) {
const div = document.createElement('div');
div.id = 'block' + i;
div.className = 'mermaid';
div.innerHTML = graphObj.code[i];
document.getElementsByTagName('body')[0].appendChild(div);
}
} else {
const div = document.createElement('div');
div.id = 'block';
div.className = 'mermaid';
div.innerHTML = graphObj.code;
document.getElementsByTagName('body')[0].appendChild(div);
}
global.mermaid.initialize(graphObj.mermaid);
// console.log('graphObj.mermaid', graphObj.mermaid)
global.mermaid.init();
@ -31,23 +42,52 @@ const contentLoadedApi = function() {
const graphBase64 = document.location.href.substr(pos);
const graphObj = JSON.parse(Base64.decode(graphBase64));
// const graph = 'hello'
const div = document.createElement('div');
div.id = 'block';
div.className = 'mermaid';
// div.innerHTML = graphObj.code
document.getElementsByTagName('body')[0].appendChild(div);
global.mermaid.initialize(graphObj.mermaid);
if (Array.isArray(graphObj.code)) {
const numCodes = graphObj.code.length;
const divs = [];
let div;
for (let i = 0; i < numCodes; i++) {
div = document.createElement('div');
div.id = 'block' + i;
div.className = 'mermaid';
// div.innerHTML = graphObj.code
document.getElementsByTagName('body')[0].appendChild(div);
divs[i] = div;
}
mermaid2.render(
'newid',
graphObj.code,
(svgCode, bindFunctions) => {
div.innerHTML = svgCode;
global.mermaid.initialize(graphObj.mermaid);
bindFunctions(div);
},
div
);
for (let i = 0; i < numCodes; i++) {
mermaid2.render(
'newid' + i,
graphObj.code[i],
(svgCode, bindFunctions) => {
div.innerHTML = svgCode;
bindFunctions(div);
},
divs[i]
);
}
} else {
const div = document.createElement('div');
div.id = 'block';
div.className = 'mermaid';
// div.innerHTML = graphObj.code
document.getElementsByTagName('body')[0].appendChild(div);
global.mermaid.initialize(graphObj.mermaid);
mermaid2.render(
'newid',
graphObj.code,
(svgCode, bindFunctions) => {
div.innerHTML = svgCode;
if (bindFunctions) bindFunctions(div);
},
div
);
}
}
};

6
dist/index.html vendored
View File

@ -408,9 +408,9 @@ Class09 "0" --* "1..n" C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class01 : #size()
Class01 : -int chimp
Class01 : +int gorilla
Class08 <--> C2: Cool label
class Class10 {
&lt;&lt;service&gt;&gt;

22
docs/flowchart.md
View File

@ -123,6 +123,28 @@ graph LR
id1{{This is the text in the box}}
```
### Parallelogram
```
graph TD
id1[/This is the text in the box/]
```
```mermaid
graph TD
id1[/This is the text in the box/]
```
### Parallelogram alt
```
graph TD
id1[\This is the text in the box\]
```
```mermaid
graph TD
id1[\This is the text in the box\]
```
### Trapezoid
```

13
package.json
View File

@ -1,6 +1,6 @@
{
"name": "mermaid",
"version": "8.4.2",
"version": "8.4.3",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"main": "dist/mermaid.core.js",
"keywords": [
@ -24,7 +24,7 @@
"e2e": "start-server-and-test dev http://localhost:9000/ cypress",
"e2e-upd": "yarn lint && jest e2e -u --config e2e/jest.config.js",
"dev": "webpack-dev-server --config webpack.config.e2e.js",
"test": "yarn lint && jest src",
"test": "yarn lint && jest src/.*",
"test:watch": "jest --watch src",
"prepublishOnly": "yarn build && yarn release && yarn test && yarn e2e",
"prepush": "yarn test"
@ -49,18 +49,18 @@
"@braintree/sanitize-url": "^3.1.0",
"crypto-random-string": "^3.0.1",
"d3": "^5.7.0",
"dagre-d3": "dagrejs/dagre-d3",
"dagre-d3-unofficial": "0.6.4",
"dagre": "^0.8.4",
"graphlib": "^2.1.7",
"he": "^1.2.0",
"lodash": "^4.17.11",
"minify": "^4.1.1",
"moment-mini": "^2.22.1",
"prettier": "^1.18.2",
"scope-css": "^1.2.1"
},
"devDependencies": {
"documentation": "^12.0.1",
"prettier": "^1.18.2",
"eslint": "^6.3.0",
"eslint-config-prettier": "^6.3.0",
"eslint-plugin-prettier": "^3.1.0",
@ -77,10 +77,7 @@
"cypress": "3.4.0",
"husky": "^1.2.1",
"identity-obj-proxy": "^3.0.0",
"jest": "^23.6.0",
"jest-environment-puppeteer": "^4.2.0",
"jest-image-snapshot": "^2.8.2",
"jest-puppeteer": "^4.2.0",
"jest": "^24.9.0",
"jison": "^0.4.18",
"moment": "^2.23.0",
"node-sass": "^4.12.0",

15
src/diagrams/class/classDiagram.spec.js
View File

@ -40,6 +40,21 @@ describe('class diagram, ', function() {
parser.parse(str);
});
it('should handle visibility for methods and members', function() {
const str =
'classDiagram\n' +
'class TestClass\n' +
'TestClass : -int privateMember\n' +
'TestClass : +int publicMember\n' +
'TestClass : #int protectedMember\n' +
'TestClass : -privateMethod()\n' +
'TestClass : +publicMethod()\n' +
'TestClass : #protectedMethod()\n';
parser.parse(str);
});
it('should handle class definitions', function() {
const str =
'classDiagram\n' +

7
src/diagrams/class/classRenderer.js
View File

@ -8,7 +8,7 @@ import { parser } from './parser/classDiagram';
parser.yy = classDb;
const idCache = {};
let idCache = {};
let classCnt = 0;
const conf = {
@ -136,7 +136,6 @@ const insertMarkers = function(elem) {
};
let edgeCount = 0;
let total = 0;
const drawEdge = function(elem, path, relation) {
const getRelationType = function(type) {
switch (type) {
@ -291,7 +290,7 @@ const drawClass = function(elem, classDef) {
}
};
const id = 'classId' + (classCnt % total);
const id = 'classId' + classCnt;
const classInfo = {
id: id,
label: classDef.id,
@ -411,6 +410,7 @@ export const setConf = function(cnf) {
* @param id
*/
export const draw = function(text, id) {
idCache = {};
parser.yy.clear();
parser.parse(text);
@ -437,7 +437,6 @@ export const draw = function(text, id) {
const classes = classDb.getClasses();
const keys = Object.keys(classes);
total = keys.length;
for (let i = 0; i < keys.length; i++) {
const classDef = classes[keys[i]];
const node = drawClass(diagram, classDef);

2
src/diagrams/class/parser/classDiagram.jison
View File

@ -36,7 +36,7 @@
\s*o return 'AGGREGATION';
\-\- return 'LINE';
\.\. return 'DOTTED_LINE';
":"[^#\n;]+ return 'LABEL';
":"[^\n;]+ return 'LABEL';
\- return 'MINUS';
"." return 'DOT';
\+ return 'PLUS';

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

@ -1,4 +1,4 @@
import dagreD3 from 'dagre-d3';
import dagreD3 from 'dagre-d3-unofficial';
function question(parent, bbox, node) {
const w = bbox.width;

3
src/diagrams/flowchart/flowDb.js
View File

@ -4,7 +4,8 @@ import { logger } from '../../logger';
import utils from '../../utils';
import { getConfig } from '../../config';
const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
// const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
const MERMAID_DOM_ID_PREFIX = '';
const config = getConfig();
let vertices = {};

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

@ -6,11 +6,10 @@ import flow from './parser/flow';
import { getConfig } from '../../config';
const newDagreD3 = true;
import dagreD3 from 'dagre-d3';
import dagreD3 from 'dagre-d3-unofficial';
// const newDagreD3 = false;
// import dagreD3 from '../../../../dagre-d3-renderer/dist/dagre-d3.core.js';
import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
import addHtmlLabel from 'dagre-d3-unofficial/lib/label/add-html-label.js';
import { logger } from '../../logger';
import { interpolateToCurve } from '../../utils';
import flowChartShapes from './flowChartShapes';
@ -460,8 +459,8 @@ export const draw = function(text, id) {
subG = subGraphs[i];
if (subG.title !== 'undefined') {
const clusterRects = document.querySelectorAll('#' + id + ' #' + subG.id + ' rect');
const clusterEl = document.querySelectorAll('#' + id + ' #' + subG.id);
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;
@ -475,7 +474,7 @@ export const draw = function(text, id) {
// Add label rects for non html labels
if (!conf.htmlLabels) {
const labels = document.querySelectorAll('#' + id + ' .edgeLabel .label');
const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
for (let k = 0; k < labels.length; k++) {
const label = labels[k];

6
src/diagrams/flowchart/parser/flow-singlenode.spec.js
View File

@ -168,7 +168,7 @@ describe('[Singlenodes] when parsing', () => {
const edges = flow.parser.yy.getEdges();
expect(edges.length).toBe(0);
expect(vert['mermaid-dom-id-1'].text).toBe('1');
expect(vert['1'].text).toBe('1');
});
it('should handle a single node with a single digit in a subgraph', function() {
@ -180,7 +180,7 @@ describe('[Singlenodes] when parsing', () => {
const edges = flow.parser.yy.getEdges();
expect(edges.length).toBe(0);
expect(vert['mermaid-dom-id-1'].text).toBe('1');
expect(vert['1'].text).toBe('1');
});
it('should handle a single node with alphanumerics starting on a num', function() {
@ -191,7 +191,7 @@ describe('[Singlenodes] when parsing', () => {
const edges = flow.parser.yy.getEdges();
expect(edges.length).toBe(0);
expect(vert['mermaid-dom-id-1id'].styles.length).toBe(0);
expect(vert['1id'].styles.length).toBe(0);
});
it('should handle a single node with alphanumerics containing a minus sign', function() {

2
src/diagrams/flowchart/parser/subgraph.spec.js
View File

@ -83,7 +83,7 @@ describe('when parsing subgraphs', function() {
const subgraph = subgraphs[0];
expect(subgraph.nodes.length).toBe(1);
expect(subgraph.nodes[0]).toBe('A');
expect(subgraph.id).toBe('mermaid-dom-id-1test');
expect(subgraph.id).toBe('1test');
});
it('should handle subgraphs1', function() {

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

@ -92,8 +92,6 @@ export const draw = function(text, id) {
const padding = conf.padding;
const bounds = diagram.node().getBBox();
console.warn(bounds);
const width = bounds.width + padding * 2;
const height = bounds.height + padding * 2;

30
src/mermaidAPI.js
View File

@ -585,23 +585,23 @@ const render = function(id, txt, cb, container) {
.selectAll('foreignobject > *')
.attr('xmlns', 'http://www.w3.org/1999/xhtml');
let url = '';
if (config.arrowMarkerAbsolute) {
url =
window.location.protocol +
'//' +
window.location.host +
window.location.pathname +
window.location.search;
url = url.replace(/\(/g, '\\(');
url = url.replace(/\)/g, '\\)');
}
// if (config.arrowMarkerAbsolute) {
// url =
// window.location.protocol +
// '//' +
// window.location.host +
// window.location.pathname +
// window.location.search;
// url = url.replace(/\(/g, '\\(');
// url = url.replace(/\)/g, '\\)');
// }
// Fix for when the base tag is used
let svgCode = d3
.select('#d' + id)
.node()
.innerHTML.replace(/url\(#arrowhead/g, 'url(' + url + '#arrowhead', 'g');
let svgCode = d3.select('#d' + id).node().innerHTML;
if (!config.arrowMarkerAbsolute || config.arrowMarkerAbsolute === 'false') {
svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g');
}
svgCode = decodeEntities(svgCode);

28
webpack.config.base.js
View File

@ -1,10 +1,10 @@
import path from 'path'
import path from 'path';
const amdRule = {
parser: {
amd: false // https://github.com/lodash/lodash/issues/3052
}
}
};
const jisonRule = {
test: /\.jison$/,
@ -14,7 +14,7 @@ const jisonRule = {
'token-stack': true
}
}
}
};
const jsRule = {
test: /\.js$/,
include: [
@ -24,16 +24,13 @@ const jsRule = {
use: {
loader: 'babel-loader'
}
}
};
const scssRule = { // load scss to string
const scssRule = {
// load scss to string
test: /\.scss$/,
use: [
{ loader: 'css-to-string-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' }
]
}
use: [{ loader: 'css-to-string-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }]
};
export const jsConfig = () => {
return {
@ -43,7 +40,10 @@ export const jsConfig = () => {
mermaid: './src/mermaid.js'
},
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.json', '.jison']
extensions: ['.wasm', '.mjs', '.js', '.json', '.jison'],
alias: {
'dagre-d3': 'dagre-d3-unofficial'
}
},
node: {
fs: 'empty' // jison generated code requires 'fs'
@ -59,5 +59,5 @@ export const jsConfig = () => {
rules: [amdRule, jsRule, scssRule, jisonRule]
},
devtool: 'source-map'
}
}
};
};

1664
yarn.lock
View File

File diff suppressed because it is too large Load Diff