Merge pull request #1164 from mermaid-js/develop

Release v10
2023-02-24 10:51:07 +05:30
parent 131dd06cde 7dc59f1396
commit 1605536f13
15 changed files with 111 additions and 152 deletions
@@ -1,13 +1,17 @@
 {
  "editor.formatOnSave": true,
  "cSpell.words": [
-    "asyncable",
    "Browserslist",
-    "corg",
    "KROKI",
+    "Serde",
+    "asyncable",
+    "corg",
+    "cssnano",
+    "daisyui",
+    "esserializer",
+    "localstorage",
    "mindmap",
    "pako",
-    "Serde",
    "serdes",
    "tailwindcss"
  ],
@@ -3,6 +3,7 @@ describe('Check actions', () => {
  beforeEach(() => {
    cy.clearLocalStorage();
    cy.visit('/edit');
+    cy.contains('Actions').click();
  });

  it('should update markdown code', () => {
@@ -18,7 +19,7 @@ describe('Check actions', () => {
      });
  });

-  it('should load gists from URL', () => {
+  it.skip('should load gists from URL', () => {
    cy.get('#gist').type('https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a');
    cy.contains('Load Gist').click();
    cy.contains('Go shopping!!');
@@ -28,7 +29,7 @@ describe('Check actions', () => {
    cy.clock(new Date(2022, 0, 1).getTime());

    cy.get(`#downloadPNG`).click();
-    verifyFileSizeGreaterThan('diagram', 'png', 21_000);
+    verifyFileSizeGreaterThan('diagram', 'png', 35_000);

    cy.get(`#downloadSVG`).click();
    verifyFileSizeGreaterThan('diagram', 'svg', 10_000);
@@ -38,7 +39,7 @@ describe('Check actions', () => {
    cy.contains('ER').click();

    cy.get(`#downloadPNG`).click();
-    verifyFileSizeGreaterThan('diagram', 'png', 46_000);
+    verifyFileSizeGreaterThan('diagram', 'png', 40_000);

    cy.get(`#downloadSVG`).click();
    verifyFileSizeGreaterThan('diagram', 'svg', 11_000);
@@ -49,7 +49,7 @@ describe('Auto sync tests', () => {
  });

  it('supports commenting code out/in', () => {
-    getEditor().type(`{uparrow}${cmd}/`);
+    getEditor({ bottom: true, newline: false }).type(`{uparrow}${cmd}/`);
    cy.get('#view').contains('Car').should('not.exist');

    getEditor().type(`{uparrow}${cmd}/`);
@@ -6,7 +6,6 @@ describe('Save History', () => {
    cy.clearLocalStorage();
    cy.visit('/edit');

-    cy.contains('Actions').click();
    cy.contains('History').click();
  });

@@ -24,7 +23,6 @@ describe('Save History', () => {
      '[{"state":{"code":"graph TD\\n    A[New Year] -->|Get money| B(Go shopping)","mermaid":"{\\n  \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":false},"time":0,"type":"auto","id":"69ea820e-522b-4a44-86cf-fd58acde09df","name":"barking-dog"},{"state":{"code":"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)","mermaid":"{\\n  \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":true},"time":0,"type":"manual","id":"x749ffc6-21dd-418a-b984-7c1ffc3146b3","name":"needy-mosquito"}]'
    );
    cy.reload();
-    cy.contains('Actions').click();
    cy.contains('History').click();
    cy.get('#historyList').find('li').should('have.length', 2);
    cy.get('#historyList').find('No items in History').should('not.exist');
@@ -105,8 +105,7 @@ describe('Site Loads', () => {
    cy.contains('Animal');
  });

-  // No idea why this is failing.
-  it.skip('should load uncompressed URL', () => {
+  it('should load uncompressed URL', () => {
    cy.visit(
      '/edit/#eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW05ldyBZZWFyXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICAgIEIgLS0-IEN7TGV0IG1lIHRoaW5rfVxuICAgIEMgLS0-fE9uZXwgRFtMYXB0b3BdXG4gICAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXSIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJ1cGRhdGVFZGl0b3IiOmZhbHNlLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6ZmFsc2V9'
    );
@@ -21,7 +21,10 @@ export const verifyFileSizeGreaterThan = (
  cy.verifyDownload(fileName);
  cy.readFile(filePath, null, {
    log: false
-  }).then((buffer: ArrayBuffer) => expect(buffer.byteLength).to.be.gt(size));
+  }).then((buffer: ArrayBuffer) => {
+    expect(buffer.byteLength).to.be.gt(size);
+    expect(buffer.byteLength).to.be.lt(size * 1.3);
+  });
  cy.task('deleteFile', filePath);
 };

@@ -68,13 +68,12 @@
    "vitest": "^0.28.0"
  },
  "dependencies": {
-    "@mermaid-js/mermaid-mindmap": "9.3.0",
    "analytics": "0.8.1",
    "analytics-plugin-plausible": "0.0.6",
    "daisyui": "2.50.0",
+    "dayjs": "^1.11.7",
    "js-base64": "3.7.4",
-    "mermaid": "9.3.0",
-    "moment": "2.29.4",
+    "mermaid": "10.0.0",
    "monaco-editor": "0.34.1",
    "monaco-mermaid": "1.0.8",
    "pako": "2.1.0",
@@ -6,13 +6,13 @@
  import { stateStore } from '$lib/util/state';
  import { logEvent } from '$lib/util/stats';
  import { toBase64 } from 'js-base64';
-  import moment from 'moment';
+  import dayjs from 'dayjs';
  const { krokiRendererUrl, rendererUrl } = env;

  type Exporter = (context: CanvasRenderingContext2D, image: HTMLImageElement) => () => void;

  const getFileName = (ext: string) =>
-    `mermaid-diagram-${moment().format('YYYY-MM-DD-HHmmss')}.${ext}`;
+    `mermaid-diagram-${dayjs().format('YYYY-MM-DD-HHmmss')}.${ext}`;

  const getBase64SVG = (svg?: HTMLElement, width?: number, height?: number): string => {
    height && svg?.setAttribute('height', `${height}px`);
@@ -180,7 +180,7 @@
  });
 </script>

-<Card title="Actions" isOpen={true}>
+<Card title="Actions" isOpen={false}>
  <div class="flex flex-wrap gap-2 m-2">
    {#if isClipboardAvailable()}
      <button class="action-btn w-full" on:click={onCopyClipboard}
@@ -21,7 +21,7 @@
  let text = '';

  stateStore.subscribe(({ errorMarkers, editorMode, code, mermaid }) => {
-    console.log('editor store subscription', { code, mermaid });
+    // console.log('editor store subscription', { code, mermaid });
    if (!editor || !Monaco) {
      return;
    }
@@ -29,7 +29,7 @@
    // Update editor text if it's different
    const newText = editorMode === 'code' ? code : mermaid;
    if (newText !== text) {
-      console.log('updating editor text', newText);
+      // console.log('updating editor text', newText);
      editor.setValue(newText);
      text = newText;
    }
@@ -54,7 +54,7 @@
  });

  const handleUpdate = (text: string, mode: EditorMode) => {
-    console.log('editor HandleUpdate', { text, mode });
+    // console.log('editor HandleUpdate', { text, mode });
    if (mode === 'code') {
      updateCode(text);
    } else {
@@ -91,7 +91,7 @@
    editor = Monaco.editor.create(divEl, editorOptions);
    editor.onDidChangeModelContent(({ isFlush, changes }) => {
      const newText = editor?.getValue();
-      console.log('editor onDidChangeModelContent', { text, newText, isFlush, changes });
+      // console.log('editor onDidChangeModelContent', { text, newText, isFlush, changes });
      if (!newText || text === newText || isFlush) {
        return;
      }
@@ -120,9 +120,9 @@
    if (divEl.parentElement) {
      resizeObserver.observe(divEl.parentElement);
    }
-    console.log(`editor mounted`);
+    // console.log(`editor mounted`);
    return () => {
-      console.log(`editor disposed`);
+      // console.log(`editor disposed`);
      editor?.dispose();
    };
  });
@@ -13,10 +13,13 @@
  import { notify, prompt } from '$lib/util/notify';
  import { onMount } from 'svelte';
  import { get } from 'svelte/store';
-  import moment from 'moment';
+  import dayjs from 'dayjs';
+  import dayjsRelativeTime from 'dayjs/plugin/relativeTime';
  import type { HistoryEntry, HistoryType, State, Tab } from '$lib/types';
  import { logEvent } from '$lib/util/stats';

+  dayjs.extend(dayjsRelativeTime);
+
  const HISTORY_SAVE_INTERVAL = 60000;

  const tabSelectHandler = (message: CustomEvent<Tab>) => {
@@ -41,7 +44,7 @@
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
-    a.download = `mermaid-history-${moment().format('YYYY-MM-DD-HHmmss')}.json`;
+    a.download = `mermaid-history-${dayjs().format('YYYY-MM-DD-HHmmss')}.json`;
    a.click();
    URL.revokeObjectURL(url);
    logEvent('history', {
@@ -95,7 +98,7 @@

  const relativeTime = (time: number) => {
    const t = new Date(time);
-    return `${new Date(t).toLocaleString()} (${moment(t).fromNow()})`;
+    return `${new Date(t).toLocaleString()} (${dayjs(t).fromNow()})`;
  };

  onMount(() => {
@@ -79,27 +79,27 @@
        panZoomEnabled = state.panZoom;
        const scroll = view.parentElement!.scrollTop;
        delete container.dataset.processed;
-        await renderDiagram(
+        const { svg, bindFunctions } = await renderDiagram(
          Object.assign({}, JSON.parse(state.mermaid)) as MermaidConfig,
          code,
-          'graph-div',
-          (svgCode, bindFunctions) => {
-            if (svgCode.length > 0) {
-              handlePanZoom(state);
-              container.innerHTML = svgCode;
-              // console.log(container.innerHTML);
-              const graphDiv = document.getElementById('graph-div');
-              if (!graphDiv) {
-                throw new Error('graph-div not found');
-              }
-              graphDiv.setAttribute('height', '100%');
-              graphDiv.style.maxWidth = '100%';
-              if (bindFunctions) {
-                bindFunctions(graphDiv);
-              }
-            }
-          }
+          'graph-div'
        );
+
+        if (svg.length > 0) {
+          handlePanZoom(state);
+          container.innerHTML = svg;
+          console.log({ svg });
+          const graphDiv = document.getElementById('graph-div');
+          if (!graphDiv) {
+            throw new Error('graph-div not found');
+          }
+          graphDiv.setAttribute('height', '100%');
+          graphDiv.style.maxWidth = '100%';
+          if (bindFunctions) {
+            bindFunctions(graphDiv);
+          }
+        }
+
        view.parentElement!.scrollTop = scroll;
        error = false;
      } else if (manualUpdate) {
@@ -122,7 +122,7 @@
        pzoom.resize();
      }
    });
-    console.log('View mounted');
+    // console.log('View mounted');
  });
 </script>

@@ -133,7 +133,7 @@
      : 'text-yellow-600'} bg-base-100 bg-opacity-80 text-center"
    id="errorContainer">
    {#if error}
-      {@html $stateStore.error.toString().replace(/\n/g, '<br />')}
+      {@html $stateStore.error?.toString().replace(/\n/g, '<br />')}
    {:else}
      Diagram out of sync. <br />
      Press <i class="fas fa-sync" /> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync.
@@ -1,27 +1,16 @@
-import mermaid, { type MermaidConfig } from 'mermaid';
-import mindmap from '@mermaid-js/mermaid-mindmap';
-
-const initialize = mermaid.registerExternalDiagrams([mindmap]);
-
-export const init = async () => {
-  await initialize;
-};
+import mermaid from 'mermaid';
+import type { MermaidConfig, RenderResult } from 'mermaid';

 export const render = async (
  config: MermaidConfig,
  code: string,
-  id: string,
-  callback: Parameters<typeof mermaid.render>[2]
-): Promise<void> => {
+  id: string
+): Promise<RenderResult> => {
  // Should be able to call this multiple times without any issues.
  mermaid.initialize(config);
-  // console.log('Rendering', code);
-  // mermaid.mermaidAPI.render(id, code, callback);
-  await init();
-  await mermaid.mermaidAPI.renderAsync(id, code, callback);
+  return await mermaid.render(id, code);
 };

-export const parse = async (code: string): Promise<boolean> => {
-  await init();
-  return await mermaid.parseAsync(code);
+export const parse = async (code: string): Promise<unknown> => {
+  return await mermaid.parse(code);
 };
@@ -142,7 +142,7 @@ export const updateCode = (
    resetPanZoom = false
  }: { updateDiagram?: boolean; resetPanZoom?: boolean } = {}
 ): void => {
-  console.log('updateCode', code);
+  // console.log('updateCode', code);
  const lines = countLines(code);
  saveStatistics(code);
  errorDebug();
@@ -168,7 +168,7 @@ export const updateCode = (
 };

 export const updateConfig = (config: string): void => {
-  console.log('updateConfig', config);
+  // console.log('updateConfig', config);
  inputStateStore.update((state) => {
    return { ...state, mermaid: config };
  });
@@ -3,7 +3,6 @@ import { analytics, initAnalytics } from './stats';
 import { loadDataFromUrl } from './fileLoaders/loader';
 import { initLoading } from './loading';
 import { applyMigrations } from './migrations';
-import { init } from './mermaid';

 export const loadStateFromURL = (): void => {
  loadState(window.location.hash.slice(1));
@@ -17,7 +16,6 @@ export const syncDiagram = (): void => {

 export const initHandler = async (): Promise<void> => {
  applyMigrations();
-  await initLoading('Loading Mermaid...', init());
  loadStateFromURL();
  await initLoading('Loading Gist...', loadDataFromUrl().catch(console.error));
  syncDiagram();
@@ -362,19 +362,6 @@
    "@jridgewell/resolve-uri" "^3.0.3"
    "@jridgewell/sourcemap-codec" "^1.4.10"

-"@mermaid-js/mermaid-mindmap@9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@mermaid-js/mermaid-mindmap/-/mermaid-mindmap-9.3.0.tgz#cfe10329198a0f37e27eef1dcc4a1cf21f187e2b"
-  integrity sha512-IhtYSVBBRYviH1Ehu8gk69pMDF8DSRqXBRDMWrEfHoaMruHeaP2DXA3PBnuwsMaCdPQhlUUcy/7DBLAEIXvCAw==
-  dependencies:
-    "@braintree/sanitize-url" "^6.0.0"
-    cytoscape "^3.23.0"
-    cytoscape-cose-bilkent "^4.1.0"
-    cytoscape-fcose "^2.1.0"
-    d3 "^7.0.0"
-    khroma "^2.0.0"
-    non-layered-tidy-tree-layout "^2.0.2"
-
 "@nodelib/fs.scandir@2.1.5":
  version "2.1.5"
  resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
@@ -1767,13 +1754,6 @@ d3-chord@3:
  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.0.1.tgz#03316e595955d1fcd39d9f3610ad41bb90194d0a"
  integrity sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw==

-d3-contour@3:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-3.0.1.tgz#2c64255d43059599cd0dba8fe4cc3d51ccdd9bbd"
-  integrity sha512-0Oc4D0KyhwhM7ZL0RMnfGycLN7hxHB8CMmwZ3+H26PWAG0ozNuYG5hXSDNgmP1SgJkQMrlG6cP20HoaSbvcJTQ==
-  dependencies:
-    d3-array "2 - 3"
-
 d3-contour@4:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-4.0.0.tgz#5a1337c6da0d528479acdb5db54bc81a0ff2ec6b"
@@ -1947,46 +1927,10 @@ d3-zoom@3:
    d3-selection "2 - 3"
    d3-transition "2 - 3"

-d3@^7.0.0:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/d3/-/d3-7.1.1.tgz#77b9a0c9893b13643b8e52316ec65dca3a6a115e"
-  integrity sha512-8zkLMwSvUAnfN9pcJDfkuxU0Nvg4RLUD0A4BZN1KxJPtlnCGzMx3xM5cRl4m8fym/Vy8rlq52tl90UF3m91OnA==
-  dependencies:
-    d3-array "3"
-    d3-axis "3"
-    d3-brush "3"
-    d3-chord "3"
-    d3-color "3"
-    d3-contour "3"
-    d3-delaunay "6"
-    d3-dispatch "3"
-    d3-drag "3"
-    d3-dsv "3"
-    d3-ease "3"
-    d3-fetch "3"
-    d3-force "3"
-    d3-format "3"
-    d3-geo "3"
-    d3-hierarchy "3"
-    d3-interpolate "3"
-    d3-path "3"
-    d3-polygon "3"
-    d3-quadtree "3"
-    d3-random "3"
-    d3-scale "4"
-    d3-scale-chromatic "3"
-    d3-selection "3"
-    d3-shape "3"
-    d3-time "3"
-    d3-time-format "4"
-    d3-timer "3"
-    d3-transition "3"
-    d3-zoom "3"
-
-d3@^7.7.0:
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/d3/-/d3-7.7.0.tgz#e7779a74ea7c807b432fdfd8128de062b19c62eb"
-  integrity sha512-VEwHCMgMjD2WBsxeRGUE18RmzxT9Bn7ghDpzvTEvkLSBAKgTMydJjouZTjspgQfRHpPt/PB3EHWBa6SSyFQq4g==
+d3@^7.4.0, d3@^7.8.2:
+  version "7.8.2"
+  resolved "https://registry.yarnpkg.com/d3/-/d3-7.8.2.tgz#2bdb3c178d095ae03b107a18837ae049838e372d"
+  integrity sha512-WXty7qOGSHb7HR7CfOzwN1Gw04MUOzN8qh9ZUsvwycIMb4DYMpY9xczZ6jUorGtO6bR9BPMPaueIKwiDxu9uiQ==
  dependencies:
    d3-array "3"
    d3-axis "3"
@@ -2019,12 +1963,12 @@ d3@^7.7.0:
    d3-transition "3"
    d3-zoom "3"

-dagre-d3-es@7.0.6:
-  version "7.0.6"
-  resolved "https://registry.yarnpkg.com/dagre-d3-es/-/dagre-d3-es-7.0.6.tgz#8cab465ff95aca8a1ca2292d07e1fb31b5db83f2"
-  integrity sha512-CaaE/nZh205ix+Up4xsnlGmpog5GGm81Upi2+/SBHxwNwrccBb3K51LzjZ1U6hgvOlAEUsVWf1xSTzCyKpJ6+Q==
+dagre-d3-es@7.0.8:
+  version "7.0.8"
+  resolved "https://registry.yarnpkg.com/dagre-d3-es/-/dagre-d3-es-7.0.8.tgz#14c309c3c08ba8329a7cf51000bd56a369c513d1"
+  integrity sha512-eykdoYQ4FwCJinEYS0gPL2f2w+BPbSLvnQSJ3Ye1vAoPjdkq6xIMKBv+UkICd3qZE26wBKIn3p+6n0QC7R1LyA==
  dependencies:
-    d3 "^7.7.0"
+    d3 "^7.8.2"
    lodash-es "^4.17.21"

 daisyui@2.50.0:
@@ -2058,6 +2002,11 @@ dayjs@^1.10.4:
  resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.10.4.tgz"
  integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==

+dayjs@^1.11.7:
+  version "1.11.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
+  integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
+
 deasync@^0.1.0:
  version "0.1.21"
  resolved "https://registry.npmjs.org/deasync/-/deasync-0.1.21.tgz"
@@ -2265,10 +2214,10 @@ domhandler@^5.0.1, domhandler@^5.0.2:
  dependencies:
    domelementtype "^2.3.0"

-dompurify@2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.1.tgz#f9cb1a275fde9af6f2d0a2644ef648dd6847b631"
-  integrity sha512-ewwFzHzrrneRjxzmK6oVz/rZn9VWspGFRDb4/rRtIsM1n36t9AKma/ye8syCpcw+XJ25kOK/hOG7t1j2I2yBqA==
+dompurify@2.4.3:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.3.tgz#f4133af0e6a50297fc8874e2eaedc13a3c308c03"
+  integrity sha512-q6QaLcakcRjebxjg8/+NP+h0rPfatOgOzc46Fst9VAA3jF2ApfKBNKMzdP4DYTqtUMXSCd5pRS/8Po/OmoCHZQ==

 domutils@^2.8.0:
  version "2.8.0"
@@ -2316,6 +2265,11 @@ electron-to-chromium@^1.4.251:
  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.261.tgz#31f14ad60c6f95bec404a77a2fd5e1962248e112"
  integrity sha512-fVXliNUGJ7XUVJSAasPseBbVgJIeyw5M1xIkgXdTSRjlmCqBbiSTsEdLOCJS31Fc8B7CaloQ/BFAg8By3ODLdg==

+elkjs@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/elkjs/-/elkjs-0.8.2.tgz#c37763c5a3e24e042e318455e0147c912a7c248e"
+  integrity sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==
+
 emoji-regex@^8.0.0:
  version "8.0.0"
  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
@@ -3722,21 +3676,27 @@ merge2@^1.3.0, merge2@^1.4.1:
  resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==

-mermaid@9.3.0:
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-9.3.0.tgz#8bd7c4a44b53e4e85c53a0a474442e9c273494ae"
-  integrity sha512-mGl0BM19TD/HbU/LmlaZbjBi//tojelg8P/mxD6pPZTAYaI+VawcyBdqRsoUHSc7j71PrMdJ3HBadoQNdvP5cg==
+mermaid@10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.0.0.tgz#6f7ae2eda0ab221089dc1eb166938203f2a7b04d"
+  integrity sha512-syS1qyYCd3EPXCVSpYtefY4D9z9WZAK8hFgjeHR9PAtanybLO162Tu7o5i/nZkqRrJq0Rk8RqskQlhBPgT8eBw==
  dependencies:
    "@braintree/sanitize-url" "^6.0.0"
-    d3 "^7.0.0"
-    dagre-d3-es "7.0.6"
-    dompurify "2.4.1"
+    cytoscape "^3.23.0"
+    cytoscape-cose-bilkent "^4.1.0"
+    cytoscape-fcose "^2.1.0"
+    d3 "^7.4.0"
+    dagre-d3-es "7.0.8"
+    dompurify "2.4.3"
+    elkjs "^0.8.2"
    khroma "^2.0.0"
    lodash-es "^4.17.21"
-    moment-mini "^2.24.0"
+    moment-mini "^2.29.4"
    non-layered-tidy-tree-layout "^2.0.2"
    stylis "^4.1.2"
+    ts-dedent "^2.2.0"
    uuid "^9.0.0"
+    web-worker "^1.2.0"

 micromatch@^4.0.4, micromatch@^4.0.5:
  version "4.0.5"
@@ -3817,16 +3777,11 @@ mlly@^1.1.0:
    pkg-types "^1.0.1"
    ufo "^1.0.1"

-moment-mini@^2.24.0:
+moment-mini@^2.29.4:
  version "2.29.4"
  resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.29.4.tgz#cbbcdc58ce1b267506f28ea6668dbe060a32758f"
  integrity sha512-uhXpYwHFeiTbY9KSgPPRoo1nt8OxNVdMVoTBYHfSEKeRkIkwGpO+gERmhuhBtzfaeOyTkykSrm2+noJBgqt3Hg==

-moment@2.29.4:
-  version "2.29.4"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
-  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
-
 monaco-editor@0.34.1:
  version "0.34.1"
  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.34.1.tgz#1b75c4ad6bc4c1f9da656d740d98e0b850a22f87"
@@ -5412,6 +5367,11 @@ tr46@^3.0.0:
  dependencies:
    punycode "^2.1.1"

+ts-dedent@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
+  integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==
+
 tslib@^1.8.1:
  version "1.14.1"
  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
@@ -5670,6 +5630,11 @@ w3c-xmlserializer@^4.0.0:
  dependencies:
    xml-name-validator "^4.0.0"

+web-worker@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/web-worker/-/web-worker-1.2.0.tgz#5d85a04a7fbc1e7db58f66595d7a3ac7c9c180da"
+  integrity sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA==
+
 webidl-conversions@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"