Updating Release version to 9.1.1

README.md

@@ -34,6 +34,16 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo
 
 🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md)
 
+
+
+In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
+
+
+<a href="https://applitools.com/">
+<svg width="170" height="32" viewBox="0 0 170 32" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="27" y="0" width="143" height="32"><path fill-rule="evenodd" clip-rule="evenodd" d="M27.732.227h141.391v31.19H27.733V.227z" fill="#fff"></path></mask><g mask="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M153.851 22.562l1.971-3.298c1.291 1.219 3.837 2.402 5.988 2.402 1.971 0 2.903-.753 2.903-1.829 0-2.832-10.253-.502-10.253-7.313 0-2.904 2.51-5.45 7.099-5.45 2.904 0 5.234 1.004 6.955 2.367l-1.829 3.226c-1.039-1.075-3.011-2.008-5.126-2.008-1.65 0-2.725.717-2.725 1.685 0 2.546 10.289.395 10.289 7.386 0 3.19-2.724 5.52-7.528 5.52-3.012 0-5.916-1.003-7.744-2.688zm-5.7 2.259h4.553V.908h-4.553v23.913zm-6.273-8.676c0-2.689-1.578-5.02-4.446-5.02-2.832 0-4.409 2.331-4.409 5.02 0 2.724 1.577 5.055 4.409 5.055 2.868 0 4.446-2.33 4.446-5.055zm-13.588 0c0-4.912 3.442-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.7 0-9.142-4.195-9.142-9.106zm-5.628 0c0-2.689-1.577-5.02-4.445-5.02-2.832 0-4.41 2.331-4.41 5.02 0 2.724 1.578 5.055 4.41 5.055 2.868 0 4.445-2.33 4.445-5.055zm-13.587 0c0-4.912 3.441-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.701 0-9.142-4.195-9.142-9.106zm-8.425 4.338v-8.999h-2.868v-3.98h2.868V2.773h4.553v4.733h3.514v3.979h-3.514v7.78c0 1.111.574 1.936 1.578 1.936.681 0 1.326-.251 1.577-.538l.968 3.478c-.681.609-1.9 1.11-3.8 1.11-3.191 0-4.876-1.648-4.876-4.767zm-8.962 4.338h4.553V7.505h-4.553V24.82zm-.43-21.905a2.685 2.685 0 012.688-2.69c1.506 0 2.725 1.184 2.725 2.69a2.724 2.724 0 01-2.725 2.724c-1.47 0-2.688-1.219-2.688-2.724zM84.482 24.82h4.553V.908h-4.553v23.913zm-6.165-8.676c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82h-4.553V7.504H70v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.907-.86-5.342-2.653zm-10.718-6.453c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82H46.41V7.504h4.553v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.908-.86-5.342-2.653zm-11.758-1.936V18.51c-.753-1.004-2.187-1.542-3.657-1.542-1.793 0-3.263.968-3.263 2.617 0 1.65 1.47 2.582 3.263 2.582 1.47 0 2.904-.502 3.657-1.506zm0 4.159v-1.829c-1.183 1.434-3.227 2.259-5.485 2.259-2.761 0-5.988-1.864-5.988-5.736 0-4.087 3.227-5.593 5.988-5.593 2.33 0 4.337.753 5.485 2.115V13.85c0-1.756-1.506-2.904-3.8-2.904-1.829 0-3.55.717-4.984 2.044L28.63 9.8c2.115-1.901 4.84-2.726 7.564-2.726 3.98 0 7.6 1.578 7.6 6.561v11.186h-4.588z" fill="#00A298"></path></g><path fill-rule="evenodd" clip-rule="evenodd" d="M14.934 16.177c0 1.287-.136 2.541-.391 3.752-1.666-1.039-3.87-2.288-6.777-3.752 2.907-1.465 5.11-2.714 6.777-3.753.255 1.211.39 2.466.39 3.753m4.6-7.666V4.486a78.064 78.064 0 01-4.336 3.567c-1.551-2.367-3.533-4.038-6.14-5.207C11.1 4.658 12.504 6.7 13.564 9.262 5.35 15.155 0 16.177 0 16.177s5.35 1.021 13.564 6.915c-1.06 2.563-2.463 4.603-4.507 6.415 2.607-1.169 4.589-2.84 6.14-5.207a77.978 77.978 0 014.336 3.568v-4.025s-.492-.82-2.846-2.492c.6-1.611.93-3.354.93-5.174a14.8 14.8 0 00-.93-5.174c2.354-1.673 2.846-2.492 2.846-2.492" fill="#00A298"></path></svg>
+</a>
+
+
 <!-- </Main description> -->
 
 ## Examples
