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

Merge branch 'master' of github.com:mermaid-js/mermaid

This commit is contained in:
Knut Sveidqvist 2021-09-23 18:52:57 +02:00
parent a251848ba1 48b6a32fe1
commit b2fb9f421a
63 changed files with 64603 additions and 3580 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.json
View File

@ -4,7 +4,7 @@
"es6": true,
"node": true
},
"parser": "babel-eslint",
"parser": "@babel/eslint-parser",
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,

5
.github/dependabot.yml vendored
View File

@ -1,13 +1,12 @@
version: 2
updates:
- package-ecosystem: npm
directory: /
target-branch: develop
schedule:
interval: daily
interval: weekly
- package-ecosystem: github-actions
directory: /
target-branch: develop
schedule:
interval: daily
interval: weekly

16
.github/workflows/build.yml vendored
View File

@ -9,25 +9,19 @@ jobs:
matrix:
node-version: [16.x]
steps:
- uses: actions/checkout@v2.3.4
- uses: actions/checkout@v2
- name: Setup Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2.2.0
uses: actions/setup-node@v2
with:
cache: yarn
node-version: ${{ matrix.node-version }}
- name: Install Yarn
run: npm i yarn --global
- name: Cache Node Modules
uses: actions/cache@v2.1.5
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
@ -36,7 +30,7 @@ jobs:
run: yarn build
- name: Upload Build as Artifact
uses: actions/upload-artifact@v2.2.3
uses: actions/upload-artifact@v2
with:
name: dist
path: dist
@ -61,4 +55,4 @@ jobs:
# uses: coverallsapp/github-action@master
# with:
# github-token: ${{ secrets.GITHUB_TOKEN }}
# parallel-finished: true
# parallel-finished: true

12
.github/workflows/e2e.yml vendored
View File

@ -12,22 +12,16 @@ jobs:
- uses: actions/checkout@v2.3.4
- name: Setup Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2.2.0
uses: actions/setup-node@v2
with:
cache: yarn
node-version: ${{ matrix.node-version }}
- name: Install Yarn
run: npm i yarn --global
- name: Cache Node Modules
uses: actions/cache@v2.1.5
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
@ -55,4 +49,4 @@ jobs:
# uses: coverallsapp/github-action@master
# with:
# github-token: ${{ secrets.GITHUB_TOKEN }}
# parallel-finished: true
# parallel-finished: true

2
.github/workflows/issue-triage.yml vendored
View File

@ -8,7 +8,7 @@ jobs:
triage:
runs-on: ubuntu-latest
steps:
- uses: andymckay/labeler@1.0.2
- uses: andymckay/labeler@1.0.3
with:
repo-token: "${{ secrets.GITHUB_TOKEN }}"
labels: "Status: Triage"

2
.github/workflows/release-draft.yml vendored
View File

@ -10,6 +10,6 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Draft Release
uses: toolmantim/release-drafter@v5.2.0
uses: toolmantim/release-drafter@v5
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

4
.github/workflows/release-preview-publish.yml vendored
View File

@ -9,9 +9,9 @@ jobs:
publish:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2.3.4
- uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2.2.0
uses: actions/setup-node@v2
with:
node-version: 16.x
- name: Install Yarn

2
.github/workflows/release-publish.yml vendored
View File

@ -12,7 +12,7 @@ jobs:
- uses: fregante/setup-git-user@v1
- name: Setup Node.js
uses: actions/setup-node@v2.2.0
uses: actions/setup-node@v2
with:
node-version: 16.x
- name: Install Yarn

3
.prettierrc
View File

@ -1,4 +1,5 @@
{
"printWidth": 100,
"singleQuote": true
"singleQuote": true,
"endOfLine": "auto"
}

2
README.md
View File

@ -6,6 +6,8 @@
**Thanks to all involved, people committing pull requests, people answering questions! 🙏**
<a href="https://mermaid-js.github.io/mermaid/landing/" alt="Link to landing page for the book The Official Guide To mermaid.js"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-pre-release.jpg"></a>
## About
<!-- <Main description> -->

10
babel.config.js
View File

@ -3,8 +3,8 @@ module.exports = {
[
'@babel/preset-env',
{
targets: "defaults, ie >= 11, current node"
}
]
]
}
targets: 'defaults, ie >= 11, current node',
},
],
],
};

96
cypress/integration/rendering/classDiagram-v2.spec.js
View File

@ -370,4 +370,100 @@ describe('Class diagram V2', () => {
);
cy.get('svg');
});
it('16: should handle the direction statemment with TB', () => {
imgSnapshotTest(
`
classDiagram
direction TB
class Student {
-idCard : IdCard
}
class IdCard{
-id : int
-name : string
}
class Bike{
-id : int
-name : string
}
Student "1" --o "1" IdCard : carries
Student "1" --o "1" Bike : rides
`,
{logLevel : 1, flowchart: { "htmlLabels": false },}
);
cy.get('svg');
});
it('17: should handle the direction statemment with BT', () => {
imgSnapshotTest(
`
classDiagram
direction BT
class Student {
-idCard : IdCard
}
class IdCard{
-id : int
-name : string
}
class Bike{
-id : int
-name : string
}
Student "1" --o "1" IdCard : carries
Student "1" --o "1" Bike : rides
`,
{logLevel : 1, flowchart: { "htmlLabels": false },}
);
cy.get('svg');
});
it('17: should handle the direction statemment with RL', () => {
imgSnapshotTest(
`
classDiagram
direction RL
class Student {
-idCard : IdCard
}
class IdCard{
-id : int
-name : string
}
class Bike{
-id : int
-name : string
}
Student "1" --o "1" IdCard : carries
Student "1" --o "1" Bike : rides
`,
{logLevel : 1, flowchart: { "htmlLabels": false },}
);
cy.get('svg');
});
it('18: should handle the direction statemment with LR', () => {
imgSnapshotTest(
`
classDiagram
direction LR
class Student {
-idCard : IdCard
}
class IdCard{
-id : int
-name : string
}
class Bike{
-id : int
-name : string
}
Student "1" --o "1" IdCard : carries
Student "1" --o "1" Bike : rides
`,
{logLevel : 1, flowchart: { "htmlLabels": false },}
);
cy.get('svg');
});
});

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

