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

Merge branch 'develop' into patch-1

This commit is contained in:
Neil Cuzon 2020-10-16 02:49:06 -07:00 committed by GitHub
parent 911d97c0a3 8e342e1db7
commit b435171aa2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
55 changed files with 601 additions and 370 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -19,7 +19,7 @@ But not having diagrams or docs ruins productivity and hurts organizational lear
Mermaid addresses this problem by cutting the time, effort and tooling that is required to create modifiable diagrams and charts, for smarter and more reusable content.
The text definitions for Mermaid diagrams allows for it to be updated easily, it can also be made part of production scripts (and other pieces of code).
So less time needs be spent on documenting, as a separate and laborious task. <br/>
Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaidjs/mermaid-live-editor). <br/>
Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor).<br/>
[Tutorials](./docs/getting-started/Tutorials.md) has video tutorials.
Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/overview/integrations.md).
@ -126,11 +126,11 @@ class Class10 {
<!-- <State> -->
<tr><td colspan=2 align="center">
<b>State</b><br />
[<a href="http://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
[<a href="http://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoid2hpdGUiLCJwcmltYXJ5Q29sb3IiOiIjRUNFQ0ZGIiwic2Vjb25kYXJ5Q29sb3IiOiIjZmZmZmRlIiwidGVydGlhcnlDb2xvciI6ImhzbCg4MCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwicHJpbWFyeUJvcmRlckNvbG9yIjoiaHNsKDI0MCwgNjAlLCA4Ni4yNzQ1MDk4MDM5JSkiLCJzZWNvbmRhcnlCb3JkZXJDb2xvciI6ImhzbCg2MCwgNjAlLCA4My41Mjk0MTE3NjQ3JSkiLCJ0ZXJ0aWFyeUJvcmRlckNvbG9yIjoiaHNsKDgwLCA2MCUsIDg2LjI3NDUwOTgwMzklKSIsInByaW1hcnlUZXh0Q29sb3IiOiIjMTMxMzAwIiwic2Vjb25kYXJ5VGV4dENvbG9yIjoiIzAwMDAyMSIsInRlcnRpYXJ5VGV4dENvbG9yIjoicmdiKDkuNTAwMDAwMDAwMSwgOS41MDAwMDAwMDAxLCA5LjUwMDAwMDAwMDEpIiwibGluZUNvbG9yIjoiIzMzMzMzMyIsInRleHRDb2xvciI6IiMzMzMiLCJtYWluQmtnIjoiI0VDRUNGRiIsInNlY29uZEJrZyI6IiNmZmZmZGUiLCJib3JkZXIxIjoiIzkzNzBEQiIsImJvcmRlcjIiOiIjYWFhYTMzIiwiYXJyb3doZWFkQ29sb3IiOiIjMzMzMzMzIiwiZm9udEZhbWlseSI6IlwidHJlYnVjaGV0IG1zXCIsIHZlcmRhbmEsIGFyaWFsIiwiZm9udFNpemUiOiIxNnB4IiwibGFiZWxCYWNrZ3JvdW5kIjoiI2U4ZThlOCIsIm5vZGVCa2ciOiIjRUNFQ0ZGIiwibm9kZUJvcmRlciI6IiM5MzcwREIiLCJjbHVzdGVyQmtnIjoiI2ZmZmZkZSIsImNsdXN0ZXJCb3JkZXIiOiIjYWFhYTMzIiwiZGVmYXVsdExpbmtDb2xvciI6IiMzMzMzMzMiLCJ0aXRsZUNvbG9yIjoiIzMzMyIsImVkZ2VMYWJlbEJhY2tncm91bmQiOiIjZThlOGU4IiwiYWN0b3JCb3JkZXIiOiJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSkiLCJhY3RvckJrZyI6IiNFQ0VDRkYiLCJhY3RvclRleHRDb2xvciI6ImJsYWNrIiwiYWN0b3JMaW5lQ29sb3IiOiJncmV5Iiwic2lnbmFsQ29sb3IiOiIjMzMzIiwic2lnbmFsVGV4dENvbG9yIjoiIzMzMyIsImxhYmVsQm94QmtnQ29sb3IiOiIjRUNFQ0ZGIiwibGFiZWxCb3hCb3JkZXJDb2xvciI6ImhzbCgyNTkuNjI2MTY4MjI0MywgNTkuNzc2NTM2MzEyOCUsIDg3LjkwMTk2MDc4NDMlKSIsImxhYmVsVGV4dENvbG9yIjoiYmxhY2siLCJsb29wVGV4dENvbG9yIjoiYmxhY2siLCJub3RlQm9yZGVyQ29sb3IiOiIjYWFhYTMzIiwibm90ZUJrZ0NvbG9yIjoiI2ZmZjVhZCIsIm5vdGVUZXh0Q29sb3IiOiJibGFjayIsImFjdGl2YXRpb25Cb3JkZXJDb2xvciI6IiM2NjYiLCJhY3RpdmF0aW9uQmtnQ29sb3IiOiIjZjRmNGY0Iiwic2VxdWVuY2VOdW1iZXJDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yIjoicmdiYSgxMDIsIDEwMiwgMjU1LCAwLjQ5KSIsImFsdFNlY3Rpb25Ca2dDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yMiI6IiNmZmY0MDAiLCJ0YXNrQm9yZGVyQ29sb3IiOiIjNTM0ZmJjIiwidGFza0JrZ0NvbG9yIjoiIzhhOTBkZCIsInRhc2tUZXh0TGlnaHRDb2xvciI6IndoaXRlIiwidGFza1RleHRDb2xvciI6IndoaXRlIiwidGFza1RleHREYXJrQ29sb3IiOiJibGFjayIsInRhc2tUZXh0T3V0c2lkZUNvbG9yIjoiYmxhY2siLCJ0YXNrVGV4dENsaWNrYWJsZUNvbG9yIjoiIzAwMzE2MyIsImFjdGl2ZVRhc2tCb3JkZXJDb2xvciI6IiM1MzRmYmMiLCJhY3RpdmVUYXNrQmtnQ29sb3IiOiIjYmZjN2ZmIiwiZ3JpZENvbG9yIjoibGlnaHRncmV5IiwiZG9uZVRhc2tCa2dDb2xvciI6ImxpZ2h0Z3JleSIsImRvbmVUYXNrQm9yZGVyQ29sb3IiOiJncmV5IiwiY3JpdEJvcmRlckNvbG9yIjoiI2ZmODg4OCIsImNyaXRCa2dDb2xvciI6InJlZCIsInRvZGF5TGluZUNvbG9yIjoicmVkIiwibGFiZWxDb2xvciI6ImJsYWNrIiwiZXJyb3JCa2dDb2xvciI6IiM1NTIyMjIiLCJlcnJvclRleHRDb2xvciI6IiM1NTIyMjIiLCJjbGFzc1RleHQiOiIjMTMxMzAwIiwiZmlsbFR5cGUwIjoiI0VDRUNGRiIsImZpbGxUeXBlMSI6IiNmZmZmZGUiLCJmaWxsVHlwZTIiOiJoc2woMzA0LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTMiOiJoc2woMTI0LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkiLCJmaWxsVHlwZTQiOiJoc2woMTc2LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTUiOiJoc2woLTQsIDEwMCUsIDkzLjUyOTQxMTc2NDclKSIsImZpbGxUeXBlNiI6ImhzbCg4LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTciOiJoc2woMTg4LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkifX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9">live editor</a>]
</td></tr>
<tr>
<td><pre>
stateDiagram
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving

87
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, 300 * 1.05);
expect(maxWidthValue).to.be.within(300 * .95-1, 300 * 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, 300 * 1.05);
expect(width).to.be.within(300 * .95-1, 300 * 1.05);
expect(svg).to.not.have.attr('style');
});
});
@ -229,18 +229,12 @@ describe('Flowchart v2', () => {
it('54: handle nested subgraphs with outgoing links', () => {
imgSnapshotTest(
`flowchart TD
subgraph one[One]
subgraph sub_one[Sub One]
_sub_one
subgraph main
subgraph subcontainer
subcontainer-child
end
end
subgraph two[Two]
_two
end
sub_one --> two
subcontainer-child--> subcontainer-sibling
end
`,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
);
@ -269,23 +263,30 @@ _one --> b
});
it('56: handle nested subgraphs with outgoing links 2', () => {
it('56: handle nested subgraphs with outgoing links 3', () => {
imgSnapshotTest(
`flowchart TD
subgraph one[One]
subgraph sub_one[Sub One]
_sub_one
`flowchart TB
subgraph container_Beta
process_C-->Process_D
end
subgraph container_Alpha
process_A-->process_B
process_A-->|messages|process_C
end
subgraph sub_two[Sub Two]
_sub_two
end
_one
process_B-->|via_AWSBatch|container_Beta
`,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
);
});
it('57: handle nested subgraphs with outgoing links 4', () => {
imgSnapshotTest(
`flowchart LR
subgraph A
a -->b
end
subgraph B
b
end
%% here, either the first or the second one
sub_one --> sub_two
_one --> b
`,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
);
@ -323,5 +324,37 @@ _one --> b
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
);
});
it('59: handle styling of subgraphs and links', () => {
imgSnapshotTest(
`
flowchart TD
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
subgraph T ["Test"]
A
B
C
end
classDef Test fill:#F84E68,stroke:#333,color:white;
class A,T Test
classDef TestSub fill:green;
class T TestSub
linkStyle 0,1 color:orange, stroke: orange;
`,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
);
});
it('61: fontawesome icons in edge labels', () => {
imgSnapshotTest(
`
flowchart TD
C -->|fa:fa-car Car| F[fa:fa-car Car]
`,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
);
});
});

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

@ -787,5 +787,14 @@ describe('Flowchart', () => {
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
);
});
it('61: fontawesome icons in edge labels', () => {
imgSnapshotTest(
`
graph TD
C -->|fa:fa-car Car| F[fa:fa-car Car]
`,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
);
});
});

59
cypress/platform/knsv.html
View File

@ -22,27 +22,46 @@
<body>
<h1>info below</h1>
<div class="flex">
<div class="mermaid" style="width: 50%; height: 400px;">
graph TB;
subgraph "number as labels";
1 --> 2
end;
</div>
<div class="mermaid" style="width: 50%; height: 400px;">
flowchart TB;
subgraph "number as labels";
1 --> 2
end;
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
%%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
<div class="mermaid2" style="width: 50%; height: 400px;">
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
subgraph T ["Test"]
A
B
C
end
classDef Test fill:#F84E68,stroke:#333,color:white;
class A,T Test
classDef TestSub fill:green;
class T TestSub
linkStyle 0,1 color:orange, stroke: orange;
</div>
<div class="mermaid2" style="width: 50%; height: 400px;">
flowchart TD
A[Christmas] ==> D
A[Christmas] -->|Get money| B(Go shopping)
A[Christmas] ==> C
subgraph T ["Test"]
A
B
C
end
classDef Test fill:#F84E68,stroke:#333,color:white;
class A,T Test
classDef TestSub fill:green;
class T TestSub
linkStyle 0,1 color:orange, stroke: orange;
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
graph TD
C -->|fa:fa-car Car| F[fa:fa-car Car]
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
flowchart TD
C -->|fa:fa-car Car| F[fa:fa-car Car]
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
%%{init: {"fontFamily": "arial2"}}%%

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 152 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 132 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 127 KiB

175
dist/mermaid.core.js vendored
View File

@ -656,7 +656,7 @@ module.exports = function(module) {
/*! exports provided: name, version, description, main, keywords, scripts, repository, author, license, standard, dependencies, devDependencies, files, yarn-upgrade-all, sideEffects, husky, default */
/***/ (function(module) {
module.exports = JSON.parse("{\"name\":\"mermaid\",\"version\":\"8.7.0\",\"description\":\"Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.\",\"main\":\"dist/mermaid.core.js\",\"keywords\":[\"diagram\",\"markdown\",\"flowchart\",\"sequence diagram\",\"gantt\",\"class diagram\",\"git graph\"],\"scripts\":{\"build:development\":\"webpack --progress --colors\",\"build:production\":\"yarn build:development -p --config webpack.config.prod.babel.js\",\"build\":\"yarn build:development && yarn build:production\",\"postbuild\":\"documentation build src/mermaidAPI.js src/config.js --shallow -f md --markdown-toc false | sed '1i---\\\\nsort: 3\\\\ntitle: Configurations\\\\n---\\\\n' > docs/getting-started/Setup.md\",\"build:watch\":\"yarn build --watch\",\"minify\":\"minify ./dist/mermaid.js > ./dist/mermaid.min.js\",\"release\":\"yarn build\",\"lint\":\"eslint src\",\"e2e:depr\":\"yarn lint && jest e2e --config e2e/jest.config.js\",\"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\",\"test\":\"yarn lint && jest src/.*\",\"test:watch\":\"jest --watch src\",\"prepublishOnly\":\"yarn build && yarn test && yarn e2e\",\"prepare\":\"yarn build\"},\"repository\":{\"type\":\"git\",\"url\":\"https://github.com/knsv/mermaid\"},\"author\":\"Knut Sveidqvist\",\"license\":\"MIT\",\"standard\":{\"ignore\":[\"**/parser/*.js\",\"dist/**/*.js\",\"cypress/**/*.js\"],\"globals\":[\"page\"]},\"dependencies\":{\"@braintree/sanitize-url\":\"^3.1.0\",\"babel-eslint\":\"^10.1.0\",\"d3\":\"^5.7.0\",\"dagre\":\"^0.8.4\",\"dagre-d3\":\"^0.6.4\",\"entity-decode\":\"^2.0.2\",\"graphlib\":\"^2.1.7\",\"he\":\"^1.2.0\",\"khroma\":\"^1.1.0\",\"minify\":\"^4.1.1\",\"moment-mini\":\"^2.22.1\",\"stylis\":\"^3.5.2\"},\"devDependencies\":{\"@babel/core\":\"^7.2.2\",\"@babel/preset-env\":\"^7.8.4\",\"@babel/register\":\"^7.0.0\",\"@percy/cypress\":\"*\",\"babel-core\":\"7.0.0-bridge.0\",\"babel-jest\":\"^24.9.0\",\"babel-loader\":\"^8.0.4\",\"coveralls\":\"^3.0.2\",\"css-loader\":\"^2.0.1\",\"css-to-string-loader\":\"^0.1.3\",\"cypress\":\"4.0.1\",\"documentation\":\"^12.0.1\",\"eslint\":\"^6.3.0\",\"eslint-config-prettier\":\"^6.3.0\",\"eslint-plugin-prettier\":\"^3.1.0\",\"husky\":\"^1.2.1\",\"identity-obj-proxy\":\"^3.0.0\",\"jest\":\"^24.9.0\",\"jison\":\"^0.4.18\",\"moment\":\"^2.23.0\",\"node-sass\":\"^4.12.0\",\"prettier\":\"^1.18.2\",\"puppeteer\":\"^1.17.0\",\"sass-loader\":\"^7.1.0\",\"start-server-and-test\":\"^1.10.6\",\"terser-webpack-plugin\":\"^2.2.2\",\"webpack\":\"^4.41.2\",\"webpack-bundle-analyzer\":\"^3.7.0\",\"webpack-cli\":\"^3.1.2\",\"webpack-dev-server\":\"^3.4.1\",\"webpack-node-externals\":\"^1.7.2\",\"yarn-upgrade-all\":\"^0.5.0\"},\"files\":[\"dist\"],\"yarn-upgrade-all\":{\"ignore\":[\"babel-core\"]},\"sideEffects\":[\"**/*.css\",\"**/*.scss\"],\"husky\":{\"hooks\":{\"pre-push\":\"yarn test\"}}}");
module.exports = JSON.parse("{\"name\":\"mermaid\",\"version\":\"8.8.2\",\"description\":\"Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.\",\"main\":\"dist/mermaid.core.js\",\"keywords\":[\"diagram\",\"markdown\",\"flowchart\",\"sequence diagram\",\"gantt\",\"class diagram\",\"git graph\"],\"scripts\":{\"build:development\":\"webpack --progress --colors\",\"build:production\":\"yarn build:development -p --config webpack.config.prod.babel.js\",\"build\":\"yarn build:development && yarn build:production\",\"postbuild\":\"documentation build src/mermaidAPI.js src/config.js --shallow -f md --markdown-toc false | sed '1i---\\\\nsort: 3\\\\ntitle: Configurations\\\\n---\\\\n' > docs/getting-started/Setup.md\",\"build:watch\":\"yarn build --watch\",\"minify\":\"minify ./dist/mermaid.js > ./dist/mermaid.min.js\",\"release\":\"yarn build\",\"lint\":\"eslint src\",\"e2e:depr\":\"yarn lint && jest e2e --config e2e/jest.config.js\",\"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\",\"test\":\"yarn lint && jest src/.*\",\"test:watch\":\"jest --watch src\",\"prepublishOnly\":\"yarn build && yarn test\",\"prepare\":\"yarn build\"},\"repository\":{\"type\":\"git\",\"url\":\"https://github.com/knsv/mermaid\"},\"author\":\"Knut Sveidqvist\",\"license\":\"MIT\",\"standard\":{\"ignore\":[\"**/parser/*.js\",\"dist/**/*.js\",\"cypress/**/*.js\"],\"globals\":[\"page\"]},\"dependencies\":{\"@braintree/sanitize-url\":\"^3.1.0\",\"babel-eslint\":\"^10.1.0\",\"d3\":\"^5.7.0\",\"dagre\":\"^0.8.4\",\"dagre-d3\":\"^0.6.4\",\"entity-decode\":\"^2.0.2\",\"graphlib\":\"^2.1.7\",\"he\":\"^1.2.0\",\"khroma\":\"^1.1.0\",\"minify\":\"^4.1.1\",\"moment-mini\":\"^2.22.1\",\"stylis\":\"^3.5.2\"},\"devDependencies\":{\"@babel/core\":\"^7.2.2\",\"@babel/preset-env\":\"^7.8.4\",\"@babel/register\":\"^7.0.0\",\"@percy/cypress\":\"*\",\"babel-core\":\"7.0.0-bridge.0\",\"babel-jest\":\"^24.9.0\",\"babel-loader\":\"^8.0.4\",\"coveralls\":\"^3.0.2\",\"css-loader\":\"^2.0.1\",\"css-to-string-loader\":\"^0.1.3\",\"cypress\":\"4.0.1\",\"documentation\":\"^12.0.1\",\"eslint\":\"^6.3.0\",\"eslint-config-prettier\":\"^6.3.0\",\"eslint-plugin-prettier\":\"^3.1.0\",\"husky\":\"^1.2.1\",\"identity-obj-proxy\":\"^3.0.0\",\"jest\":\"^24.9.0\",\"jison\":\"^0.4.18\",\"moment\":\"^2.23.0\",\"node-sass\":\"^4.12.0\",\"prettier\":\"^1.18.2\",\"puppeteer\":\"^1.17.0\",\"sass-loader\":\"^7.1.0\",\"start-server-and-test\":\"^1.10.6\",\"terser-webpack-plugin\":\"^2.2.2\",\"webpack\":\"^4.41.2\",\"webpack-bundle-analyzer\":\"^3.7.0\",\"webpack-cli\":\"^3.1.2\",\"webpack-dev-server\":\"^3.4.1\",\"webpack-node-externals\":\"^1.7.2\",\"yarn-upgrade-all\":\"^0.5.0\"},\"files\":[\"dist\"],\"yarn-upgrade-all\":{\"ignore\":[\"babel-core\"]},\"sideEffects\":[\"**/*.css\",\"**/*.scss\"],\"husky\":{\"hooks\":{\"pre-push\":\"yarn test\"}}}");
/***/ }),
@ -2996,7 +2996,7 @@ var rect = function rect(parent, node) {
_logger__WEBPACK_IMPORTED_MODULE_1__["logger"].trace('Classes = ', node.classes); // add the rect
var rect = shapeSvg.insert('rect', ':first-child');
rect.attr('class', 'basic label-container').attr('rx', node.rx).attr('ry', node.ry).attr('x', -bbox.width / 2 - halfPadding).attr('y', -bbox.height / 2 - halfPadding).attr('width', bbox.width + node.padding).attr('height', bbox.height + node.padding);
rect.attr('class', 'basic label-container').attr('style', node.style).attr('rx', node.rx).attr('ry', node.ry).attr('x', -bbox.width / 2 - halfPadding).attr('y', -bbox.height / 2 - halfPadding).attr('width', bbox.width + node.padding).attr('height', bbox.height + node.padding);
Object(_shapes_util__WEBPACK_IMPORTED_MODULE_2__["updateNodeBounds"])(node, rect);
node.intersect = function (point) {
@ -3466,6 +3466,10 @@ var insertNode = function insertNode(elem, node, dir) {
el.attr('title', node.tooltip);
}
if (node.class) {
el.attr('class', 'node default ' + node.class);
}
nodeElems[node.id] = newEl;
if (node.haveCallback) {
@ -3563,7 +3567,7 @@ var labelHelper = function labelHelper(parent, node, _classes, isNode) {
var shapeSvg = parent.insert('g').attr('class', classes).attr('id', node.domId || node.id); // Create the label and insert it after the rect
var label = shapeSvg.insert('g').attr('class', 'label');
var label = shapeSvg.insert('g').attr('class', 'label').attr('style', node.labelStyle);
var text = label.node().appendChild(Object(_createLabel__WEBPACK_IMPORTED_MODULE_0__["default"])(node.labelText, node.labelStyle, false, isNode)); // Get the size of the label
var bbox = text.getBBox();
@ -4955,10 +4959,15 @@ var addClasses = function addClasses(classes, g) {
* @type {string}
*/
var classStr = 'default'; // if (vertex.classes.length > 0) {
var cssClassStr = '';
if (vertex.cssClasses.length > 0) {
cssClassStr = cssClassStr + ' ' + vertex.cssClasses.join(' ');
} // if (vertex.classes.length > 0) {
// classStr = vertex.classes.join(' ');
// }
var styles = {
labelStyle: ''
}; //getStylesFromArray(vertex.styles);
@ -5010,7 +5019,7 @@ var addClasses = function addClasses(classes, g) {
classData: vertex,
rx: radious,
ry: radious,
class: classStr,
class: cssClassStr,
style: styles.style,
id: vertex.id,
domId: vertex.domId,
@ -5026,7 +5035,7 @@ var addClasses = function addClasses(classes, g) {
labelText: vertexText,
rx: radious,
ry: radious,
class: classStr,
class: cssClassStr,
style: styles.style,
id: vertex.id,
width: vertex.type === 'group' ? 500 : undefined,
@ -8402,7 +8411,7 @@ function insertPolygonShape(parent, w, h, points) {
/*!******************************************!*\
!*** ./src/diagrams/flowchart/flowDb.js ***!
\******************************************/
/*! exports provided: parseDirective, lookUpDomId, addVertex, addSingleLink, addLink, updateLinkInterpolate, updateLink, addClass, setDirection, setClass, setLink, getTooltip, setClickEvent, bindFunctions, getDirection, getVertices, getEdges, getClasses, clear, defaultStyle, addSubGraph, getDepthFirstPos, indexNodes, getSubGraphs, firstGraph, default */
/*! exports provided: parseDirective, lookUpDomId, addVertex, addSingleLink, addLink, updateLinkInterpolate, updateLink, addClass, setDirection, setClass, setLink, getTooltip, setClickEvent, bindFunctions, getDirection, getVertices, getEdges, getClasses, clear, setGen, defaultStyle, addSubGraph, getDepthFirstPos, indexNodes, getSubGraphs, firstGraph, default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@ -8426,6 +8435,7 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getEdges", function() { return getEdges; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getClasses", function() { return getClasses; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "clear", function() { return clear; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "setGen", function() { return setGen; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "defaultStyle", function() { return defaultStyle; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "addSubGraph", function() { return addSubGraph; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDepthFirstPos", function() { return getDepthFirstPos; });
@ -8438,13 +8448,14 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../config */ "./src/config.js");
/* harmony import */ var _common_common__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../common/common */ "./src/diagrams/common/common.js");
/* harmony import */ var _mermaidAPI__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../mermaidAPI */ "./src/mermaidAPI.js");
/* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../logger */ "./src/logger.js");
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
// const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
var MERMAID_DOM_ID_PREFIX = 'flowchart-';
var vertexCounter = 0;
@ -8457,7 +8468,9 @@ var subGraphLookup = {};
var tooltips = {};
var subCount = 0;
var firstGraphFlag = true;
var direction; // Functions to be run after graph rendering
var direction;
var version; // As in graph
// Functions to be run after graph rendering
var funs = [];
var parseDirective = function parseDirective(statement, context, type) {
@ -8477,6 +8490,8 @@ var lookUpDomId = function lookUpDomId(id) {
return vertices[veritceKeys[i]].domId;
}
}
return id;
};
/**
* Function called by parser when a node definition has been found
@ -8682,6 +8697,7 @@ var setDirection = function setDirection(dir) {
var setClass = function setClass(ids, className) {
ids.split(',').forEach(function (_id) {
// let id = version === 'gen-2' ? lookUpDomId(_id) : _id;
var id = _id; // if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
if (typeof vertices[id] !== 'undefined') {
@ -8697,7 +8713,7 @@ var setClass = function setClass(ids, className) {
var setTooltip = function setTooltip(ids, tooltip) {
ids.split(',').forEach(function (id) {
if (typeof tooltip !== 'undefined') {
tooltips[id] = _common_common__WEBPACK_IMPORTED_MODULE_3__["default"].sanitizeText(tooltip, config);
tooltips[version === 'gen-1' ? lookUpDomId(id) : id] = _common_common__WEBPACK_IMPORTED_MODULE_3__["default"].sanitizeText(tooltip, config);
}
});
};
@ -8736,8 +8752,6 @@ var setClickFun = function setClickFun(id, functionName) {
var setLink = function setLink(ids, linkStr, tooltip, target) {
ids.split(',').forEach(function (id) {
// let domId = lookUpDomId(id);
// if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
if (typeof vertices[id] !== 'undefined') {
vertices[id].link = _utils__WEBPACK_IMPORTED_MODULE_1__["default"].formatUrl(linkStr, config);
vertices[id].linkTarget = target;
@ -8829,7 +8843,7 @@ funs.push(setupToolTips);
* Clears the internal graph db so that a new graph can be parsed.
*/
var clear = function clear() {
var clear = function clear(ver) {
vertices = {};
classes = {};
edges = [];
@ -8840,6 +8854,10 @@ var clear = function clear() {
subCount = 0;
tooltips = [];
firstGraphFlag = true;
version = ver || 'gen-1';
};
var setGen = function setGen(ver) {
version = ver || 'gen-1';
};
/**
*
@ -8887,12 +8905,16 @@ var addSubGraph = function addSubGraph(_id, list, _title) {
var nodeList = [];
nodeList = uniq(nodeList.concat.apply(nodeList, list));
for (var i = 0; i < nodeList.length; i++) {
if (nodeList[i][0].match(/\d/)) nodeList[i] = MERMAID_DOM_ID_PREFIX + nodeList[i];
if (version === 'gen-1') {
_logger__WEBPACK_IMPORTED_MODULE_5__["logger"].warn('LOOKING UP');
for (var i = 0; i < nodeList.length; i++) {
nodeList[i] = lookUpDomId(nodeList[i]);
}
}
id = id || 'subGraph' + subCount;
if (id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
id = id || 'subGraph' + subCount; // if (id[0].match(/\d/)) id = lookUpDomId(id);
title = title || '';
title = _common_common__WEBPACK_IMPORTED_MODULE_3__["default"].sanitizeText(title, config);
subCount = subCount + 1;
@ -8902,26 +8924,23 @@ var addSubGraph = function addSubGraph(_id, list, _title) {
title: title.trim(),
classes: []
};
console.log('Adding', subGraph.id, subGraph.nodes);
/**
* Deletes an id from all subgraphs
*/
// const del = _id => {
// subGraphs.forEach(sg => {
// const pos = sg.nodes.indexOf(_id);
// if (pos >= 0) {
// sg.nodes.splice(pos, 1);
// }
// });
// };
// // Removes the members of this subgraph from any other subgraphs, a node only belong to one subgraph
// subGraph.nodes.forEach(_id => del(_id));
// Remove the members in the new subgraph if they already belong to another subgraph
var del = function del(_id) {
subGraphs.forEach(function (sg) {
var pos = sg.nodes.indexOf(_id);
if (pos >= 0) {
console.log(sg.nodes, pos, _id);
sg.nodes.splice(pos, 1);
}
});
}; // Removes the members of this subgraph from any other subgraphs, a node only belong to one subgraph
subGraph.nodes.forEach(function (_id) {
return del(_id);
});
console.log(subGraph.nodes);
subGraph.nodes = makeUniq(subGraph, subGraphs).nodes;
subGraphs.push(subGraph);
subGraphLookup[id] = subGraph;
return id;
@ -9152,6 +9171,35 @@ var destructLink = function destructLink(_str, _startStr) {
}
return info;
}; // Todo optimizer this by caching existing nodes
var exists = function exists(allSgs, _id) {
var res = false;
allSgs.forEach(function (sg) {
var pos = sg.nodes.indexOf(_id);
if (pos >= 0) {
res = true;
}
});
return res;
};
/**
* Deletes an id from all subgraphs
*/
var makeUniq = function makeUniq(sg, allSubgraphs) {
var res = [];
sg.nodes.forEach(function (_id, pos) {
if (!exists(allSubgraphs, _id)) {
res.push(sg.nodes[pos]);
}
});
return {
nodes: res
};
};
/* harmony default export */ __webpack_exports__["default"] = ({
@ -9176,6 +9224,7 @@ var destructLink = function destructLink(_str, _startStr) {
getEdges: getEdges,
getClasses: getClasses,
clear: clear,
setGen: setGen,
defaultStyle: defaultStyle,
addSubGraph: addSubGraph,
getDepthFirstPos: getDepthFirstPos,
@ -9184,7 +9233,9 @@ var destructLink = function destructLink(_str, _startStr) {
destructLink: destructLink,
lex: {
firstGraph: firstGraph
}
},
exists: exists,
makeUniq: makeUniq
});
/***/ }),
@ -9570,6 +9621,7 @@ var getClasses = function getClasses(text) {
var draw = function draw(text, id) {
_logger__WEBPACK_IMPORTED_MODULE_7__["logger"].info('Drawing flowchart');
_flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].clear();
_flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].setGen('gen-2');
var parser = _parser_flow__WEBPACK_IMPORTED_MODULE_3___default.a.parser;
parser.yy = _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"]; // Parse the graph definition
// try {
@ -9894,7 +9946,8 @@ var addVertices = function addVertices(vert, g, svgId) {
} // Add the node
g.setNode(vertex.id, {
_logger__WEBPACK_IMPORTED_MODULE_7__["logger"].warn('Adding node', vertex.id, vertex.domId);
g.setNode(_flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(vertex.id), {
labelType: 'svg',
labelStyle: styles.labelStyle,
shape: _shape,
@ -9903,7 +9956,7 @@ var addVertices = function addVertices(vert, g, svgId) {
ry: radious,
class: classStr,
style: styles.style,
id: vertex.id
id: _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(vertex.id)
});
});
};
@ -10008,7 +10061,7 @@ var addEdges = function addEdges(edges, g) {
edgeData.class = linkNameStart + ' ' + linkNameEnd;
edgeData.minlen = edge.length || 1; // Add the edge to the graph
g.setEdge(edge.start, edge.end, edgeData, cnt);
g.setEdge(_flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(edge.start), _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(edge.end), edgeData, cnt);
});
};
/**
@ -10039,6 +10092,7 @@ var getClasses = function getClasses(text) {
var draw = function draw(text, id) {
_logger__WEBPACK_IMPORTED_MODULE_7__["logger"].info('Drawing flowchart');
_flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].clear();
_flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].setGen('gen-1');
var parser = _parser_flow__WEBPACK_IMPORTED_MODULE_3___default.a.parser;
parser.yy = _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"]; // Parse the graph definition
// try {
@ -10080,6 +10134,7 @@ var draw = function draw(text, id) {
var vert = _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].getVertices();
_logger__WEBPACK_IMPORTED_MODULE_7__["logger"].warn('Get vertices', vert);
var edges = _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].getEdges();
var i = 0;
@ -10088,7 +10143,8 @@ var draw = function draw(text, id) {
Object(d3__WEBPACK_IMPORTED_MODULE_1__["selectAll"])('cluster').append('text');
for (var j = 0; j < subG.nodes.length; j++) {
g.setParent(subG.nodes[j], subG.id);
_logger__WEBPACK_IMPORTED_MODULE_7__["logger"].warn('Setting subgraph', subG.nodes[j], _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(subG.nodes[j]), _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(subG.id));
g.setParent(_flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(subG.nodes[j]), _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(subG.id));
}
}
@ -10114,7 +10170,8 @@ var draw = function draw(text, id) {
var svg = Object(d3__WEBPACK_IMPORTED_MODULE_1__["select"])("[id=\"".concat(id, "\"]"));
svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink'); // Run the renderer. This is what draws the final graph.
svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');
_logger__WEBPACK_IMPORTED_MODULE_7__["logger"].warn(g); // Run the renderer. This is what draws the final graph.
var element = Object(d3__WEBPACK_IMPORTED_MODULE_1__["select"])('#' + id + ' g');
render(element, g);
@ -10137,8 +10194,8 @@ var draw = function draw(text, id) {
subG = subGraphs[i];
if (subG.title !== 'undefined') {
var clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect');
var clusterEl = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"]');
var clusterRects = document.querySelectorAll('#' + id + ' [id="' + _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(subG.id) + '"] rect');
var clusterEl = document.querySelectorAll('#' + id + ' [id="' + _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(subG.id) + '"]');
var xPos = clusterRects[0].x.baseVal.value;
var yPos = clusterRects[0].y.baseVal.value;
var _width = clusterRects[0].width.baseVal.value;
@ -10178,7 +10235,7 @@ var draw = function draw(text, id) {
var vertex = vert[key];
if (vertex.link) {
var node = Object(d3__WEBPACK_IMPORTED_MODULE_1__["select"])('#' + id + ' [id="' + key + '"]');
var node = Object(d3__WEBPACK_IMPORTED_MODULE_1__["select"])('#' + id + ' [id="' + _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(key) + '"]');
if (node) {
var link = document.createElementNS('http://www.w3.org/2000/svg', 'a');
@ -15796,7 +15853,7 @@ case 4:return 24;
break;
case 5:/* skip comments */
break;
case 6:/* skip comments */{ console.log('Crap after close'); }
case 6:/* skip comments */{ /*console.log('');*/ }
break;
case 7:return 19;
break;
@ -15995,7 +16052,6 @@ var draw = function draw(txt, id) {
}
var diagram = Object(d3__WEBPACK_IMPORTED_MODULE_0__["select"])('#' + id);
console.log('conf', conf);
Object(_utils__WEBPACK_IMPORTED_MODULE_4__["configureSvgSize"])(diagram, height, width, conf.useMaxWidth); // Set viewBox
elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height); // Fetch the default direction, use TD if none was found
@ -17005,7 +17061,6 @@ var activationCount = function activationCount(part) {
var count = 0;
for (i = 0; i < messages.length; i++) {
// console.warn(i, messages[i]);
if (messages[i].type === LINETYPE.ACTIVE_START) {
if (messages[i].from.actor === part) {
count++;
@ -17514,7 +17569,6 @@ var bounds = {
return this.verticalPos;
},
getBounds: function getBounds() {
console.log('here', this.data);
return {
bounds: this.data,
models: this.models
@ -17786,7 +17840,6 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
var draw = function draw(text, id) {
conf = _config__WEBPACK_IMPORTED_MODULE_6__["getConfig"]().sequence;
console.log('there ', conf);
_parser_sequenceDiagram__WEBPACK_IMPORTED_MODULE_3__["parser"].yy.clear();
_parser_sequenceDiagram__WEBPACK_IMPORTED_MODULE_3__["parser"].yy.setWrap(conf.wrap);
_parser_sequenceDiagram__WEBPACK_IMPORTED_MODULE_3__["parser"].parse(text + '\n');
@ -19743,8 +19796,7 @@ var addTitleAndBox = function addTitleAndBox(g, stateDef, altBkg) {
// .attr('y2', lineY)
// .attr('class', 'descr-divider');
var graphBox = g.node().getBBox(); // console.warn(width / 2, titleWidth / 2, getConfig().state.padding, orgBox);
// descrLine.attr('x2', graphBox.width + getConfig().state.padding);
var graphBox = g.node().getBBox(); // descrLine.attr('x2', graphBox.width + getConfig().state.padding);
if (stateDef.doc) {// cnsole.warn(
// stateDef.id,
@ -19856,8 +19908,7 @@ var _drawLongText = function _drawLongText(_text, x, y, g) {
if (tHeight === 0) {
var textBounds = span.node().getBBox();
tHeight += textBounds.height;
} // console.warn('textBounds', textBounds);
}
textHeight += tHeight;
span.attr('x', x + Object(_config__WEBPACK_IMPORTED_MODULE_5__["getConfig"])().state.noteMargin);
@ -19981,8 +20032,7 @@ var drawEdge = function drawEdge(elem, path, relation) {
x = _utils$calcLabelPosit.x,
y = _utils$calcLabelPosit.y;
var rows = _common_common__WEBPACK_IMPORTED_MODULE_4__["default"].getRows(relation.title); // console.warn(rows);
var rows = _common_common__WEBPACK_IMPORTED_MODULE_4__["default"].getRows(relation.title);
var titleHeight = 0;
var titleRows = [];
var maxWidth = 0;
@ -24018,10 +24068,6 @@ function () {
var getThemeVariables = function getThemeVariables(userOverrides) {
var theme = new Theme();
theme.calculate(userOverrides);
console.info('Theme(dark)', {
userOverrides: userOverrides,
theme: theme
});
return theme;
};
@ -24247,8 +24293,7 @@ function () {
var getThemeVariables = function getThemeVariables(userOverrides) {
var theme = new Theme();
theme.calculate(userOverrides); // console.info('Theme(default)', { userOverrides, theme });
theme.calculate(userOverrides);
return theme;
};
@ -24444,10 +24489,6 @@ function () {
var getThemeVariables = function getThemeVariables(userOverrides) {
var theme = new Theme();
theme.calculate(userOverrides);
console.info('Theme(forest)', {
userOverrides: userOverrides,
theme: theme
});
return theme;
};
@ -24516,8 +24557,7 @@ function () {
this.tertiaryColor = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["adjust"])(this.primaryColor, {
h: -160
}); // console.log('primary color', this.primaryColor, 'tertiary - color', this.tertiaryColor);
});
this.primaryBorderColor = Object(_theme_helpers__WEBPACK_IMPORTED_MODULE_1__["mkBorder"])(this.primaryColor, this.darkMode);
this.secondaryBorderColor = Object(_theme_helpers__WEBPACK_IMPORTED_MODULE_1__["mkBorder"])(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor = Object(_theme_helpers__WEBPACK_IMPORTED_MODULE_1__["mkBorder"])(this.tertiaryColor, this.darkMode); // this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);
@ -24698,10 +24738,6 @@ function () {
var getThemeVariables = function getThemeVariables(userOverrides) {
var theme = new Theme();
theme.calculate(userOverrides);
console.info('Theme(neutral)', {
userOverrides: userOverrides,
theme: theme
});
return theme;
};
@ -25650,7 +25686,6 @@ var calculateSvgSizeAttrs = function calculateSvgSizeAttrs(height, width, useMax
};
var configureSvgSize = function configureSvgSize(svgElem, height, width, useMaxWidth) {
var attrs = calculateSvgSizeAttrs(height, width, useMaxWidth);
console.log('svgElem', svgElem);
d3Attrs(svgElem, attrs);
};
/* harmony default export */ __webpack_exports__["default"] = ({

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

File diff suppressed because one or more lines are too long

175
dist/mermaid.js vendored
View File

@ -49035,7 +49035,7 @@ module.exports = function(module) {
/*! exports provided: name, version, description, main, keywords, scripts, repository, author, license, standard, dependencies, devDependencies, files, yarn-upgrade-all, sideEffects, husky, default */
/***/ (function(module) {
module.exports = JSON.parse("{\"name\":\"mermaid\",\"version\":\"8.7.0\",\"description\":\"Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.\",\"main\":\"dist/mermaid.core.js\",\"keywords\":[\"diagram\",\"markdown\",\"flowchart\",\"sequence diagram\",\"gantt\",\"class diagram\",\"git graph\"],\"scripts\":{\"build:development\":\"webpack --progress --colors\",\"build:production\":\"yarn build:development -p --config webpack.config.prod.babel.js\",\"build\":\"yarn build:development && yarn build:production\",\"postbuild\":\"documentation build src/mermaidAPI.js src/config.js --shallow -f md --markdown-toc false | sed '1i---\\\\nsort: 3\\\\ntitle: Configurations\\\\n---\\\\n' > docs/getting-started/Setup.md\",\"build:watch\":\"yarn build --watch\",\"minify\":\"minify ./dist/mermaid.js > ./dist/mermaid.min.js\",\"release\":\"yarn build\",\"lint\":\"eslint src\",\"e2e:depr\":\"yarn lint && jest e2e --config e2e/jest.config.js\",\"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\",\"test\":\"yarn lint && jest src/.*\",\"test:watch\":\"jest --watch src\",\"prepublishOnly\":\"yarn build && yarn test && yarn e2e\",\"prepare\":\"yarn build\"},\"repository\":{\"type\":\"git\",\"url\":\"https://github.com/knsv/mermaid\"},\"author\":\"Knut Sveidqvist\",\"license\":\"MIT\",\"standard\":{\"ignore\":[\"**/parser/*.js\",\"dist/**/*.js\",\"cypress/**/*.js\"],\"globals\":[\"page\"]},\"dependencies\":{\"@braintree/sanitize-url\":\"^3.1.0\",\"babel-eslint\":\"^10.1.0\",\"d3\":\"^5.7.0\",\"dagre\":\"^0.8.4\",\"dagre-d3\":\"^0.6.4\",\"entity-decode\":\"^2.0.2\",\"graphlib\":\"^2.1.7\",\"he\":\"^1.2.0\",\"khroma\":\"^1.1.0\",\"minify\":\"^4.1.1\",\"moment-mini\":\"^2.22.1\",\"stylis\":\"^3.5.2\"},\"devDependencies\":{\"@babel/core\":\"^7.2.2\",\"@babel/preset-env\":\"^7.8.4\",\"@babel/register\":\"^7.0.0\",\"@percy/cypress\":\"*\",\"babel-core\":\"7.0.0-bridge.0\",\"babel-jest\":\"^24.9.0\",\"babel-loader\":\"^8.0.4\",\"coveralls\":\"^3.0.2\",\"css-loader\":\"^2.0.1\",\"css-to-string-loader\":\"^0.1.3\",\"cypress\":\"4.0.1\",\"documentation\":\"^12.0.1\",\"eslint\":\"^6.3.0\",\"eslint-config-prettier\":\"^6.3.0\",\"eslint-plugin-prettier\":\"^3.1.0\",\"husky\":\"^1.2.1\",\"identity-obj-proxy\":\"^3.0.0\",\"jest\":\"^24.9.0\",\"jison\":\"^0.4.18\",\"moment\":\"^2.23.0\",\"node-sass\":\"^4.12.0\",\"prettier\":\"^1.18.2\",\"puppeteer\":\"^1.17.0\",\"sass-loader\":\"^7.1.0\",\"start-server-and-test\":\"^1.10.6\",\"terser-webpack-plugin\":\"^2.2.2\",\"webpack\":\"^4.41.2\",\"webpack-bundle-analyzer\":\"^3.7.0\",\"webpack-cli\":\"^3.1.2\",\"webpack-dev-server\":\"^3.4.1\",\"webpack-node-externals\":\"^1.7.2\",\"yarn-upgrade-all\":\"^0.5.0\"},\"files\":[\"dist\"],\"yarn-upgrade-all\":{\"ignore\":[\"babel-core\"]},\"sideEffects\":[\"**/*.css\",\"**/*.scss\"],\"husky\":{\"hooks\":{\"pre-push\":\"yarn test\"}}}");
module.exports = JSON.parse("{\"name\":\"mermaid\",\"version\":\"8.8.2\",\"description\":\"Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.\",\"main\":\"dist/mermaid.core.js\",\"keywords\":[\"diagram\",\"markdown\",\"flowchart\",\"sequence diagram\",\"gantt\",\"class diagram\",\"git graph\"],\"scripts\":{\"build:development\":\"webpack --progress --colors\",\"build:production\":\"yarn build:development -p --config webpack.config.prod.babel.js\",\"build\":\"yarn build:development && yarn build:production\",\"postbuild\":\"documentation build src/mermaidAPI.js src/config.js --shallow -f md --markdown-toc false | sed '1i---\\\\nsort: 3\\\\ntitle: Configurations\\\\n---\\\\n' > docs/getting-started/Setup.md\",\"build:watch\":\"yarn build --watch\",\"minify\":\"minify ./dist/mermaid.js > ./dist/mermaid.min.js\",\"release\":\"yarn build\",\"lint\":\"eslint src\",\"e2e:depr\":\"yarn lint && jest e2e --config e2e/jest.config.js\",\"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\",\"test\":\"yarn lint && jest src/.*\",\"test:watch\":\"jest --watch src\",\"prepublishOnly\":\"yarn build && yarn test\",\"prepare\":\"yarn build\"},\"repository\":{\"type\":\"git\",\"url\":\"https://github.com/knsv/mermaid\"},\"author\":\"Knut Sveidqvist\",\"license\":\"MIT\",\"standard\":{\"ignore\":[\"**/parser/*.js\",\"dist/**/*.js\",\"cypress/**/*.js\"],\"globals\":[\"page\"]},\"dependencies\":{\"@braintree/sanitize-url\":\"^3.1.0\",\"babel-eslint\":\"^10.1.0\",\"d3\":\"^5.7.0\",\"dagre\":\"^0.8.4\",\"dagre-d3\":\"^0.6.4\",\"entity-decode\":\"^2.0.2\",\"graphlib\":\"^2.1.7\",\"he\":\"^1.2.0\",\"khroma\":\"^1.1.0\",\"minify\":\"^4.1.1\",\"moment-mini\":\"^2.22.1\",\"stylis\":\"^3.5.2\"},\"devDependencies\":{\"@babel/core\":\"^7.2.2\",\"@babel/preset-env\":\"^7.8.4\",\"@babel/register\":\"^7.0.0\",\"@percy/cypress\":\"*\",\"babel-core\":\"7.0.0-bridge.0\",\"babel-jest\":\"^24.9.0\",\"babel-loader\":\"^8.0.4\",\"coveralls\":\"^3.0.2\",\"css-loader\":\"^2.0.1\",\"css-to-string-loader\":\"^0.1.3\",\"cypress\":\"4.0.1\",\"documentation\":\"^12.0.1\",\"eslint\":\"^6.3.0\",\"eslint-config-prettier\":\"^6.3.0\",\"eslint-plugin-prettier\":\"^3.1.0\",\"husky\":\"^1.2.1\",\"identity-obj-proxy\":\"^3.0.0\",\"jest\":\"^24.9.0\",\"jison\":\"^0.4.18\",\"moment\":\"^2.23.0\",\"node-sass\":\"^4.12.0\",\"prettier\":\"^1.18.2\",\"puppeteer\":\"^1.17.0\",\"sass-loader\":\"^7.1.0\",\"start-server-and-test\":\"^1.10.6\",\"terser-webpack-plugin\":\"^2.2.2\",\"webpack\":\"^4.41.2\",\"webpack-bundle-analyzer\":\"^3.7.0\",\"webpack-cli\":\"^3.1.2\",\"webpack-dev-server\":\"^3.4.1\",\"webpack-node-externals\":\"^1.7.2\",\"yarn-upgrade-all\":\"^0.5.0\"},\"files\":[\"dist\"],\"yarn-upgrade-all\":{\"ignore\":[\"babel-core\"]},\"sideEffects\":[\"**/*.css\",\"**/*.scss\"],\"husky\":{\"hooks\":{\"pre-push\":\"yarn test\"}}}");
/***/ }),
@ -51371,7 +51371,7 @@ var rect = function rect(parent, node) {
_logger__WEBPACK_IMPORTED_MODULE_1__["logger"].trace('Classes = ', node.classes); // add the rect
var rect = shapeSvg.insert('rect', ':first-child');
rect.attr('class', 'basic label-container').attr('rx', node.rx).attr('ry', node.ry).attr('x', -bbox.width / 2 - halfPadding).attr('y', -bbox.height / 2 - halfPadding).attr('width', bbox.width + node.padding).attr('height', bbox.height + node.padding);
rect.attr('class', 'basic label-container').attr('style', node.style).attr('rx', node.rx).attr('ry', node.ry).attr('x', -bbox.width / 2 - halfPadding).attr('y', -bbox.height / 2 - halfPadding).attr('width', bbox.width + node.padding).attr('height', bbox.height + node.padding);
Object(_shapes_util__WEBPACK_IMPORTED_MODULE_2__["updateNodeBounds"])(node, rect);
node.intersect = function (point) {
@ -51841,6 +51841,10 @@ var insertNode = function insertNode(elem, node, dir) {
el.attr('title', node.tooltip);
}
if (node.class) {
el.attr('class', 'node default ' + node.class);
}
nodeElems[node.id] = newEl;
if (node.haveCallback) {
@ -51937,7 +51941,7 @@ var labelHelper = function labelHelper(parent, node, _classes, isNode) {
var shapeSvg = parent.insert('g').attr('class', classes).attr('id', node.domId || node.id); // Create the label and insert it after the rect
var label = shapeSvg.insert('g').attr('class', 'label');
var label = shapeSvg.insert('g').attr('class', 'label').attr('style', node.labelStyle);
var text = label.node().appendChild(Object(_createLabel__WEBPACK_IMPORTED_MODULE_0__["default"])(node.labelText, node.labelStyle, false, isNode)); // Get the size of the label
var bbox = text.getBBox();
@ -53327,10 +53331,15 @@ var addClasses = function addClasses(classes, g) {
* @type {string}
*/
var classStr = 'default'; // if (vertex.classes.length > 0) {
var cssClassStr = '';
if (vertex.cssClasses.length > 0) {
cssClassStr = cssClassStr + ' ' + vertex.cssClasses.join(' ');
} // if (vertex.classes.length > 0) {
// classStr = vertex.classes.join(' ');
// }
var styles = {
labelStyle: ''
}; //getStylesFromArray(vertex.styles);
@ -53382,7 +53391,7 @@ var addClasses = function addClasses(classes, g) {
classData: vertex,
rx: radious,
ry: radious,
class: classStr,
class: cssClassStr,
style: styles.style,
id: vertex.id,
domId: vertex.domId,
@ -53398,7 +53407,7 @@ var addClasses = function addClasses(classes, g) {
labelText: vertexText,
rx: radious,
ry: radious,
class: classStr,
class: cssClassStr,
style: styles.style,
id: vertex.id,
width: vertex.type === 'group' ? 500 : undefined,
@ -56771,7 +56780,7 @@ function insertPolygonShape(parent, w, h, points) {
/*!******************************************!*\
!*** ./src/diagrams/flowchart/flowDb.js ***!
\******************************************/
/*! exports provided: parseDirective, lookUpDomId, addVertex, addSingleLink, addLink, updateLinkInterpolate, updateLink, addClass, setDirection, setClass, setLink, getTooltip, setClickEvent, bindFunctions, getDirection, getVertices, getEdges, getClasses, clear, defaultStyle, addSubGraph, getDepthFirstPos, indexNodes, getSubGraphs, firstGraph, default */
/*! exports provided: parseDirective, lookUpDomId, addVertex, addSingleLink, addLink, updateLinkInterpolate, updateLink, addClass, setDirection, setClass, setLink, getTooltip, setClickEvent, bindFunctions, getDirection, getVertices, getEdges, getClasses, clear, setGen, defaultStyle, addSubGraph, getDepthFirstPos, indexNodes, getSubGraphs, firstGraph, default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@ -56795,6 +56804,7 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getEdges", function() { return getEdges; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getClasses", function() { return getClasses; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "clear", function() { return clear; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "setGen", function() { return setGen; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "defaultStyle", function() { return defaultStyle; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "addSubGraph", function() { return addSubGraph; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDepthFirstPos", function() { return getDepthFirstPos; });
@ -56806,13 +56816,14 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../config */ "./src/config.js");
/* harmony import */ var _common_common__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../common/common */ "./src/diagrams/common/common.js");
/* harmony import */ var _mermaidAPI__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../mermaidAPI */ "./src/mermaidAPI.js");
/* harmony import */ var _logger__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../logger */ "./src/logger.js");
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
// const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
var MERMAID_DOM_ID_PREFIX = 'flowchart-';
var vertexCounter = 0;
@ -56825,7 +56836,9 @@ var subGraphLookup = {};
var tooltips = {};
var subCount = 0;
var firstGraphFlag = true;
var direction; // Functions to be run after graph rendering
var direction;
var version; // As in graph
// Functions to be run after graph rendering
var funs = [];
var parseDirective = function parseDirective(statement, context, type) {
@ -56845,6 +56858,8 @@ var lookUpDomId = function lookUpDomId(id) {
return vertices[veritceKeys[i]].domId;
}
}
return id;
};
/**
* Function called by parser when a node definition has been found
@ -57050,6 +57065,7 @@ var setDirection = function setDirection(dir) {
var setClass = function setClass(ids, className) {
ids.split(',').forEach(function (_id) {
// let id = version === 'gen-2' ? lookUpDomId(_id) : _id;
var id = _id; // if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
if (typeof vertices[id] !== 'undefined') {
@ -57065,7 +57081,7 @@ var setClass = function setClass(ids, className) {
var setTooltip = function setTooltip(ids, tooltip) {
ids.split(',').forEach(function (id) {
if (typeof tooltip !== 'undefined') {
tooltips[id] = _common_common__WEBPACK_IMPORTED_MODULE_3__["default"].sanitizeText(tooltip, config);
tooltips[version === 'gen-1' ? lookUpDomId(id) : id] = _common_common__WEBPACK_IMPORTED_MODULE_3__["default"].sanitizeText(tooltip, config);
}
});
};
@ -57104,8 +57120,6 @@ var setClickFun = function setClickFun(id, functionName) {
var setLink = function setLink(ids, linkStr, tooltip, target) {
ids.split(',').forEach(function (id) {
// let domId = lookUpDomId(id);
// if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
if (typeof vertices[id] !== 'undefined') {
vertices[id].link = _utils__WEBPACK_IMPORTED_MODULE_1__["default"].formatUrl(linkStr, config);
vertices[id].linkTarget = target;
@ -57197,7 +57211,7 @@ funs.push(setupToolTips);
* Clears the internal graph db so that a new graph can be parsed.
*/
var clear = function clear() {
var clear = function clear(ver) {
vertices = {};
classes = {};
edges = [];
@ -57208,6 +57222,10 @@ var clear = function clear() {
subCount = 0;
tooltips = [];
firstGraphFlag = true;
version = ver || 'gen-1';
};
var setGen = function setGen(ver) {
version = ver || 'gen-1';
};
/**
*
@ -57255,12 +57273,16 @@ var addSubGraph = function addSubGraph(_id, list, _title) {
var nodeList = [];
nodeList = uniq(nodeList.concat.apply(nodeList, list));
for (var i = 0; i < nodeList.length; i++) {
if (nodeList[i][0].match(/\d/)) nodeList[i] = MERMAID_DOM_ID_PREFIX + nodeList[i];
if (version === 'gen-1') {
_logger__WEBPACK_IMPORTED_MODULE_5__["logger"].warn('LOOKING UP');
for (var i = 0; i < nodeList.length; i++) {
nodeList[i] = lookUpDomId(nodeList[i]);
}
}
id = id || 'subGraph' + subCount;
if (id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
id = id || 'subGraph' + subCount; // if (id[0].match(/\d/)) id = lookUpDomId(id);
title = title || '';
title = _common_common__WEBPACK_IMPORTED_MODULE_3__["default"].sanitizeText(title, config);
subCount = subCount + 1;
@ -57270,26 +57292,23 @@ var addSubGraph = function addSubGraph(_id, list, _title) {
title: title.trim(),
classes: []
};
console.log('Adding', subGraph.id, subGraph.nodes);
/**
* Deletes an id from all subgraphs
*/
// const del = _id => {
// subGraphs.forEach(sg => {
// const pos = sg.nodes.indexOf(_id);
// if (pos >= 0) {
// sg.nodes.splice(pos, 1);
// }
// });
// };
// // Removes the members of this subgraph from any other subgraphs, a node only belong to one subgraph
// subGraph.nodes.forEach(_id => del(_id));
// Remove the members in the new subgraph if they already belong to another subgraph
var del = function del(_id) {
subGraphs.forEach(function (sg) {
var pos = sg.nodes.indexOf(_id);
if (pos >= 0) {
console.log(sg.nodes, pos, _id);
sg.nodes.splice(pos, 1);
}
});
}; // Removes the members of this subgraph from any other subgraphs, a node only belong to one subgraph
subGraph.nodes.forEach(function (_id) {
return del(_id);
});
console.log(subGraph.nodes);
subGraph.nodes = makeUniq(subGraph, subGraphs).nodes;
subGraphs.push(subGraph);
subGraphLookup[id] = subGraph;
return id;
@ -57520,6 +57539,35 @@ var destructLink = function destructLink(_str, _startStr) {
}
return info;
}; // Todo optimizer this by caching existing nodes
var exists = function exists(allSgs, _id) {
var res = false;
allSgs.forEach(function (sg) {
var pos = sg.nodes.indexOf(_id);
if (pos >= 0) {
res = true;
}
});
return res;
};
/**
* Deletes an id from all subgraphs
*/
var makeUniq = function makeUniq(sg, allSubgraphs) {
var res = [];
sg.nodes.forEach(function (_id, pos) {
if (!exists(allSubgraphs, _id)) {
res.push(sg.nodes[pos]);
}
});
return {
nodes: res
};
};
/* harmony default export */ __webpack_exports__["default"] = ({
@ -57544,6 +57592,7 @@ var destructLink = function destructLink(_str, _startStr) {
getEdges: getEdges,
getClasses: getClasses,
clear: clear,
setGen: setGen,
defaultStyle: defaultStyle,
addSubGraph: addSubGraph,
getDepthFirstPos: getDepthFirstPos,
@ -57552,7 +57601,9 @@ var destructLink = function destructLink(_str, _startStr) {
destructLink: destructLink,
lex: {
firstGraph: firstGraph
}
},
exists: exists,
makeUniq: makeUniq
});
/***/ }),
@ -57937,6 +57988,7 @@ var getClasses = function getClasses(text) {
var draw = function draw(text, id) {
_logger__WEBPACK_IMPORTED_MODULE_7__["logger"].info('Drawing flowchart');
_flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].clear();
_flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].setGen('gen-2');
var parser = _parser_flow__WEBPACK_IMPORTED_MODULE_3___default.a.parser;
parser.yy = _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"]; // Parse the graph definition
// try {
@ -58260,7 +58312,8 @@ var addVertices = function addVertices(vert, g, svgId) {
} // Add the node
g.setNode(vertex.id, {
_logger__WEBPACK_IMPORTED_MODULE_7__["logger"].warn('Adding node', vertex.id, vertex.domId);
g.setNode(_flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(vertex.id), {
labelType: 'svg',
labelStyle: styles.labelStyle,
shape: _shape,
@ -58269,7 +58322,7 @@ var addVertices = function addVertices(vert, g, svgId) {
ry: radious,
class: classStr,
style: styles.style,
id: vertex.id
id: _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(vertex.id)
});
});
};
@ -58374,7 +58427,7 @@ var addEdges = function addEdges(edges, g) {
edgeData.class = linkNameStart + ' ' + linkNameEnd;
edgeData.minlen = edge.length || 1; // Add the edge to the graph
g.setEdge(edge.start, edge.end, edgeData, cnt);
g.setEdge(_flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(edge.start), _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(edge.end), edgeData, cnt);
});
};
/**
@ -58405,6 +58458,7 @@ var getClasses = function getClasses(text) {
var draw = function draw(text, id) {
_logger__WEBPACK_IMPORTED_MODULE_7__["logger"].info('Drawing flowchart');
_flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].clear();
_flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].setGen('gen-1');
var parser = _parser_flow__WEBPACK_IMPORTED_MODULE_3___default.a.parser;
parser.yy = _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"]; // Parse the graph definition
// try {
@ -58446,6 +58500,7 @@ var draw = function draw(text, id) {
var vert = _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].getVertices();
_logger__WEBPACK_IMPORTED_MODULE_7__["logger"].warn('Get vertices', vert);
var edges = _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].getEdges();
var i = 0;
@ -58454,7 +58509,8 @@ var draw = function draw(text, id) {
Object(d3__WEBPACK_IMPORTED_MODULE_1__["selectAll"])('cluster').append('text');
for (var j = 0; j < subG.nodes.length; j++) {
g.setParent(subG.nodes[j], subG.id);
_logger__WEBPACK_IMPORTED_MODULE_7__["logger"].warn('Setting subgraph', subG.nodes[j], _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(subG.nodes[j]), _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(subG.id));
g.setParent(_flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(subG.nodes[j]), _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(subG.id));
}
}
@ -58480,7 +58536,8 @@ var draw = function draw(text, id) {
var svg = Object(d3__WEBPACK_IMPORTED_MODULE_1__["select"])("[id=\"".concat(id, "\"]"));
svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink'); // Run the renderer. This is what draws the final graph.
svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');
_logger__WEBPACK_IMPORTED_MODULE_7__["logger"].warn(g); // Run the renderer. This is what draws the final graph.
var element = Object(d3__WEBPACK_IMPORTED_MODULE_1__["select"])('#' + id + ' g');
render(element, g);
@ -58503,8 +58560,8 @@ var draw = function draw(text, id) {
subG = subGraphs[i];
if (subG.title !== 'undefined') {
var clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect');
var clusterEl = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"]');
var clusterRects = document.querySelectorAll('#' + id + ' [id="' + _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(subG.id) + '"] rect');
var clusterEl = document.querySelectorAll('#' + id + ' [id="' + _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(subG.id) + '"]');
var xPos = clusterRects[0].x.baseVal.value;
var yPos = clusterRects[0].y.baseVal.value;
var _width = clusterRects[0].width.baseVal.value;
@ -58544,7 +58601,7 @@ var draw = function draw(text, id) {
var vertex = vert[key];
if (vertex.link) {
var node = Object(d3__WEBPACK_IMPORTED_MODULE_1__["select"])('#' + id + ' [id="' + key + '"]');
var node = Object(d3__WEBPACK_IMPORTED_MODULE_1__["select"])('#' + id + ' [id="' + _flowDb__WEBPACK_IMPORTED_MODULE_2__["default"].lookUpDomId(key) + '"]');
if (node) {
var link = document.createElementNS('http://www.w3.org/2000/svg', 'a');
@ -64159,7 +64216,7 @@ case 4:return 24;
break;
case 5:/* skip comments */
break;
case 6:/* skip comments */{ console.log('Crap after close'); }
case 6:/* skip comments */{ /*console.log('');*/ }
break;
case 7:return 19;
break;
@ -64357,7 +64414,6 @@ var draw = function draw(txt, id) {
}
var diagram = Object(d3__WEBPACK_IMPORTED_MODULE_0__["select"])('#' + id);
console.log('conf', conf);
Object(_utils__WEBPACK_IMPORTED_MODULE_4__["configureSvgSize"])(diagram, height, width, conf.useMaxWidth); // Set viewBox
elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height); // Fetch the default direction, use TD if none was found
@ -65367,7 +65423,6 @@ var activationCount = function activationCount(part) {
var count = 0;
for (i = 0; i < messages.length; i++) {
// console.warn(i, messages[i]);
if (messages[i].type === LINETYPE.ACTIVE_START) {
if (messages[i].from.actor === part) {
count++;
@ -65875,7 +65930,6 @@ var bounds = {
return this.verticalPos;
},
getBounds: function getBounds() {
console.log('here', this.data);
return {
bounds: this.data,
models: this.models
@ -66147,7 +66201,6 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
var draw = function draw(text, id) {
conf = _config__WEBPACK_IMPORTED_MODULE_6__["getConfig"]().sequence;
console.log('there ', conf);
_parser_sequenceDiagram__WEBPACK_IMPORTED_MODULE_3__["parser"].yy.clear();
_parser_sequenceDiagram__WEBPACK_IMPORTED_MODULE_3__["parser"].yy.setWrap(conf.wrap);
_parser_sequenceDiagram__WEBPACK_IMPORTED_MODULE_3__["parser"].parse(text + '\n');
@ -68103,8 +68156,7 @@ var addTitleAndBox = function addTitleAndBox(g, stateDef, altBkg) {
// .attr('y2', lineY)
// .attr('class', 'descr-divider');
var graphBox = g.node().getBBox(); // console.warn(width / 2, titleWidth / 2, getConfig().state.padding, orgBox);
// descrLine.attr('x2', graphBox.width + getConfig().state.padding);
var graphBox = g.node().getBBox(); // descrLine.attr('x2', graphBox.width + getConfig().state.padding);
if (stateDef.doc) {// cnsole.warn(
// stateDef.id,
@ -68216,8 +68268,7 @@ var _drawLongText = function _drawLongText(_text, x, y, g) {
if (tHeight === 0) {
var textBounds = span.node().getBBox();
tHeight += textBounds.height;
} // console.warn('textBounds', textBounds);
}
textHeight += tHeight;
span.attr('x', x + Object(_config__WEBPACK_IMPORTED_MODULE_5__["getConfig"])().state.noteMargin);
@ -68341,8 +68392,7 @@ var drawEdge = function drawEdge(elem, path, relation) {
x = _utils$calcLabelPosit.x,
y = _utils$calcLabelPosit.y;
var rows = _common_common__WEBPACK_IMPORTED_MODULE_4__["default"].getRows(relation.title); // console.warn(rows);
var rows = _common_common__WEBPACK_IMPORTED_MODULE_4__["default"].getRows(relation.title);
var titleHeight = 0;
var titleRows = [];
var maxWidth = 0;
@ -72371,10 +72421,6 @@ function () {
var getThemeVariables = function getThemeVariables(userOverrides) {
var theme = new Theme();
theme.calculate(userOverrides);
console.info('Theme(dark)', {
userOverrides: userOverrides,
theme: theme
});
return theme;
};
@ -72600,8 +72646,7 @@ function () {
var getThemeVariables = function getThemeVariables(userOverrides) {
var theme = new Theme();
theme.calculate(userOverrides); // console.info('Theme(default)', { userOverrides, theme });
theme.calculate(userOverrides);
return theme;
};
@ -72797,10 +72842,6 @@ function () {
var getThemeVariables = function getThemeVariables(userOverrides) {
var theme = new Theme();
theme.calculate(userOverrides);
console.info('Theme(forest)', {
userOverrides: userOverrides,
theme: theme
});
return theme;
};
@ -72869,8 +72910,7 @@ function () {
this.tertiaryColor = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["adjust"])(this.primaryColor, {
h: -160
}); // console.log('primary color', this.primaryColor, 'tertiary - color', this.tertiaryColor);
});
this.primaryBorderColor = Object(_theme_helpers__WEBPACK_IMPORTED_MODULE_1__["mkBorder"])(this.primaryColor, this.darkMode);
this.secondaryBorderColor = Object(_theme_helpers__WEBPACK_IMPORTED_MODULE_1__["mkBorder"])(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor = Object(_theme_helpers__WEBPACK_IMPORTED_MODULE_1__["mkBorder"])(this.tertiaryColor, this.darkMode); // this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);
@ -73051,10 +73091,6 @@ function () {
var getThemeVariables = function getThemeVariables(userOverrides) {
var theme = new Theme();
theme.calculate(userOverrides);
console.info('Theme(neutral)', {
userOverrides: userOverrides,
theme: theme
});
return theme;
};
@ -74002,7 +74038,6 @@ var calculateSvgSizeAttrs = function calculateSvgSizeAttrs(height, width, useMax
};
var configureSvgSize = function configureSvgSize(svgElem, height, width, useMaxWidth) {
var attrs = calculateSvgSizeAttrs(height, width, useMaxWidth);
console.log('svgElem', svgElem);
d3Attrs(svgElem, attrs);
};
/* harmony default export */ __webpack_exports__["default"] = ({

2
dist/mermaid.js.map vendored
View File

File diff suppressed because one or more lines are too long

8
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

16
docs/README.md
View File

@ -9,23 +9,25 @@
## About
<!-- <Main description> -->
Mermaid is a Javascript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
Mermaid simplifies complex diagrams. It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. The main purpose of Mermaid is to help Documentation catch up with Development.
> Doc-Rot is a Catch-22 that Mermaid helps to solve.
Diagramming and documentation costs precious developer time and gets outdated quickly.
But not having diagrams or docs ruins productivity and hurts organizational learning. <br/>
Mermaid addresses this problem by cutting the time, effort and tooling that is required to create modifiable diagrams and charts, for smarter and more reusable content.
The text definitions for Mermaid diagrams allows for it to be updated easily, it can also be made part of production scripts (and other pieces of code).
So less time needs to be spent on documenting, as a separate and laborious task. <br/>
Mermaid addresses this Catch-22 by cutting the time, effort and tooling that is required to create modifiable diagrams and charts, for smarter and more reusable content.
Mermaid, as a text-based diagramming tool allows for quick and easy updates, it can also be made part of production scripts (and other pieces of code), to make documentation much easier.
With Mermaid less time needs to be spent on making diagrams, as a separate documentation task. <br/>
Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaidjs/mermaid-live-editor), visit [Mermaid Overview](overview/n00b-overview.md) for the video tutorials.
> Mermaid is a Diagramming tool for everyone.
Even non-programmers can create diagrams through the [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor), Visit the [Tutorials Page](https://github.com/mermaid-js/mermaid/blob/develop/docs/getting-started/Tutorials.md) for the Live Editor video tutorials.
Want to see what can be built with mermaid, or what applications already support it? Read the [Integrations and Usages for Mermaid](overview/integrations.md).
For a more detailed introduction to Mermaid and some of it's more basic uses, look to the [Beginner's Guide](overview/n00b-overview.md) and [Usage](getting-started/usage.md).
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Version Log](tutorials-and-community/CHANGELOG.md)
🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/tutorials-and-community/development.md) | 📜 [Version Log](tutorials-and-community/CHANGELOG.md)
> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
@ -213,7 +215,7 @@ Together we could continue the work with things like:
- Adding more types of diagrams like mindmaps, ert diagrams, etc.
- Improving existing diagrams
Don't hesitate to contact me if you want to get involved.
Don't hesitate to contact me if you want to get involved!
## For contributors

8
docs/assets/_sidebar.md
View File

@ -18,10 +18,10 @@
- Contributions and Community
<!-- - [Development and Contribution](development.md)
- [Mermaid Versions](versionUpdates.md)
- [Changelog](CHANGELOG.md) -->
- [Adding Diagrams](newDiagram.md) -->
<!-- - [Development and Contribution](development.md)-->
<!-- - [Adding Diagrams](newDiagram.md)-->
<!-- - [Changelog](CHANGELOG.md) -->
- Diagrams and Syntax and Examples

6
docs/diagrams-and-syntax-and-examples/classDiagram.md
View File

@ -231,7 +231,7 @@ To specify the visibility of a class member (i.e. any attribute or method), thes
- `#` Protected
- `~` Package/Internal
> _note_ you can also include additional _classifers_ to a method definition by adding the following notations to the end of the method, i.e.: after the `()`:
> _note_ you can also include additional _classifiers_ to a method definition by adding the following notations to the end of the method, i.e.: after the `()`:
> - `*` Abstract e.g.: `someAbstractMethod()*`
> - `$` Static e.g.: `someStaticMethod()$`
@ -349,7 +349,7 @@ The different cardinality options are :
- `0..n` zero to n {where n>1}
- `1..n` one to n {where n>1}
Cardinality can be easily defined by placing cardinality text within qoutes `"` before(optional) and after(optional) a given arrow.
Cardinality can be easily defined by placing cardinality text within quotes `"` before(optional) and after(optional) a given arrow.
```
[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText
@ -606,7 +606,7 @@ The main styling of the class diagram is done with a preset number of css classe
| g.classGroup line | Styles for class diagram line |
| .classLabel .box | Styles for class label box |
| .classLabel .label | Styles for class label text |
| composition | Styles for componsition arrow head and arrow line |
| composition | Styles for composition arrow head and arrow line |
| aggregation | Styles for aggregation arrow head and arrow line(dashed or solid) |
| dependency | Styles for dependency arrow head and arrow line |

10
docs/diagrams-and-syntax-and-examples/flowchart.md
View File

@ -139,7 +139,7 @@ graph LR
id1((This is the text in the circle))
```
### A node in an asymetric shape
### A node in an asymmetric shape
```
graph LR
@ -356,7 +356,7 @@ graph LR
a --> b & c--> d
```
You can then describe dependencies in a very expressive way. Like the onliner below:
You can then describe dependencies in a very expressive way. Like the oneliner below:
```
graph TB
A & B--> C & D
@ -493,7 +493,7 @@ graph LR
### Entity codes to escape characters
It is possible to escape characters using the syntax examplified here.
It is possible to escape characters using the syntax exemplified here.
```
graph LR
@ -541,7 +541,7 @@ graph TB
end
```
You can also set an excplicit id for the subgraph.
You can also set an explicit id for the subgraph.
```
graph TB
@ -808,7 +808,7 @@ If a class is named default it will be assigned to all classes without specific
It is possible to add icons from fontawesome.
The icons are acessed via the syntax fa:#icon class name#.
The icons are accessed via the syntax fa:#icon class name#.
```
graph TD

6
docs/diagrams-and-syntax-and-examples/gantt.md
View File

@ -10,9 +10,11 @@ title: Gantt
## A note to users
Gantt Charts will record each scheduled task as one continuous bar that extends from the left to the right. The x axis represents time and the y records the different tasks and the order in which they are to be completed.
It is important to remember that when a date, day, or collection of dates specific to a task are "excluded", the Gantt Chart will accomodate those changes by extending an equal number of day, towards the right, not by creating a gap inside the task.
As shown here ![](https://raw.githubusercontent.com/NeilCuzon/mermaid/develop/docs/assets/img/Gantt-excluded-days-within.png)
However, if the excluded dates are between two tasks that are set to start consecutively, the excluded dates will be skipped graphically and left blank, and the following task will begin after the end of the excluded dates.
As shown here ![](https://raw.githubusercontent.com/NeilCuzon/mermaid/develop/docs/assets/img/Gantt-long-weekend-look.png)
@ -107,7 +109,7 @@ gantt
Add another diagram to demo page :48h
```
It is possible to set multiple depenendenies separated by space:
It is possible to set multiple dependencies separated by space:
```
gantt
apple :a, 2017-07-20, 1w
@ -339,7 +341,7 @@ mermaid.ganttConfig = {
Param | Descriotion | Default value
--- | --- | ---
mirrorActor|Turns on/off the rendering of actors below the diagram as well as above it|false
bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwantewd clipping which is why this config param exists.|1
bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists.|1
## Interaction

2
docs/diagrams-and-syntax-and-examples/n00b-syntaxReference.md
View File

@ -8,7 +8,7 @@ title: Diagram syntax intro
If you are new to mermaid, read the [Getting Started](../getting-started/n00b-gettingStarted.md) and [Overview](../overview/n00b-overview.md) sections, to learn the basics of mermaid.
Video Tutorials can be found at the bottom of the Overview Section.
This section is a list of diagram types supported by mermaid. Below is a list of links to aricles that explain the syntax of the diagrams or charts that can be called.
This section is a list of diagram types supported by mermaid. Below is a list of links to articles that explain the syntax of the diagrams or charts that can be called.
They also detail how diagrams can be defined, or described in the manner with which the diagram is to be rendered by the renderer.

2
docs/diagrams-and-syntax-and-examples/pie.md
View File

@ -30,7 +30,7 @@ Drawing a pie chart is really simple in mermaid.
- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is ***OPTIONAL***
- Followed by dataSet
- `label` for a section in the pie diagram within `" "` quotes.
- Followed by `:` semi-colon as separator
- Followed by `:` colon as separator
- Followed by `positive numeric value` (supported upto two decimal places)
[pie]

6
docs/diagrams-and-syntax-and-examples/sequenceDiagram.md
View File

@ -508,11 +508,11 @@ mermaid.sequenceConfig = {
};
```
### Possible configuration params:
### Possible configuration parameters:
| Param | Description | Default value |
| Parameter | Description | Default value |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ |
| mirrorActors | Turns on/off the rendering of actors below the diagram as well as above it | false |
| mirrorActors | Turns on/off the rendering of actors below the diagram as well as above it | false |
| bottomMarginAdj | Adjusts how far down the graph ended. Wide borders styles with css could generate unwanted clipping which is why this config param exists. | 1 |
| actorFontSize | Sets the font size for the actor's description | 14 |
| actorFontFamily | Sets the font family for the actor's description | "Open-Sans", "sans-serif" |

15
docs/getting-started/Tutorials.md
View File

@ -1,24 +1,21 @@
# Tutorials
This is list of publicly available Tutorials in Mermaid. This is intended as a basic introduction for the use of the Live Editor and HTML with mermaid.
This is list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.
For the purposes, the Live-Editor is capable of taking care of all diagramming needs, and these are the most common use cases for it.
For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor), to quickly and easily render a diagram.
## Live-Editor Tutorials
The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.
https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s
[GitLab Unfiltered: How to Create Mermaid Diagrams](https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s)
https://www.youtube.com/watch?v=5RQqht3NNSE
[GitLab Unfiltered: Emilie adds a mermaid diagram to the handbook](https://www.youtube.com/watch?v=5RQqht3NNSE)
https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s
[World of Zero: I Learn How To Build Flowcharts and Signal Diagram's in Mermaid.JS](https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s)
https://www.youtube.com/watch?v=9HZzKkAqrX8
[Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s
https://www.youtube.com/watch?v=9HZzKkAqrX8
## Mermaid with HTML:
Examples are provided in [Gettting Started](n00b-gettingStarted.md)

2
docs/getting-started/n00b-gettingStarted.md
View File

@ -235,7 +235,7 @@ This method is similar to 3, if only a little more involved. The difference may
**Three additional comments from Knut Sveidqvist, creator of mermaid:**
- In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowdays we can place it directly in `<body>` as seen above. However, older parts of the documentation frequently reflects the previous way which still works.
- In early versions of mermaid, the `<script src>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it directly in `<body>` as seen above. However, older parts of the documentation frequently reflects the previous way which still works.
- We initialize the mermaid rendering with `mermaid.initialize()` directly in the html code. In principle this could be done through placing `mermaid.initialize()` inside of `mermaid.min.js`. We would then eliminate the need for this explicit line in the html. However, there are use cases where we do want to separate the two steps. Sometimes we want full control over when we start looking for `<div>`tags inside the web page with `mermaid.initialize()`, for example when we think that all `<div>` tags may not have been loaded by the time `mermaid.min.js` runs.

79
docs/getting-started/theming.md
View File

@ -108,7 +108,7 @@ Leaving it empty will set all variable values to default.
Color definitions have certain interactions in mermaid, this is in order to ensure visibility for diagrams. mermaid will adjust some variables automatically, when colors are changed in order to compensate and maintain readability.
**The Default Value Column** to the right of the Variable coloumn will denote the Variable paired/associated with the Variable on the left and the nature of this pairing or association. If it for instance says primaryColor it means that it gets primaryColor as default value. If it says "based on primaryColor" it means that it is calculated/ derived from primaryColor. This calculation can be primary color inversion, a change of hue, darkening or lightening by 10%, etc.
**The Default Value Column** to the right of the Variable column will denote the Variable paired/associated with the Variable on the left and the nature of this pairing or association. If it for instance says primaryColor it means that it gets primaryColor as default value. If it says "based on primaryColor" it means that it is calculated/ derived from primaryColor. This calculation can be primary color inversion, a change of hue, darkening or lightening by 10%, etc.
You can create your own themes, by changing any of the given variables below. If you are using a dark background, set dark mode to true to adjust the colors. It is possible to override the calculations using the variable names below, with `%%init%%` if you wish to style it differently.
@ -129,14 +129,14 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
| secondaryColor | based on primaryColor | * | |
| tertiaryColor | based on primaryColor | * | |
| primaryBorderColor | based on primaryColor | * | Color to be used as border in nodes using primaryColor |
| primaryTextColor | based on darkMode #ddd/#333 | * | Color to be used as text color in nodesusing primaryColor |
| primaryTextColor | based on darkMode #ddd/#333 | * | Color to be used as text color in nodes using primaryColor |
| secondaryBorderColor | based on secondaryColor | * | Color to be used as border in nodes using secondaryColor |
| secondaryTextColor | based on secondaryColor | * | Color to be used as text color in nodesusing secondaryColor |
| secondaryTextColor | based on secondaryColor | * | Color to be used as text color in nodes using secondaryColor |
| tertiaryBorderColor | based on tertiaryColor | * | Color to be used as border in nodes using tertiaryColor |
| tertiaryTextColor | based on tertiaryColor | * | Color to be used as text color in nodesusing tertiaryColor |
| tertiaryTextColor | based on tertiaryColor | * | Color to be used as text color in nodes using tertiaryColor |
| noteBkgColor | #fff5ad | | Color used as background in notes |
| noteTextColor | #333 | | Text color in note rectangless. |
| noteBorderColor | based on noteBkgColor | * | Border color in note rectangless. |
| noteTextColor | #333 | | Text color in note rectangles. |
| noteBorderColor | based on noteBkgColor | * | Border color in note rectangles. |
| lineColor | based on background | * | |
| textColor | based on primaryTextColor | * | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram |
| mainBkg | based on primaryColor | * | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc |
@ -247,7 +247,7 @@ Variables that are unique to some diagrams can be affected by changes in Theme V
**This got a bit too dark and bit too colorful. With some easy steps this can be fixed:
* Make the primary color a little lighter
* set the teriary color to a redish shade as well
* set the tertiary color to a reddish shade as well
* make the edge label background differ from the subgraph by setting the edgeLabelBackground
@ -336,7 +336,23 @@ In the following examples, the directive `init` is used, with the `theme` being
### Flowchart (beta)
```
mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[Another]
C ==>|One| D[Laptop]
C x--x|Two| E[iPhone]
C o--o|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
```
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
@ -355,10 +371,26 @@ mermaid
```
### Sequence diagram
```
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
sequenceDiagram
autonumber
par Action 1
Alice->>John: Hello John, how are you?
and Action 2
Alice->>Bob: Hello Bob, how are you?
end
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
Note right of John: John is perceptive
John-->>-Alice: I feel great!
loop Every minute
John-->Alice: Great!
end
```
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
sequenceDiagram
autonumber
par Action 1
@ -376,8 +408,32 @@ mermaid
end
```
### class diagram
### Class diagram
```
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
classDiagram
Animal "1" <|-- Duck
Animal <|-- Fish
Animal <--o Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
```
```mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
@ -468,7 +524,6 @@ gantt
### State diagram
```
mermaid
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram
[*] --> Active

10
docs/getting-started/usage.md
View File

@ -17,14 +17,14 @@ Please note that you can switch versions through the dropdown box at the top rig
## Using mermaid
For the majority of beginners, using the live editor or suppoting mermaid on a webpage would cover their uses for mermaid.
For the majority of beginners, using the live editor or supporting mermaid on a webpage would cover their uses for mermaid.
## Installing and Hosting mermaid on a webpage
### Using the npm package
```
1.You will need to insall node v10 or 12, which would have npm.
1.You will need to install node v10 or 12, which would have npm.
2. download yarn using npm.
@ -121,9 +121,9 @@ Mermaid can load multiple diagrams, in the same page.
This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
```
**If you are taking resposibility for the diagram source security you can set the `securityLevel` to a value of your choosing . By doing this clicks and tags are allowed.**
**If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . By doing this clicks and tags are allowed.**
## To chage `securityLevel` with `mermaidAPI.initialize`:
## To change `securityLevel` with `mermaidAPI.initialize`:
```javascript
mermaidAPI.initialize({
@ -198,7 +198,7 @@ mermaid fully supports webpack. Here is a [working demo](https://github.com/merm
## API usage
The main idea of the API is to be able to call a render function with the graph defintion as a string. The render function
The main idea of the API is to be able to call a render function with the graph definition as a string. The render function
will render the graph and call a callback with the resulting svg code. With this approach it is up to the site creator to
fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.

2
docs/overview/integrations.md
View File

@ -7,7 +7,7 @@ title: Use-Cases and Integrations
The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions
They also serve as proof of concept, for the variety of things that cen be built with mermaid.
They also serve as proof of concept, for the variety of things that can be built with mermaid.
## Productivity

25
docs/overview/n00b-overview.md
View File

@ -5,21 +5,20 @@ title: Overview
# Overview for Beginners
## There is no explanation like a Good Diagram
## Explaining with a Diagram
A picture is worth a thousand words, a good diagram would be worth more. There is no disputing that they are indeed very useful. Yet very few people use them, even fewer still do so, for documentation.
A picture is worth a thousand words, a good diagram would be worth more. There is no disputing that they are indeed very useful. Yet very few people use them, even fewer still do so for documentation. Mainly because it takes too much time that could be used for more important functions.
mermaid aims to change that.
## Creating and Maintaining Diagrams should not be an expensive and frustrating process.
## Creating and Maintaining Diagrams
Anyone who has used Visio, or (God Forbid) Excel to make a Gantt Chart, knows how hard it is to make, edit and maintain good visualizations.
In an environment of constantly changing information , diagrams/charts become obsolete/inaccurate very fast. This hobbles the information transfer and productivity in teams.
In an environment of constantly changing information , diagrams/charts are both very important and also become obsolete/inaccurate very fast. This catch-22 hobbles the information transfer and productivity in teams.
# Doc Rot kills Diagrams
# Doc Rot in Diagrams
The fast setting Doc-Rot in diagrams makes it quite hard to rationalize taking hours in a desktop application, to produce a diagram that you would need to recreate again the following week in order to account for updates and changes in the app you are documenting. Yet that is often the reality for diagrams and charts and the people who make them.
Doc-Rot is quite quick on diagrams makes, after a change is made, it quite hard to rationalize taking hours in a desktop application, to produce a diagram that you would need to recreate again the following week in order to account for updates and changes in the app you are documenting. Yet that is often the reality for diagrams and charts and the people who make them.
mermaid seeks to change that. mermaid is a javascript based tool that utilizes a markdown inspired syntax to generate documentation, which is actually quicker, less complicated and more convenient than most traditional diagramming software. This is a relatively straightforward solution to a major hurdle in software teams.
@ -27,7 +26,7 @@ mermaid seeks to change that. mermaid is a javascript based tool that utilizes a
**Mermaid definitions**
>These are the instrunctions for how the diagram is to rendered, written in mermaid, which is based on Markdown. These can be found inside `<div>` tags, with the `class=mermaid`.
>These are the instructions for how the diagram is to rendered, written in mermaid, which is based on Markdown. These can be found inside `<div>` tags, with the `class=mermaid`.
```html
<div class="mermaid">
@ -45,7 +44,7 @@ mermaid seeks to change that. mermaid is a javascript based tool that utilizes a
**Nodes**
>These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be refered to often in the instructions. For Diagram Specific Syntax and Instructions, refer to
>These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred to often in the instructions. For Diagram Specific Syntax and Instructions, refer to
## Advantages of Using Mermaid
@ -63,13 +62,13 @@ mermaid solves this by cutting the time, effort and tooling that is required to
Because, the text base for diagrams allows for it to be updated easily, it can also be made part of production scripts (and other pieces of code). So less time needs be spent on documenting, as a separate task.
## mermaid helps Documentation catch up with Development, in quickly changing projects.
## Catching up with Development
Being based on markdown, mermaid can be used, not only by accomplished front-end developers, but by most computer savvy people to render simple diagrams, at much faster speeds.
Being based on markdown, mermaid can be used, not only by accomplished front-end developers, but by most computer savvy people to render diagrams, at much faster speeds.
In fact one can pick up the syntax for it quite easily from the examples given and there are many tutorials in the internet.
## mermaid is for everyone.
Video [Tutorials](./Tutorials.md) are also available for the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/).
## Mermaid is for everyone.
Video [Tutorials](./getting-started/Tutorials.md) are also available for the mermaid [live editor](https://mermaid-js.github.io/mermaid-live-editor/).
For information on how to use mermaid, click [here](https://mermaid-js.github.io/mermaid/#/n00b-gettingStarted).
Alternatively, you could also view the [integrations and uses](https://mermaid-js.github.io/mermaid/#/./integrations), to see how mermaid is used.

18
docs/tutorials-and-community/CHANGELOG.md
View File

@ -122,13 +122,13 @@ This was introduced in version 8.2 as a security improvement, aimed at preventin
**Notes:**
- **strict**: (**default**) tags in text are encoded, click functionality is disabeled
- **strict**: (**default**) tags in text are encoded, click functionality is disabled
- **loose**: tags in text are allowed, click functionality is enabled
- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
⚠️ **Note**: This changes the default behaviour of mermaid so that after upgrade to 8.2, if the `securityLevel` is not configured, tags in flowcharts are encoded as tags and clicking is prohibited.
If you are taking resposibility for the diagram source security you can set the `securityLevel` to a value of your choosing.
If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing.
By doing this clicks and tags are again allowed.
### To change `securityLevel` with `mermaidAPI.initialize`:
@ -245,7 +245,7 @@ By doing this clicks and tags are again allowed.
- issue when using sphinxcontrib-mermaid extension for sphinx [\#507](https://github.com/knsv/mermaid/issues/507)
- layout of docs page looks broken [\#504](https://github.com/knsv/mermaid/issues/504)
- Problem showing graph with php on localhost [\#502](https://github.com/knsv/mermaid/issues/502)
- logLevel's option doesnt work at 7.0.0 [\#501](https://github.com/knsv/mermaid/issues/501)
- logLevel's option doesn't work at 7.0.0 [\#501](https://github.com/knsv/mermaid/issues/501)
- How do I get the log for a render or parse attempt? [\#500](https://github.com/knsv/mermaid/issues/500)
- Mermaid neutral style style to built in latest release [\#499](https://github.com/knsv/mermaid/issues/499)
- Any plans for adding a typescript definition file? [\#495](https://github.com/knsv/mermaid/issues/495)
@ -278,7 +278,7 @@ By doing this clicks and tags are again allowed.
- Linkstyle stroke does not work [\#410](https://github.com/knsv/mermaid/issues/410)
- flowchart id's with dots in them .. break links [\#408](https://github.com/knsv/mermaid/issues/408)
- Flowchart: Link text beginning with lowercase 'o' causes flowchart to break [\#407](https://github.com/knsv/mermaid/issues/407)
- Some chinese character will case Safari no responding. [\#405](https://github.com/knsv/mermaid/issues/405)
- Some Chinese character will case Safari no responding. [\#405](https://github.com/knsv/mermaid/issues/405)
- Cannot center-justify text in nodes? [\#397](https://github.com/knsv/mermaid/issues/397)
- Edge labels should have white background in live editor [\#396](https://github.com/knsv/mermaid/issues/396)
- Live editor does not support activate/deactivate [\#394](https://github.com/knsv/mermaid/issues/394)
@ -316,12 +316,12 @@ By doing this clicks and tags are again allowed.
- CSS clash [\#292](https://github.com/knsv/mermaid/issues/292)
- Mermaid does not work in Chrome 48 [\#281](https://github.com/knsv/mermaid/issues/281)
- circle and ellipse cannot change color by classDef [\#271](https://github.com/knsv/mermaid/issues/271)
- npm run watch doesn’t work due missing dependencies [\#266](https://github.com/knsv/mermaid/issues/266)
- npm run watch doesn't work due missing dependencies [\#266](https://github.com/knsv/mermaid/issues/266)
- label out of node [\#262](https://github.com/knsv/mermaid/issues/262)
- IE11 Support issue [\#261](https://github.com/knsv/mermaid/issues/261)
- mermaid without browser [\#260](https://github.com/knsv/mermaid/issues/260)
- Insufficient capacity of gantt diagrams [\#226](https://github.com/knsv/mermaid/issues/226)
- some WARN about installion [\#222](https://github.com/knsv/mermaid/issues/222)
- some WARN about installation [\#222](https://github.com/knsv/mermaid/issues/222)
- Live editor offline access [\#217](https://github.com/knsv/mermaid/issues/217)
- suggest: code highlight mode config for editors [\#212](https://github.com/knsv/mermaid/issues/212)
- Uncaught RangeError: Maximum call stack size exceeded [\#189](https://github.com/knsv/mermaid/issues/189)
@ -457,7 +457,7 @@ By doing this clicks and tags are again allowed.
- Fix spelling [\#447](https://github.com/knsv/mermaid/pull/447) ([jawn](https://github.com/jawn))
- added tests and fix cli css style selector lowercase problem [\#445](https://github.com/knsv/mermaid/pull/445) ([whyzdev](https://github.com/whyzdev))
- Update d3.js [\#441](https://github.com/knsv/mermaid/pull/441) ([hetz](https://github.com/hetz))
- adde tests to reproduce \#434 in flowchart [\#439](https://github.com/knsv/mermaid/pull/439) ([whyzdev](https://github.com/whyzdev))
- added tests to reproduce \#434 in flowchart [\#439](https://github.com/knsv/mermaid/pull/439) ([whyzdev](https://github.com/whyzdev))
- Code Climate config [\#437](https://github.com/knsv/mermaid/pull/437) ([larkinscott](https://github.com/larkinscott))
- fix gantt and sequence digram cli cfg [\#435](https://github.com/knsv/mermaid/pull/435) ([whyzdev](https://github.com/whyzdev))
- fix gantt chart cli configuration broken [\#433](https://github.com/knsv/mermaid/pull/433) ([whyzdev](https://github.com/whyzdev))
@ -485,7 +485,7 @@ By doing this clicks and tags are again allowed.
- Docs css: code hard to read [\#324](https://github.com/knsv/mermaid/issues/324)
- About Markpad integration [\#323](https://github.com/knsv/mermaid/issues/323)
- How to link backwords in flowchat? [\#321](https://github.com/knsv/mermaid/issues/321)
- How to link backwards in flowchart? [\#321](https://github.com/knsv/mermaid/issues/321)
- Help with editor [\#310](https://github.com/knsv/mermaid/issues/310)
- +1 [\#293](https://github.com/knsv/mermaid/issues/293)
- Basic chart does not render on Chome, but does in Firefox [\#290](https://github.com/knsv/mermaid/issues/290)
@ -897,7 +897,7 @@ By doing this clicks and tags are again allowed.
- Class based styling [\#62](https://github.com/knsv/mermaid/pull/62) ([bjowes](https://github.com/bjowes))
- Fix typos [\#60](https://github.com/knsv/mermaid/pull/60) ([sublimino](https://github.com/sublimino))
- Included .DS\_Store in gitignore [\#57](https://github.com/knsv/mermaid/pull/57) ([alvynmcq](https://github.com/alvynmcq))
- Improves readablity discussed in issue \#38 [\#56](https://github.com/knsv/mermaid/pull/56) ([vijay40](https://github.com/vijay40))
- Improves readability discussed in issue \#38 [\#56](https://github.com/knsv/mermaid/pull/56) ([vijay40](https://github.com/vijay40))
- Added a linting task for gulp [\#43](https://github.com/knsv/mermaid/pull/43) ([serv](https://github.com/serv))
## [0.2.15](https://github.com/knsv/mermaid/tree/0.2.15) (2014-12-05)

2
docs/tutorials-and-community/newDiagram.md
View File

@ -1,5 +1,5 @@
---
sort: 1
sort: 2
title: Adding a New Diagram/Chart
---

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "mermaid",
"version": "8.7.0",
"version": "8.8.2",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"main": "dist/mermaid.core.js",
"keywords": [
@ -28,7 +28,7 @@
"dev": "webpack-dev-server --config webpack.config.e2e.js",
"test": "yarn lint && jest src/.*",
"test:watch": "jest --watch src",
"prepublishOnly": "yarn build && yarn test && yarn e2e",
"prepublishOnly": "yarn build && yarn test",
"prepare": "yarn build"
},
"repository": {

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

@ -10,7 +10,7 @@ const rect = (parent, node) => {
// Add outer g element
const shapeSvg = parent
.insert('g')
.attr('class', 'cluster')
.attr('class', 'cluster' + (node.class ? ' ' + node.class : ''))
.attr('id', node.id);
// add the rect

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

@ -86,7 +86,8 @@ const createLabel = (_vertexText, style, isTitle, isNode) => {
label: vertexText.replace(
/fa[lrsb]?:fa-[\w-]+/g,
s => `<i class='${s.replace(':', ' ')}'></i>`
)
),
labelStyle: style.replace('fill:', 'color:')
};
let vertexNode = addHtmlLabel(node);
// vertexNode.parentNode.removeChild(vertexNode);

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

@ -387,7 +387,8 @@ export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph)
.append('path')
.attr('d', lineFunction(lineData))
.attr('id', edge.id)
.attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''));
.attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
.attr('style', edge.style);
// DEBUG code, adds a red circle at each edge coordinate
// edge.points.forEach(point => {

3
src/dagre-wrapper/mermaid-graphlib.spec.js
View File

@ -43,8 +43,6 @@ describe('Graphlib decorations', () => {
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 () {
@ -66,7 +64,6 @@ describe('Graphlib decorations', () => {
g.setEdge('a', 'b');
g.setEdge('C1', 'C2');
console.log(g.nodes())
adjustClustersAndEdges(g);
logger.info(g.edges())
expect(validate(g)).toBe(true);

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

@ -414,7 +414,6 @@ export const defaultStyle = function() {
* Clears the internal graph db so that a new graph can be parsed.
*/
export const addSubGraph = function(_id, list, _title) {
// logger.warn('addSubgraph', _id, list, _title);
let id = _id.trim();
let title = _title;
if (_id === _title && _title.match(/\s/)) {
@ -454,21 +453,25 @@ export const addSubGraph = function(_id, list, _title) {
subCount = subCount + 1;
const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [] };
console.log('Adding', subGraph.id, subGraph.nodes);
/**
* Deletes an id from all subgraphs
*/
const del = _id => {
subGraphs.forEach(sg => {
const pos = sg.nodes.indexOf(_id);
if (pos >= 0) {
console.log(sg.nodes, pos, _id);
sg.nodes.splice(pos, 1);
}
});
};
// Removes the members of this subgraph from any other subgraphs, a node only belong to one subgraph
subGraph.nodes.forEach(_id => del(_id));
console.log(subGraph.nodes);
// const del = _id => {
// subGraphs.forEach(sg => {
// const pos = sg.nodes.indexOf(_id);
// if (pos >= 0) {
// sg.nodes.splice(pos, 1);
// }
// });
// };
// // Removes the members of this subgraph from any other subgraphs, a node only belong to one subgraph
// subGraph.nodes.forEach(_id => del(_id));
// Remove the members in the new subgraph if they already belong to another subgraph
subGraph.nodes = makeUniq(subGraph, subGraphs).nodes;
subGraphs.push(subGraph);
subGraphLookup[id] = subGraph;
return id;
@ -666,6 +669,30 @@ const destructLink = (_str, _startStr) => {
return info;
};
// Todo optimizer this by caching existing nodes
const exists = (allSgs, _id) => {
let res = false;
allSgs.forEach(sg => {
const pos = sg.nodes.indexOf(_id);
if (pos >= 0) {
res = true;
}
});
return res;
};
/**
* Deletes an id from all subgraphs
*/
const makeUniq = (sg, allSubgraphs) => {
const res = [];
sg.nodes.forEach((_id, pos) => {
if (!exists(allSubgraphs, _id)) {
res.push(sg.nodes[pos]);
}
});
return { nodes: res };
};
export default {
parseDirective,
defaultConfig: () => configApi.defaultConfig.flowchart,
@ -695,5 +722,7 @@ export default {
destructLink,
lex: {
firstGraph
}
},
exists,
makeUniq
};

44
src/diagrams/flowchart/flowDb.spec.js Normal file
View File

@ -0,0 +1,44 @@
import flowDb from './flowDb';
describe('flow db subgraphs', () => {
let subgraphs;
beforeEach( ()=>{
subgraphs = [
{nodes:['a', 'b', 'c', 'e']},
{nodes:['f', 'g', 'h']},
{nodes:['i', 'j']},
{nodes:['k']},
];
});
describe('exist', () => {
it('should return true when the is exists in a subgraph', () => {
expect(flowDb.exists(subgraphs, 'a')).toBe(true);
expect(flowDb.exists(subgraphs, 'h')).toBe(true);
expect(flowDb.exists(subgraphs, 'j')).toBe(true);
expect(flowDb.exists(subgraphs, 'k')).toBe(true);
});
it('should return false when the is exists in a subgraph', () => {
expect(flowDb.exists(subgraphs, 'a2')).toBe(false);
expect(flowDb.exists(subgraphs, 'l')).toBe(false);
});
});
describe('makeUniq', () => {
it('should remove ids from sungraph that already exists in another subgraph even if it gets empty', () => {
const subgraph = flowDb.makeUniq({nodes:['i', 'j']}, subgraphs);
expect(subgraph.nodes).toEqual([]);
});
it('should remove ids from sungraph that already exists in another subgraph', () => {
const subgraph = flowDb.makeUniq({nodes:['i', 'j', 'o']}, subgraphs);
expect(subgraph.nodes).toEqual(['o']);
});
it('should not remove ids from subgraph if they are unique', () => {
const subgraph = flowDb.makeUniq({nodes:['q', 'r', 's']}, subgraphs);
expect(subgraph.nodes).toEqual(['q', 'r', 's']);
});
});
});

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

@ -193,7 +193,7 @@ export const addEdges = function(edges, g) {
var linkNameStart = 'LS-' + edge.start;
var linkNameEnd = 'LE-' + edge.end;
const edgeData = {};
const edgeData = { style: '', labelStyle: '' };
edgeData.minlen = edge.length || 1;
//edgeData.id = 'id' + cnt;
@ -227,45 +227,40 @@ export const addEdges = function(edges, g) {
break;
}
// logger.info('apa', edgeData, edge);
// edgeData.arrowTypeStart = edge.arrowTypeStart;
// edgeData.arrowTypeStart = edge.arrowTypeStart;
// edgeData.arrowType = edgeData.arrowTypeEnd;
// logger.info('apa', edgeData, edge);
let style = '';
let labelStyle = '';
switch (edge.stroke) {
case 'normal':
style = 'fill:none;';
if (typeof defaultStyle !== 'undefined') {
style = defaultStyle;
}
if (typeof defaultLabelStyle !== 'undefined') {
labelStyle = defaultLabelStyle;
}
edgeData.thickness = 'normal';
edgeData.pattern = 'solid';
break;
case 'dotted':
edgeData.thickness = 'normal';
edgeData.pattern = 'dotted';
edgeData.style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
break;
case 'thick':
edgeData.thickness = 'thick';
edgeData.pattern = 'solid';
edgeData.style = 'stroke-width: 3.5px;fill:none;';
break;
}
if (typeof edge.style !== 'undefined') {
const styles = getStylesFromArray(edge.style);
style = styles.style;
labelStyle = styles.labelStyle;
} else {
switch (edge.stroke) {
case 'normal':
style = 'fill:none';
if (typeof defaultStyle !== 'undefined') {
style = defaultStyle;
}
if (typeof defaultLabelStyle !== 'undefined') {
labelStyle = defaultLabelStyle;
}
edgeData.thickness = 'normal';
edgeData.pattern = 'solid';
break;
case 'dotted':
edgeData.thickness = 'normal';
edgeData.pattern = 'dotted';
break;
case 'thick':
edgeData.thickness = 'thick';
edgeData.pattern = 'solid';
break;
}
}
edgeData.style = style;
edgeData.labelStyle = labelStyle;
edgeData.style = edgeData.style += style;
edgeData.labelStyle = edgeData.labelStyle += labelStyle;
if (typeof edge.interpolate !== 'undefined') {
edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
@ -282,21 +277,21 @@ export const addEdges = function(edges, g) {
} else {
edgeData.arrowheadStyle = 'fill: #333';
edgeData.labelpos = 'c';
if (getConfig().flowchart.htmlLabels && false) { // eslint-disable-line
edgeData.labelType = 'html';
edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text}</span>`;
} else {
edgeData.labelType = 'text';
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';
}
edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
}
}
// if (getConfig().flowchart.htmlLabels && false) {
// // eslint-disable-line
// edgeData.labelType = 'html';
// edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text}</span>`;
// } else {
edgeData.labelType = 'text';
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;';
}
edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
// }
edgeData.id = linkId;
edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;

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

@ -230,7 +230,10 @@ export const addEdges = function(edges, g) {
if (getConfig().flowchart.htmlLabels) {
edgeData.labelType = 'html';
edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text}</span>`;
edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}">${edge.text.replace(
/fa[lrsb]?:fa-[\w-]+/g,
s => `<i class='${s.replace(':', ' ')}'></i>`
)}</span>`;
} else {
edgeData.labelType = 'text';
edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');

1
src/diagrams/flowchart/parser/flow-huge.spec.js
View File

@ -21,7 +21,6 @@ describe('[Text] when parsing', () => {
expect(edges[0].type).toBe('arrow_point');
expect(edges.length).toBe(47917);
console.log(vert);
expect(Object.keys(vert).length).toBe(2);
});

3
src/diagrams/flowchart/parser/flow.spec.js
View File

@ -121,7 +121,6 @@ describe('when parsing ', function() {
const res = flow.parser.parse(statement);
const vertices = flow.parser.yy.getVertices();
console.log(vertices);
const classes = flow.parser.yy.getClasses();
expect(vertices['node1TB'].id).toBe('node1TB');
});
@ -132,7 +131,6 @@ describe('when parsing ', function() {
statement = statement + 'graph TD;A--x|text including URL space|B;';
const res = flow.parser.parse(statement);
const vertices = flow.parser.yy.getVertices();
console.log(vertices);
const classes = flow.parser.yy.getClasses();
expect(vertices['A'].id).toBe('A');
});
@ -142,7 +140,6 @@ describe('when parsing ', function() {
statement = statement + 'graph TB;subgraph "number as labels";1;end;';
const res = flow.parser.parse(statement);
const vertices = flow.parser.yy.getVertices();
console.log(vertices);
const classes = flow.parser.yy.getClasses();
expect(vertices['1'].id).toBe('1');
});

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

@ -244,8 +244,9 @@ describe('when parsing subgraphs', function() {
const res = flow.parser.parse(`flowchart TB
subgraph A
b-->B
a-->c
a
end
a-->c
subgraph B
c
end`);
@ -288,7 +289,6 @@ describe('when parsing subgraphs', function() {
expect(subgraphA.nodes).not.toContain('c');
});
it('should handle nested subgraphs 3', function() {
console.log('#3');
const res = flow.parser.parse(`flowchart TB
subgraph B
c
@ -304,7 +304,6 @@ describe('when parsing subgraphs', function() {
const subgraphA = filter(subgraphs,o => o.id === 'A')[0];
const subgraphB = filter(subgraphs,o => o.id === 'B')[0];
console.log(subgraphB.nodes)
expect(subgraphB.nodes[0]).toBe('c');
expect(subgraphA.nodes).toContain('B');
expect(subgraphA.nodes).toContain('b');

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

@ -20,7 +20,7 @@
<type_directive,arg_directive>\}\%\% { this.popState(); this.popState(); return 'close_directive'; }
<arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive';
\%\%(?!\{)[^\n]* /* skip comments */
[^\}]\%\%[^\n]* /* skip comments */{ console.log('Crap after close'); }
[^\}]\%\%[^\n]* /* skip comments */{ /*console.log('');*/ }
[\n\r]+ return 'NEWLINE';
\%\%[^\n]* /* do nothing */
[\s]+ /* ignore */

6
src/diagrams/pie/parser/pie.spec.js
View File

@ -17,7 +17,6 @@ describe('when parsing pie', function() {
"ash" : 100
`);
const sections = pieDb.getSections();
console.log('sections: ', sections);
const section1 = sections['ash'];
expect(section1).toBe(100);
});
@ -27,7 +26,6 @@ describe('when parsing pie', function() {
"bat" : 40
`);
const sections = pieDb.getSections();
console.log('sections: ', sections);
const section1 = sections['ash'];
expect(section1).toBe(60);
});
@ -38,7 +36,6 @@ describe('when parsing pie', function() {
"bat" : 40
`);
const sections = pieDb.getSections();
console.log('sections: ', sections);
const section1 = sections['ash'];
expect(section1).toBe(60);
});
@ -50,7 +47,6 @@ pie
"bat" : 40
`);
const sections = pieDb.getSections();
console.log('sections: ', sections);
const section1 = sections['ash'];
expect(section1).toBe(60);
});
@ -62,7 +58,6 @@ pie
`);
const sections = pieDb.getSections();
const title = pieDb.getTitle();
console.log('sections: ', sections);
const section1 = sections['ash'];
expect(section1).toBe(60);
expect(title).toBe('a 60/40 pie');
@ -74,7 +69,6 @@ pie
"bat" : 40
`);
const sections = pieDb.getSections();
console.log('sections: ', sections);
const section1 = sections['ash'];
expect(section1).toBe(60.67);
});

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

@ -44,7 +44,6 @@ export const draw = (txt, id) => {
}
const diagram = select('#' + id);
console.log('conf', conf);
configureSvgSize(diagram, height, width, conf.useMaxWidth);
// Set viewBox

1
src/diagrams/sequence/sequenceDb.js
View File

@ -43,7 +43,6 @@ const activationCount = part => {
let i;
let count = 0;
for (i = 0; i < messages.length; i++) {
// console.warn(i, messages[i]);
if (messages[i].type === LINETYPE.ACTIVE_START) {
if (messages[i].from.actor === part) {
count++;

2
src/diagrams/sequence/sequenceDiagram.spec.js
View File

@ -942,7 +942,6 @@ describe('when rendering a sequenceDiagram APA', function() {
wrap: false,
mirrorActors: false
};
console.warn('Set site config');
configApi.setSiteConfig({ logLevel: 5, sequence: conf });
});
let conf;
@ -1249,7 +1248,6 @@ Bob->>Alice: Fine!`;
const { bounds, models } = renderer.bounds.getBounds();
const msgs = parser.yy.getMessages();
const mermaid = mermaidAPI.getConfig();
console.log(mermaid)
expect(bounds.startx).toBe(-(conf.width / 2) - conf.actorMargin / 2);
expect(bounds.starty).toBe(0);
expect(mermaid.theme).toBe('dark');

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

@ -169,7 +169,6 @@ export const addTitleAndBox = (g, stateDef, altBkg) => {
// .attr('class', 'descr-divider');
const graphBox = g.node().getBBox();
// console.warn(width / 2, titleWidth / 2, getConfig().state.padding, orgBox);
// descrLine.attr('x2', graphBox.width + getConfig().state.padding);
if (stateDef.doc) {
@ -328,7 +327,6 @@ const _drawLongText = (_text, x, y, g) => {
const textBounds = span.node().getBBox();
tHeight += textBounds.height;
}
// console.warn('textBounds', textBounds);
textHeight += tHeight;
span.attr('x', x + getConfig().state.noteMargin);
span.attr('y', y + textHeight + 1.25 * getConfig().state.noteMargin);
@ -456,8 +454,6 @@ export const drawEdge = function(elem, path, relation) {
const rows = common.getRows(relation.title);
// console.warn(rows);
let titleHeight = 0;
const titleRows = [];
let maxWidth = 0;

1
src/themes/theme-dark.js
View File

@ -166,6 +166,5 @@ class Theme {
export const getThemeVariables = userOverrides => {
const theme = new Theme();
theme.calculate(userOverrides);
// console.info('Theme(dark)', { userOverrides, theme });
return theme;
};

1
src/themes/theme-default.js
View File

@ -177,6 +177,5 @@ class Theme {
export const getThemeVariables = userOverrides => {
const theme = new Theme();
theme.calculate(userOverrides);
// console.info('Theme(default)', { userOverrides, theme });
return theme;
};

1
src/themes/theme-forest.js
View File

@ -147,6 +147,5 @@ class Theme {
export const getThemeVariables = userOverrides => {
const theme = new Theme();
theme.calculate(userOverrides);
// console.info('Theme(forest)', { userOverrides, theme });
return theme;
};

2
src/themes/theme-neutral.js
View File

@ -13,7 +13,6 @@ class Theme {
// this.secondaryColor = adjust(this.primaryColor, { h: 120 });
this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
// console.log('primary color', this.primaryColor, 'tertiary - color', this.tertiaryColor);
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
@ -185,6 +184,5 @@ class Theme {
export const getThemeVariables = userOverrides => {
const theme = new Theme();
theme.calculate(userOverrides);
// console.info('Theme(neutral)', { userOverrides, theme });
return theme;
};

1
src/utils.js
View File

@ -787,7 +787,6 @@ export const calculateSvgSizeAttrs = function(height, width, useMaxWidth) {
export const configureSvgSize = function(svgElem, height, width, useMaxWidth) {
const attrs = calculateSvgSizeAttrs(height, width, useMaxWidth);
console.log('svgElem', svgElem);
d3Attrs(svgElem, attrs);
};