`tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `
` tags may have loaded on the execution of `mermaid.min.js` file.
+Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can place `mermaid.initialize()` inside `mermaid.esm.min.mjs` for brevity. However, doing the opposite lets you control when it starts looking for `
`tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `
` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
`startOnLoad` is one of the parameters that can be defined by `mermaid.initialize()`
diff --git a/docs/syntax/mindmap.md b/docs/syntax/mindmap.md
index 4fa953daf9..362fd85c7f 100644
--- a/docs/syntax/mindmap.md
+++ b/docs/syntax/mindmap.md
@@ -262,7 +262,7 @@ You can still use the pre 9.4.0 method to add mermaid with mindmaps to a web pag
```html
@@ -276,12 +276,6 @@ From version 9.4.0 you can simplify this code to:
```
-or if you prefer not using the ESM package:
-
-```html
-
-```
-
Note that more complex integrations that use the **render** function directly need to use the **renderAsync** method instead in order to render mind maps.
You can also refer the implementation in the live editor [here](/~https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md
index 6e3be305f0..1c7e6e0020 100644
--- a/docs/syntax/timeline.md
+++ b/docs/syntax/timeline.md
@@ -466,7 +466,9 @@ Timeline uses experimental lazy loading & async rendering features which could c
You can use this method to add mermaid including the timeline diagram to a web page:
```html
-
+
```
Note that more complex integrations that the **render** function directly need to use the **renderAsync** method instead in order to render timeline.
diff --git a/packages/mermaid/src/docs/intro/n00b-gettingStarted.md b/packages/mermaid/src/docs/intro/n00b-gettingStarted.md
index c347f2ef39..cfc16e707f 100644
--- a/packages/mermaid/src/docs/intro/n00b-gettingStarted.md
+++ b/packages/mermaid/src/docs/intro/n00b-gettingStarted.md
@@ -118,7 +118,7 @@ b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm
```
**Notes**:
-Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can place `mermaid.initialize()` inside `mermaid.min.js` for brevity. However, doing the opposite lets you control when it starts looking for `
`tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `
` tags may have loaded on the execution of `mermaid.min.js` file.
+Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can place `mermaid.initialize()` inside `mermaid.esm.min.mjs` for brevity. However, doing the opposite lets you control when it starts looking for `
`tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `
` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
`startOnLoad` is one of the parameters that can be defined by `mermaid.initialize()`
diff --git a/packages/mermaid/src/docs/syntax/mindmap.md b/packages/mermaid/src/docs/syntax/mindmap.md
index cce7d2e3d4..968277334e 100644
--- a/packages/mermaid/src/docs/syntax/mindmap.md
+++ b/packages/mermaid/src/docs/syntax/mindmap.md
@@ -170,7 +170,7 @@ You can still use the pre 9.4.0 method to add mermaid with mindmaps to a web pag
```html
@@ -184,12 +184,6 @@ From version 9.4.0 you can simplify this code to:
```
-or if you prefer not using the ESM package:
-
-```html
-
-```
-
Note that more complex integrations that use the **render** function directly need to use the **renderAsync** method instead in order to render mind maps.
You can also refer the implementation in the live editor [here](/~https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md
index 94a485d229..bed8d8ef51 100644
--- a/packages/mermaid/src/docs/syntax/timeline.md
+++ b/packages/mermaid/src/docs/syntax/timeline.md
@@ -298,7 +298,9 @@ Timeline uses experimental lazy loading & async rendering features which could c
You can use this method to add mermaid including the timeline diagram to a web page:
```html
-
+
```
Note that more complex integrations that the **render** function directly need to use the **renderAsync** method instead in order to render timeline.
From d22e8d92c6e33ac659e198f0818cfc8112179fa0 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod
Date: Sun, 19 Feb 2023 01:10:15 +0530
Subject: [PATCH 12/34] chore: Remove all non async render/parse/init
---
.../external-diagrams-example-diagram.html | 2 +-
docs/config/setup/modules/mermaidAPI.md | 22 +-
docs/syntax/mindmap.md | 2 -
docs/syntax/timeline.md | 2 -
packages/mermaid/src/__mocks__/mermaidAPI.ts | 1 -
.../src/docs/.vitepress/theme/mermaid.ts | 2 +-
packages/mermaid/src/docs/syntax/mindmap.md | 2 -
packages/mermaid/src/docs/syntax/timeline.md | 2 -
packages/mermaid/src/mermaid.spec.ts | 6 +-
packages/mermaid/src/mermaid.ts | 126 +---------
packages/mermaid/src/mermaidAPI.spec.ts | 8 +-
packages/mermaid/src/mermaidAPI.ts | 222 +-----------------
tests/webpack/src/index.js | 2 +-
13 files changed, 32 insertions(+), 367 deletions(-)
diff --git a/cypress/platform/external-diagrams-example-diagram.html b/cypress/platform/external-diagrams-example-diagram.html
index 9d2cad778f..a1339d4e63 100644
--- a/cypress/platform/external-diagrams-example-diagram.html
+++ b/cypress/platform/external-diagrams-example-diagram.html
@@ -17,7 +17,7 @@
Should correctly load a third-party diagram using registerDiagram
await mermaid.registerExternalDiagrams([exampleDiagram]);
await mermaid.initialize({ logLevel: 0 });
- await mermaid.initThrowsErrorsAsync();
+ await mermaid.initThrowsErrors();
if (window.Cypress) {
window.rendered = true;
}
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index bd9833c5be..2cdeb597a0 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -26,7 +26,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
### mermaidAPI
-• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseError?`: `ParseErrorFunction`) => `boolean` ; `parseAsync`: (`text`: `string`, `parseError?`: `ParseErrorFunction`) => `Promise`<`boolean`> ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `cb?`: (`svgCode`: `string`, `bindFunctions?`: (`element`: `Element`) => `void`) => `void`, `svgContainingElement?`: `Element`) => `string` ; `renderAsync`: (`id`: `string`, `text`: `string`, `cb?`: (`svgCode`: `string`, `bindFunctions?`: (`element`: `Element`) => `void`) => `void`, `svgContainingElement?`: `Element`) => `Promise`<`string`> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
+• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseError?`: `ParseErrorFunction`) => `Promise`<`boolean`> ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `cb?`: (`svgCode`: `string`, `bindFunctions?`: (`element`: `Element`) => `void`) => `void`, `svgContainingElement?`: `Element`) => `Promise`<`string`> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
## mermaidAPI configuration defaults
@@ -90,7 +90,7 @@ mermaid.initialize(config);
#### Defined in
-[mermaidAPI.ts:887](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L887)
+[mermaidAPI.ts:671](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L671)
## Functions
@@ -121,7 +121,7 @@ Return the last node appended
#### Defined in
-[mermaidAPI.ts:288](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L288)
+[mermaidAPI.ts:278](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L278)
---
@@ -147,7 +147,7 @@ the cleaned up svgCode
#### Defined in
-[mermaidAPI.ts:239](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L239)
+[mermaidAPI.ts:229](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L229)
---
@@ -173,7 +173,7 @@ the string with all the user styles
#### Defined in
-[mermaidAPI.ts:168](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L168)
+[mermaidAPI.ts:158](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L158)
---
@@ -196,7 +196,7 @@ the string with all the user styles
#### Defined in
-[mermaidAPI.ts:216](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L216)
+[mermaidAPI.ts:206](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L206)
---
@@ -223,7 +223,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
#### Defined in
-[mermaidAPI.ts:152](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L152)
+[mermaidAPI.ts:142](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L142)
---
@@ -243,7 +243,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
#### Defined in
-[mermaidAPI.ts:132](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L132)
+[mermaidAPI.ts:122](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L122)
---
@@ -263,7 +263,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
#### Defined in
-[mermaidAPI.ts:103](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L103)
+[mermaidAPI.ts:93](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L93)
---
@@ -289,7 +289,7 @@ Put the svgCode into an iFrame. Return the iFrame code
#### Defined in
-[mermaidAPI.ts:267](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L267)
+[mermaidAPI.ts:257](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L257)
---
@@ -314,4 +314,4 @@ Remove any existing elements from the given document
#### Defined in
-[mermaidAPI.ts:338](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L338)
+[mermaidAPI.ts:328](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L328)
diff --git a/docs/syntax/mindmap.md b/docs/syntax/mindmap.md
index 362fd85c7f..ad8aab77f4 100644
--- a/docs/syntax/mindmap.md
+++ b/docs/syntax/mindmap.md
@@ -276,6 +276,4 @@ From version 9.4.0 you can simplify this code to:
```
-Note that more complex integrations that use the **render** function directly need to use the **renderAsync** method instead in order to render mind maps.
-
You can also refer the implementation in the live editor [here](/~https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md
index 1c7e6e0020..58b12313d4 100644
--- a/docs/syntax/timeline.md
+++ b/docs/syntax/timeline.md
@@ -471,6 +471,4 @@ You can use this method to add mermaid including the timeline diagram to a web p
```
-Note that more complex integrations that the **render** function directly need to use the **renderAsync** method instead in order to render timeline.
-
You can also refer the implementation in the live editor [here](/~https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
diff --git a/packages/mermaid/src/__mocks__/mermaidAPI.ts b/packages/mermaid/src/__mocks__/mermaidAPI.ts
index 12c1652bcf..50018bcadf 100644
--- a/packages/mermaid/src/__mocks__/mermaidAPI.ts
+++ b/packages/mermaid/src/__mocks__/mermaidAPI.ts
@@ -21,7 +21,6 @@ function parse(text: string, parseError?: ParseErrorFunction): boolean {
// original version cannot be modified since it was frozen with `Object.freeze()`
export const mermaidAPI = {
render: vi.fn(),
- renderAsync: vi.fn(),
parse,
parseDirective: vi.fn(),
initialize: vi.fn(),
diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
index 2234ef4980..c5b57f8865 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
@@ -2,6 +2,6 @@ import mermaid, { type MermaidConfig } from 'mermaid';
export const render = async (id: string, code: string, config: MermaidConfig): Promise => {
mermaid.initialize(config);
- const svg = await mermaid.renderAsync(id, code);
+ const svg = await mermaid.render(id, code);
return svg;
};
diff --git a/packages/mermaid/src/docs/syntax/mindmap.md b/packages/mermaid/src/docs/syntax/mindmap.md
index 968277334e..c8a2526919 100644
--- a/packages/mermaid/src/docs/syntax/mindmap.md
+++ b/packages/mermaid/src/docs/syntax/mindmap.md
@@ -184,6 +184,4 @@ From version 9.4.0 you can simplify this code to:
```
-Note that more complex integrations that use the **render** function directly need to use the **renderAsync** method instead in order to render mind maps.
-
You can also refer the implementation in the live editor [here](/~https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md
index bed8d8ef51..ef48d2b617 100644
--- a/packages/mermaid/src/docs/syntax/timeline.md
+++ b/packages/mermaid/src/docs/syntax/timeline.md
@@ -303,6 +303,4 @@ You can use this method to add mermaid including the timeline diagram to a web p
```
-Note that more complex integrations that the **render** function directly need to use the **renderAsync** method instead in order to render timeline.
-
You can also refer the implementation in the live editor [here](/~https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
diff --git a/packages/mermaid/src/mermaid.spec.ts b/packages/mermaid/src/mermaid.spec.ts
index aa797af0e5..f9709510e1 100644
--- a/packages/mermaid/src/mermaid.spec.ts
+++ b/packages/mermaid/src/mermaid.spec.ts
@@ -48,7 +48,7 @@ describe('when using mermaid and ', function () {
const node = document.createElement('div');
node.appendChild(document.createTextNode('graph TD;\na;'));
- mermaid.initThrowsErrors(undefined, node);
+ await mermaid.initThrowsErrors(undefined, node);
// mermaidAPI.render function has been mocked, since it doesn't yet work
// in Node.JS (only works in browser)
expect(mermaidAPI.render).toHaveBeenCalled();
@@ -72,9 +72,9 @@ describe('when using mermaid and ', function () {
)
).rejects.toThrow('Failed to load 1 external diagrams');
- expect(() => mermaid.initThrowsErrorsAsync(undefined, node)).not.toThrow();
+ expect(() => mermaid.initThrowsErrors(undefined, node)).not.toThrow();
// should still render, even if lazyLoadedDiagrams fails
- expect(mermaidAPI.renderAsync).toHaveBeenCalled();
+ expect(mermaidAPI.render).toHaveBeenCalled();
});
it('should defer diagram load based on parameter', async () => {
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index be06c21679..540e0368ea 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -50,7 +50,7 @@ const init = async function (
callback?: Function
) {
try {
- await initThrowsErrorsAsync(config, nodes, callback);
+ await initThrowsErrors(config, nodes, callback);
} catch (e) {
log.warn('Syntax Error rendering');
if (isDetailedError(e)) {
@@ -87,96 +87,6 @@ const handleError = (error: unknown, errors: DetailedError[], parseError?: Parse
}
};
-const initThrowsErrors = function (
- config?: MermaidConfig,
- // eslint-disable-next-line no-undef
- nodes?: string | HTMLElement | NodeListOf,
- // eslint-disable-next-line @typescript-eslint/ban-types
- callback?: Function
-) {
- const conf = mermaidAPI.getConfig();
- if (config) {
- // This is a legacy way of setting config. It is not documented and should be removed in the future.
- // @ts-ignore: TODO Fix ts errors
- mermaid.sequenceConfig = config;
- }
-
- // if last argument is a function this is the callback function
- log.debug(`${!callback ? 'No ' : ''}Callback function found`);
- let nodesToProcess: ArrayLike;
- if (nodes === undefined) {
- nodesToProcess = document.querySelectorAll('.mermaid');
- } else if (typeof nodes === 'string') {
- nodesToProcess = document.querySelectorAll(nodes);
- } else if (nodes instanceof HTMLElement) {
- nodesToProcess = [nodes];
- } else if (nodes instanceof NodeList) {
- nodesToProcess = nodes;
- } else {
- throw new Error('Invalid argument nodes for mermaid.init');
- }
-
- log.debug(`Found ${nodesToProcess.length} diagrams`);
- if (config?.startOnLoad !== undefined) {
- log.debug('Start On Load: ' + config?.startOnLoad);
- mermaidAPI.updateSiteConfig({ startOnLoad: config?.startOnLoad });
- }
-
- // generate the id of the diagram
- const idGenerator = new utils.initIdGenerator(conf.deterministicIds, conf.deterministicIDSeed);
-
- let txt: string;
- const errors: DetailedError[] = [];
-
- // element is the current div with mermaid class
- // eslint-disable-next-line unicorn/prefer-spread
- for (const element of Array.from(nodesToProcess)) {
- log.info('Rendering diagram: ' + element.id);
- /*! Check if previously processed */
- if (element.getAttribute('data-processed')) {
- continue;
- }
- element.setAttribute('data-processed', 'true');
-
- const id = `mermaid-${idGenerator.next()}`;
-
- // Fetch the graph definition including tags
- txt = element.innerHTML;
-
- // transforms the html to pure text
- txt = dedent(utils.entityDecode(txt)) // removes indentation, required for YAML parsing
- .trim()
- .replace(/ /gi, ' ');
-
- const init = utils.detectInit(txt);
- if (init) {
- log.debug('Detected early reinit: ', init);
- }
- try {
- mermaidAPI.render(
- id,
- txt,
- (svgCode: string, bindFunctions?: (el: Element) => void) => {
- element.innerHTML = svgCode;
- if (callback !== undefined) {
- callback(id);
- }
- if (bindFunctions) {
- bindFunctions(element);
- }
- },
- element
- );
- } catch (error) {
- handleError(error, errors, mermaid.parseError);
- }
- }
- if (errors.length > 0) {
- // TODO: We should be throwing an error object.
- throw errors[0];
- }
-};
-
/**
* This is an internal function and should not be made public, as it will likely change.
* @internal
@@ -204,10 +114,6 @@ const loadExternalDiagrams = async (...diagrams: ExternalDiagramDefinition[]) =>
/**
* Equivalent to {@link init}, except an error will be thrown on error.
*
- * @alpha
- * @deprecated This is an internal function and will very likely be modified in v10, or earlier.
- * We recommend staying with {@link initThrowsErrors} if you don't need `lazyLoadedDiagrams`.
- *
* @param config - **Deprecated** Mermaid sequenceConfig.
* @param nodes - One of:
* - A DOM Node
@@ -216,7 +122,7 @@ const loadExternalDiagrams = async (...diagrams: ExternalDiagramDefinition[]) =>
* @param callback - Function that is called with the id of each generated mermaid diagram.
* @returns Resolves on success, otherwise the {@link Promise} will be rejected.
*/
-const initThrowsErrorsAsync = async function (
+const initThrowsErrors = async function (
config?: MermaidConfig,
nodes?: string | HTMLElement | NodeListOf,
// eslint-disable-next-line @typescript-eslint/ban-types
@@ -282,7 +188,7 @@ const initThrowsErrorsAsync = async function (
log.debug('Detected early reinit: ', init);
}
try {
- await mermaidAPI.renderAsync(
+ await mermaidAPI.render(
id,
txt,
(svgCode: string, bindFunctions?: (el: Element) => void) => {
@@ -369,10 +275,6 @@ const setParseErrorHandler = function (newParseErrorHandler: (err: any, hash: an
mermaid.parseError = newParseErrorHandler;
};
-const parse = (txt: string) => {
- return mermaidAPI.parse(txt, mermaid.parseError);
-};
-
const executionQueue: (() => Promise)[] = [];
let executionQueueRunning = false;
const executeQueue = async () => {
@@ -395,15 +297,14 @@ const executeQueue = async () => {
/**
* @param txt - The mermaid code to be parsed.
- * @deprecated This is an internal function and should not be used. Will be removed in v10.
*/
-const parseAsync = (txt: string): Promise => {
+const parse = (txt: string): Promise => {
return new Promise((resolve, reject) => {
// This promise will resolve when the mermaidAPI.render call is done.
// It will be queued first and will be executed when it is first in line
const performCall = () =>
new Promise((res, rej) => {
- mermaidAPI.parseAsync(txt, mermaid.parseError).then(
+ mermaidAPI.parse(txt, mermaid.parseError).then(
(r) => {
// This resolves for the promise for the queue handling
res(r);
@@ -422,10 +323,7 @@ const parseAsync = (txt: string): Promise => {
});
};
-/**
- * @deprecated This is an internal function and should not be used. Will be removed in v10.
- */
-const renderAsync = (
+const render = (
id: string,
text: string,
cb?: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
@@ -436,7 +334,7 @@ const renderAsync = (
// It will be queued first and will be executed when it is first in line
const performCall = () =>
new Promise((res, rej) => {
- mermaidAPI.renderAsync(id, text, cb, container).then(
+ mermaidAPI.render(id, text, cb, container).then(
(r) => {
// This resolves for the promise for the queue handling
res(r);
@@ -461,12 +359,9 @@ const mermaid: {
parseError?: ParseErrorFunction;
mermaidAPI: typeof mermaidAPI;
parse: typeof parse;
- parseAsync: typeof parseAsync;
- render: typeof mermaidAPI.render;
- renderAsync: typeof renderAsync;
+ render: typeof render;
init: typeof init;
initThrowsErrors: typeof initThrowsErrors;
- initThrowsErrorsAsync: typeof initThrowsErrorsAsync;
registerExternalDiagrams: typeof registerExternalDiagrams;
initialize: typeof initialize;
contentLoaded: typeof contentLoaded;
@@ -476,12 +371,9 @@ const mermaid: {
diagrams: {},
mermaidAPI,
parse,
- parseAsync,
- render: mermaidAPI.render,
- renderAsync,
+ render,
init,
initThrowsErrors,
- initThrowsErrorsAsync,
registerExternalDiagrams,
initialize,
parseError: undefined,
diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts
index 67138435ef..e86b9b15fc 100644
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -720,10 +720,10 @@ describe('mermaidAPI', function () {
const diagramText = `${diagramType}\n accTitle: ${a11yTitle}\n accDescr: ${a11yDescr}\n`;
const expectedDiagramType = testedDiagram.expectedType;
- it('aria-roledscription is set to the diagram type, addSVGa11yTitleDescription is called', () => {
+ it('aria-roledscription is set to the diagram type, addSVGa11yTitleDescription is called', async () => {
const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo');
const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription');
- mermaidAPI.render(id, diagramText);
+ await mermaidAPI.render(id, diagramText);
expect(a11yDiagramInfo_spy).toHaveBeenCalledWith(
expect.anything(),
expectedDiagramType
@@ -735,7 +735,7 @@ describe('mermaidAPI', function () {
});
});
- describe('renderAsync', () => {
+ describe('render', () => {
// Be sure to add async before each test (anonymous) method
// These are more like integration tests right now because nothing is mocked.
@@ -775,7 +775,7 @@ describe('mermaidAPI', function () {
it('aria-roledscription is set to the diagram type, addSVGa11yTitleDescription is called', async () => {
const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo');
const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription');
- await mermaidAPI.renderAsync(id, diagramText);
+ await mermaidAPI.render(id, diagramText);
expect(a11yDiagramInfo_spy).toHaveBeenCalledWith(
expect.anything(),
expectedDiagramType
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 55a3055ebe..275ec656b6 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -80,17 +80,7 @@ export type D3Element = any;
* @param text - The mermaid diagram definition.
* @param parseError - If set, handles errors.
*/
-function parse(text: string, parseError?: ParseErrorFunction): boolean {
- addDiagrams();
- const diagram = new Diagram(text, parseError);
- return diagram.parse(text, parseError);
-}
-
-/**
- * @param text - The mermaid diagram definition.
- * @param parseError - If set, handles errors.
- */
-async function parseAsync(text: string, parseError?: ParseErrorFunction): Promise {
+async function parse(text: string, parseError?: ParseErrorFunction): Promise {
addDiagrams();
const diagram = await getDiagramFromText(text, parseError);
return diagram.parse(text, parseError);
@@ -375,214 +365,8 @@ export const removeExistingElements = (
* element will be removed when rendering is completed.
* @returns Returns the rendered element as a string containing the SVG definition.
*/
-const render = function (
- id: string,
- text: string,
- cb?: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
- svgContainingElement?: Element
-): string {
- addDiagrams();
-
- configApi.reset();
-
- // Add Directives. Must do this before getting the config and before creating the diagram.
- const graphInit = utils.detectInit(text);
- if (graphInit) {
- directiveSanitizer(graphInit);
- configApi.addDirective(graphInit);
- }
-
- const config = configApi.getConfig();
- log.debug(config);
-
- // Check the maximum allowed text size
- // TODO: Remove magic number
- if (text.length > (config?.maxTextSize ?? 50000)) {
- text = MAX_TEXTLENGTH_EXCEEDED_MSG;
- }
-
- // clean up text CRLFs
- text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
-
- const idSelector = '#' + id;
- const iFrameID = 'i' + id;
- const iFrameID_selector = '#' + iFrameID;
- const enclosingDivID = 'd' + id;
- const enclosingDivID_selector = '#' + enclosingDivID;
-
- let root: any = select('body');
-
- const isSandboxed = config.securityLevel === SECURITY_LVL_SANDBOX;
- const isLooseSecurityLevel = config.securityLevel === SECURITY_LVL_LOOSE;
-
- const fontFamily = config.fontFamily;
-
- // -------------------------------------------------------------------------------
- // Define the root d3 node
- // In regular execution the svgContainingElement will be the element with a mermaid class
-
- if (svgContainingElement !== undefined) {
- if (svgContainingElement) {
- svgContainingElement.innerHTML = '';
- }
-
- if (isSandboxed) {
- // If we are in sandboxed mode, we do everything mermaid related in a (sandboxed )iFrame
- const iframe = sandboxedIframe(select(svgContainingElement), iFrameID);
- root = select(iframe.nodes()[0]!.contentDocument!.body);
- root.node().style.margin = 0;
- } else {
- root = select(svgContainingElement);
- }
- appendDivSvgG(root, id, enclosingDivID, `font-family: ${fontFamily}`, XMLNS_XLINK_STD);
- } else {
- // No svgContainingElement was provided
-
- // If there is an existing element with the id, we remove it. This likely a previously rendered diagram
- removeExistingElements(document, id, enclosingDivID, iFrameID);
-
- // Add the temporary div used for rendering with the enclosingDivID.
- // This temporary div will contain a svg with the id == id
-
- if (isSandboxed) {
- // If we are in sandboxed mode, we do everything mermaid related in a (sandboxed) iFrame
- const iframe = sandboxedIframe(select('body'), iFrameID);
- root = select(iframe.nodes()[0]!.contentDocument!.body);
- root.node().style.margin = 0;
- } else {
- root = select('body');
- }
-
- appendDivSvgG(root, id, enclosingDivID);
- }
-
- text = encodeEntities(text);
-
- // -------------------------------------------------------------------------------
- // Create the diagram
-
- // Important that we do not create the diagram until after the directives have been included
- let diag;
- let parseEncounteredException;
-
- try {
- // diag = new Diagram(text);
- diag = getDiagramFromText(text);
- if ('then' in diag) {
- throw new Error('Diagram is a promise. Use renderAsync.');
- }
- } catch (error) {
- diag = new Diagram('error');
- parseEncounteredException = error;
- }
-
- // Get the temporary div element containing the svg (the parent HTML Element)
- const element = root.select(enclosingDivID_selector).node();
- const graphType = diag.type;
-
- // -------------------------------------------------------------------------------
- // Create and insert the styles (user styles, theme styles, config styles)
- // These are dealing with HTML Elements, not d3 nodes.
-
- // Insert an element into svg. This is where we put the styles
- const svg = element.firstChild;
- const firstChild = svg.firstChild;
- const diagramClassDefs = CLASSDEF_DIAGRAMS.includes(graphType)
- ? diag.renderer.getClasses(text, diag)
- : {};
-
- const rules = createUserStyles(
- config,
- graphType,
- // @ts-ignore convert renderer to TS.
- diagramClassDefs,
- idSelector
- );
-
- // svg is a HTML element (not a d3 node)
- const style1 = document.createElement('style');
- style1.innerHTML = rules;
- svg.insertBefore(style1, firstChild);
-
- // -------------------------------------------------------------------------------
- // Draw the diagram with the renderer
- try {
- diag.renderer.draw(text, id, version, diag);
- } catch (e) {
- errorRenderer.draw(text, id, version);
- throw e;
- }
-
- // This is the d3 node for the svg element
- const svgNode = root.select(`${enclosingDivID_selector} svg`);
- const a11yTitle = diag.db.getAccTitle?.();
- const a11yDescr = diag.db.getAccDescription?.();
- addA11yInfo(graphType, svgNode, a11yTitle, a11yDescr);
-
- // -------------------------------------------------------------------------------
- // Clean up SVG code
- root.select(`[id="${id}"]`).selectAll('foreignobject > *').attr('xmlns', XMLNS_XHTML_STD);
-
- // Fix for when the base tag is used
- let svgCode = root.select(enclosingDivID_selector).node().innerHTML;
-
- log.debug('config.arrowMarkerAbsolute', config.arrowMarkerAbsolute);
- svgCode = cleanUpSvgCode(svgCode, isSandboxed, evaluate(config.arrowMarkerAbsolute));
-
- if (isSandboxed) {
- const svgEl = root.select(enclosingDivID_selector + ' svg').node();
- svgCode = putIntoIFrame(svgCode, svgEl);
- } else if (!isLooseSecurityLevel) {
- // Sanitize the svgCode using DOMPurify
- svgCode = DOMPurify.sanitize(svgCode, {
- ADD_TAGS: DOMPURIFY_TAGS,
- ADD_ATTR: DOMPURIFY_ATTR,
- });
- }
-
- // -------------------------------------------------------------------------------
- // Do any callbacks (cb = callback)
- if (cb !== undefined) {
- switch (graphType) {
- case 'flowchart':
- case 'flowchart-v2':
- cb(svgCode, flowDb.bindFunctions);
- break;
- case 'gantt':
- cb(svgCode, ganttDb.bindFunctions);
- break;
- case 'class':
- case 'classDiagram':
- cb(svgCode, classDb.bindFunctions);
- break;
- default:
- cb(svgCode);
- }
- } else {
- log.debug('CB = undefined!');
- }
- attachFunctions();
-
- // -------------------------------------------------------------------------------
- // Remove the temporary element if appropriate
- const tmpElementSelector = isSandboxed ? iFrameID_selector : enclosingDivID_selector;
- const node = select(tmpElementSelector).node();
- if (node && 'remove' in node) {
- node.remove();
- }
-
- if (parseEncounteredException) {
- throw parseEncounteredException;
- }
-
- return svgCode;
-};
-
-/**
- * @deprecated This is an internal function and should not be used. Will be removed in v10.
- */
-const renderAsync = async function (
+const render = async function (
id: string,
text: string,
cb?: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
@@ -886,9 +670,7 @@ function addA11yInfo(
export const mermaidAPI = Object.freeze({
render,
- renderAsync,
parse,
- parseAsync,
parseDirective,
initialize,
getConfig: configApi.getConfig,
diff --git a/tests/webpack/src/index.js b/tests/webpack/src/index.js
index 0929726941..51738aa62c 100644
--- a/tests/webpack/src/index.js
+++ b/tests/webpack/src/index.js
@@ -4,7 +4,7 @@ const mermaid = require('mermaid');
import mindmap from '@mermaid-js/mermaid-mindmap';
const render = async (graph) => {
- const svg = await mermaid.renderAsync('dummy', graph);
+ const svg = await mermaid.render('dummy', graph);
console.log(svg);
document.getElementById('graphDiv').innerHTML = svg;
};
From eaa84d2d910f1817e9744c019ef18a0ee7b97526 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod
Date: Sun, 19 Feb 2023 13:08:13 +0530
Subject: [PATCH 13/34] feat: Break render and parse types
Both render and parse are async now.
Return type of render contains svg and bindFunctions.
Parse will not throw error if parseOptions.silent is passed.
---
V10-BreakingChanges.md | 22 ++++-
.../interfaces/mermaidAPI.RenderResult.md | 78 ++++++++++++++++++
docs/config/setup/modules/mermaidAPI.md | 28 ++++---
packages/mermaid/src/Diagram.ts | 81 +++++--------------
.../mermaid/src/diagram-api/detectType.ts | 3 +-
packages/mermaid/src/diagram-api/types.ts | 1 +
.../src/diagrams/class/classRenderer-v2.js | 22 -----
.../src/diagrams/sequence/sequenceRenderer.ts | 5 +-
packages/mermaid/src/errors.ts | 6 ++
packages/mermaid/src/mermaid.ts | 59 +++++++-------
packages/mermaid/src/mermaidAPI.ts | 80 +++++++++---------
11 files changed, 213 insertions(+), 172 deletions(-)
create mode 100644 docs/config/setup/interfaces/mermaidAPI.RenderResult.md
create mode 100644 packages/mermaid/src/errors.ts
diff --git a/V10-BreakingChanges.md b/V10-BreakingChanges.md
index bd9110d1a3..e3322a3a11 100644
--- a/V10-BreakingChanges.md
+++ b/V10-BreakingChanges.md
@@ -1,5 +1,25 @@
-# A collection of updates that change the behaviour
+# A collection of updates that change the behavior
+
+## Async
+
+`init`, `parse`, `render` are now async.
## Lazy loading and asynchronisity
- Invalid dates are rendered as syntax error instead of returning best guess or the current date
+
+## ParseError is removed
+
+```js
+//< v10.0.0
+mermaid.parse(text, parseError);
+
+//>= v10.0.0
+await mermaid.parse(text).catch(parseError);
+// or
+try {
+ await mermaid.parse(text);
+} catch (err) {
+ parseError(err);
+}
+```
diff --git a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
new file mode 100644
index 0000000000..b95b0acff8
--- /dev/null
+++ b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
@@ -0,0 +1,78 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.RenderResult.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.RenderResult.md).
+
+# Interface: RenderResult
+
+[mermaidAPI](../modules/mermaidAPI.md).RenderResult
+
+Function that renders an svg with a graph from a chart definition. Usage example below.
+
+```javascript
+mermaidAPI.initialize({
+ startOnLoad: true,
+});
+$(function () {
+ const graphDefinition = 'graph TB\na-->b';
+ const cb = function (svgGraph) {
+ console.log(svgGraph);
+ };
+ mermaidAPI.render('id1', graphDefinition, cb);
+});
+```
+
+**`Param`**
+
+The id for the SVG element (the element to be rendered)
+
+**`Param`**
+
+The text for the graph definition
+
+**`Param`**
+
+Callback which is called after rendering is finished with the svg code as in param.
+
+**`Param`**
+
+HTML element where the svg will be inserted. (Is usually element with the .mermaid class)
+If no svgContainingElement is provided then the SVG element will be appended to the body.
+Selector to element in which a div with the graph temporarily will be
+inserted. If one is provided a hidden div will be inserted in the body of the page instead. The
+element will be removed when rendering is completed.
+
+## Properties
+
+### bindFunctions
+
+• `Optional` **bindFunctions**: (`element`: `Element`) => `void`
+
+#### Type declaration
+
+▸ (`element`): `void`
+
+##### Parameters
+
+| Name | Type |
+| :-------- | :-------- |
+| `element` | `Element` |
+
+##### Returns
+
+`void`
+
+#### Defined in
+
+[mermaidAPI.ts:382](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L382)
+
+---
+
+### svg
+
+• **svg**: `string`
+
+#### Defined in
+
+[mermaidAPI.ts:381](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L381)
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 2cdeb597a0..f75dd85c71 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -6,6 +6,10 @@
# Module: mermaidAPI
+## Interfaces
+
+- [RenderResult](../interfaces/mermaidAPI.RenderResult.md)
+
## References
### default
@@ -20,13 +24,13 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
#### Defined in
-[mermaidAPI.ts:75](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L75)
+[mermaidAPI.ts:71](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L71)
## Variables
### mermaidAPI
-• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseError?`: `ParseErrorFunction`) => `Promise`<`boolean`> ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `cb?`: (`svgCode`: `string`, `bindFunctions?`: (`element`: `Element`) => `void`) => `void`, `svgContainingElement?`: `Element`) => `Promise`<`string`> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
+• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions?`: { `silent?`: `boolean` }) => `Promise`<`boolean` | `void`> ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
## mermaidAPI configuration defaults
@@ -90,7 +94,7 @@ mermaid.initialize(config);
#### Defined in
-[mermaidAPI.ts:671](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L671)
+[mermaidAPI.ts:666](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L666)
## Functions
@@ -121,7 +125,7 @@ Return the last node appended
#### Defined in
-[mermaidAPI.ts:278](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L278)
+[mermaidAPI.ts:289](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L289)
---
@@ -147,7 +151,7 @@ the cleaned up svgCode
#### Defined in
-[mermaidAPI.ts:229](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L229)
+[mermaidAPI.ts:240](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L240)
---
@@ -173,7 +177,7 @@ the string with all the user styles
#### Defined in
-[mermaidAPI.ts:158](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L158)
+[mermaidAPI.ts:169](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L169)
---
@@ -196,7 +200,7 @@ the string with all the user styles
#### Defined in
-[mermaidAPI.ts:206](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L206)
+[mermaidAPI.ts:217](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L217)
---
@@ -223,7 +227,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
#### Defined in
-[mermaidAPI.ts:142](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L142)
+[mermaidAPI.ts:153](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L153)
---
@@ -243,7 +247,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
#### Defined in
-[mermaidAPI.ts:122](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L122)
+[mermaidAPI.ts:133](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L133)
---
@@ -263,7 +267,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
#### Defined in
-[mermaidAPI.ts:93](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L93)
+[mermaidAPI.ts:104](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L104)
---
@@ -289,7 +293,7 @@ Put the svgCode into an iFrame. Return the iFrame code
#### Defined in
-[mermaidAPI.ts:257](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L257)
+[mermaidAPI.ts:268](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L268)
---
@@ -314,4 +318,4 @@ Remove any existing elements from the given document
#### Defined in
-[mermaidAPI.ts:328](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L328)
+[mermaidAPI.ts:339](/~https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L339)
diff --git a/packages/mermaid/src/Diagram.ts b/packages/mermaid/src/Diagram.ts
index 1f68e52ba7..3a0818854f 100644
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -3,26 +3,24 @@ import { log } from './logger';
import { getDiagram, registerDiagram } from './diagram-api/diagramAPI';
import { detectType, getDiagramLoader } from './diagram-api/detectType';
import { extractFrontMatter } from './diagram-api/frontmatter';
-import { isDetailedError } from './utils';
-import type { DetailedError } from './utils';
+import { UnknownDiagramError } from './errors';
+import { DetailedError } from './utils';
export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
-
export class Diagram {
type = 'graph';
parser;
renderer;
db;
- private detectTypeFailed = false;
- constructor(public txt: string, parseError?: ParseErrorFunction) {
+ private detectError?: UnknownDiagramError;
+ constructor(public text: string) {
+ this.text += '\n';
const cnf = configApi.getConfig();
- this.txt = txt;
try {
- this.type = detectType(txt, cnf);
+ this.type = detectType(text, cnf);
} catch (e) {
- this.handleError(e, parseError);
this.type = 'error';
- this.detectTypeFailed = true;
+ this.detectError = e as UnknownDiagramError;
}
const diagram = getDiagram(this.type);
log.debug('Type ' + this.type);
@@ -46,44 +44,19 @@ export class Diagram {
diagram.init(cnf);
log.info('Initialized diagram ' + this.type, cnf);
}
- this.txt += '\n';
-
- this.parse(this.txt, parseError);
+ this.parse();
}
- parse(text: string, parseError?: ParseErrorFunction): boolean {
- if (this.detectTypeFailed) {
- return false;
- }
- try {
- text = text + '\n';
- this.db.clear?.();
- this.parser.parse(text);
- return true;
- } catch (error) {
- this.handleError(error, parseError);
+ parse() {
+ if (this.detectError) {
+ throw this.detectError;
}
- return false;
+ this.db.clear?.();
+ this.parser.parse(this.text);
}
- handleError(error: unknown, parseError?: ParseErrorFunction) {
- // Is this the correct way to access mermaid's parseError()
- // method ? (or global.mermaid.parseError()) ?
-
- if (parseError === undefined) {
- // No mermaid.parseError() handler defined, so re-throw it
- throw error;
- }
-
- if (isDetailedError(error)) {
- // Handle case where error string and hash were
- // wrapped in object like`const error = { str, hash };`
- parseError(error.str, error.hash);
- return;
- }
-
- // Otherwise, assume it is just an error string and pass it on
- parseError(error as string);
+ async render(id: string, version: string) {
+ await this.renderer.draw(this.text, id, version, this);
}
getParser() {
@@ -95,10 +68,7 @@ export class Diagram {
}
}
-export const getDiagramFromText = (
- txt: string,
- parseError?: ParseErrorFunction
-): Diagram | Promise => {
+export const getDiagramFromText = async (txt: string): Promise => {
const type = detectType(txt, configApi.getConfig());
try {
// Trying to find the diagram
@@ -106,19 +76,12 @@ export const getDiagramFromText = (
} catch (error) {
const loader = getDiagramLoader(type);
if (!loader) {
- throw new Error(`Diagram ${type} not found.`);
+ throw new UnknownDiagramError(`Diagram ${type} not found.`);
}
- // TODO: Uncomment for v10
- // // Diagram not available, loading it
- // const { diagram } = await loader();
- // registerDiagram(type, diagram, undefined, diagram.injectUtils);
- // // new diagram will try getDiagram again and if fails then it is a valid throw
- return loader().then(({ diagram }) => {
- registerDiagram(type, diagram, undefined);
- return new Diagram(txt, parseError);
- });
+ // Diagram not available, loading it
+ // new diagram will try getDiagram again and if fails then it is a valid throw
+ const { id, diagram } = await loader();
+ registerDiagram(id, diagram);
}
- return new Diagram(txt, parseError);
+ return new Diagram(txt);
};
-
-export default Diagram;
diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts
index b75e914fb9..3c9237e5be 100644
--- a/packages/mermaid/src/diagram-api/detectType.ts
+++ b/packages/mermaid/src/diagram-api/detectType.ts
@@ -7,6 +7,7 @@ import type {
ExternalDiagramDefinition,
} from './types';
import { frontMatterRegex } from './frontmatter';
+import { UnknownDiagramError } from '../errors';
const directive = /%{2}{\s*(?:(\w+)\s*:|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
const anyComment = /\s*%%.*\n/gm;
@@ -44,7 +45,7 @@ export const detectType = function (text: string, config?: MermaidConfig): strin
}
}
- throw new Error(`No diagram type detected for text: ${text}`);
+ throw new UnknownDiagramError(`No diagram type detected for text: ${text}`);
};
export const registerLazyLoadedDiagrams = (...diagrams: ExternalDiagramDefinition[]) => {
diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index d600195770..0811365638 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -18,6 +18,7 @@ export interface DiagramDb {
setDiagramTitle?: (title: string) => void;
getAccTitle?: () => string;
getAccDescription?: () => string;
+ bindFunctions?: (element: Element) => void;
}
export interface DiagramDefinition {
diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.js b/packages/mermaid/src/diagrams/class/classRenderer-v2.js
index d95c29fd5f..b7e538583f 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.js
@@ -348,19 +348,6 @@ export const setConf = function (cnf) {
*/
export const draw = function (text, id, _version, diagObj) {
log.info('Drawing class - ', id);
- // diagObj.db.clear();
- // const parser = diagObj.db.parser;
- // parser.yy = classDb;
-
- // Parse the graph definition
- // try {
- // parser.parse(text);
- // } catch (err) {
- // log.debug('Parsing failed');
- // }
-
- // Fetch the default direction, use TD if none was found
- //let dir = 'TD';
const conf = getConfig().flowchart;
const securityLevel = getConfig().securityLevel;
@@ -384,15 +371,6 @@ export const draw = function (text, id, _version, diagObj) {
return {};
});
- // let subG;
- // const subGraphs = flowDb.getSubGraphs();
- // log.info('Subgraphs - ', subGraphs);
- // for (let i = subGraphs.length - 1; i >= 0; i--) {
- // subG = subGraphs[i];
- // log.info('Subgraph - ', subG);
- // flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);
- // }
-
// Fetch the vertices/nodes and edges/links from the parsed graph definition
const classes = diagObj.db.getClasses();
const relations = diagObj.db.getRelations();
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index e4ce05350c..acee7bbe52 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -2,15 +2,12 @@
import { select, selectAll } from 'd3';
import svgDraw, { drawText, fixLifeLineHeights } from './svgDraw';
import { log } from '../../logger';
-// import { parser } from './parser/sequenceDiagram';
import common from '../common/common';
-// import sequenceDb from './sequenceDb';
import * as configApi from '../../config';
import assignWithDepth from '../../assignWithDepth';
import utils from '../../utils';
import { configureSvgSize } from '../../setupGraphViewbox';
-import Diagram from '../../Diagram';
-import { convert } from '../../tests/util';
+import { Diagram } from '../../Diagram';
let conf = {};
diff --git a/packages/mermaid/src/errors.ts b/packages/mermaid/src/errors.ts
new file mode 100644
index 0000000000..e3650c5a98
--- /dev/null
+++ b/packages/mermaid/src/errors.ts
@@ -0,0 +1,6 @@
+export class UnknownDiagramError extends Error {
+ constructor(message: string) {
+ super(message);
+ this.name = 'UnknownDiagramError';
+ }
+}
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index 540e0368ea..c4499bbc32 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -7,7 +7,7 @@ import dedent from 'ts-dedent';
import { MermaidConfig } from './config.type';
import { log } from './logger';
import utils from './utils';
-import { mermaidAPI } from './mermaidAPI';
+import { mermaidAPI, RenderResult } from './mermaidAPI';
import { registerLazyLoadedDiagrams } from './diagram-api/detectType';
import type { ParseErrorFunction } from './Diagram';
import { isDetailedError } from './utils';
@@ -44,10 +44,8 @@ export type { MermaidConfig, DetailedError, ExternalDiagramDefinition, ParseErro
*/
const init = async function (
config?: MermaidConfig,
- // eslint-disable-next-line no-undef
nodes?: string | HTMLElement | NodeListOf,
- // eslint-disable-next-line @typescript-eslint/ban-types
- callback?: Function
+ callback?: (id: string) => unknown
) {
try {
await initThrowsErrors(config, nodes, callback);
@@ -125,8 +123,7 @@ const loadExternalDiagrams = async (...diagrams: ExternalDiagramDefinition[]) =>
const initThrowsErrors = async function (
config?: MermaidConfig,
nodes?: string | HTMLElement | NodeListOf,
- // eslint-disable-next-line @typescript-eslint/ban-types
- callback?: Function
+ callback?: (id: string) => unknown
) {
const conf = mermaidAPI.getConfig();
@@ -188,20 +185,14 @@ const initThrowsErrors = async function (
log.debug('Detected early reinit: ', init);
}
try {
- await mermaidAPI.render(
- id,
- txt,
- (svgCode: string, bindFunctions?: (el: Element) => void) => {
- element.innerHTML = svgCode;
- if (callback !== undefined) {
- callback(id);
- }
- if (bindFunctions) {
- bindFunctions(element);
- }
- },
- element
- );
+ const { svg, bindFunctions } = await mermaidAPI.render(id, txt, element);
+ element.innerHTML = svg;
+ if (callback) {
+ callback(id);
+ }
+ if (bindFunctions) {
+ bindFunctions(element);
+ }
} catch (error) {
handleError(error, errors, mermaid.parseError);
}
@@ -296,15 +287,24 @@ const executeQueue = async () => {
};
/**
- * @param txt - The mermaid code to be parsed.
+ * Parse the text and validate the syntax.
+ * @param text - The mermaid diagram definition.
+ * @param parseOptions - Options for parsing.
+ * @returns true if the diagram is valid, false otherwise if parseOptions.silent is true.
+ * @throws Error if the diagram is invalid and parseOptions.silent is false.
*/
-const parse = (txt: string): Promise => {
+const parse = async (
+ text: string,
+ parseOptions?: {
+ silent?: boolean;
+ }
+): Promise => {
return new Promise((resolve, reject) => {
// This promise will resolve when the mermaidAPI.render call is done.
// It will be queued first and will be executed when it is first in line
const performCall = () =>
new Promise((res, rej) => {
- mermaidAPI.parse(txt, mermaid.parseError).then(
+ mermaidAPI.parse(text, parseOptions).then(
(r) => {
// This resolves for the promise for the queue handling
res(r);
@@ -313,6 +313,7 @@ const parse = (txt: string): Promise => {
},
(e) => {
log.error('Error parsing', e);
+ mermaid.parseError?.(e);
rej(e);
reject(e);
}
@@ -323,18 +324,13 @@ const parse = (txt: string): Promise => {
});
};
-const render = (
- id: string,
- text: string,
- cb?: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
- container?: Element
-): Promise => {
+const render = (id: string, text: string, container?: Element): Promise => {
return new Promise((resolve, reject) => {
// This promise will resolve when the mermaidAPI.render call is done.
// It will be queued first and will be executed when it is first in line
const performCall = () =>
new Promise((res, rej) => {
- mermaidAPI.render(id, text, cb, container).then(
+ mermaidAPI.render(id, text, container).then(
(r) => {
// This resolves for the promise for the queue handling
res(r);
@@ -343,6 +339,7 @@ const render = (
},
(e) => {
log.error('Error parsing', e);
+ mermaid.parseError?.(e);
rej(e);
reject(e);
}
@@ -355,7 +352,6 @@ const render = (
const mermaid: {
startOnLoad: boolean;
- diagrams: any;
parseError?: ParseErrorFunction;
mermaidAPI: typeof mermaidAPI;
parse: typeof parse;
@@ -368,7 +364,6 @@ const mermaid: {
setParseErrorHandler: typeof setParseErrorHandler;
} = {
startOnLoad: true,
- diagrams: {},
mermaidAPI,
parse,
render,
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 275ec656b6..5a71bb08e2 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -17,11 +17,7 @@ import { compile, serialize, stringify } from 'stylis';
import { version } from '../package.json';
import * as configApi from './config';
import { addDiagrams } from './diagram-api/diagram-orchestration';
-import classDb from './diagrams/class/classDb';
-import flowDb from './diagrams/flowchart/flowDb';
-import ganttDb from './diagrams/gantt/ganttDb';
-import Diagram, { getDiagramFromText } from './Diagram';
-import type { ParseErrorFunction } from './Diagram';
+import { Diagram, getDiagramFromText } from './Diagram';
import errorRenderer from './diagrams/error/errorRenderer';
import { attachFunctions } from './interactionDb';
import { log, setLogLevel } from './logger';
@@ -37,7 +33,7 @@ import { parseDirective } from './directiveUtils';
// diagram names that support classDef statements
const CLASSDEF_DIAGRAMS = ['graph', 'flowchart', 'flowchart-v2', 'stateDiagram', 'stateDiagram-v2'];
-
+const MAX_TEXTLENGTH = 50_000;
const MAX_TEXTLENGTH_EXCEEDED_MSG =
'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
@@ -74,16 +70,34 @@ interface DiagramStyleClassDef {
// @ts-ignore Could replicate the type definition in d3. This also makes it possible to use the untyped info from the js diagram files.
export type D3Element = any;
-// ----------------------------------------------------------------------------
-
/**
+ * Parse the text and validate the syntax.
* @param text - The mermaid diagram definition.
- * @param parseError - If set, handles errors.
+ * @param parseOptions - Options for parsing.
+ * @returns true if the diagram is valid, false otherwise if parseOptions.silent is true.
+ * @throws Error if the diagram is invalid and parseOptions.silent is false.
*/
-async function parse(text: string, parseError?: ParseErrorFunction): Promise {
+
+async function parse(
+ text: string,
+ parseOptions?: {
+ silent?: boolean;
+ }
+): Promise {
addDiagrams();
- const diagram = await getDiagramFromText(text, parseError);
- return diagram.parse(text, parseError);
+ let error;
+ try {
+ const diagram = await getDiagramFromText(text);
+ diagram.parse();
+ } catch (err) {
+ error = err;
+ }
+ if (parseOptions?.silent) {
+ return error === undefined;
+ }
+ if (error) {
+ throw error;
+ }
}
/**
@@ -366,12 +380,16 @@ export const removeExistingElements = (
* @returns Returns the rendered element as a string containing the SVG definition.
*/
+export interface RenderResult {
+ svg: string;
+ bindFunctions?: (element: Element) => void;
+}
+
const render = async function (
id: string,
text: string,
- cb?: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
svgContainingElement?: Element
-): Promise {
+): Promise {
addDiagrams();
configApi.reset();
@@ -387,8 +405,7 @@ const render = async function (
log.debug(config);
// Check the maximum allowed text size
- // TODO: Remove magic number
- if (text.length > (config?.maxTextSize ?? 50000)) {
+ if (text.length > (config?.maxTextSize ?? MAX_TEXTLENGTH)) {
text = MAX_TEXTLENGTH_EXCEEDED_MSG;
}
@@ -453,11 +470,10 @@ const render = async function (
// Create the diagram
// Important that we do not create the diagram until after the directives have been included
- let diag;
+ let diag: Diagram;
let parseEncounteredException;
try {
- // diag = new Diagram(text);
diag = await getDiagramFromText(text);
} catch (error) {
diag = new Diagram('error');
@@ -510,7 +526,7 @@ const render = async function (
root.select(`[id="${id}"]`).selectAll('foreignobject > *').attr('xmlns', XMLNS_XHTML_STD);
// Fix for when the base tag is used
- let svgCode = root.select(enclosingDivID_selector).node().innerHTML;
+ let svgCode: string = root.select(enclosingDivID_selector).node().innerHTML;
log.debug('config.arrowMarkerAbsolute', config.arrowMarkerAbsolute);
svgCode = cleanUpSvgCode(svgCode, isSandboxed, evaluate(config.arrowMarkerAbsolute));
@@ -526,27 +542,6 @@ const render = async function (
});
}
- // -------------------------------------------------------------------------------
- // Do any callbacks (cb = callback)
- if (cb !== undefined) {
- switch (graphType) {
- case 'flowchart':
- case 'flowchart-v2':
- cb(svgCode, flowDb.bindFunctions);
- break;
- case 'gantt':
- cb(svgCode, ganttDb.bindFunctions);
- break;
- case 'class':
- case 'classDiagram':
- cb(svgCode, classDb.bindFunctions);
- break;
- default:
- cb(svgCode);
- }
- } else {
- log.debug('CB = undefined!');
- }
attachFunctions();
// -------------------------------------------------------------------------------
@@ -561,7 +556,10 @@ const render = async function (
throw parseEncounteredException;
}
- return svgCode;
+ return {
+ svg: svgCode,
+ bindFunctions: diag.db.bindFunctions,
+ };
};
/**
From d2927435ab18ee172a544ad648fc49812ad84289 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod
Date: Sun, 19 Feb 2023 13:09:31 +0530
Subject: [PATCH 14/34] Fix tests
---
packages/mermaid/src/__mocks__/mermaidAPI.ts | 19 +-
packages/mermaid/src/diagram.spec.ts | 31 +-
.../flowchart/flowRenderer.addEdges.spec.js | 2 +-
.../diagrams/sequence/sequenceDiagram.spec.js | 350 +++++++++---------
packages/mermaid/src/mermaid.spec.ts | 47 +--
packages/mermaid/src/mermaidAPI.spec.ts | 81 ++--
6 files changed, 269 insertions(+), 261 deletions(-)
diff --git a/packages/mermaid/src/__mocks__/mermaidAPI.ts b/packages/mermaid/src/__mocks__/mermaidAPI.ts
index 50018bcadf..95b87d990d 100644
--- a/packages/mermaid/src/__mocks__/mermaidAPI.ts
+++ b/packages/mermaid/src/__mocks__/mermaidAPI.ts
@@ -5,23 +5,14 @@
*/
import * as configApi from '../config';
import { vi } from 'vitest';
-import { addDiagrams } from '../diagram-api/diagram-orchestration';
-import Diagram, { type ParseErrorFunction } from '../Diagram';
-
-// Normally, we could just do the following to get the original `parse()`
-// implementation, however, requireActual returns a promise and it's not documented how to use withing mock file.
-
-/** {@inheritDoc mermaidAPI.parse} */
-function parse(text: string, parseError?: ParseErrorFunction): boolean {
- addDiagrams();
- const diagram = new Diagram(text, parseError);
- return diagram.parse(text, parseError);
-}
+import { mermaidAPI as mAPI } from '../mermaidAPI';
// original version cannot be modified since it was frozen with `Object.freeze()`
export const mermaidAPI = {
- render: vi.fn(),
- parse,
+ render: vi.fn().mockResolvedValue({
+ svg: '',
+ }),
+ parse: mAPI.parse,
parseDirective: vi.fn(),
initialize: vi.fn(),
getConfig: configApi.getConfig,
diff --git a/packages/mermaid/src/diagram.spec.ts b/packages/mermaid/src/diagram.spec.ts
index ebe088a868..a862c79361 100644
--- a/packages/mermaid/src/diagram.spec.ts
+++ b/packages/mermaid/src/diagram.spec.ts
@@ -1,18 +1,18 @@
import { describe, test, expect } from 'vitest';
-import Diagram, { getDiagramFromText } from './Diagram';
+import { Diagram, getDiagramFromText } from './Diagram';
import { addDetector } from './diagram-api/detectType';
import { addDiagrams } from './diagram-api/diagram-orchestration';
addDiagrams();
describe('diagram detection', () => {
- test('should detect inbuilt diagrams', () => {
- const graph = getDiagramFromText('graph TD; A-->B') as Diagram;
+ test('should detect inbuilt diagrams', async () => {
+ const graph = (await getDiagramFromText('graph TD; A-->B')) as Diagram;
expect(graph).toBeInstanceOf(Diagram);
expect(graph.type).toBe('flowchart-v2');
- const sequence = getDiagramFromText(
+ const sequence = (await getDiagramFromText(
'sequenceDiagram; Alice->>+John: Hello John, how are you?'
- ) as Diagram;
+ )) as Diagram;
expect(sequence).toBeInstanceOf(Diagram);
expect(sequence.type).toBe('sequence');
});
@@ -44,14 +44,15 @@ describe('diagram detection', () => {
expect(diagram.type).toBe('loki');
});
- test('should throw the right error for incorrect diagram', () => {
- expect(() => getDiagramFromText('graph TD; A-->')).toThrowErrorMatchingInlineSnapshot(`
-"Parse error on line 3:
-graph TD; A-->
---------------^
-Expecting 'AMP', 'ALPHA', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'MINUS', 'BRKT', 'DOT', 'PUNCTUATION', 'UNICODE_TEXT', 'PLUS', 'EQUALS', 'MULT', 'UNDERSCORE', got 'EOF'"
- `);
- expect(() => getDiagramFromText('sequenceDiagram; A-->B')).toThrowErrorMatchingInlineSnapshot(`
+ test('should throw the right error for incorrect diagram', async () => {
+ await expect(getDiagramFromText('graph TD; A-->')).rejects.toThrowErrorMatchingInlineSnapshot(`
+ "Parse error on line 2:
+ graph TD; A-->
+ --------------^
+ Expecting 'AMP', 'ALPHA', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'MINUS', 'BRKT', 'DOT', 'PUNCTUATION', 'UNICODE_TEXT', 'PLUS', 'EQUALS', 'MULT', 'UNDERSCORE', got 'EOF'"
+ `);
+ await expect(getDiagramFromText('sequenceDiagram; A-->B')).rejects
+ .toThrowErrorMatchingInlineSnapshot(`
"Parse error on line 1:
...quenceDiagram; A-->B
-----------------------^
@@ -59,8 +60,8 @@ Expecting 'TXT', got 'NEWLINE'"
`);
});
- test('should throw the right error for unregistered diagrams', () => {
- expect(() => getDiagramFromText('thor TD; A-->B')).toThrowError(
+ test('should throw the right error for unregistered diagrams', async () => {
+ await expect(getDiagramFromText('thor TD; A-->B')).rejects.toThrowError(
'No diagram type detected for text: thor TD; A-->B'
);
});
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.addEdges.spec.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.addEdges.spec.js
index 41868e2035..01b6163cb8 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.addEdges.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.addEdges.spec.js
@@ -1,7 +1,7 @@
import flowDb from './flowDb';
import flowParser from './parser/flow';
import flowRenderer from './flowRenderer';
-import Diagram from '../../Diagram';
+import { Diagram } from '../../Diagram';
import { addDiagrams } from '../../diagram-api/diagram-orchestration';
addDiagrams();
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
index 80850c2f2a..72daca932d 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
@@ -2,7 +2,7 @@ import { vi } from 'vitest';
import * as configApi from '../../config';
import mermaidAPI from '../../mermaidAPI';
-import Diagram from '../../Diagram';
+import { Diagram } from '../../Diagram';
import { addDiagrams } from '../../diagram-api/diagram-orchestration';
/**
@@ -176,14 +176,14 @@ Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!`);
diagram.db.clear();
});
- it('should handle a sequenceDiagram definition', function () {
+ it('should handle a sequenceDiagram definition', async function () {
const str = `
sequenceDiagram
Alice->Bob:Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!`;
- mermaidAPI.parse(str, diagram);
+ await mermaidAPI.parse(str, diagram);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
actors.Bob.description = 'Bob';
@@ -194,18 +194,18 @@ Bob-->Alice: I am good thanks!`;
expect(messages[0].from).toBe('Alice');
expect(messages[2].from).toBe('Bob');
});
- it('should not show sequence numbers per default', function () {
+ it('should not show sequence numbers per default', async () => {
const str = `
sequenceDiagram
Alice->Bob:Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility auto numbers
expect(diagram.db.showSequenceNumbers()).toBe(false);
});
- it('should show sequence numbers when autonumber is enabled', function () {
+ it('should show sequence numbers when autonumber is enabled', async () => {
const str = `
sequenceDiagram
autonumber
@@ -213,11 +213,11 @@ Alice->Bob:Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility auto numbers
expect(diagram.db.showSequenceNumbers()).toBe(true);
});
- it('should handle a sequenceDiagram definition with a title:', function () {
+ it('should handle a sequenceDiagram definition with a title:', async () => {
const str = `
sequenceDiagram
title: Diagram Title
@@ -225,7 +225,7 @@ Alice->Bob:Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
actors.Bob.description = 'Bob';
@@ -240,7 +240,7 @@ Bob-->Alice: I am good thanks!`;
expect(title).toBe('Diagram Title');
});
- it('should handle a sequenceDiagram definition with a title without a :', function () {
+ it('should handle a sequenceDiagram definition with a title without a :', async () => {
const str = `
sequenceDiagram
title Diagram Title
@@ -248,7 +248,7 @@ Alice->Bob:Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
actors.Bob.description = 'Bob';
@@ -263,7 +263,7 @@ Bob-->Alice: I am good thanks!`;
expect(title).toBe('Diagram Title');
});
- it('should handle a sequenceDiagram definition with a accessibility title and description (accDescr)', function () {
+ it('should handle a sequenceDiagram definition with a accessibility title and description (accDescr)', async () => {
const str = `
sequenceDiagram
title: Diagram Title
@@ -272,13 +272,13 @@ accDescr: Accessibility Description
Alice->Bob:Hello Bob, how are you?
`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
expect(diagram.db.getDiagramTitle()).toBe('Diagram Title');
expect(diagram.db.getAccTitle()).toBe('This is the title');
expect(diagram.db.getAccDescription()).toBe('Accessibility Description');
const messages = diagram.db.getMessages();
});
- it('should handle a sequenceDiagram definition with a accessibility title and multiline description (accDescr)', function () {
+ it('should handle a sequenceDiagram definition with a accessibility title and multiline description (accDescr)', async () => {
const str = `
sequenceDiagram
accTitle: This is the title
@@ -289,19 +289,19 @@ Description
Alice->Bob:Hello Bob, how are you?
`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
expect(diagram.db.getAccTitle()).toBe('This is the title');
expect(diagram.db.getAccDescription()).toBe('Accessibility\nDescription');
const messages = diagram.db.getMessages();
});
- it('should space in actor names', function () {
+ it('should space in actor names', async () => {
const str = `
sequenceDiagram
Alice->Bob:Hello Bob, how are - you?
Bob-->Alice: I am good thanks!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
actors.Bob.description = 'Bob';
@@ -312,13 +312,13 @@ Bob-->Alice: I am good thanks!`;
expect(messages[0].from).toBe('Alice');
expect(messages[1].from).toBe('Bob');
});
- it('should handle dashes in actor names', function () {
+ it('should handle dashes in actor names', async () => {
const str = `
sequenceDiagram
Alice-in-Wonderland->Bob:Hello Bob, how are - you?
Bob-->Alice-in-Wonderland:I am good thanks!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors['Alice-in-Wonderland'].description).toBe('Alice-in-Wonderland');
expect(actors.Bob.description).toBe('Bob');
@@ -330,7 +330,7 @@ Bob-->Alice-in-Wonderland:I am good thanks!`;
expect(messages[1].from).toBe('Bob');
});
- it('should handle dashes in participant names', function () {
+ it('should handle dashes in participant names', async () => {
const str = `
sequenceDiagram
participant Alice-in-Wonderland
@@ -338,7 +338,7 @@ participant Bob
Alice-in-Wonderland->Bob:Hello Bob, how are - you?
Bob-->Alice-in-Wonderland:I am good thanks!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(Object.keys(actors)).toEqual(['Alice-in-Wonderland', 'Bob']);
expect(actors['Alice-in-Wonderland'].description).toBe('Alice-in-Wonderland');
@@ -351,7 +351,7 @@ Bob-->Alice-in-Wonderland:I am good thanks!`;
expect(messages[1].from).toBe('Bob');
});
- it('should alias participants', function () {
+ it('should alias participants', async () => {
const str = `
sequenceDiagram
participant A as Alice
@@ -359,7 +359,7 @@ participant B as Bob
A->B:Hello Bob, how are you?
B-->A: I am good thanks!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
@@ -372,7 +372,7 @@ B-->A: I am good thanks!`;
expect(messages[0].from).toBe('A');
expect(messages[1].from).toBe('B');
});
- it('should alias a mix of actors and participants apa12', function () {
+ it('should alias a mix of actors and participants apa12', async () => {
const str = `
sequenceDiagram
actor Alice as Alice2
@@ -385,7 +385,7 @@ sequenceDiagram
John->>Mandy: Hi Mandy
Mandy ->>Joan: Hi Joan`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(Object.keys(actors)).toEqual(['Alice', 'Bob', 'John', 'Mandy', 'Joan']);
@@ -400,7 +400,7 @@ sequenceDiagram
expect(messages[0].from).toBe('Alice');
expect(messages[4].to).toBe('Joan');
});
- it('should alias actors apa13', function () {
+ it('should alias actors apa13', async () => {
const str = `
sequenceDiagram
actor A as Alice
@@ -408,7 +408,7 @@ actor B as Bob
A->B:Hello Bob, how are you?
B-->A: I am good thanks!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(Object.keys(actors)).toEqual(['A', 'B']);
@@ -420,12 +420,12 @@ B-->A: I am good thanks!`;
expect(messages[0].from).toBe('A');
expect(messages[1].from).toBe('B');
});
- it('should handle in async messages', function () {
+ it('should handle in async messages', async () => {
const str = `
sequenceDiagram
Alice-xBob:Hello Bob, how are you?`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
expect(actors.Bob.description).toBe('Bob');
@@ -435,12 +435,12 @@ Alice-xBob:Hello Bob, how are you?`;
expect(messages.length).toBe(1);
expect(messages[0].type).toBe(diagram.db.LINETYPE.SOLID_CROSS);
});
- it('should handle in async dotted messages', function () {
+ it('should handle in async dotted messages', async () => {
const str = `
sequenceDiagram
Alice--xBob:Hello Bob, how are you?`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
expect(actors.Bob.description).toBe('Bob');
@@ -450,12 +450,12 @@ Alice--xBob:Hello Bob, how are you?`;
expect(messages.length).toBe(1);
expect(messages[0].type).toBe(diagram.db.LINETYPE.DOTTED_CROSS);
});
- it('should handle in sync messages', function () {
+ it('should handle in sync messages', async () => {
const str = `
sequenceDiagram
Alice-)Bob:Hello Bob, how are you?`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
expect(actors.Bob.description).toBe('Bob');
@@ -465,12 +465,12 @@ Alice-)Bob:Hello Bob, how are you?`;
expect(messages.length).toBe(1);
expect(messages[0].type).toBe(diagram.db.LINETYPE.SOLID_POINT);
});
- it('should handle in sync dotted messages', function () {
+ it('should handle in sync dotted messages', async () => {
const str = `
sequenceDiagram
Alice--)Bob:Hello Bob, how are you?`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
expect(actors.Bob.description).toBe('Bob');
@@ -480,12 +480,12 @@ Alice--)Bob:Hello Bob, how are you?`;
expect(messages.length).toBe(1);
expect(messages[0].type).toBe(diagram.db.LINETYPE.DOTTED_POINT);
});
- it('should handle in arrow messages', function () {
+ it('should handle in arrow messages', async () => {
const str = `
sequenceDiagram
Alice->>Bob:Hello Bob, how are you?`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
expect(actors.Bob.description).toBe('Bob');
@@ -495,10 +495,10 @@ Alice->>Bob:Hello Bob, how are you?`;
expect(messages.length).toBe(1);
expect(messages[0].type).toBe(diagram.db.LINETYPE.SOLID);
});
- it('should handle in arrow messages', function () {
+ it('should handle in arrow messages', async () => {
const str = 'sequenceDiagram\n' + 'Alice-->>Bob:Hello Bob, how are you?';
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
expect(actors.Bob.description).toBe('Bob');
@@ -508,7 +508,7 @@ Alice->>Bob:Hello Bob, how are you?`;
expect(messages.length).toBe(1);
expect(messages[0].type).toBe(diagram.db.LINETYPE.DOTTED);
});
- it('should handle actor activation', function () {
+ it('should handle actor activation', async () => {
const str = `
sequenceDiagram
Alice-->>Bob:Hello Bob, how are you?
@@ -516,7 +516,7 @@ activate Bob
Bob-->>Alice:Hello Alice, I'm fine and you?
deactivate Bob`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
expect(actors.Bob.description).toBe('Bob');
@@ -531,13 +531,13 @@ deactivate Bob`;
expect(messages[3].type).toBe(diagram.db.LINETYPE.ACTIVE_END);
expect(messages[3].from.actor).toBe('Bob');
});
- it('should handle actor one line notation activation', function () {
+ it('should handle actor one line notation activation', async () => {
const str = `
sequenceDiagram
Alice-->>+Bob:Hello Bob, how are you?
Bob-->>- Alice:Hello Alice, I'm fine and you?`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
expect(actors.Bob.description).toBe('Bob');
@@ -552,7 +552,7 @@ deactivate Bob`;
expect(messages[3].type).toBe(diagram.db.LINETYPE.ACTIVE_END);
expect(messages[3].from.actor).toBe('Bob');
});
- it('should handle stacked activations', function () {
+ it('should handle stacked activations', async () => {
const str = `
sequenceDiagram
Alice-->>+Bob:Hello Bob, how are you?
@@ -560,7 +560,7 @@ deactivate Bob`;
Bob-->>- Alice:Hello Alice, please meet Carol?
Carol->>- Bob:Oh Bob, I'm so happy to be here!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
expect(actors.Bob.description).toBe('Bob');
@@ -579,7 +579,7 @@ deactivate Bob`;
expect(messages[7].type).toBe(diagram.db.LINETYPE.ACTIVE_END);
expect(messages[7].from.actor).toBe('Carol');
});
- it('should handle fail parsing when activating an inactive participant', function () {
+ it('should handle fail parsing when activating an inactive participant', async () => {
const str = `
sequenceDiagram
participant user as End User
@@ -598,14 +598,14 @@ deactivate Bob`;
let error = false;
try {
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
} catch (e) {
error = true;
}
expect(error).toBe(true);
});
- it('should handle comments in a sequenceDiagram', function () {
+ it('should handle comments in a sequenceDiagram', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -613,7 +613,7 @@ deactivate Bob`;
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
actors.Bob.description = 'Bob';
@@ -624,7 +624,7 @@ deactivate Bob`;
expect(messages[0].from).toBe('Alice');
expect(messages[2].from).toBe('Bob');
});
- it('should handle new lines in a sequenceDiagram', function () {
+ it('should handle new lines in a sequenceDiagram', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -634,7 +634,7 @@ deactivate Bob`;
Bob-->Alice: I am good thanks!
`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
actors.Bob.description = 'Bob';
@@ -645,11 +645,11 @@ deactivate Bob`;
expect(messages[0].from).toBe('Alice');
expect(messages[2].from).toBe('Bob');
});
- it('should handle semicolons', function () {
+ it('should handle semicolons', async () => {
const str = `
sequenceDiagram;Alice->Bob: Hello Bob, how are you?;Note right of Bob: Bob thinks;Bob-->Alice: I am good thanks!;`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
actors.Bob.description = 'Bob';
@@ -660,7 +660,7 @@ sequenceDiagram;Alice->Bob: Hello Bob, how are you?;Note right of Bob: Bob think
expect(messages[0].from).toBe('Alice');
expect(messages[2].from).toBe('Bob');
});
- it('should handle one leading space in lines in a sequenceDiagram', function () {
+ it('should handle one leading space in lines in a sequenceDiagram', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -669,7 +669,7 @@ sequenceDiagram
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
actors.Bob.description = 'Bob';
@@ -680,7 +680,7 @@ Bob-->Alice: I am good thanks!`;
expect(messages[0].from).toBe('Alice');
expect(messages[2].from).toBe('Bob');
});
- it('should handle several leading spaces in lines in a sequenceDiagram', function () {
+ it('should handle several leading spaces in lines in a sequenceDiagram', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -689,7 +689,7 @@ sequenceDiagram
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
actors.Bob.description = 'Bob';
@@ -700,7 +700,7 @@ Bob-->Alice: I am good thanks!`;
expect(messages[0].from).toBe('Alice');
expect(messages[2].from).toBe('Bob');
});
- it('should handle several leading spaces in lines in a sequenceDiagram', function () {
+ it('should handle several leading spaces in lines in a sequenceDiagram', async () => {
const str = `
sequenceDiagram
participant Alice
@@ -714,7 +714,7 @@ Note right of John: Rational thoughts prevail...
John->Bob: How about you?
Bob-->John: Jolly good!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
actors.Bob.description = 'Bob';
@@ -725,7 +725,7 @@ Bob-->John: Jolly good!`;
expect(messages[0].from).toBe('Alice');
expect(messages[2].from).toBe('John');
});
- it('should handle different line breaks', function () {
+ it('should handle different line breaks', async () => {
const str = `
sequenceDiagram
participant 1 as multiline text
@@ -742,7 +742,7 @@ note right of 4: multiline text
note right of 1: multiline text
`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors['1'].description).toBe('multiline text');
@@ -760,7 +760,7 @@ note right of 1: multiline text
expect(messages[6].message).toBe('multiline text');
expect(messages[7].message).toBe('multiline text');
});
- it('should handle notes and messages without wrap specified', function () {
+ it('should handle notes and messages without wrap specified', async () => {
const str = `
sequenceDiagram
participant 1
@@ -777,7 +777,7 @@ note right of 4: multiline text
note right of 1:nowrap: multiline text
`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const messages = diagram.db.getMessages();
expect(messages[0].message).toBe('single-line text');
@@ -799,7 +799,7 @@ note right of 1:nowrap: multiline text
expect(messages[6].wrap).toBe(false);
expect(messages[7].wrap).toBe(false);
});
- it('should handle notes and messages with wrap specified', function () {
+ it('should handle notes and messages with wrap specified', async () => {
const str = `
sequenceDiagram
participant 1
@@ -812,7 +812,7 @@ note right of 2:wrap: single-line text
note right of 3:wrap: multiline text
`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const messages = diagram.db.getMessages();
expect(messages[0].message).toBe('single-line text');
@@ -824,7 +824,7 @@ note right of 3:wrap: multiline text
expect(messages[2].wrap).toBe(true);
expect(messages[3].wrap).toBe(true);
});
- it('should handle notes and messages with nowrap or line breaks', function () {
+ it('should handle notes and messages with nowrap or line breaks', async () => {
const str = `
sequenceDiagram
participant 1
@@ -833,7 +833,7 @@ participant 2
note right of 2: single-line text
`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const messages = diagram.db.getMessages();
expect(messages[0].message).toBe('single-line text');
@@ -841,20 +841,20 @@ note right of 2: single-line text
expect(messages[0].wrap).toBe(false);
expect(messages[1].wrap).toBe(false);
});
- it('should handle notes over a single actor', function () {
+ it('should handle notes over a single actor', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Note over Bob: Bob thinks
`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const messages = diagram.db.getMessages();
expect(messages[1].from).toBe('Bob');
expect(messages[1].to).toBe('Bob');
});
- it('should handle notes over multiple actors', function () {
+ it('should handle notes over multiple actors', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -862,7 +862,7 @@ Note over Alice,Bob: confusion
Note over Bob,Alice: resolution
`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const messages = diagram.db.getMessages();
expect(messages[1].from).toBe('Alice');
@@ -870,7 +870,7 @@ Note over Bob,Alice: resolution
expect(messages[2].from).toBe('Bob');
expect(messages[2].to).toBe('Alice');
});
- it('should handle loop statements', function () {
+ it('should handle loop statements', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -882,7 +882,7 @@ loop Multiple happy responses
Bob-->Alice: I am good thanks!
end`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
actors.Bob.description = 'Bob';
@@ -893,7 +893,7 @@ end`;
expect(messages[0].from).toBe('Alice');
expect(messages[1].from).toBe('Bob');
});
- it('should add a rect around sequence', function () {
+ it('should add a rect around sequence', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -904,7 +904,7 @@ end`;
end
`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
actors.Bob.description = 'Bob';
@@ -917,7 +917,7 @@ end`;
expect(messages[4].type).toEqual(diagram.db.LINETYPE.RECT_END);
});
- it('should allow for nested rects', function () {
+ it('should allow for nested rects', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -929,7 +929,7 @@ end`;
Bob-->Alice: I am good thanks
end
`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
actors.Bob.description = 'Bob';
@@ -944,7 +944,7 @@ end`;
expect(messages[5].type).toEqual(diagram.db.LINETYPE.DOTTED_OPEN);
expect(messages[6].type).toEqual(diagram.db.LINETYPE.RECT_END);
});
- it('should handle opt statements', function () {
+ it('should handle opt statements', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -956,7 +956,7 @@ opt Perhaps a happy response
Bob-->Alice: I am good thanks!
end`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
actors.Bob.description = 'Bob';
@@ -967,7 +967,7 @@ end`;
expect(messages[0].from).toBe('Alice');
expect(messages[1].from).toBe('Bob');
});
- it('should handle alt statements', function () {
+ it('should handle alt statements', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -981,7 +981,7 @@ else isSick
Bob-->Alice: Feel sick...
end`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
@@ -993,7 +993,7 @@ end`;
expect(messages[0].from).toBe('Alice');
expect(messages[1].from).toBe('Bob');
});
- it('should handle alt statements with multiple elses', function () {
+ it('should handle alt statements with multiple elses', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -1008,7 +1008,7 @@ Bob-->Alice: Feel sick...
else default
Bob-->Alice: :-)
end`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const messages = diagram.db.getMessages();
expect(messages.length).toBe(9);
expect(messages[1].from).toBe('Bob');
@@ -1020,14 +1020,14 @@ end`;
expect(messages[7].from).toBe('Bob');
expect(messages[8].type).toBe(diagram.db.LINETYPE.ALT_END);
});
- it('should handle critical statements without options', function () {
+ it('should handle critical statements without options', async () => {
const str = `
sequenceDiagram
critical Establish a connection to the DB
Service-->DB: connect
end`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Service.description).toBe('Service');
@@ -1040,7 +1040,7 @@ sequenceDiagram
expect(messages[1].from).toBe('Service');
expect(messages[2].type).toBe(diagram.db.LINETYPE.CRITICAL_END);
});
- it('should handle critical statements with options', function () {
+ it('should handle critical statements with options', async () => {
const str = `
sequenceDiagram
critical Establish a connection to the DB
@@ -1051,7 +1051,7 @@ sequenceDiagram
Service-->Service: Log different error
end`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Service.description).toBe('Service');
@@ -1068,7 +1068,7 @@ sequenceDiagram
expect(messages[5].from).toBe('Service');
expect(messages[6].type).toBe(diagram.db.LINETYPE.CRITICAL_END);
});
- it('should handle break statements', function () {
+ it('should handle break statements', async () => {
const str = `
sequenceDiagram
Consumer-->API: Book something
@@ -1078,7 +1078,7 @@ sequenceDiagram
end
API-->BillingService: Start billing process`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Consumer.description).toBe('Consumer');
@@ -1094,7 +1094,7 @@ sequenceDiagram
expect(messages[4].type).toBe(diagram.db.LINETYPE.BREAK_END);
expect(messages[5].from).toBe('API');
});
- it('should handle par statements a sequenceDiagram', function () {
+ it('should handle par statements a sequenceDiagram', async () => {
const str = `
sequenceDiagram
par Parallel one
@@ -1108,7 +1108,7 @@ Alice->>Bob: What do you think about it?
Bob-->>Alice: It's good!
end`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.Alice.description).toBe('Alice');
@@ -1121,26 +1121,26 @@ end`;
expect(messages[1].from).toBe('Alice');
expect(messages[2].from).toBe('Bob');
});
- it('should handle special characters in signals', function () {
+ it('should handle special characters in signals', async () => {
const str = 'sequenceDiagram\n' + 'Alice->Bob: -:<>,;# comment';
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const messages = diagram.db.getMessages();
expect(messages[0].message).toBe('-:<>,');
});
- it('should handle special characters in notes', function () {
+ it('should handle special characters in notes', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Note right of Bob: -:<>,;# comment`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const messages = diagram.db.getMessages();
expect(messages[1].message).toBe('-:<>,');
});
- it('should handle special characters in loop', function () {
+ it('should handle special characters in loop', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -1148,12 +1148,12 @@ loop -:<>,;# comment
Bob-->Alice: I am good thanks!
end`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const messages = diagram.db.getMessages();
expect(messages[1].message).toBe('-:<>,');
});
- it('should handle special characters in opt', function () {
+ it('should handle special characters in opt', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -1161,12 +1161,12 @@ opt -:<>,;# comment
Bob-->Alice: I am good thanks!
end`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const messages = diagram.db.getMessages();
expect(messages[1].message).toBe('-:<>,');
});
- it('should handle special characters in alt', function () {
+ it('should handle special characters in alt', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -1176,13 +1176,13 @@ else ,<>:-#; comment
Bob-->Alice: I am good thanks!
end`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const messages = diagram.db.getMessages();
expect(messages[1].message).toBe('-:<>,');
expect(messages[3].message).toBe(',<>:-');
});
- it('should handle special characters in par', function () {
+ it('should handle special characters in par', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -1192,13 +1192,13 @@ and ,<>:-#; comment
Bob-->Alice: I am good thanks!
end`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const messages = diagram.db.getMessages();
expect(messages[1].message).toBe('-:<>,');
expect(messages[3].message).toBe(',<>:-');
});
- it('should handle no-label loop', function () {
+ it('should handle no-label loop', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -1206,13 +1206,13 @@ loop
Bob-->Alice: I am good thanks!
end`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const messages = diagram.db.getMessages();
expect(messages[1].message).toBe('');
expect(messages[2].message).toBe('I am good thanks!');
});
- it('should handle no-label opt', function () {
+ it('should handle no-label opt', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -1220,13 +1220,13 @@ opt # comment
Bob-->Alice: I am good thanks!
end`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const messages = diagram.db.getMessages();
expect(messages[1].message).toBe('');
expect(messages[2].message).toBe('I am good thanks!');
});
- it('should handle no-label alt', function () {
+ it('should handle no-label alt', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -1235,7 +1235,7 @@ else # comment
Bob-->Alice: I am good thanks!
end`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const messages = diagram.db.getMessages();
expect(messages[1].message).toBe('');
@@ -1243,7 +1243,7 @@ end`;
expect(messages[3].message).toBe('');
expect(messages[4].message).toBe('I am good thanks!');
});
- it('should handle no-label par', function () {
+ it('should handle no-label par', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -1252,7 +1252,7 @@ and # comment
Bob-->Alice: I am good thanks!
end`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const messages = diagram.db.getMessages();
expect(messages[1].message).toBe('');
@@ -1261,7 +1261,7 @@ end`;
expect(messages[4].message).toBe('I am good thanks!');
});
- it('should handle links', function () {
+ it('should handle links', async () => {
const str = `
sequenceDiagram
participant a as Alice
@@ -1275,7 +1275,7 @@ link a: Swagger @ https://swagger.contoso.com
link a: Tests @ https://tests.contoso.com/?svc=alice@contoso.com
`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.a.links['Repo']).toBe('https://repo.contoso.com/');
expect(actors.b.links['Repo']).toBe(undefined);
@@ -1288,7 +1288,7 @@ link a: Tests @ https://tests.contoso.com/?svc=alice@contoso.com
expect(actors.a.links['Tests']).toBe('https://tests.contoso.com/?svc=alice@contoso.com');
});
- it('should handle properties EXPERIMENTAL: USE WITH CAUTION', function () {
+ it('should handle properties EXPERIMENTAL: USE WITH CAUTION', async () => {
//Be aware that the syntax for "properties" is likely to be changed.
const str = `
sequenceDiagram
@@ -1299,7 +1299,7 @@ properties a: {"class": "internal-service-actor", "icon": "@clock"}
properties b: {"class": "external-service-actor", "icon": "@computer"}
`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(actors.a.properties['class']).toBe('internal-service-actor');
expect(actors.b.properties['class']).toBe('external-service-actor');
@@ -1308,7 +1308,7 @@ properties b: {"class": "external-service-actor", "icon": "@computer"}
expect(actors.c.properties['class']).toBe(undefined);
});
- it('should handle box', function () {
+ it('should handle box', async () => {
const str = `
sequenceDiagram
box green Group 1
@@ -1324,14 +1324,14 @@ link a: Swagger @ https://swagger.contoso.com
link a: Tests @ https://tests.contoso.com/?svc=alice@contoso.com
`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const boxes = diagram.db.getBoxes();
expect(boxes[0].name).toEqual('Group 1');
expect(boxes[0].actorKeys).toEqual(['a', 'b']);
expect(boxes[0].fill).toEqual('green');
});
- it('should handle box without color', function () {
+ it('should handle box without color', async () => {
const str = `
sequenceDiagram
box Group 1
@@ -1347,14 +1347,14 @@ link a: Tests @ https://tests.contoso.com/?svc=alice@contoso.com
link a: Tests @ https://tests.contoso.com/?svc=alice@contoso.com
`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const boxes = diagram.db.getBoxes();
expect(boxes[0].name).toEqual('Group 1');
expect(boxes[0].actorKeys).toEqual(['a', 'b']);
expect(boxes[0].fill).toEqual('transparent');
});
- it('should handle box without description', function () {
+ it('should handle box without description', async () => {
const str = `
sequenceDiagram
box Aqua
@@ -1370,7 +1370,7 @@ link a: Tests @ https://tests.contoso.com/?svc=alice@contoso.com
link a: Tests @ https://tests.contoso.com/?svc=alice@contoso.com
`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const boxes = diagram.db.getBoxes();
expect(boxes[0].name).toBeFalsy();
expect(boxes[0].actorKeys).toEqual(['a', 'b']);
@@ -1403,7 +1403,7 @@ describe('when checking the bounds in a sequenceDiagram', function () {
diagram.renderer.bounds.init();
conf = diagram.db.getConfig();
});
- it('should handle a simple bound call', function () {
+ it('should handle a simple bound call', async () => {
diagram.renderer.bounds.insert(100, 100, 200, 200);
const { bounds } = diagram.renderer.bounds.getBounds();
@@ -1412,7 +1412,7 @@ describe('when checking the bounds in a sequenceDiagram', function () {
expect(bounds.stopx).toBe(200);
expect(bounds.stopy).toBe(200);
});
- it('should handle an expanding bound', function () {
+ it('should handle an expanding bound', async () => {
diagram.renderer.bounds.insert(100, 100, 200, 200);
diagram.renderer.bounds.insert(25, 50, 300, 400);
@@ -1422,7 +1422,7 @@ describe('when checking the bounds in a sequenceDiagram', function () {
expect(bounds.stopx).toBe(300);
expect(bounds.stopy).toBe(400);
});
- it('should handle inserts within the bound without changing the outer bounds', function () {
+ it('should handle inserts within the bound without changing the outer bounds', async () => {
diagram.renderer.bounds.insert(100, 100, 200, 200);
diagram.renderer.bounds.insert(25, 50, 300, 400);
diagram.renderer.bounds.insert(125, 150, 150, 200);
@@ -1433,7 +1433,7 @@ describe('when checking the bounds in a sequenceDiagram', function () {
expect(bounds.stopx).toBe(300);
expect(bounds.stopy).toBe(400);
});
- it('should handle a loop without expanding the area', function () {
+ it('should handle a loop without expanding the area', async () => {
diagram.renderer.bounds.insert(25, 50, 300, 400);
diagram.renderer.bounds.verticalPos = 150;
diagram.renderer.bounds.newLoop();
@@ -1454,7 +1454,7 @@ describe('when checking the bounds in a sequenceDiagram', function () {
expect(bounds.stopx).toBe(300);
expect(bounds.stopy).toBe(400);
});
- it('should handle multiple loops withtout expanding the bounds', function () {
+ it('should handle multiple loops withtout expanding the bounds', async () => {
diagram.renderer.bounds.insert(100, 100, 1000, 1000);
diagram.renderer.bounds.verticalPos = 200;
diagram.renderer.bounds.newLoop();
@@ -1485,7 +1485,7 @@ describe('when checking the bounds in a sequenceDiagram', function () {
expect(bounds.stopx).toBe(1000);
expect(bounds.stopy).toBe(1000);
});
- it('should handle a loop that expands the area', function () {
+ it('should handle a loop that expands the area', async () => {
diagram.renderer.bounds.insert(100, 100, 200, 200);
diagram.renderer.bounds.verticalPos = 200;
diagram.renderer.bounds.newLoop();
@@ -1555,13 +1555,13 @@ Bob-->Alice: I am good thanks!`);
});
['tspan', 'fo', 'old', undefined].forEach(function (textPlacement) {
it(`
-it should handle one actor, when textPlacement is ${textPlacement}`, function () {
+it should handle one actor, when textPlacement is ${textPlacement}`, async () => {
const str = `
sequenceDiagram
participant Alice`;
// mermaidAPI.reinitialize({ sequence: { textPlacement: textPlacement } });
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
// diagram.renderer.setConf(mermaidAPI.getConfig().sequence);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
@@ -1572,7 +1572,7 @@ participant Alice`;
expect(bounds.stopy).toBe(conf.height);
});
});
- it('should handle same actor with different whitespace properly', function () {
+ it('should handle same actor with different whitespace properly', async () => {
const str = `
sequenceDiagram
participant Alice
@@ -1580,12 +1580,12 @@ participant Alice
participant Alice
`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
const actors = diagram.db.getActors();
expect(Object.keys(actors)).toEqual(['Alice']);
});
- it('should handle one actor and a centered note', function () {
+ it('should handle one actor and a centered note', async () => {
const str = `
sequenceDiagram
participant Alice
@@ -1593,7 +1593,7 @@ Note over Alice: Alice thinks
`;
expect(mermaidAPI.getConfig().sequence.mirrorActors).toBeFalsy();
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -1603,13 +1603,13 @@ Note over Alice: Alice thinks
// 10 comes from mock of text height
expect(bounds.stopy).toBe(models.lastNote().stopy);
});
- it('should handle one actor and a note to the left', function () {
+ it('should handle one actor and a note to the left', async () => {
const str = `
sequenceDiagram
participant Alice
Note left of Alice: Alice thinks`;
- mermaidAPI.parse(str, diagram);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -1619,13 +1619,13 @@ Note left of Alice: Alice thinks`;
// 10 comes from mock of text height
expect(bounds.stopy).toBe(models.lastNote().stopy);
});
- it('should handle one actor and a note to the right', function () {
+ it('should handle one actor and a note to the right', async () => {
const str = `
sequenceDiagram
participant Alice
Note right of Alice: Alice thinks`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -1635,12 +1635,12 @@ Note right of Alice: Alice thinks`;
// 10 comes from mock of text height
expect(bounds.stopy).toBe(models.lastNote().stopy);
});
- it('should handle two actors', function () {
+ it('should handle two actors', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -1649,7 +1649,7 @@ Alice->Bob: Hello Bob, how are you?`;
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
});
- it('should handle two actors in a box', function () {
+ it('should handle two actors in a box', async () => {
const str = `
sequenceDiagram
box rgb(34, 56, 0) Group1
@@ -1658,7 +1658,7 @@ participant Bob
end
Alice->Bob: Hello Bob, how are you?`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -1667,13 +1667,13 @@ Alice->Bob: Hello Bob, how are you?`;
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin + conf.boxTextMargin * 2);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 20);
});
- it('should handle two actors with init directive', function () {
+ it('should handle two actors with init directive', async () => {
const str = `
%%{init: {'logLevel': 0}}%%
sequenceDiagram
Alice->Bob: Hello Bob, how are you?`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -1684,7 +1684,7 @@ Alice->Bob: Hello Bob, how are you?`;
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
});
- it('should handle two actors with init directive with multiline directive', function () {
+ it('should handle two actors with init directive with multiline directive', async () => {
const str = `
%%{init: { 'logLevel': 0}}%%
sequenceDiagram
@@ -1693,7 +1693,7 @@ wrap
}%%
Alice->Bob: Hello Bob, how are you?`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const msgs = diagram.db.getMessages();
@@ -1706,7 +1706,7 @@ Alice->Bob: Hello Bob, how are you?`;
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
expect(msgs.every((v) => v.wrap)).toBe(true);
});
- it('should handle two actors and two centered shared notes', function () {
+ it('should handle two actors and two centered shared notes', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -1714,7 +1714,7 @@ Note over Alice,Bob: Looks
Note over Bob,Alice: Looks back
`;
// mermaidAPI.initialize({logLevel:0})
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -1723,13 +1723,13 @@ Note over Bob,Alice: Looks back
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastNote().stopy);
});
- it('should draw two actors and two messages', function () {
+ it('should draw two actors and two messages', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Bob->Alice: Fine!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -1738,14 +1738,14 @@ Bob->Alice: Fine!`;
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
});
- it('should draw two actors notes to the right', function () {
+ it('should draw two actors notes to the right', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob->Alice: Fine!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -1757,14 +1757,14 @@ Bob->Alice: Fine!`;
expect(bounds.stopx).toBe(expStopX);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
});
- it('should draw two actors notes to the left', function () {
+ it('should draw two actors notes to the left', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Note left of Alice: Bob thinks
Bob->Alice: Fine!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -1774,14 +1774,14 @@ Bob->Alice: Fine!`;
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
});
- it('should draw two actors notes to the left with text wrapped (inline)', function () {
+ it('should draw two actors notes to the left with text wrapped (inline)', async () => {
const str = `
sequenceDiagram
Alice->>Bob:wrap: Hello Bob, how are you? If you are not available right now, I can leave you a message. Please get back to me as soon as you can!
Note left of Alice: Bob thinks
Bob->>Alice: Fine!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -1793,7 +1793,7 @@ Bob->>Alice: Fine!`;
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
});
- it('should draw two actors notes to the left with text wrapped (directive)', function () {
+ it('should draw two actors notes to the left with text wrapped (directive)', async () => {
const str = `
%%{init: { 'theme': 'dark' } }%%
sequenceDiagram
@@ -1802,7 +1802,7 @@ Alice->>Bob: Hello Bob, how are you? If you are not available right now, I can l
Note left of Alice: Bob thinks
Bob->>Alice: Fine!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -1816,7 +1816,7 @@ Bob->>Alice: Fine!`;
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
});
- it('should draw two actors notes to the left with text wrapped and the init directive sets the theme to dark', function () {
+ it('should draw two actors notes to the left with text wrapped and the init directive sets the theme to dark', async () => {
const str = `
%%{init:{'theme':'dark'}}%%
sequenceDiagram
@@ -1825,7 +1825,7 @@ Alice->>Bob: Hello Bob, how are you? If you are not available right now, I can l
Note left of Alice: Bob thinks
Bob->>Alice: Fine!`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -1839,7 +1839,7 @@ Bob->>Alice: Fine!`;
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
});
- it('should draw two actors, notes to the left with text wrapped and the init directive sets the theme to dark and fontFamily to Menlo, fontSize to 18, and fontWeight to 800', function () {
+ it('should draw two actors, notes to the left with text wrapped and the init directive sets the theme to dark and fontFamily to Menlo, fontSize to 18, and fontWeight to 800', async () => {
const str = `
%%{init: { "theme": "dark", 'config': { "fontFamily": "Menlo", "fontSize": 18, "messageFontWeight": 400, "wrap": true }}}%%
sequenceDiagram
@@ -1847,7 +1847,7 @@ Alice->>Bob: Hello Bob, how are you? If you are not available right now, I can l
Note left of Alice: Bob thinks
Bob->>Alice: Fine!`;
// mermaidAPI.initialize({ logLevel: 0 });
- mermaidAPI.parse(str, diagram);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -1864,14 +1864,14 @@ Bob->>Alice: Fine!`;
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastMessage().stopy + 10);
});
- it('should draw two loops', function () {
+ it('should draw two loops', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
loop Cheers
Bob->Alice: Fine!
end`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -1881,7 +1881,7 @@ end`;
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(models.lastLoop().stopy);
});
- it('should draw background rect', function () {
+ it('should draw background rect', async () => {
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, are you alright?
@@ -1889,7 +1889,7 @@ end`;
Bob->Alice: I feel surrounded by darkness
end
`;
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
expect(bounds.startx).toBe(0);
@@ -1900,7 +1900,7 @@ end`;
});
});
-describe('when rendering a sequenceDiagram with actor mirror activated', function () {
+describe('when rendering a sequenceDiagram with actor mirror activated', () => {
beforeAll(() => {
let conf = {
diagramMarginX: 50,
@@ -1931,14 +1931,14 @@ describe('when rendering a sequenceDiagram with actor mirror activated', functio
diagram.renderer.bounds.init();
});
['tspan', 'fo', 'old', undefined].forEach(function (textPlacement) {
- it('should handle one actor, when textPlacement is' + textPlacement, function () {
+ it('should handle one actor, when textPlacement is' + textPlacement, async () => {
mermaidAPI.initialize(addConf(conf, 'textPlacement', textPlacement));
diagram.renderer.bounds.init();
const str = `
sequenceDiagram
participant Alice`;
diagram.renderer.bounds.init();
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
@@ -1950,7 +1950,7 @@ participant Alice`;
});
});
-describe('when rendering a sequenceDiagram with directives', function () {
+describe('when rendering a sequenceDiagram with directives', () => {
beforeAll(function () {
let conf = {
diagramMarginX: 50,
@@ -1975,7 +1975,7 @@ describe('when rendering a sequenceDiagram with directives', function () {
diagram.renderer.bounds.init();
});
- it('should handle one actor, when theme is dark and logLevel is 1 DX1 (dfg1)', function () {
+ it('should handle one actor, when theme is dark and logLevel is 1 DX1 (dfg1)', async () => {
const str = `
%%{init: { "theme": "dark", "logLevel": 1 } }%%
sequenceDiagram
@@ -1985,7 +1985,7 @@ participant Alice
diagram = new Diagram(str);
diagram.renderer.bounds.init();
- mermaidAPI.parse(str);
+ await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
@@ -2000,7 +2000,7 @@ participant Alice
models.lastActor().y + models.lastActor().height + mermaid.sequence.boxMargin
);
});
- it('should handle one actor, when logLevel is 3 (dfg0)', function () {
+ it('should handle one actor, when logLevel is 3 (dfg0)', async () => {
const str = `
%%{initialize: { "logLevel": 3 }}%%
sequenceDiagram
@@ -2020,7 +2020,7 @@ participant Alice
models.lastActor().y + models.lastActor().height + mermaid.sequence.boxMargin
);
});
- it('should hide sequence numbers when autonumber is removed when autonumber is enabled', function () {
+ it('should hide sequence numbers when autonumber is removed when autonumber is enabled', async () => {
const str1 = `
sequenceDiagram
autonumber
@@ -2028,7 +2028,7 @@ Alice->Bob:Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!`;
- mermaidAPI.parse(str1, diagram);
+ await mermaidAPI.parse(str1);
diagram.renderer.draw(str1, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility auto numbers
expect(diagram.db.showSequenceNumbers()).toBe(true);
@@ -2038,7 +2038,7 @@ Alice->Bob:Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!`;
- mermaidAPI.parse(str2, diagram);
+ await mermaidAPI.parse(str2);
diagram.renderer.draw(str2, 'tst', '1.2.3', diagram);
expect(diagram.db.showSequenceNumbers()).toBe(false);
});
diff --git a/packages/mermaid/src/mermaid.spec.ts b/packages/mermaid/src/mermaid.spec.ts
index f9709510e1..f50661dcf2 100644
--- a/packages/mermaid/src/mermaid.spec.ts
+++ b/packages/mermaid/src/mermaid.spec.ts
@@ -6,12 +6,12 @@ const spyOn = vi.spyOn;
vi.mock('./mermaidAPI');
afterEach(() => {
- vi.restoreAllMocks();
+ vi.clearAllMocks();
});
-describe('when using mermaid and ', function () {
- describe('when detecting chart type ', function () {
- it('should not start rendering with mermaid.startOnLoad set to false', function () {
+describe('when using mermaid and ', () => {
+ describe('when detecting chart type ', () => {
+ it('should not start rendering with mermaid.startOnLoad set to false', async () => {
mermaid.startOnLoad = false;
document.body.innerHTML = '
graph TD;\na;
';
spyOn(mermaid, 'init');
@@ -19,7 +19,7 @@ describe('when using mermaid and ', function () {
expect(mermaid.init).not.toHaveBeenCalled();
});
- it('should start rendering with both startOnLoad set', function () {
+ it('should start rendering with both startOnLoad set', async () => {
mermaid.startOnLoad = true;
document.body.innerHTML = '
graph TD;\na;
';
spyOn(mermaid, 'init');
@@ -27,7 +27,7 @@ describe('when using mermaid and ', function () {
expect(mermaid.init).toHaveBeenCalled();
});
- it('should start rendering with mermaid.startOnLoad', function () {
+ it('should start rendering with mermaid.startOnLoad', async () => {
mermaid.startOnLoad = true;
document.body.innerHTML = '
graph TD;\na;
';
spyOn(mermaid, 'init');
@@ -35,7 +35,7 @@ describe('when using mermaid and ', function () {
expect(mermaid.init).toHaveBeenCalled();
});
- it('should start rendering as a default with no changes performed', function () {
+ it('should start rendering as a default with no changes performed', async () => {
document.body.innerHTML = '
graph TD;\na;
';
spyOn(mermaid, 'init');
mermaid.contentLoaded();
@@ -43,7 +43,7 @@ describe('when using mermaid and ', function () {
});
});
- describe('when using #initThrowsErrors', function () {
+ describe('when using #initThrowsErrors', () => {
it('should accept single node', async () => {
const node = document.createElement('div');
node.appendChild(document.createTextNode('graph TD;\na;'));
@@ -54,7 +54,8 @@ describe('when using mermaid and ', function () {
expect(mermaidAPI.render).toHaveBeenCalled();
});
});
- describe('when using #registerExternalDiagrams', function () {
+
+ describe('when using #registerExternalDiagrams', () => {
it('should throw error (but still render) if registerExternalDiagrams fails', async () => {
const node = document.createElement('div');
node.appendChild(document.createTextNode('graph TD;\na;'));
@@ -137,19 +138,21 @@ describe('when using mermaid and ', function () {
});
});
- describe('checking validity of input ', function () {
- it('should throw for an invalid definition', function () {
- expect(() => mermaid.parse('this is not a mermaid diagram definition')).toThrow();
+ describe('checking validity of input ', () => {
+ it('should throw for an invalid definition', async () => {
+ await expect(mermaid.parse('this is not a mermaid diagram definition')).rejects.toThrow();
});
- it('should not throw for a valid flow definition', function () {
- expect(() => mermaid.parse('graph TD;A--x|text including URL space|B;')).not.toThrow();
+ it('should not throw for a valid flow definition', async () => {
+ await expect(
+ mermaid.parse('graph TD;A--x|text including URL space|B;')
+ ).resolves.not.toThrow();
});
- it('should throw for an invalid flow definition', function () {
- expect(() => mermaid.parse('graph TQ;A--x|text including URL space|B;')).toThrow();
+ it('should throw for an invalid flow definition', async () => {
+ await expect(mermaid.parse('graph TQ;A--x|text including URL space|B;')).rejects.toThrow();
});
- it('should not throw for a valid sequenceDiagram definition (mmds1)', function () {
+ it('should not throw for a valid sequenceDiagram definition (mmds1)', async () => {
const text =
'sequenceDiagram\n' +
'Alice->Bob: Hello Bob, how are you?\n\n' +
@@ -160,10 +163,10 @@ describe('when using mermaid and ', function () {
'else isSick\n' +
'Bob-->Alice: Feel sick...\n' +
'end';
- expect(() => mermaid.parse(text)).not.toThrow();
+ await expect(mermaid.parse(text)).resolves.not.toThrow();
});
- it('should throw for an invalid sequenceDiagram definition', function () {
+ it('should throw for an invalid sequenceDiagram definition', async () => {
const text =
'sequenceDiagram\n' +
'Alice:->Bob: Hello Bob, how are you?\n\n' +
@@ -174,15 +177,15 @@ describe('when using mermaid and ', function () {
'else isSick\n' +
'Bob-->Alice: Feel sick...\n' +
'end';
- expect(() => mermaid.parse(text)).toThrow();
+ await expect(mermaid.parse(text)).rejects.toThrow();
});
- it('should return false for invalid definition WITH a parseError() callback defined', function () {
+ it('should return false for invalid definition WITH a parseError() callback defined', async () => {
let parseErrorWasCalled = false;
mermaid.setParseErrorHandler(() => {
parseErrorWasCalled = true;
});
- expect(mermaid.parse('this is not a mermaid diagram definition')).toEqual(false);
+ await expect(mermaid.parse('this is not a mermaid diagram definition')).rejects.toThrow();
expect(parseErrorWasCalled).toEqual(true);
});
});
diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts
index e86b9b15fc..b162378668 100644
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -76,7 +76,7 @@ import { compile, serialize } from 'stylis';
// -------------------------------------------------------------------------------------
-describe('mermaidAPI', function () {
+describe('mermaidAPI', () => {
describe('encodeEntities', () => {
it('removes the ending ; from style [text1]:[optional word]#[text2]; with ', () => {
const text = 'style this; is ; everything :something#not-nothing; and this too;';
@@ -515,13 +515,13 @@ describe('mermaidAPI', function () {
});
});
- describe('initialize', function () {
- beforeEach(function () {
+ describe('initialize', () => {
+ beforeEach(() => {
document.body.innerHTML = '';
mermaidAPI.globalReset();
});
- it('copies a literal into the configuration', function () {
+ it('copies a literal into the configuration', () => {
const orgConfig: any = mermaidAPI.getConfig();
expect(orgConfig.testLiteral).toBe(undefined);
@@ -533,7 +533,7 @@ describe('mermaidAPI', function () {
expect(config.testLiteral).toBe(true);
});
- it('copies an object into the configuration', function () {
+ it('copies an object into the configuration', () => {
const orgConfig: any = mermaidAPI.getConfig();
expect(orgConfig.testObject).toBe(undefined);
@@ -559,7 +559,7 @@ describe('mermaidAPI', function () {
expect(config.testObject.test3).toBe(true);
});
- it('resets mermaid config to global defaults', function () {
+ it('resets mermaid config to global defaults', () => {
const config = {
logLevel: 0,
securityLevel: 'loose',
@@ -576,7 +576,7 @@ describe('mermaidAPI', function () {
expect(mermaidAPI.getConfig().securityLevel).toBe('strict');
});
- it('prevents changes to site defaults (sneaky)', function () {
+ it('prevents changes to site defaults (sneaky)', () => {
const config: any = {
logLevel: 0,
};
@@ -584,7 +584,7 @@ describe('mermaidAPI', function () {
const siteConfig = mermaidAPI.getSiteConfig();
expect(mermaidAPI.getConfig().logLevel).toBe(0);
config.secure = {
- toString: function () {
+ toString: () => {
mermaidAPI.initialize({ securityLevel: 'loose' });
},
};
@@ -595,7 +595,7 @@ describe('mermaidAPI', function () {
expect(mermaidAPI.getSiteConfig()).toEqual(siteConfig);
expect(mermaidAPI.getConfig()).toEqual(siteConfig);
});
- it('prevents clobbering global defaults (direct)', function () {
+ it('prevents clobbering global defaults (direct)', () => {
const config = assignWithDepth({}, mermaidAPI.defaultConfig);
assignWithDepth(config, { logLevel: 0 });
@@ -611,7 +611,7 @@ describe('mermaidAPI', function () {
);
expect(mermaidAPI.defaultConfig['logLevel']).toBe(5);
});
- it('prevents changes to global defaults (direct)', function () {
+ it('prevents changes to global defaults (direct)', () => {
let error: any = { message: '' };
try {
mermaidAPI.defaultConfig['logLevel'] = 0;
@@ -623,7 +623,7 @@ describe('mermaidAPI', function () {
);
expect(mermaidAPI.defaultConfig['logLevel']).toBe(5);
});
- it('prevents sneaky changes to global defaults (assignWithDepth)', function () {
+ it('prevents sneaky changes to global defaults (assignWithDepth)', () => {
const config = {
logLevel: 0,
};
@@ -640,48 +640,61 @@ describe('mermaidAPI', function () {
});
});
- describe('dompurify config', function () {
- it('allows dompurify config to be set', function () {
+ describe('dompurify config', () => {
+ it('allows dompurify config to be set', () => {
mermaidAPI.initialize({ dompurifyConfig: { ADD_ATTR: ['onclick'] } });
expect(mermaidAPI!.getConfig()!.dompurifyConfig!.ADD_ATTR).toEqual(['onclick']);
});
});
- describe('parse', function () {
+ describe('parse', () => {
mermaid.parseError = undefined; // ensure it parseError undefined
- it('throws for an invalid definition (with no mermaid.parseError() defined)', function () {
+ it('throws for an invalid definition (with no mermaid.parseError() defined)', async () => {
expect(mermaid.parseError).toEqual(undefined);
- expect(() => mermaidAPI.parse('this is not a mermaid diagram definition')).toThrow();
+ await expect(
+ mermaidAPI.parse('this is not a mermaid diagram definition')
+ ).rejects.toThrowError();
});
- it('throws for a nicer error for a invalid definition starting with `---`', function () {
+ it('throws for a nicer error for a invalid definition starting with `---`', async () => {
expect(mermaid.parseError).toEqual(undefined);
- expect(() =>
+ await expect(
mermaidAPI.parse(`
---
title: a malformed YAML front-matter
`)
- ).toThrow(
+ ).rejects.toThrow(
'Diagrams beginning with --- are not valid. ' +
'If you were trying to use a YAML front-matter, please ensure that ' +
"you've correctly opened and closed the YAML front-matter with unindented `---` blocks"
);
});
- it('does not throw for a valid definition', function () {
- expect(() => mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).not.toThrow();
- });
- it('returns false for invalid definition WITH a parseError() callback defined', function () {
- let parseErrorWasCalled = false;
- // also test setParseErrorHandler() call working to set mermaid.parseError
- expect(
- mermaidAPI.parse('this is not a mermaid diagram definition', () => {
- parseErrorWasCalled = true;
- })
- ).toEqual(false);
- expect(parseErrorWasCalled).toEqual(true);
- });
- it('returns true for valid definition', function () {
- expect(mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).toEqual(true);
+ it('does not throw for a valid definition', async () => {
+ await expect(
+ mermaidAPI.parse('graph TD;A--x|text including URL space|B;')
+ ).resolves.not.toThrow();
+ });
+ it('throws for invalid definition', async () => {
+ await expect(
+ mermaidAPI.parse('this is not a mermaid diagram definition')
+ ).rejects.toThrowErrorMatchingInlineSnapshot(
+ '"No diagram type detected for text: this is not a mermaid diagram definition"'
+ );
+ });
+ it('returns false for invalid definition with silent option', async () => {
+ await expect(
+ mermaidAPI.parse('this is not a mermaid diagram definition', { silent: true })
+ ).resolves.toBe(false);
+ });
+ it('resolves for valid definition', async () => {
+ await expect(
+ mermaidAPI.parse('graph TD;A--x|text including URL space|B;')
+ ).resolves.not.toThrow();
+ });
+ it('returns true for valid definition with silent option', async () => {
+ await expect(
+ mermaidAPI.parse('graph TD;A--x|text including URL space|B;', { silent: true })
+ ).resolves.toBe(true);
});
});
From 735aceb37a3a5907c97e9de0ca243fa6ae1b31a4 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod
Date: Sun, 19 Feb 2023 14:03:11 +0530
Subject: [PATCH 15/34] Fix E2E Tests
---
.vite/server.ts | 10 +---
cypress/platform/bundle-test.js | 16 ++----
cypress/platform/class.html | 4 +-
cypress/platform/click_security_loose.html | 4 +-
cypress/platform/click_security_other.html | 4 +-
cypress/platform/click_security_sandbox.html | 4 +-
cypress/platform/click_security_strict.html | 4 +-
cypress/platform/css1.html | 4 +-
cypress/platform/current2.html | 4 +-
cypress/platform/e2e.html | 38 +------------
cypress/platform/flow.html | 4 +-
cypress/platform/ghsa1.html | 14 ++---
cypress/platform/ghsa2.html | 6 +-
cypress/platform/ghsa3.html | 16 +++---
cypress/platform/git-graph.html | 4 +-
cypress/platform/gitgraph.html | 4 +-
cypress/platform/gitgraph2.html | 4 +-
cypress/platform/huge.html | 4 +-
cypress/platform/info.html | 4 +-
cypress/platform/interaction.html | 4 +-
cypress/platform/per.html | 2 +-
cypress/platform/regression/issue-1874.html | 18 +++---
cypress/platform/render-after-error.html | 15 +++--
cypress/platform/rerender.html | 16 +++---
cypress/platform/showcase_base.html | 4 +-
cypress/platform/showcase_base_dark.html | 4 +-
cypress/platform/showcase_dark.html | 4 +-
cypress/platform/showcase_default.html | 4 +-
cypress/platform/showcase_forest.html | 4 +-
cypress/platform/showcase_neutral.html | 4 +-
cypress/platform/sidv.html | 6 --
cypress/platform/subgraph.html | 4 +-
cypress/platform/theme-directives.html | 4 +-
cypress/platform/user-journey.html | 4 +-
cypress/platform/vertices.html | 4 +-
cypress/platform/viewer.js | 29 +++-------
cypress/platform/xss.html | 4 +-
cypress/platform/xss10.html | 11 ++--
cypress/platform/xss11.html | 11 ++--
cypress/platform/xss12.html | 11 ++--
cypress/platform/xss13.html | 11 ++--
cypress/platform/xss14.html | 11 ++--
cypress/platform/xss15.html | 11 ++--
cypress/platform/xss16.html | 11 ++--
cypress/platform/xss17.html | 11 ++--
cypress/platform/xss18.html | 11 ++--
cypress/platform/xss19.html | 11 ++--
cypress/platform/xss2.html | 6 +-
cypress/platform/xss20.html | 10 ++--
cypress/platform/xss21.html | 12 ++--
cypress/platform/xss22.html | 4 +-
cypress/platform/xss3.html | 4 +-
cypress/platform/xss4.html | 9 ++-
cypress/platform/xss5.html | 11 ++--
cypress/platform/xss6.html | 11 ++--
cypress/platform/xss7.html | 11 ++--
cypress/platform/xss8.html | 11 ++--
cypress/platform/xss9.html | 11 ++--
demos/c4context.html | 22 +++----
demos/classchart.html | 4 +-
demos/dataflowchart.html | 4 +-
demos/er.html | 2 +-
demos/flowchart.html | 4 +-
demos/gantt.html | 4 +-
demos/git.html | 4 +-
demos/journey.html | 4 +-
demos/requirements.html | 4 +-
demos/sequence.html | 4 +-
demos/state.html | 4 +-
demos/timeline.html | 4 +-
docs/config/usage.md | 4 +-
package.json | 4 +-
packages/mermaid/src/docs/config/usage.md | 4 +-
pnpm-lock.yaml | 60 +++++++++++++++++++-
74 files changed, 298 insertions(+), 334 deletions(-)
diff --git a/.vite/server.ts b/.vite/server.ts
index 0f1fef91d3..6f8959348b 100644
--- a/.vite/server.ts
+++ b/.vite/server.ts
@@ -1,13 +1,7 @@
-import express, { NextFunction, Request, Response } from 'express';
+import express from 'express';
+import cors from 'cors';
import { createServer as createViteServer } from 'vite';
-const cors = (req: Request, res: Response, next: NextFunction) => {
- res.header('Access-Control-Allow-Origin', '*');
- res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
- res.header('Access-Control-Allow-Headers', 'Content-Type');
-
- next();
-};
async function createServer() {
const app = express();
diff --git a/cypress/platform/bundle-test.js b/cypress/platform/bundle-test.js
index a991918c4c..edd3dfbc43 100644
--- a/cypress/platform/bundle-test.js
+++ b/cypress/platform/bundle-test.js
@@ -49,13 +49,9 @@ mermaid.initialize({
],
},
});
-mermaid.render(
- 'the-id-of-the-svg',
- code,
- (svg) => {
- console.log(svg);
- const elem = document.querySelector('#graph-to-be');
- elem.innerHTML = svg;
- }
- // ,document.querySelector('#tmp')
-);
+void (async () => {
+ const { svg } = await mermaid.render('the-id-of-the-svg', code);
+ console.log(svg);
+ const elem = document.querySelector('#graph-to-be');
+ elem.innerHTML = svg;
+})();
diff --git a/cypress/platform/class.html b/cypress/platform/class.html
index 1d72c34a59..052dd18b9a 100644
--- a/cypress/platform/class.html
+++ b/cypress/platform/class.html
@@ -113,8 +113,8 @@
info below
callback Shape "callbackFunction" "This is a tooltip for a callback"
-
-
+