@ -1,406 +1,411 @@
/* eslint-env jest */
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
describe('Class diagram', () => {
it('1: should render a simple class diagram', () => {
imgSnapshotTest(
`
classDiagram
Class01 <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class12 <|.. Class08
Class11 ..>Class12
Class07 : equals()
Class07 : Object[] elementData
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;
int id
test()
}
`,
{logLevel : 1}
);
cy.get('svg');
});
it('2: should render a simple class diagrams with cardinality', () => {
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()
}
`,
{}
);
cy.get('svg');
});
it('3: should render a simple class diagram with different visibilities', () => {
imgSnapshotTest(
`
classDiagram
Class01 <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class01 : -privateMethod()
Class01 : +publicMethod()
Class01 : #protectedMethod()
Class01 : -int privateChimp
Class01 : +int publicGorilla
Class01 : #int protectedMarmoset
`,
{}
);
cy.get('svg');
});
it('4: should render a simple class diagram with comments', () => {
imgSnapshotTest(
`
classDiagram
%% this is a comment
Class01 <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
class Class10 {
&lt;&lt;service&gt;&gt;
int id
test()
}
`,
{}
);
cy.get('svg');
});
it('5: should render a simple class diagram with abstract method', () => {
imgSnapshotTest(
`
classDiagram
Class01 <|-- AveryLongClass : Cool
Class01 : someMethod()*
`,
{}
);
cy.get('svg');
});
it('6: should render a simple class diagram with static method', () => {
imgSnapshotTest(
`
classDiagram
Class01 <|-- AveryLongClass : Cool
Class01 : someMethod()$
`,
{}
);
cy.get('svg');
});
it('7: should render a simple class diagram with Generic class', () => {
imgSnapshotTest(
`
classDiagram
class Class01~T~
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
class Class10~T~ {
&lt;&lt;service&gt;&gt;
int id
test()
}
`,
{}
);
cy.get('svg');
});
it('8: should render a simple class diagram with Generic class and relations', () => {
imgSnapshotTest(
`
classDiagram
Class01~T~ <|-- AveryLongClass : Cool
Class03~T~ *-- Class04~T~
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
class Class10~T~ {
&lt;&lt;service&gt;&gt;
int id
test()
}
`,
{}
);
cy.get('svg');
});
it('9: should render a simple class diagram with clickable link', () => {
imgSnapshotTest(
`
classDiagram
Class01~T~ <|-- AveryLongClass : Cool
Class03~T~ *-- Class04~T~
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
class Class10~T~ {
&lt;&lt;service&gt;&gt;
int id
test()
}
link Class01 "google.com" "A Tooltip"
`,
{}
);
cy.get('svg');
});
it('10: should render a simple class diagram with clickable callback', () => {
imgSnapshotTest(
`
classDiagram
Class01~T~ <|-- AveryLongClass : Cool
Class03~T~ *-- Class04~T~
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
class Class10~T~ {
&lt;&lt;service&gt;&gt;
int id
test()
}
callback Class01 "functionCall" "A Tooltip"
`,
{}
);
cy.get('svg');
});
it('11: should render a simple class diagram with return type on method', () => {
imgSnapshotTest(
`
classDiagram
class Class10~T~ {
int[] id
test(int[] ids) bool
testArray() bool[]
}
`,
{}
);
cy.get('svg');
});
it('12: should render a simple class diagram with generic types', () => {
imgSnapshotTest(
`
classDiagram
class Class10~T~ {
int[] id
List~int~ ids
test(List~int~ ids) List~bool~
testArray() bool[]
}
`,
{}
);
cy.get('svg');
});
it('13: should render a simple class diagram with css classes applied', () => {
imgSnapshotTest(
`
classDiagram
class Class10 {
int[] id
List~int~ ids
test(List~int~ ids) List~bool~
testArray() bool[]
}
cssClass "Class10" exClass
`,
{}
);
cy.get('svg');
});
it('14: should render a simple class diagram with css classes applied directly', () => {
imgSnapshotTest(
`
classDiagram
class Class10:::exClass {
int[] id
List~int~ ids
test(List~int~ ids) List~bool~
testArray() bool[]
}
`,
{}
);
cy.get('svg');
});
it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
imgSnapshotTest(
`
classDiagram
class Class10
class Class20
cssClass "Class10, class20" exClass
`,
{}
);
cy.get('svg');
});
it('16: 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');
});
it('17: should render a class diagram when useMaxWidth is true (default)', () => {
renderGraph(
`
classDiagram
Class01 <|-- AveryLongClass : Cool
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class01 : -int privateChimp
Class01 : +int publicGorilla
Class01 : #int protectedMarmoset
`,
{ class: { useMaxWidth: true } }
);
cy.get('svg')
.should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height', '218');
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseInt(style.match(/[\d.]+/g).join(''));
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(maxWidthValue).to.be.within(160 * .95, 160 * 1.05);
});
});
it('18: should render a class diagram when useMaxWidth is false', () => {
renderGraph(
`
classDiagram
Class01 <|-- AveryLongClass : Cool
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class01 : -int privateChimp
Class01 : +int publicGorilla
Class01 : #int protectedMarmoset
`,
{ class: { useMaxWidth: false } }
);
cy.get('svg')
.should((svg) => {
const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(width).to.be.within(160 * .95, 160 * 1.05);
expect(svg).to.have.attr('height', '218');
expect(svg).to.not.have.attr('style');
});
});
});
/* eslint-env jest */
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
describe('Class diagram', () => {
it('1: should render a simple class diagram', () => {
imgSnapshotTest(
`
classDiagram
Class01 <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class12 <|.. Class08
Class11 ..>Class12
Class07 : equals()
Class07 : Object[] elementData
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;
int id
test()
}
`,
{logLevel : 1}
);
cy.get('svg');
});
it('2: should render a simple class diagrams with cardinality', () => {
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()
}
`,
{}
);
cy.get('svg');
});
it('3: should render a simple class diagram with different visibilities', () => {
imgSnapshotTest(
`
classDiagram
Class01 <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class01 : -privateMethod()
Class01 : +publicMethod()
Class01 : #protectedMethod()
Class01 : -int privateChimp
Class01 : +int publicGorilla
Class01 : #int protectedMarmoset
`,
{}
);
cy.get('svg');
});
it('4: should render a simple class diagram with comments', () => {
imgSnapshotTest(
`
classDiagram
%% this is a comment
Class01 <|-- AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
class Class10 {
&lt;&lt;service&gt;&gt;
int id
test()
}
`,
{}
);
cy.get('svg');
});
it('5: should render a simple class diagram with abstract method', () => {
imgSnapshotTest(
`
classDiagram
Class01 <|-- AveryLongClass : Cool
Class01 : someMethod()*
`,
{}
);
cy.get('svg');
});
it('6: should render a simple class diagram with static method', () => {
imgSnapshotTest(
`
classDiagram
Class01 <|-- AveryLongClass : Cool
Class01 : someMethod()$
`,
{}
);
cy.get('svg');
});
it('7: should render a simple class diagram with Generic class', () => {
imgSnapshotTest(
`
classDiagram
class Class01~T~
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
class Class10~T~ {
&lt;&lt;service&gt;&gt;
int id
test()
}
`,
{}
);
cy.get('svg');
});
it('8: should render a simple class diagram with Generic class and relations', () => {
imgSnapshotTest(
`
classDiagram
Class01~T~ <|-- AveryLongClass : Cool
Class03~T~ *-- Class04~T~
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
class Class10~T~ {
&lt;&lt;service&gt;&gt;
int id
test()
}
`,
{}
);
cy.get('svg');
});
it('9: should render a simple class diagram with clickable link', () => {
imgSnapshotTest(
`
classDiagram
Class01~T~ <|-- AveryLongClass : Cool
Class03~T~ *-- Class04~T~
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
class Class10~T~ {
&lt;&lt;service&gt;&gt;
int id
test()
}
link Class01 "google.com" "A Tooltip"
`,
{}
);
cy.get('svg');
});
it('10: should render a simple class diagram with clickable callback', () => {
imgSnapshotTest(
`
classDiagram
Class01~T~ <|-- AveryLongClass : Cool
Class03~T~ *-- Class04~T~
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
class Class10~T~ {
&lt;&lt;service&gt;&gt;
int id
test()
}
callback Class01 "functionCall" "A Tooltip"
`,
{}
);
cy.get('svg');
});
it('11: should render a simple class diagram with return type on method', () => {
imgSnapshotTest(
`
classDiagram
class Class10~T~ {
int[] id
test(int[] ids) bool
testArray() bool[]
}
`,
{}
);
cy.get('svg');
});
it('12: should render a simple class diagram with generic types', () => {
imgSnapshotTest(
`
classDiagram
class Class10~T~ {
int[] id
List~int~ ids
test(List~int~ ids) List~bool~
testArray() bool[]
}
`,
{}
);
cy.get('svg');
});
it('13: should render a simple class diagram with css classes applied', () => {
imgSnapshotTest(
`
classDiagram
class Class10 {
int[] id
List~int~ ids
test(List~int~ ids) List~bool~
testArray() bool[]
}
class Class10:::exClass2
`,
{}
);
cy.get('svg');
});
it('14: should render a simple class diagram with css classes applied directly', () => {
imgSnapshotTest(
`
classDiagram
class Class10:::exClass2 {
int[] id
List~int~ ids
test(List~int~ ids) List~bool~
testArray() bool[]
}
`,
{}
);
cy.get('svg');
});
it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
imgSnapshotTest(
`
classDiagram
class Class10
class Class20
cssClass "Class10, Class20" exClass2
class Class20:::exClass2
`,
{}
);
cy.get('svg');
});
it('16: 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');
});
// it('17: should render a class diagram when useMaxWidth is true (default)', () => {
// renderGraph(
// `
// classDiagram
// Class01 <|-- AveryLongClass : Cool
// Class01 : size()
// Class01 : int chimp
// Class01 : int gorilla
// Class01 : -int privateChimp
// Class01 : +int publicGorilla
// Class01 : #int protectedMarmoset
// `,
// { class: { useMaxWidth: true } }
// );
// cy.get('svg')
// .should((svg) => {
// expect(svg).to.have.attr('width', '100%');
// const height = parseFloat(svg.attr('height'));
// expect(height).to.be.within(332, 333);
// // expect(svg).to.have.attr('height', '218');
// const style = svg.attr('style');
// expect(style).to.match(/^max-width: [\d.]+px;$/);
// const maxWidthValue = parseInt(style.match(/[\d.]+/g).join(''));
// // use within because the absolute value can be slightly different depending on the environment ±5%
// expect(maxWidthValue).to.be.within(203, 204);
// });
// });
// it('18: should render a class diagram when useMaxWidth is false', () => {
// renderGraph(
// `
// classDiagram
// Class01 <|-- AveryLongClass : Cool
// Class01 : size()
// Class01 : int chimp
// Class01 : int gorilla
// Class01 : -int privateChimp
// Class01 : +int publicGorilla
// Class01 : #int protectedMarmoset
// `,
// { class: { useMaxWidth: false } }
// );
// cy.get('svg')
// .should((svg) => {
// const width = parseFloat(svg.attr('width'));
// // use within because the absolute value can be slightly different depending on the environment ±5%
// expect(width).to.be.within(100, 101);
// const height = parseFloat(svg.attr('height'));
// expect(height).to.be.within(332, 333);
// // expect(svg).to.have.attr('height', '332');
// // expect(svg).to.not.have.attr('style');
// });
// });
});