@@ -44,7 +54,7 @@ __The following are some examples of the diagrams, charts and graphs that can be
 ### Flowchart [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">docs</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
 
 ```
-flowchart LR 
+flowchart LR
 
 A[Hard] -->|Text| B(Round)
 B --> C{Decision}

applitools.cnfig.js

@@ -0,0 +1,16 @@
+module.exports = {
+  testConcurrency: 1,
+  // browser: [
+  //   // Add browsers with different viewports
+  //   { width: 800, height: 600, name: 'chrome' },
+  //   { width: 700, height: 500, name: 'firefox' },
+  //   { width: 1600, height: 1200, name: 'ie11' },
+  //   { width: 1024, height: 768, name: 'edgechromium' },
+  //   { width: 800, height: 600, name: 'safari' },
+  //   // Add mobile emulation devices in Portrait mode
+  //   { deviceName: 'iPhone X', screenOrientation: 'portrait' },
+  //   { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
+  // ],
+  // // set batch name to the configuration
+  // batchName: 'Ultrafast Batch',
+};

cypress/helpers/util.js

@@ -42,16 +42,32 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
   if (!options.fontSize) {
     options.fontSize = '16px';
   }
-  cy.log(options);
+  const useAppli = Cypress.env('useAppli');
+  const branch = Cypress.env('codeBranch');
+  cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
+  const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
+
+  if (useAppli) {
+    cy.eyesOpen({
+      appName: 'Mermaid-' + branch,
+      testName: name,
+      batchName: branch,
+    });
+  }
+
   const url = mermaidUrl(graphStr, options, api);
 
   cy.visit(url);
   if (validation) cy.get('svg').should(validation);
   cy.get('svg');
   // Default name to test title
-  const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
-  cy.matchImageSnapshot(name);
+  if (useAppli) {
+    cy.eyesCheckWindow('Click!');
+    cy.eyesClose();
+  } else {
+    cy.matchImageSnapshot(name);
+  }
 };
 
 export const renderGraph = (graphStr, options, api) => {

cypress/integration/rendering/appli.spec.js

@@ -0,0 +1,59 @@
+import { imgSnapshotTest } from '../../helpers/util.js';
+
+describe('Git Graph diagram', () => {
+  it('1: should render a simple gitgraph with commit on main branch', () => {
+    imgSnapshotTest(
+      `gitGraph
+       commit id: "1"
+       commit id: "2"
+       commit id: "3"
+      `,
+      {}
+    );
+  });
+  // it(`ultraFastTest`, function () {
+  //   // Navigate to the url we want to test
+  //   // ⭐️ Note to see visual bugs, run the test using the above URL for the 1st run.
+  //   // but then change the above URL to https://demo.applitools.com/index_v2.html
+  //   // (for the 2nd run)
+  //   cy.visit('https://demo.applitools.com');
+
+  //   // Call Open on eyes to initialize a test session
+  //   cy.eyesOpen({
+  //     appName: 'Demo App',
+  //     testName: 'Ultrafast grid demo',
+  //   });
+
+  //   // check the login page with fluent api, see more info here
+  //   // https://applitools.com/docs/topics/sdk/the-eyes-sdk-check-fluent-api.html
+  //   cy.eyesCheckWindow({
+  //     tag: 'Login Window',
+  //     target: 'window',
+  //     fully: true,
+  //   });
+
+  //   cy.get('#log-in').click();
+
+  //   // Check the app page
+  //   cy.eyesCheckWindow({
+  //     tag: 'App Window',
+  //     target: 'window',
+  //     fully: true,
+  //   });
+
+  //   // Call Close on eyes to let the server know it should display the results
+  //   cy.eyesClose();
+  // });
+  // it('works', () => {
+  //   cy.visit('https://applitools.com/helloworld');
+  //   cy.eyesOpen({
+  //     appName: 'Hello World!',
+  //     testName: 'My first JavaScript test!',
+  //     browser: { width: 800, height: 600 },
+  //   });
+  //   cy.eyesCheckWindow('Main Page');
+  //   cy.get('button').click();
+  //   cy.eyesCheckWindow('Click!');
+  //   cy.eyesClose();
+  // });
+});

cypress/plugins/index.js

@@ -17,7 +17,16 @@
 // }
 
 const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
+require('@applitools/eyes-cypress')(module);
 
 module.exports = (on, config) => {
   addMatchImageSnapshotPlugin(on, config);
+  // copy any needed variables from process.env to config.env
+  config.env.useAppli = process.env.USE_APPLI ? true : false;
+  config.env.codeBranch = process.env.APPLI_BRANCH;
+
+  // do not forget to return the changed config object!
+  return config;
 };
+
+require('@applitools/eyes-cypress')(module);

cypress/support/eyes-index.d.ts

@@ -0,0 +1 @@
+import "@applitools/eyes-cypress"

cypress/support/index.js

@@ -13,9 +13,12 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
+import '@applitools/eyes-cypress/commands';
+
 // Import commands.js using ES2015 syntax:
 import './commands';
 // import '@percy/cypress';
+import '@applitools/eyes-cypress/commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

dist/mermaid.core.js

@@ -27050,7 +27050,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var init = function init() {
   try {
-    initThrowsErrors();
+    initThrowsErrors.apply(void 0, arguments);
   } catch (e) {
     _logger__WEBPACK_IMPORTED_MODULE_0__.log.warn('Syntax Error rendering');
     _logger__WEBPACK_IMPORTED_MODULE_0__.log.warn(e);
@@ -31839,7 +31839,7 @@ module.exports = require("stylis");
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"name":"mermaid","version":"9.1.0","description":"Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.","main":"dist/mermaid.core.js","module":"dist/mermaid.esm.min.mjs","exports":{".":{"require":"./dist/mermaid.core.js","import":"./dist/mermaid.esm.min.mjs"},"./*":"./*"},"keywords":["diagram","markdown","flowchart","sequence diagram","gantt","class diagram","git graph"],"scripts":{"build:development":"webpack --mode development --progress --color","build:production":"webpack --mode production --progress --color","build":"concurrently \\"yarn build:development\\" \\"yarn build:production\\"","postbuild":"documentation build src/mermaidAPI.js src/config.js src/defaultConfig.js --shallow -f md --markdown-toc false > docs/Setup.md","build:watch":"yarn build:development --watch","release":"yarn build","lint":"eslint ./ --ext js,html","lint:fix":"yarn lint --fix","e2e:depr":"yarn lint && jest e2e --config e2e/jest.config.js","cypress":"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 serve --config ./.webpack/webpack.config.e2e.babel.js","test":"yarn lint && jest src/.*","test:watch":"jest --watch src","prepublishOnly":"yarn build && yarn test","prepare":"husky install && yarn build","pre-commit":"lint-staged"},"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":"^6.0.0","d3":"^7.0.0","dagre":"^0.8.5","dagre-d3":"^0.6.4","dompurify":"2.3.6","graphlib":"^2.1.8","khroma":"^2.0.0","moment-mini":"^2.24.0","stylis":"^4.0.10"},"devDependencies":{"@babel/core":"^7.14.6","@babel/eslint-parser":"^7.14.7","@babel/preset-env":"^7.14.7","@babel/register":"^7.14.5","@commitlint/cli":"^16.0.0","@commitlint/config-conventional":"^16.0.0","babel-jest":"^28.0.3","babel-loader":"^8.2.2","concurrently":"^7.0.0","coveralls":"^3.0.2","css-to-string-loader":"^0.1.3","cypress":"9.6.0","cypress-image-snapshot":"^4.0.1","documentation":"13.2.0","eslint":"^8.2.0","eslint-config-prettier":"^8.3.0","eslint-plugin-cypress":"^2.12.1","eslint-plugin-html":"^6.2.0","eslint-plugin-jest":"^26.0.0","eslint-plugin-jsdoc":"^39.1.0","eslint-plugin-markdown":"^2.2.1","eslint-plugin-prettier":"^4.0.0","husky":"^7.0.1","identity-obj-proxy":"^3.0.0","jest":"^28.0.3","jest-environment-jsdom":"^28.0.2","jison":"^0.4.18","js-base64":"3.7.2","lint-staged":"^12.1.2","moment":"^2.23.0","path-browserify":"^1.0.1","prettier":"^2.3.2","prettier-plugin-jsdoc":"^0.3.30","start-server-and-test":"^1.12.6","terser-webpack-plugin":"^5.2.4","webpack":"^5.53.0","webpack-cli":"^4.7.2","webpack-dev-server":"^4.3.0","webpack-merge":"^5.8.0","webpack-node-externals":"^3.0.0"},"files":["dist"],"sideEffects":["**/*.css","**/*.scss"]}');
+module.exports = JSON.parse('{"name":"mermaid","version":"9.1.1","description":"Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.","main":"dist/mermaid.core.js","module":"dist/mermaid.esm.min.mjs","exports":{".":{"require":"./dist/mermaid.core.js","import":"./dist/mermaid.esm.min.mjs"},"./*":"./*"},"keywords":["diagram","markdown","flowchart","sequence diagram","gantt","class diagram","git graph"],"scripts":{"build:development":"webpack --mode development --progress --color","build:production":"webpack --mode production --progress --color","build":"concurrently \\"yarn build:development\\" \\"yarn build:production\\"","postbuild":"documentation build src/mermaidAPI.js src/config.js src/defaultConfig.js --shallow -f md --markdown-toc false > docs/Setup.md","build:watch":"yarn build:development --watch","release":"yarn build","lint":"eslint ./ --ext js,html","lint:fix":"yarn lint --fix","e2e:depr":"yarn lint && jest e2e --config e2e/jest.config.js","cypress":"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 serve --config ./.webpack/webpack.config.e2e.babel.js","test":"yarn lint && jest src/.*","test:watch":"jest --watch src","prepublishOnly":"yarn build && yarn test","prepare":"husky install && yarn build","pre-commit":"lint-staged"},"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":"^6.0.0","d3":"^7.0.0","dagre":"^0.8.5","dagre-d3":"^0.6.4","dompurify":"2.3.6","graphlib":"^2.1.8","khroma":"^2.0.0","moment-mini":"^2.24.0","stylis":"^4.0.10"},"devDependencies":{"@applitools/eyes-cypress":"^3.25.7","@babel/core":"^7.14.6","@babel/eslint-parser":"^7.14.7","@babel/preset-env":"^7.14.7","@babel/register":"^7.14.5","@commitlint/cli":"^16.0.0","@commitlint/config-conventional":"^16.0.0","babel-jest":"^28.0.3","babel-loader":"^8.2.2","concurrently":"^7.0.0","coveralls":"^3.0.2","css-to-string-loader":"^0.1.3","cypress":"9.6.0","cypress-image-snapshot":"^4.0.1","documentation":"13.2.0","eslint":"^8.2.0","eslint-config-prettier":"^8.3.0","eslint-plugin-cypress":"^2.12.1","eslint-plugin-html":"^6.2.0","eslint-plugin-jest":"^26.0.0","eslint-plugin-jsdoc":"^39.1.0","eslint-plugin-markdown":"^2.2.1","eslint-plugin-prettier":"^4.0.0","husky":"^7.0.1","identity-obj-proxy":"^3.0.0","jest":"^28.0.3","jest-environment-jsdom":"^28.0.2","jison":"^0.4.18","js-base64":"3.7.2","lint-staged":"^12.1.2","moment":"^2.23.0","path-browserify":"^1.0.1","prettier":"^2.3.2","prettier-plugin-jsdoc":"^0.3.30","start-server-and-test":"^1.12.6","terser-webpack-plugin":"^5.2.4","webpack":"^5.53.0","webpack-cli":"^4.7.2","webpack-dev-server":"^4.3.0","webpack-merge":"^5.8.0","webpack-node-externals":"^3.0.0"},"files":["dist"],"sideEffects":["**/*.css","**/*.scss"]}');
 
 /***/ })
 

dist/mermaid.js

@@ -27072,7 +27072,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var init = function init() {
   try {
-    initThrowsErrors();
+    initThrowsErrors.apply(void 0, arguments);
   } catch (e) {
     _logger__WEBPACK_IMPORTED_MODULE_0__.log.warn('Syntax Error rendering');
     _logger__WEBPACK_IMPORTED_MODULE_0__.log.warn(e);
@@ -128981,7 +128981,7 @@ function combine (array, callback) {
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"name":"mermaid","version":"9.1.0","description":"Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.","main":"dist/mermaid.core.js","module":"dist/mermaid.esm.min.mjs","exports":{".":{"require":"./dist/mermaid.core.js","import":"./dist/mermaid.esm.min.mjs"},"./*":"./*"},"keywords":["diagram","markdown","flowchart","sequence diagram","gantt","class diagram","git graph"],"scripts":{"build:development":"webpack --mode development --progress --color","build:production":"webpack --mode production --progress --color","build":"concurrently \\"yarn build:development\\" \\"yarn build:production\\"","postbuild":"documentation build src/mermaidAPI.js src/config.js src/defaultConfig.js --shallow -f md --markdown-toc false > docs/Setup.md","build:watch":"yarn build:development --watch","release":"yarn build","lint":"eslint ./ --ext js,html","lint:fix":"yarn lint --fix","e2e:depr":"yarn lint && jest e2e --config e2e/jest.config.js","cypress":"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 serve --config ./.webpack/webpack.config.e2e.babel.js","test":"yarn lint && jest src/.*","test:watch":"jest --watch src","prepublishOnly":"yarn build && yarn test","prepare":"husky install && yarn build","pre-commit":"lint-staged"},"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":"^6.0.0","d3":"^7.0.0","dagre":"^0.8.5","dagre-d3":"^0.6.4","dompurify":"2.3.6","graphlib":"^2.1.8","khroma":"^2.0.0","moment-mini":"^2.24.0","stylis":"^4.0.10"},"devDependencies":{"@babel/core":"^7.14.6","@babel/eslint-parser":"^7.14.7","@babel/preset-env":"^7.14.7","@babel/register":"^7.14.5","@commitlint/cli":"^16.0.0","@commitlint/config-conventional":"^16.0.0","babel-jest":"^28.0.3","babel-loader":"^8.2.2","concurrently":"^7.0.0","coveralls":"^3.0.2","css-to-string-loader":"^0.1.3","cypress":"9.6.0","cypress-image-snapshot":"^4.0.1","documentation":"13.2.0","eslint":"^8.2.0","eslint-config-prettier":"^8.3.0","eslint-plugin-cypress":"^2.12.1","eslint-plugin-html":"^6.2.0","eslint-plugin-jest":"^26.0.0","eslint-plugin-jsdoc":"^39.1.0","eslint-plugin-markdown":"^2.2.1","eslint-plugin-prettier":"^4.0.0","husky":"^7.0.1","identity-obj-proxy":"^3.0.0","jest":"^28.0.3","jest-environment-jsdom":"^28.0.2","jison":"^0.4.18","js-base64":"3.7.2","lint-staged":"^12.1.2","moment":"^2.23.0","path-browserify":"^1.0.1","prettier":"^2.3.2","prettier-plugin-jsdoc":"^0.3.30","start-server-and-test":"^1.12.6","terser-webpack-plugin":"^5.2.4","webpack":"^5.53.0","webpack-cli":"^4.7.2","webpack-dev-server":"^4.3.0","webpack-merge":"^5.8.0","webpack-node-externals":"^3.0.0"},"files":["dist"],"sideEffects":["**/*.css","**/*.scss"]}');
+module.exports = JSON.parse('{"name":"mermaid","version":"9.1.1","description":"Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.","main":"dist/mermaid.core.js","module":"dist/mermaid.esm.min.mjs","exports":{".":{"require":"./dist/mermaid.core.js","import":"./dist/mermaid.esm.min.mjs"},"./*":"./*"},"keywords":["diagram","markdown","flowchart","sequence diagram","gantt","class diagram","git graph"],"scripts":{"build:development":"webpack --mode development --progress --color","build:production":"webpack --mode production --progress --color","build":"concurrently \\"yarn build:development\\" \\"yarn build:production\\"","postbuild":"documentation build src/mermaidAPI.js src/config.js src/defaultConfig.js --shallow -f md --markdown-toc false > docs/Setup.md","build:watch":"yarn build:development --watch","release":"yarn build","lint":"eslint ./ --ext js,html","lint:fix":"yarn lint --fix","e2e:depr":"yarn lint && jest e2e --config e2e/jest.config.js","cypress":"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 serve --config ./.webpack/webpack.config.e2e.babel.js","test":"yarn lint && jest src/.*","test:watch":"jest --watch src","prepublishOnly":"yarn build && yarn test","prepare":"husky install && yarn build","pre-commit":"lint-staged"},"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":"^6.0.0","d3":"^7.0.0","dagre":"^0.8.5","dagre-d3":"^0.6.4","dompurify":"2.3.6","graphlib":"^2.1.8","khroma":"^2.0.0","moment-mini":"^2.24.0","stylis":"^4.0.10"},"devDependencies":{"@applitools/eyes-cypress":"^3.25.7","@babel/core":"^7.14.6","@babel/eslint-parser":"^7.14.7","@babel/preset-env":"^7.14.7","@babel/register":"^7.14.5","@commitlint/cli":"^16.0.0","@commitlint/config-conventional":"^16.0.0","babel-jest":"^28.0.3","babel-loader":"^8.2.2","concurrently":"^7.0.0","coveralls":"^3.0.2","css-to-string-loader":"^0.1.3","cypress":"9.6.0","cypress-image-snapshot":"^4.0.1","documentation":"13.2.0","eslint":"^8.2.0","eslint-config-prettier":"^8.3.0","eslint-plugin-cypress":"^2.12.1","eslint-plugin-html":"^6.2.0","eslint-plugin-jest":"^26.0.0","eslint-plugin-jsdoc":"^39.1.0","eslint-plugin-markdown":"^2.2.1","eslint-plugin-prettier":"^4.0.0","husky":"^7.0.1","identity-obj-proxy":"^3.0.0","jest":"^28.0.3","jest-environment-jsdom":"^28.0.2","jison":"^0.4.18","js-base64":"3.7.2","lint-staged":"^12.1.2","moment":"^2.23.0","path-browserify":"^1.0.1","prettier":"^2.3.2","prettier-plugin-jsdoc":"^0.3.30","start-server-and-test":"^1.12.6","terser-webpack-plugin":"^5.2.4","webpack":"^5.53.0","webpack-cli":"^4.7.2","webpack-dev-server":"^4.3.0","webpack-merge":"^5.8.0","webpack-node-externals":"^3.0.0"},"files":["dist"],"sideEffects":["**/*.css","**/*.scss"]}');
 
 /***/ })
 

docs/README.md

@@ -40,6 +40,12 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo
 
 **Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏**
 
+In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
+
+
+<a href="https://applitools.com/">
+<svg width="170" height="32" viewBox="0 0 170 32" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="27" y="0" width="143" height="32"><path fill-rule="evenodd" clip-rule="evenodd" d="M27.732.227h141.391v31.19H27.733V.227z" fill="#fff"></path></mask><g mask="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M153.851 22.562l1.971-3.298c1.291 1.219 3.837 2.402 5.988 2.402 1.971 0 2.903-.753 2.903-1.829 0-2.832-10.253-.502-10.253-7.313 0-2.904 2.51-5.45 7.099-5.45 2.904 0 5.234 1.004 6.955 2.367l-1.829 3.226c-1.039-1.075-3.011-2.008-5.126-2.008-1.65 0-2.725.717-2.725 1.685 0 2.546 10.289.395 10.289 7.386 0 3.19-2.724 5.52-7.528 5.52-3.012 0-5.916-1.003-7.744-2.688zm-5.7 2.259h4.553V.908h-4.553v23.913zm-6.273-8.676c0-2.689-1.578-5.02-4.446-5.02-2.832 0-4.409 2.331-4.409 5.02 0 2.724 1.577 5.055 4.409 5.055 2.868 0 4.446-2.33 4.446-5.055zm-13.588 0c0-4.912 3.442-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.7 0-9.142-4.195-9.142-9.106zm-5.628 0c0-2.689-1.577-5.02-4.445-5.02-2.832 0-4.41 2.331-4.41 5.02 0 2.724 1.578 5.055 4.41 5.055 2.868 0 4.445-2.33 4.445-5.055zm-13.587 0c0-4.912 3.441-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.701 0-9.142-4.195-9.142-9.106zm-8.425 4.338v-8.999h-2.868v-3.98h2.868V2.773h4.553v4.733h3.514v3.979h-3.514v7.78c0 1.111.574 1.936 1.578 1.936.681 0 1.326-.251 1.577-.538l.968 3.478c-.681.609-1.9 1.11-3.8 1.11-3.191 0-4.876-1.648-4.876-4.767zm-8.962 4.338h4.553V7.505h-4.553V24.82zm-.43-21.905a2.685 2.685 0 012.688-2.69c1.506 0 2.725 1.184 2.725 2.69a2.724 2.724 0 01-2.725 2.724c-1.47 0-2.688-1.219-2.688-2.724zM84.482 24.82h4.553V.908h-4.553v23.913zm-6.165-8.676c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82h-4.553V7.504H70v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.907-.86-5.342-2.653zm-10.718-6.453c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82H46.41V7.504h4.553v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.908-.86-5.342-2.653zm-11.758-1.936V18.51c-.753-1.004-2.187-1.542-3.657-1.542-1.793 0-3.263.968-3.263 2.617 0 1.65 1.47 2.582 3.263 2.582 1.47 0 2.904-.502 3.657-1.506zm0 4.159v-1.829c-1.183 1.434-3.227 2.259-5.485 2.259-2.761 0-5.988-1.864-5.988-5.736 0-4.087 3.227-5.593 5.988-5.593 2.33 0 4.337.753 5.485 2.115V13.85c0-1.756-1.506-2.904-3.8-2.904-1.829 0-3.55.717-4.984 2.044L28.63 9.8c2.115-1.901 4.84-2.726 7.564-2.726 3.98 0 7.6 1.578 7.6 6.561v11.186h-4.588z" fill="#00A298"></path></g><path fill-rule="evenodd" clip-rule="evenodd" d="M14.934 16.177c0 1.287-.136 2.541-.391 3.752-1.666-1.039-3.87-2.288-6.777-3.752 2.907-1.465 5.11-2.714 6.777-3.753.255 1.211.39 2.466.39 3.753m4.6-7.666V4.486a78.064 78.064 0 01-4.336 3.567c-1.551-2.367-3.533-4.038-6.14-5.207C11.1 4.658 12.504 6.7 13.564 9.262 5.35 15.155 0 16.177 0 16.177s5.35 1.021 13.564 6.915c-1.06 2.563-2.463 4.603-4.507 6.415 2.607-1.169 4.589-2.84 6.14-5.207a77.978 77.978 0 014.336 3.568v-4.025s-.492-.82-2.846-2.492c.6-1.611.93-3.354.93-5.174a14.8 14.8 0 00-.93-5.174c2.354-1.673 2.846-2.492 2.846-2.492" fill="#00A298"></path></svg>
+</a>
 
 ## Diagram Types
 

docs/directives.md

@@ -5,31 +5,75 @@
 ## Directives
 Directives gives a diagram author the capability to alter the appearance of a diagram before rendering by changing the applied configuration.
 
-Directives are divided into two sets or orders, by priority in parsing. The first set, containing 'init' or 'initialize' directives are loaded ahead of any other directive. While the other set, containing all other kinds of directives are parsed and factored into the rendering, only after 'init' and the desired graph-type are declared.
+The significance of having directives is that you have them available while writing the diagram, and can modify the defualt global and diagram specific configurations. So, directives are applied on top of the default configurations. The beauty of directives is that you can use them to alter configuration settings for a specific diagram, i.e. at an individual level.
 
-### Init
+While directives allow you to change most of the default configuation settings, there are some that are not available, that too for security reasons. Also, you do have the *option to define the set of configurations* that you would allow to be available to the diagram author for overriding with help of directives.
 
-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| init | modifies configurations| Directive| Optional | Any parameters not included in the secure array|
+## Types of Directives options
+Mermaid basically supports two types of configuration options to be overridden by directives.
+1) *General/Top Level configurations* : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
+  - theme
+  - fontFamily
+  - logLevel
+  - securityLevel
+  - startOnLoad
+  - secure
+
+
+2) *Diagram specific configurations* : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
+ For example, `mirrroActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.
+
+**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
+```
+Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations,
+with their possible values in the docs
+```
+ ## Declaring directives
+Now that we have defined the types of configurations that are available, we can learn how to declare directives.
+A directive always starts and end `%%` sign with directive text in between, like `%% {directive_text} %%`.
+
+Here the structure of a directive text is like a nested key-value pair map or a JSON object with root being *init*. Where all the general configurations are defined in the top level, and all the diagram specific configurations are defined one level deeper with diagram type as key/root for that section.
+
+Following code snippet shows the structure of a directive:
+```
+%%{
+  init: {
+    "theme": "dark",
+    "fontFamily": "monospace",
+    "logLevel": "info",
+    "flowchart": {
+      "htmlLabels": true,
+      "curve": "linear"
+    },
+    "sequence": {
+      "mirrorActors": true
+    }
+  }
+}%%
+```
+You can also define the directives in a single line, like this:
+```
+%%{init: { **insert argument here**}}%%
+```
+For example, the following code snippet:
+```
+%%{init: { "sequence": { "mirrorActors":false }}}%%
+```
 
 **Notes:**