4
cypress/integration/rendering/flowchart-v2.spec.js
View File

@ -101,7 +101,7 @@ describe('Flowchart v2', () => {
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
expect(maxWidthValue).to.be.within(300 * .95-1, 300 * 1.05);
expect(maxWidthValue).to.be.within(290 * .95-1, 290 * 1.05);
});
});
it('8: should render a flowchart when useMaxWidth is false', () => {
@ -121,7 +121,7 @@ describe('Flowchart v2', () => {
const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(height).to.be.within(446 * .95, 446 * 1.05);
expect(width).to.be.within(300 * .95-1, 300 * 1.05);
expect(width).to.be.within(290 * .95-1, 290 * 1.05);
expect(svg).to.not.have.attr('style');
});
});

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

@ -584,7 +584,7 @@ context('Sequence diagram', () => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height'));
expect(height).to.eq(920);
expect(height).to.be.within(920, 960);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@ -624,7 +624,7 @@ context('Sequence diagram', () => {
.should((svg) => {
const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
expect(height).to.eq(920);
expect(height).to.be.within(920, 960);
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(width).to.be.within(820 * .95, 820 * 1.05);
expect(svg).to.not.have.attr('style');

4
cypress/integration/rendering/stateDiagram-v2.spec.js
View File

@ -452,7 +452,7 @@ stateDiagram-v2
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height'));
expect(height).to.eq(177);
expect(height).to.be.within(177, 178);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@ -474,7 +474,7 @@ stateDiagram-v2
.should((svg) => {
const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
expect(height).to.eq(177);
expect(height).to.be.within(177, 178);
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(width).to.be.within(135 * .95, 135 * 1.05);
expect(svg).to.not.have.attr('style');

46
cypress/platform/knsv.html
View File

@ -10,7 +10,7 @@
<style>
body {
/* background: rgb(221, 208, 208); */
/* background:#333; */
background:#333;
font-family: 'Arial';
/* font-size: 18px !important; */
}
@ -27,17 +27,22 @@
<div>info below</div>
<div class="flex">
<div class="mermaid3" style="width: 100%; height: 20%;">
stateDiagram-v2
state S1 {
sub1 -->sub2
<div class="mermaid2" style="width: 100%; height: 20%;">
classDiagram
direction TB
class Student {
-idCard : IdCard
}
state S2 {
sub4
class IdCard{
-id : int
-name : string
}
S1 --> S2
sub1 --> sub4
class Bike{
-id : int
-name : string
}
Student "1" --o "1" IdCard : carries
Student "1" --o "1" Bike : rides
</div>
<div class="mermaid3" style="width: 100%; height: 20%;">
@ -46,17 +51,14 @@ stateDiagram
YourState123456789012345123456789123456789012345123456789123456789012345123456789123456789012345123456789 --> MyState:a label
}
</div>
<div class="mermaid3" style="width: 100%; height: 20%;">
flowchart
subgraph CompositeState
subgraph AnotherCompositeStateCompositeStateCompositeStateCompositeState
YourState --a label--> MyState
end
end
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
flowchart LR
one --> two
three -.-> four[whoa, big arrowhead nine o'clock]
</div>
<div class="mermaid2" style="width: 100%; height: 20%;">
%%{init: { "apa":"b", "theme":"forest"}}%%
sequenceDiagram
Alice->>Bob: Hi Bob
@ -110,12 +112,12 @@ YourState
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
theme: 'base',
theme: 'dark',
// theme: 'forest',
arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 2,
flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
htmlLabels: true,
flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated

BIN
cypress/screenshots/other/interaction.spec.js/Interaction -- Interaction - security level other, missspelling -- should handle a click on a node with a bound function (failed).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 235 KiB

BIN
cypress/screenshots/other/interaction.spec.js/Interaction -- Interaction - security level other, missspelling -- should handle a click on a node with a bound function where the node starts with a number (failed).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 234 KiB

BIN
cypress/screenshots/other/interaction.spec.js/Interaction -- Interaction - security level other, missspelling -- should handle a click on a task with a bound function (failed) (1).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 240 KiB

BIN
cypress/screenshots/other/interaction.spec.js/Interaction -- Interaction - security level other, missspelling -- should handle a click on a task with a bound function (failed).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 236 KiB

BIN
cypress/screenshots/other/interaction.spec.js/Interaction -- Interaction - security level tight -- should handle a click on a node with a bound function where the node starts with a number (failed).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 247 KiB

BIN
cypress/screenshots/other/interaction.spec.js/Interaction -- Interaction - security level tight -- should handle a click on a node without a bound function (failed).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 256 KiB

BIN
cypress/screenshots/other/interaction.spec.js/Interaction -- Interaction - security level tight -- should handle a click on a task with a bound function (failed) (1).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 255 KiB

BIN
cypress/screenshots/other/interaction.spec.js/Interaction -- Interaction - security level tight -- should handle a click on a task with a bound function (failed).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 255 KiB

BIN
cypress/screenshots/other/webpackUsage.spec.js/Sequencediagram -- should handle html escapings properly (failed).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 155 KiB

BIN
cypress/screenshots/rendering/classDiagram.spec.js/Class diagram -- 17 should render a class diagram when useMaxWidth is true (default) (failed).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 278 KiB

BIN
cypress/screenshots/rendering/classDiagram.spec.js/Class diagram -- 18 should render a class diagram when useMaxWidth is false (failed).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 325 KiB

BIN
cypress/screenshots/rendering/sequencediagram.spec.js/Sequence diagram -- svg size -- should render a sequence diagram when useMaxWidth is false (failed).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 335 KiB

BIN
cypress/screenshots/rendering/sequencediagram.spec.js/Sequence diagram -- svg size -- should render a sequence diagram when useMaxWidth is true (default) (failed).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 323 KiB

BIN
cypress/screenshots/rendering/stateDiagram-v2.spec.js/State diagram -- v2 should render a state diagram when useMaxWidth is false (failed).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 299 KiB

BIN
cypress/screenshots/rendering/stateDiagram-v2.spec.js/State diagram -- v2 should render a state diagram when useMaxWidth is true (default) (failed).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 286 KiB

562
dist/mermaid.core.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.core.js.map vendored
View File

File diff suppressed because one or more lines are too long

64641
dist/mermaid.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.js.map vendored
View File

File diff suppressed because one or more lines are too long

14
dist/mermaid.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

40
docs/classDiagram.md
View File

@ -443,6 +443,46 @@ class Shape{
```
## Setting the direction of the diagram
With class diagrams you can use the direction statement to set the direction which the diagram will render like in this example.
```
classDiagram
direction RL
class Student {
-idCard : IdCard
}
class IdCard{
-id : int
-name : string
}
class Bike{
-id : int
-name : string
}
Student "1" --o "1" IdCard : carries
Student "1" --o "1" Bike : rides
```
This is how this renders
```mermaid
classDiagram
direction RL
class Student {
-idCard : IdCard
}
class IdCard{
-id : int
-name : string
}
class Bike{
-id : int
-name : string
}
Student "1" --o "1" IdCard : carries
Student "1" --o "1" Bike : rides
```
## Interaction
It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.

190
docs/flowchart.md
View File

@ -11,12 +11,12 @@ Node
### A node (default)
```
graph LR
flowchart LR
id
```
```mermaid
graph LR
flowchart LR
id
```
@ -29,11 +29,11 @@ found for the node that will be used. Also if you define edges for the node late
one previously defined will be used when rendering the box.
```
graph LR
flowchart LR
id1[This is the text in the box]
```
```mermaid
graph LR
flowchart LR
id1[This is the text in the box]
```
@ -41,25 +41,25 @@ graph LR
This statement declares the direction of the Flowchart.
This declares the graph is oriented from top to bottom (`TD` or `TB`).
This declares the flowchart is oriented from top to bottom (`TD` or `TB`).
```
graph TD
flowchart TD
Start --> Stop
```
```mermaid
graph TD
flowchart TD
Start --> Stop
```
This declares the graph is oriented from left to right (`LR`).
This declares the flowchart is oriented from left to right (`LR`).
```
graph LR
flowchart LR
Start --> Stop
```
```mermaid
graph LR
flowchart LR
Start --> Stop
```
@ -78,66 +78,66 @@ Possible FlowChart orientations are:
### A node with round edges
```
graph LR
flowchart LR
id1(This is the text in the box)
```
```mermaid
graph LR
flowchart LR
id1(This is the text in the box)
```
### A stadium-shaped node
```
graph LR
flowchart LR
id1([This is the text in the box])
```
```mermaid
graph LR
flowchart LR
id1([This is the text in the box])
```
### A node in a subroutine shape
```
graph LR
flowchart LR
id1[[This is the text in the box]]
```
```mermaid
graph LR
flowchart LR
id1[[This is the text in the box]]
```
### A node in a cylindrical shape
```
graph LR
flowchart LR
id1[(Database)]
```
```mermaid
graph LR
flowchart LR
id1[(Database)]
```
### A node in the form of a circle
```
graph LR
flowchart LR
id1((This is the text in the circle))
```
```mermaid
graph LR
flowchart LR
id1((This is the text in the circle))
```
### A node in an asymmetric shape
```
graph LR
flowchart LR
id1>This is the text in the box]
```
```mermaid
graph LR
flowchart LR
id1>This is the text in the box]
```
Currently only the shape above is possible and not its mirror. *This might change with future releases.*
@ -145,65 +145,65 @@ Currently only the shape above is possible and not its mirror. *This might chang
### A node (rhombus)
```
graph LR
flowchart LR
id1{This is the text in the box}
```
```mermaid
graph LR
flowchart LR
id1{This is the text in the box}
```
### A hexagon node
```
graph LR
flowchart LR
id1{{This is the text in the box}}
```
```mermaid
graph LR
flowchart LR
id1{{This is the text in the box}}
```
### Parallelogram
```
graph TD
flowchart TD
id1[/This is the text in the box/]
```
```mermaid
graph TD
flowchart TD
id1[/This is the text in the box/]
```
### Parallelogram alt
```
graph TD
flowchart TD
id1[\This is the text in the box\]
```
```mermaid
graph TD
flowchart TD
id1[\This is the text in the box\]
```
### Trapezoid
```
graph TD
flowchart TD
A[/Christmas\]
```
```mermaid
graph TD
flowchart TD
A[/Christmas\]
```
### Trapezoid alt
```
graph TD
flowchart TD
B[\Go shopping/]
```
```mermaid
graph TD
flowchart TD
B[\Go shopping/]
```
@ -214,110 +214,110 @@ Nodes can be connected with links/edges. It is possible to have different types
### A link with arrow head
```
graph LR
flowchart LR
A-->B
```
```mermaid
graph LR
flowchart LR
A-->B
```
### An open link
```
graph LR
flowchart LR
A --- B
```
```mermaid
graph LR
flowchart LR
A --- B
```
### Text on links
```
graph LR
flowchart LR
A-- This is the text! ---B
```
```mermaid
graph LR
flowchart LR
A-- This is the text ---B
```
or
```
graph LR
flowchart LR
A---|This is the text|B
```
```mermaid
graph LR
flowchart LR
A---|This is the text|B
```
### A link with arrow head and text
```
graph LR
flowchart LR
A-->|text|B
```
```mermaid
graph LR
flowchart LR
A-->|text|B
```
or
```
graph LR
flowchart LR
A-- text -->B
```
```mermaid
graph LR
flowchart LR
A-- text -->B
```
### Dotted link
```
graph LR;
flowchart LR;
A-.->B;
```
```mermaid
graph LR;
flowchart LR;
A-.->B;
```
### Dotted link with text
```
graph LR
flowchart LR
A-. text .-> B
```
```mermaid
graph LR
flowchart LR
A-. text .-> B
```
### Thick link
```
graph LR
flowchart LR
A ==> B
```
```mermaid
graph LR
flowchart LR
A ==> B
```
### Thick link with text
```
graph LR
flowchart LR
A == text ==> B
```
```mermaid
graph LR
flowchart LR
A == text ==> B
```
@ -325,48 +325,48 @@ graph LR
It is possible declare many links in the same line as per below:
```
graph LR
flowchart LR
A -- text --> B -- text2 --> C
```
```mermaid
graph LR
flowchart LR
A -- text --> B -- text2 --> C
```
It is also possible to declare multiple nodes links in the same line as per below:
```
graph LR
flowchart LR
a --> b & c--> d
```
```mermaid
graph LR
flowchart LR
a --> b & c--> d
```
You can then describe dependencies in a very expressive way. Like the one-liner below:
```
graph TB
flowchart TB
A & B--> C & D
```
```mermaid
graph TB
flowchart TB
A & B--> C & D
```
If you describe the same diagram using the the basic syntax, it will take four lines. A
word of warning, one could go overboard with this making the graph harder to read in
word of warning, one could go overboard with this making the flowchart harder to read in
markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
This goes for expressive syntaxes as well.
```
graph TB
flowchart TB
A --> C
A --> D
B --> C
B --> D
```
### Beta: New arrow types
### New arrow types
When using flowchart instead of graph there are new types of arrows supported as per below:
There are new types of arrows supported as per below:
```
flowchart LR
@ -381,9 +381,9 @@ flowchart LR
```
### Beta: Multi directional arrows
### Multi directional arrows
When using flowchart instead of graph there is the possibility to use multidirectional arrows.
There is the possibility to use multidirectional arrows.
```
flowchart LR
@ -411,7 +411,7 @@ In the following example, two extra dashes are added in the link from node _B_
to node _E_, so that it spans two more ranks than regular links:
```
graph TD
flowchart TD
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
@ -420,7 +420,7 @@ graph TD
```
```mermaid
graph TD
flowchart TD
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
@ -436,7 +436,7 @@ be added on the right side of the link. The following example is equivalent to
the previous one:
```
graph TD
flowchart TD
A[Start] --> B{Is it?};
B -- Yes --> C[OK];
C --> D[Rethink];
@ -445,7 +445,7 @@ graph TD
```
```mermaid
graph TD
flowchart TD
A[Start] --> B{Is it?};
B -->|Yes| C[OK];
C --> D[Rethink];
@ -470,11 +470,11 @@ as summed up in the following table:
It is possible to put text within quotes in order to render more troublesome characters. As in the example below:
```
graph LR
flowchart LR
id1["This is the (text) in the box"]
```
```mermaid
graph LR
flowchart LR
id1["This is the (text) in the box"]
```
@ -483,11 +483,11 @@ graph LR
It is possible to escape characters using the syntax exemplified here.
```
graph LR
flowchart LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
```
```mermaid
graph LR
flowchart LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
```
@ -504,7 +504,7 @@ end
An example below:
```
graph TB
flowchart TB
c1-->a2
subgraph one
a1-->a2
@ -517,7 +517,7 @@ graph TB
end
```
```mermaid
graph TB
flowchart TB
c1-->a2
subgraph one
a1-->a2
@ -533,14 +533,14 @@ graph TB
You can also set an explicit id for the subgraph.
```
graph TB
flowchart TB
c1-->a2
subgraph ide1 [one]
a1-->a2
end
```
```mermaid
graph TB
flowchart TB
c1-->a2
subgraph id1 [one]
a1-->a2
@ -549,7 +549,7 @@ graph TB
## Beta: flowcharts
With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the graph below.
With the graphtype flowcharts it is also possible to set edges to and from subgraphs as in the flowchart below.
```
flowchart TB
@ -647,7 +647,7 @@ Examples of tooltip usage below:
```
```
graph LR;
flowchart LR;
A-->B;
B-->C;
C-->D;
@ -660,7 +660,7 @@ graph LR;
The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.
```mermaid
graph LR
flowchart LR
A-->B;
B-->C;
C-->D;
@ -675,7 +675,7 @@ graph LR
Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
```
graph LR;
flowchart LR;
A-->B;
B-->C;
C-->D;
@ -687,7 +687,7 @@ graph LR;
```
```mermaid
graph LR;
flowchart LR;
A-->B;
B-->C;
C-->D;
@ -702,7 +702,7 @@ Beginners tip, a full example using interactive links in a html context:
```html
<body>
<div class="mermaid">
graph LR;
flowchart LR;
A-->B;
B-->C;
C-->D;
@ -736,7 +736,7 @@ Beginners tip, a full example using interactive links in a html context:
Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
```
graph LR
flowchart LR
%% this is a comment A -- text --> B{node}
A -- text --> B -- text2 --> C
```
@ -760,13 +760,13 @@ linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
It is possible to apply specific styles such as a thicker border or a different background color to a node.
```
graph LR
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
```
```mermaid
graph LR
flowchart LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
@ -800,12 +800,12 @@ It is also possible to attach a class to a list of nodes in one statement:
A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
```
graph LR
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96;
```
```mermaid
graph LR
flowchart LR
A:::someclass --> B
classDef someclass fill:#f96;
```
@ -831,13 +831,13 @@ below:
**Example definition**
```
graph LR;
flowchart LR;
A-->B[AAA<span>BBB</span>];
B-->D;
class A cssClass;
```
```mermaid
graph LR;
flowchart LR;
A-->B[AAA<span>BBB</span>];
B-->D;
class A cssClass;
@ -860,14 +860,14 @@ It is possible to add icons from fontawesome.
The icons are accessed via the syntax fa:#icon class name#.
```
graph TD
flowchart TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
B-->E(A fa:fa-camera-retro perhaps?);
```
```mermaid
graph TD
flowchart TD
B["fa:fa-twitter for peace"]
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
@ -884,7 +884,7 @@ graph TD
Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.
```
graph LR
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
@ -892,7 +892,7 @@ graph LR
```
```mermaid
graph LR
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]

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"> -->
<link rel="stylesheet" href="theme.css"> <script src="//cdn.jsdelivr.net/npm/mermaid@8.10.2/dist/mermaid.min.js"></script>
<link rel="stylesheet" href="theme.css"> <script src="//cdn.jsdelivr.net/npm/mermaid@8.12.0/dist/mermaid.min.js"></script>
<!-- <script src="http://localhost:9000/mermaid.js"></script> -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

6
docs/integrations.md
View File

@ -114,6 +114,8 @@ They also serve as proof of concept, for the variety of things that can be built
- [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856)
- [Podlite](https://github.com/zag/podlite-desktop)
- [Named block =Diagram](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
- [GNU Nano](https://www.nano-editor.org/)
- [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
## Document Generation
@ -128,6 +130,8 @@ They also serve as proof of concept, for the variety of things that can be built
- [Type Doc](https://typedoc.org/)
- [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (Native support in theme)
- [Codedoc](https://codedoc.cc/)
- [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
## Browser Extensions
@ -137,7 +141,7 @@ They also serve as proof of concept, for the variety of things that can be built
| GitHub + Mermaid | [🎡🔗](https://chrome.google.com/webstore/detail/github-%20-mermaid/goiiopgdnkogdbjmncgedmgpoajilohe) | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/) | - | - | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)
| Asciidoctor Live Preview | [🎡🔗](https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | - | - | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | -|
| Diagram Tab| -| - | - | - | [🐙🔗](https://github.com/khafast/diagramtab) |
| Markdown Diagrams| - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/) | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
| Markdown Diagrams| [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/) | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
| Markdown Viewer| - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | - | - | [🐙🔗](https://github.com/simov/markdown-viewer)|
| Extensions for Mermaid| - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/)| - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) |
| Chrome Diagrammer| [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - |- | - | - |

3
docs/requirementDiagram.md
View File

@ -63,6 +63,7 @@ A requirement definition contains a requirement type, name, id, text, risk, and
Type, risk, and method are enumerations defined in SysML.
| Keyword | Options |
|---|---|
| Type | requirement, functionalRequirement, interfaceRequirement, performanceRequirement, physicalRequirement, designConstraint |
| Risk | Low, Medium, High |
| VerifcationMethod | Analysis, Inspection, Test, Demonstration |
@ -170,4 +171,4 @@ This example uses all features of the diagram.
test_req5 - refines -> test_req6
test_entity3 - verifies -> test_req5
test_req <- copies - test_entity2
```
```

31
docs/stateDiagram.md
View File

@ -354,6 +354,37 @@ stateDiagram-v2
}
```
## Setting the direction of the diagram
With state diagrams you can use the direction statement to set the direction which the diagram will render like in this example.
```
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
```
This is how this renders
```mermaid
stateDiagram
direction LR
[*] --> A
A --> B
B --> C
state B {
direction LR
a --> b
}
B --> D
```
## Comments
Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax

8
jest.config.js
View File

@ -1,14 +1,14 @@
const path = require('path');
module.exports = {
testEnvironment:"jsdom",
testEnvironment: 'jsdom',
transform: {
'^.+\\.jsx?$': './transformer.js',
'^.+\\.jison$': path.resolve(__dirname, './jisonTransformer.js')
'^.+\\.jison$': path.resolve(__dirname, './jisonTransformer.js'),
},
transformIgnorePatterns: ['/node_modules/(?!dagre-d3-renderer/lib).*\\.js'],
moduleNameMapper: {
'\\.(css|scss)$': 'identity-obj-proxy'
'\\.(css|scss)$': 'identity-obj-proxy',
},
moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'node', 'jison']
moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'node', 'jison'],
};

10
jisonLoader.js
View File

@ -1,6 +1,6 @@
const { Generator } = require('jison')
const { getOptions } = require('loader-utils')
const { Generator } = require('jison');
const { getOptions } = require('loader-utils');
module.exports = function jisonLoader (source) {
return new Generator(source, getOptions(this)).generate()
}
module.exports = function jisonLoader(source) {
return new Generator(source, getOptions(this)).generate();
};

4
jisonTransformer.js
View File

@ -3,7 +3,7 @@ const { Generator } = require('jison');
module.exports = {
process(source, filename, config, transformOptions) {
return new Generator(source, {
'token-stack': true
'token-stack': true,
}).generate();
}
},
};

31
package.json
View File

@ -1,6 +1,6 @@
{
"name": "mermaid",
"version": "8.11.4",
"version": "8.12.0",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"main": "dist/mermaid.core.js",
"keywords": [
@ -13,8 +13,8 @@
"git graph"
],
"scripts": {
"build:development": "webpack --progress --colors",
"build:production": "yarn build:development -p --config webpack.config.prod.babel.js",
"build:development": "webpack --progress --color",
"build:production": "yarn build:development --mode production --config webpack.config.prod.babel.js",
"build": "yarn build:development && yarn build:production",
"postbuild": "documentation build src/mermaidAPI.js src/config.js src/defaultConfig.js --shallow -f md --markdown-toc false > docs/Setup.md",
"build:watch": "yarn build --watch",
@ -24,7 +24,7 @@
"cypress": "percy exec -- cypress run",
"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",
"dev": "webpack serve --config webpack.config.e2e.js",
"test": "yarn lint && jest src/.*",
"test:watch": "jest --watch src",
"prepublishOnly": "yarn build && yarn test",
@ -48,11 +48,10 @@
},
"dependencies": {
"@braintree/sanitize-url": "^3.1.0",
"@percy/migrate": "^0.10.0",
"d3": "^5.7.0",
"d3": "^7.0.0",
"dagre": "^0.8.5",
"dagre-d3": "^0.6.4",
"dompurify": "2.3.0",
"dompurify": "2.3.1",
"graphlib": "^2.1.8",
"khroma": "^1.4.1",
"moment-mini": "^2.24.0",
@ -60,17 +59,17 @@
},
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/eslint-parser": "^7.14.7",
"@babel/preset-env": "^7.14.7",
"@babel/register": "^7.14.5",
"@percy/cli": "^1.0.0-beta.58",
"@percy/cypress": "^3.1.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"@percy/migrate": "^0.11.0",
"babel-jest": "^27.0.6",
"babel-loader": "^8.2.2",
"coveralls": "^3.0.2",
"css-to-string-loader": "^0.1.3",
"cypress": "7.6.0",
"cypress": "8.1.0",
"documentation": "13.2.0",
"eslint": "^7.30.0",
"eslint-config-prettier": "^8.3.0",
@ -83,21 +82,15 @@
"moment": "^2.23.0",
"prettier": "^2.3.2",
"start-server-and-test": "^1.12.6",
"terser-webpack-plugin": "^2.2.2",
"terser-webpack-plugin": "^4.2.3",
"webpack": "^4.41.2",
"webpack-bundle-analyzer": "^4.4.2",
"webpack-cli": "^3.1.2",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.4.1",
"webpack-node-externals": "^1.7.2"
"webpack-node-externals": "^3.0.0"
},
"files": [
"dist"
],
"yarn-upgrade-all": {
"ignore": [
"babel-core"
]
},
"sideEffects": [
"**/*.css",
"**/*.scss"

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

@ -43,25 +43,27 @@ export const insertEdgeLabel = (elem, edge) => {
edge.width = bbox.width;
edge.height = bbox.height;
let fo;
if (edge.startLabelLeft) {
// Create the actual text element
const startLabelElement = createLabel(edge.startLabelLeft, edge.labelStyle);
const startEdgeLabelLeft = elem.insert('g').attr('class', 'edgeTerminals');
const inner = startEdgeLabelLeft.insert('g').attr('class', 'inner');
inner.node().appendChild(startLabelElement);
fo = inner.node().appendChild(startLabelElement);
const slBox = startLabelElement.getBBox();
inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');
if (!terminalLabels[edge.id]) {
terminalLabels[edge.id] = {};
}
terminalLabels[edge.id].startLeft = startEdgeLabelLeft;
setTerminalWidth(fo, edge.startLabelLeft);
}
if (edge.startLabelRight) {
// Create the actual text element
const startLabelElement = createLabel(edge.startLabelRight, edge.labelStyle);
const startEdgeLabelRight = elem.insert('g').attr('class', 'edgeTerminals');
const inner = startEdgeLabelRight.insert('g').attr('class', 'inner');
startEdgeLabelRight.node().appendChild(startLabelElement);
fo = startEdgeLabelRight.node().appendChild(startLabelElement);
inner.node().appendChild(startLabelElement);
const slBox = startLabelElement.getBBox();
inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');
@ -70,21 +72,24 @@ export const insertEdgeLabel = (elem, edge) => {
terminalLabels[edge.id] = {};
}
terminalLabels[edge.id].startRight = startEdgeLabelRight;
setTerminalWidth(fo, edge.startLabelRight);
}
if (edge.endLabelLeft) {
// Create the actual text element
const endLabelElement = createLabel(edge.endLabelLeft, edge.labelStyle);
const endEdgeLabelLeft = elem.insert('g').attr('class', 'edgeTerminals');
const inner = endEdgeLabelLeft.insert('g').attr('class', 'inner');
inner.node().appendChild(endLabelElement);
fo = inner.node().appendChild(endLabelElement);
const slBox = endLabelElement.getBBox();
inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');
endEdgeLabelLeft.node().appendChild(endLabelElement);
if (!terminalLabels[edge.id]) {
terminalLabels[edge.id] = {};
}
terminalLabels[edge.id].endLeft = endEdgeLabelLeft;
setTerminalWidth(fo, edge.endLabelLeft);
}
if (edge.endLabelRight) {
// Create the actual text element
@ -92,7 +97,7 @@ export const insertEdgeLabel = (elem, edge) => {
const endEdgeLabelRight = elem.insert('g').attr('class', 'edgeTerminals');
const inner = endEdgeLabelRight.insert('g').attr('class', 'inner');
inner.node().appendChild(endLabelElement);
fo = inner.node().appendChild(endLabelElement);
const slBox = endLabelElement.getBBox();
inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');
@ -101,9 +106,17 @@ export const insertEdgeLabel = (elem, edge) => {
terminalLabels[edge.id] = {};
}
terminalLabels[edge.id].endRight = endEdgeLabelRight;
setTerminalWidth(fo, edge.endLabelRight);
}
};
function setTerminalWidth(fo, value) {
if (getConfig().flowchart.htmlLabels && fo) {
fo.style.width = value.length * 9 + 'px';
fo.style.height = '12px';
}
}
export const positionEdgeLabel = (edge, paths) => {
log.info('Moving label abc78 ', edge.id, edge.label, edgeLabels[edge.id]);
let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
@ -128,7 +141,7 @@ export const positionEdgeLabel = (edge, paths) => {
let y = edge.y;
if (path) {
// debugger;
const pos = utils.calcTerminalLabelPosition(0, 'start_left', path);
const pos = utils.calcTerminalLabelPosition(edge.arrowTypeStart ? 10 : 0, 'start_left', path);
x = pos.x;
y = pos.y;
}
@ -140,7 +153,11 @@ export const positionEdgeLabel = (edge, paths) => {
let y = edge.y;
if (path) {
// debugger;
const pos = utils.calcTerminalLabelPosition(0, 'start_right', path);
const pos = utils.calcTerminalLabelPosition(
edge.arrowTypeStart ? 10 : 0,
'start_right',
path
);
x = pos.x;
y = pos.y;
}
@ -152,7 +169,7 @@ export const positionEdgeLabel = (edge, paths) => {
let y = edge.y;
if (path) {
// debugger;
const pos = utils.calcTerminalLabelPosition(0, 'end_left', path);
const pos = utils.calcTerminalLabelPosition(edge.arrowTypeEnd ? 10 : 0, 'end_left', path);
x = pos.x;
y = pos.y;
}
@ -164,7 +181,7 @@ export const positionEdgeLabel = (edge, paths) => {
let y = edge.y;
if (path) {
// debugger;
const pos = utils.calcTerminalLabelPosition(0, 'end_right', path);
const pos = utils.calcTerminalLabelPosition(edge.arrowTypeEnd ? 10 : 0, 'end_right', path);
x = pos.x;
y = pos.y;
}

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

@ -648,7 +648,11 @@ const class_box = (parent, node) => {
let classTitleString = node.classData.id;
if (node.classData.type !== undefined && node.classData.type !== '') {
classTitleString += '<' + node.classData.type + '>';
if (getConfig().flowchart.htmlLabels) {
classTitleString += '&lt;' + node.classData.type + '&gt;';
} else {
classTitleString += '<' + node.classData.type + '>';
}
}
const classTitleLabel = labelContainer
.node()
@ -668,7 +672,10 @@ const class_box = (parent, node) => {
}
const classAttributes = [];
node.classData.members.forEach((str) => {
const parsedText = parseMember(str).displayText;
let parsedText = parseMember(str).displayText;
if (getConfig().flowchart.htmlLabels) {
parsedText = parsedText.replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
const lbl = labelContainer
.node()
.appendChild(createLabel(parsedText, node.labelStyle, true, true));
@ -691,10 +698,21 @@ const class_box = (parent, node) => {
const classMethods = [];
node.classData.methods.forEach((str) => {
const parsedText = parseMember(str).displayText;
const parsedInfo = parseMember(str);
let displayText = parsedInfo.displayText;
if (getConfig().flowchart.htmlLabels) {
displayText = displayText.replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
const lbl = labelContainer
.node()
.appendChild(createLabel(parsedText, node.labelStyle, true, true));
.appendChild(
createLabel(
displayText,
parsedInfo.cssStyle ? parsedInfo.cssStyle : node.labelStyle,
true,
true
)
);
let bbox = lbl.getBBox();
if (evaluate(getConfig().flowchart.htmlLabels)) {
const div = lbl.children[0];

2
src/defaultConfig.js
View File

@ -900,7 +900,7 @@ top of the chart
*
* Default value: 'dagre-d3'
*/
defaultRenderer: 'dagre-d3',
defaultRenderer: 'dagre-wrapper',
},
git: {
arrowMarkerAbsolute: false,

8
src/diagrams/class/classDb.js
View File

@ -317,6 +317,12 @@ const setupToolTips = function (element) {
};
funs.push(setupToolTips);
let direction = 'TB';
const getDirection = () => direction;
const setDirection = (dir) => {
direction = dir;
};
export default {
parseDirective,
getConfig: () => configApi.getConfig().class,
@ -328,6 +334,8 @@ export default {
addAnnotation,
getRelations,
addRelation,
getDirection,
setDirection,
addMember,
addMembers,
cleanupLabel,

8
src/diagrams/class/classRenderer-v2.js
View File

@ -207,7 +207,7 @@ export const addRelations = function (relations, g) {
edgeData.arrowheadStyle = 'fill: #333';
edgeData.labelpos = 'c';
if (getConfig().flowchart.htmlLabels && false) { // eslint-disable-line
if (getConfig().flowchart.htmlLabels) { // eslint-disable-line
edgeData.labelType = 'html';
edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
} else {
@ -359,7 +359,7 @@ export const draw = function (text, id) {
// }
// Fetch the default direction, use TD if none was found
let dir = 'TD';
//let dir = 'TD';
const conf = getConfig().flowchart;
log.info('config:', conf);
@ -372,7 +372,7 @@ export const draw = function (text, id) {
compound: true,
})
.setGraph({
rankdir: dir,
rankdir: classDb.getDirection(),
nodesep: nodeSpacing,
ranksep: rankSpacing,
marginx: 8,
@ -457,7 +457,7 @@ export const draw = function (text, id) {
rect.setAttribute('ry', 0);
rect.setAttribute('width', dim.width);
rect.setAttribute('height', dim.height);
rect.setAttribute('style', 'fill:#e8e8e8;');
// rect.setAttribute('style', 'fill:#e8e8e8;');
label.insertBefore(rect, label.firstChild);
}

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

@ -19,6 +19,10 @@
%%
\%\%\{ { this.begin('open_directive'); return 'open_directive'; }
.*direction\s+TB[^\n]* return 'direction_tb';
.*direction\s+BT[^\n]* return 'direction_bt';
.*direction\s+RL[^\n]* return 'direction_rl';
.*direction\s+LR[^\n]* return 'direction_lr';
<open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; }
<type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; }
<type_directive,arg_directive>\}\%\% { this.popState(); this.popState(); return 'close_directive'; }
@ -180,9 +184,21 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
start
: mermaidDoc
| direction
| directive start
;
direction
: direction_tb
{ yy.setDirection('TB');}
| direction_bt
{ yy.setDirection('BT');}
| direction_rl
{ yy.setDirection('RL');}
| direction_lr
{ yy.setDirection('LR');}
;
mermaidDoc
: graphConfig
;
@ -235,6 +251,7 @@ statement
| clickStatement
| cssClassStatement
| directive
| direction
;
classStatement

13
src/diagrams/class/styles.js
View File

@ -12,6 +12,19 @@ const getStyles = (options) =>
}
.nodeLabel, .edgeLabel {
color: ${options.classText};
}
.edgeLabel .label rect {
fill: ${options.mainBkg};
}
.label text {
fill: ${options.classText};
}
.edgeLabel .label span {
background: ${options.mainBkg};
}
.classTitle {
font-weight: bolder;
}

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

@ -38,7 +38,7 @@ const getStyles = (options) =>
.edgePath .path {
stroke: ${options.lineColor};
stroke-width: 1.5px;
stroke-width: 2.0px;
}
.flowchart-link {

20
src/diagrams/pie/pieRenderer.js
View File

@ -1,7 +1,7 @@
/**
* Created by AshishJ on 11-09-2019.
*/
import { select, scaleOrdinal, pie as d3pie, entries, arc } from 'd3';
import { select, scaleOrdinal, pie as d3pie, arc } from 'd3';
import pieData from './pieDb';
import pieParser from './parser/pie';
import { log } from '../../logger';
@ -81,13 +81,13 @@ export const draw = (txt, id) => {
];
// Set the color scale
var color = scaleOrdinal().domain(data).range(myGeneratedColors);
var color = scaleOrdinal().range(myGeneratedColors);
// Compute the position of each group on the pie:
var pie = d3pie().value(function (d) {
return d.value;
return d[1];
});
var dataReady = pie(entries(data));
var dataReady = pie(Object.entries(data));
// Shape helper to build arcs:
var arcGenerator = arc().innerRadius(0).outerRadius(radius);
@ -100,7 +100,7 @@ export const draw = (txt, id) => {
.append('path')
.attr('d', arcGenerator)
.attr('fill', function (d) {
return color(d.data.key);
return color(d.data[0]);
})
.attr('class', 'pieCircle');
@ -108,11 +108,11 @@ export const draw = (txt, id) => {
// Use the centroid method to get the best coordinates.
svg
.selectAll('mySlices')
.data(dataReady.filter((value) => value.data.value !== 0))
.data(dataReady)
.enter()
.append('text')
.text(function (d) {
return ((d.data.value / sum) * 100).toFixed(0) + '%';
return ((d.data[1] / sum) * 100).toFixed(0) + '%';
})
.attr('transform', function (d) {
return 'translate(' + arcGenerator.centroid(d) + ')';
@ -150,15 +150,15 @@ export const draw = (txt, id) => {
.style('stroke', color);
legend
.data(dataReady.filter((value) => value.data.value !== 0))
.data(dataReady)
.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function (d) {
if (parser.yy.getShowData() || conf.showData || conf.pie.showData) {
return d.data.key + ' [' + d.data.value + ']';
return d.data[0] + ' [' + d.data[1] + ']';
} else {
return d.data.key;
return d.data[0];
}
});
} catch (e) {

4
src/utils.js
View File

@ -410,7 +410,7 @@ const calcTerminalLabelPosition = (terminalMarkerSize, position, _points) => {
});
// Traverse only 25 total distance along points to find cardinality point
const distanceToCardinalityPoint = 25;
const distanceToCardinalityPoint = 25 + terminalMarkerSize;
let remainingDistance = distanceToCardinalityPoint;
let center;
@ -437,7 +437,7 @@ const calcTerminalLabelPosition = (terminalMarkerSize, position, _points) => {
prevPoint = point;
});
// if relation is present (Arrows will be added), change cardinality point off-set distance (d)
let d = 10;
let d = 10 + terminalMarkerSize * 0.5;
//Calculate Angle for x and y axis
let angle = Math.atan2(points[0].y - center.y, points[0].x - center.x);

14
webpack.config.babel.js
View File

@ -1,11 +1,11 @@
import nodeExternals from 'webpack-node-externals'
import nodeExternals from 'webpack-node-externals';
import { jsConfig } from './webpack.config.base'
import { jsConfig } from './webpack.config.base';
const config = jsConfig()
const config = jsConfig();
const coreConfig = jsConfig()
coreConfig.externals = [nodeExternals()]
coreConfig.output.filename = '[name].core.js'
const coreConfig = jsConfig();
coreConfig.externals = [nodeExternals()];
coreConfig.output.filename = '[name].core.js';
export default [config, coreConfig]
export default [config, coreConfig];

32
webpack.config.base.js
View File

@ -1,10 +1,9 @@
import path from 'path';
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const amdRule = {
parser: {
amd: false // https://github.com/lodash/lodash/issues/3052
}
amd: false, // https://github.com/lodash/lodash/issues/3052
},
};
const jisonRule = {
@ -12,25 +11,25 @@ const jisonRule = {
use: {
loader: path.resolve(__dirname, './jisonLoader'),
options: {
'token-stack': true
}
}
'token-stack': true,
},
},
};
const jsRule = {
test: /\.js$/,
include: [
path.resolve(__dirname, './src'),
path.resolve(__dirname, './node_modules/dagre-d3-renderer/lib')
path.resolve(__dirname, './node_modules/dagre-d3-renderer/lib'),
],
use: {
loader: 'babel-loader'
}
loader: 'babel-loader',
},
};
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 = () => {
@ -38,13 +37,13 @@ export const jsConfig = () => {
mode: 'development',
target: 'web',
entry: {
mermaid: './src/mermaid.js'
mermaid: './src/mermaid.js',
},
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.json', '.jison']
extensions: ['.wasm', '.mjs', '.js', '.json', '.jison'],
},
node: {
fs: 'empty' // jison generated code requires 'fs'
fs: 'empty', // jison generated code requires 'fs'
},
output: {
path: path.join(__dirname, './dist/'),
@ -52,12 +51,11 @@ export const jsConfig = () => {
library: 'mermaid',
libraryTarget: 'umd',
libraryExport: 'default',
globalObject: 'typeof self !== "undefined" ? self : this'
globalObject: 'typeof self !== "undefined" ? self : this',
},
module: {
rules: [amdRule, jsRule, scssRule, jisonRule]
rules: [amdRule, jsRule, scssRule, jisonRule],
},
// plugins: [new BundleAnalyzerPlugin()],
devtool: 'source-map'
devtool: 'source-map',
};
};

32
webpack.config.e2e.js
View File

@ -4,8 +4,8 @@ const jsRule = {
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
loader: 'babel-loader',
},
};
const jisonRule = {
@ -13,20 +13,20 @@ const jisonRule = {
use: {
loader: path.resolve(__dirname, './jisonLoader'),
options: {
'token-stack': true
}
}
'token-stack': true,
},
},
};
const amdRule = {
parser: {
amd: false // https://github.com/lodash/lodash/issues/3052
}
amd: false, // https://github.com/lodash/lodash/issues/3052
},
};
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' }],
};
module.exports = {
@ -35,31 +35,31 @@ module.exports = {
entry: {
mermaid: './src/mermaid.js',
e2e: './cypress/platform/viewer.js',
'bundle-test': './cypress/platform/bundle-test.js'
'bundle-test': './cypress/platform/bundle-test.js',
},
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.json', '.jison']
extensions: ['.wasm', '.mjs', '.js', '.json', '.jison'],
},
node: {
fs: 'empty' // jison generated code requires 'fs'
fs: 'empty', // jison generated code requires 'fs'
},
output: {
path: path.join(__dirname, './dist/'),
filename: '[name].js',
library: 'mermaid',
libraryTarget: 'umd',
libraryExport: 'default'
libraryExport: 'default',
},
devServer: {
contentBase: [path.join(__dirname, 'cypress', 'platform'), path.join(__dirname, 'dist')],
compress: true,
port: 9000
port: 9000,
},
module: {
rules: [amdRule, jsRule, scssRule, jisonRule]
rules: [amdRule, jsRule, scssRule, jisonRule],
},
externals: {
mermaid: 'mermaid'
mermaid: 'mermaid',
},
devtool: 'source-map'
devtool: 'source-map',
};

10
webpack.config.prod.babel.js
View File

@ -1,7 +1,7 @@
import { jsConfig } from './webpack.config.base'
import { jsConfig } from './webpack.config.base';
const minConfig = jsConfig()
minConfig.mode = 'production'
minConfig.output.filename = '[name].min.js'
const minConfig = jsConfig();
minConfig.mode = 'production';
minConfig.output.filename = '[name].min.js';
export default [minConfig]
export default [minConfig];

1383
yarn.lock
View File

File diff suppressed because it is too large Load Diff