-
-init would be an argument-directive: %%{init: { **insert argument here**}}%%
-
 The json object that is passed as {**argument** } must be valid key value pairs and encased in quotation marks or it will be ignored.
 Valid Key Value pairs can be found in config.
 
-The init/initialize directive is parsed earlier in the flow, this allows the incorporation of `%%init%%` directives into the mermaid diagram that is being rendered. Example:
-```mmd
+Example with a simple graph:
+```mermaid-example
 %%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
-graph >
+graph LR
 A-->B
 ```
 
-will set the `logLevel` to `debug` and the `theme` to `dark` for a flowchart diagram, changing the appearance of the diagram itself.
+Here the directive declaration will set the `logLevel` to `debug` and the `theme` to `dark` for a rendered mermaid diagram, changing the appearance of the diagram itself.
 
-Note: 'init' or 'initialize' are both acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. This means:
+Note: You can use 'init' or 'initialize' as both acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. This means:
 
 ```mmd2
 %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
@@ -37,7 +81,7 @@ Note: 'init' or 'initialize' are both acceptable as init directives. Also note t
 ...
 ```
 
-parsing the above generates the `%%init%%` object below, combining the two directives and carrying over the last value given for `loglevel`:
+parsing the above generates a single `%%init%%` JSON object below, combining the two directives and carrying over the last value given for `loglevel`:
 
 ```json5
 {
@@ -49,36 +93,150 @@ parsing the above generates the `%%init%%` object below, combining the two direc
 
 This will then be sent to `mermaid.initialize(...)` for rendering.
 
+## Directive Examples
+More directive examples for diagram specific configuration overrides
+Now that the concept of directives has been explained, Let us see some more examples for directives usage:
 
-### Other directives
+### Changing Theme via directive
+The following code snippet changes theme to forest:
 
-In this category are any directives that come after the graph type declaration. Essentially, these directives will only be processed after the init directive. Each individual graph type will handle these directives. As an example:
+
+```%%{init: { "theme": "forest" } }%%```
+
+Possible themes value are: `default`,`base`, `dark`, `forest` and `neutral`.
+Default Value is `default`.
+
+Example:
+```mermaid-example
+%%{init: { "theme": "forest" } }%%
+graph TD
+A(Forest) --> B[/Another/]
+A --> C[End]
+  subgraph section
+  B
+  C
+  end
 
 ```
-%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
+
+### Changing fontFamily via directive
+The following code snippet changes theme to forest:
+
+
+```%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%```
+
+Example:
+```mermaid-example
+%%{init: { "fontFamily": "Trebuchet MS, Verdana, Arial, Sans-Serif" } }%%
+graph TD
+A(Forest) --> B[/Another/]
+A --> C[End]
+  subgraph section
+  B
+  C
+  end
+
+```
+
+### Changing logLevel via directive
+The following code snippet changes theme to forest:
+
+
+```%%{init: { "logLevel": 2 } }%%```
+
+Possible logLevel values are:
+- `1` for *debug*,
+- `2` for *info*
+- `3` for *warn*
+- `4` for *error*
+- `5` for *only fatal errors*
+
+Default Value is `5`.
+
+Example:
+```mermaid-example
+%%{init: { "logLevel": 2 } }%%
+graph TD
+A(Forest) --> B[/Another/]
+A --> C[End]
+  subgraph section
+  B
+  C
+  end
+```
+
+### Changing flowchart config via directive
+Some common flowchart configurations are:
+- *htmlLabels*: true/false
+- *curve*: linear/curve
+- *diagramPadding*: number
+- *useMaxWidth*: number
+
+For complete list of flowchart configurations, see [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
+*Soon we plan to publis a complete list all diagram specific configurations updated in the docs*
+
+The following code snippet changes flowchart config:
+
+
+```%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%```
+
+Here were are overriding only the flowchart config, and not the general config, where HtmlLabels is set to true and curve is set to linear.
+
+```mermaid-example
+%%{init: { "flowchart": { "htmlLabels": true, "curve": "linear" } } }%%
+graph TD
+A(Forest) --> B[/Another/]
+A --> C[End]
+  subgraph section
+  B
+  C
+  end
+```
+### Changing Sequence diagram config via directive
+Some common sequence configurations are:
+- *width*: number
+- *height*: number
+- *messgageAlign*: left, center, right
+- *mirrorActors*: boolean
+- *useMaxWidth*: boolean
+- *rightAngles*: boolean
+- *showSequenceNumbers*: boolean
+- *wrap*: boolean
+
+For complete list of sequeue diagram configurations, see *defaultConfig.js* in the source code.
+*Soon we plan to publis a complete list all diagram specific configurations updated in the docs*
+
+So, `wrap` by default has a value of `false` for sequence diagrams.
+
+Let us see an example:
+
+```mermaid-example
 sequenceDiagram
-%%{config: { 'fontFamily': 'Menlo', 'fontSize': 18, 'fontWeight': 400} }%%
-Alice->>Bob: Hi Bob
-Bob->>Alice: Hi Alice
+
+Alice->Bob: Hello Bob, how are you?
+Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invansion?
+Alice->Bob: Good.
+Bob->Alice: Cool
 ```
-## Chronology
-This will set the `logLevel` to `debug` and `theme` to `dark` for a sequence diagram. Then, during processing, the config for the sequence diagram is set by the `config` directive. This directive is handled in the `sequenceDb.js`. In this example, the fontFamily, fontSize, and fontWeight are all set for this sequence diagram.
 
-### Wrapping
+Now let us enble wrap for sequence diagrams.
 
-## Wrap
-
-| Parameter | Description |Type | Required | Values|
-| --- | --- | --- | --- | --- |
-| wrap | a callable text-wrap function| Directive| Optional | %%{wrap}%%|
+The following code snippet changes sequence diagram config for `wrap` to `true`:
 
 
-#### Backwards Compatibility
+```%%{init: { "sequence": { "wrap": true} } }%%```
+
+Using in the diagram above, the wrap will be enabled.
+
+```mermaid-example
+%%{init: { "sequence": { "wrap": true, "width":300 } } }%%
+sequenceDiagram
+Alice->Bob: Hello Bob, how are you?
+Bob->Alice: Fine, How did you mother like the book I suggested? And did you catch with the new book about alien invansion?
+Alice->Bob: Good.
+Bob->Alice: Cool
+```
 
-Init directives and any other non-multiline directives should be backwards compatible, because they will be treated as comments in prior versions of mermaid-js.
 
-Multiline directives, however, will pose an issue and will render an error. This is unavoidable.
-
-# example
 
 

docs/index.html

@@ -17,7 +17,7 @@
     />
     <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
     <link rel="stylesheet" href="theme.css" />
-    <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.0/dist/mermaid.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.1/dist/mermaid.min.js"></script>
     <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
     <script>
       // prettier-ignore

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "9.1.0",
+  "version": "9.1.1",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "module": "dist/mermaid.esm.min.mjs",
@@ -68,6 +68,7 @@
     "stylis": "^4.0.10"
   },
   "devDependencies": {
+    "@applitools/eyes-cypress": "^3.25.7",
     "@babel/core": "^7.14.6",
     "@babel/eslint-parser": "^7.14.7",
     "@babel/preset-env": "^7.14.7",

src/mermaid.js

@@ -31,7 +31,7 @@ import utils from './utils';
  */
 const init = function () {
   try {
-    initThrowsErrors();
+    initThrowsErrors(...arguments);
   } catch (e) {
     log.warn('Syntax Error rendering');
     log.warn(e);