mermaid-js · knsv · Nov 15, 2022 · Oct 10, 2022 · Oct 10, 2022 · Oct 10, 2022
diff --git a/.gitignore b/.gitignore
@@ -32,3 +32,6 @@ cypress/snapshots/
 .eslintcache
 .tsbuildinfo
 tsconfig.tsbuildinfo
+
+knsv*.html
+local*.html
diff --git a/.npmrc b/.npmrc
@@ -1 +1,3 @@
-auto-install-peers=true
+auto-install-peers=true
+strict-peer-dependencies=false
+use-inline-specifiers-lockfile-format=true
diff --git a/.vite/build.ts b/.vite/build.ts
@@ -2,10 +2,10 @@ import { build, InlineConfig } from 'vite';
 import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
-import pkg from '../package.json' assert { type: 'json' };
+import { readFileSync } from 'fs';
 
-const { dependencies } = pkg;
 const watch = process.argv.includes('--watch');
+const mermaidOnly = process.argv.includes('--mermaid');
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
 type OutputOptions = Exclude<
@@ -22,23 +22,13 @@ const packageOptions = {
   'mermaid-mindmap': {
     name: 'mermaid-mindmap',
     packageName: 'mermaid-mindmap',
-    file: 'diagram-definition.ts',
-  },
-  'mermaid-mindmap-detector': {
-    name: 'mermaid-mindmap-detector',
-    packageName: 'mermaid-mindmap',
-    file: 'detector.ts',
-  },
-  'mermaid-example-diagram': {
-    name: 'mermaid-example-diagram',
-    packageName: 'mermaid-example-diagram',
-    file: 'diagram-definition.ts',
-  },
-  'mermaid-example-diagram-detector': {
-    name: 'mermaid-example-diagram-detector',
-    packageName: 'mermaid-example-diagram',
     file: 'detector.ts',
   },
+  // 'mermaid-example-diagram-detector': {
+  //   name: 'mermaid-example-diagram-detector',
+  //   packageName: 'mermaid-example-diagram',
+  //   file: 'detector.ts',
+  // },
 };
 
 interface BuildOptions {
@@ -68,6 +58,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
   ];
 
   if (core) {
+    const { dependencies } = JSON.parse(
+      readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8')
+    );
     // Core build is used to generate file without bundled dependencies.
     // This is used by downstream projects to bundle dependencies themselves.
     external.push(...Object.keys(dependencies));
@@ -110,7 +103,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       include: [
         'packages/mermaid-mindmap/src/**',
         'packages/mermaid/src/**',
-        'packages/mermaid-example-diagram/src/**',
+        // 'packages/mermaid-example-diagram/src/**',
       ],
     };
   }
@@ -134,9 +127,11 @@ const main = async () => {
 };
 
 if (watch) {
-  build(getBuildConfig({ minify: false, watch, entryName: 'mermaid' }));
-  build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
-  build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
+  build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' }));
+  if (!mermaidOnly) {
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
+    // build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
+  }
 } else {
   void main();
 }
diff --git a/.vite/tsconfig.json b/.vite/tsconfig.json
diff --git a/cypress/integration/other/external-diagrams.spec.js b/cypress/integration/other/external-diagrams.spec.js
@@ -0,0 +1,13 @@
+describe('mermaid', () => {
+  describe('registerDiagram', () => {
+    it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => {
+      const url = 'http://localhost:9000/external-diagrams-mindmap.html';
+      cy.visit(url);
+
+      cy.get('svg', {
+        // may be a bit slower than normal, since vite might need to re-compile mermaid/mermaid-mindmap/mermaid-example-diagram
+        timeout: 10000,
+      }).matchImageSnapshot();
+    });
+  });
+});
diff --git a/cypress/platform/external-diagrams-mindmap.html b/cypress/platform/external-diagrams-mindmap.html
@@ -0,0 +1,49 @@
+<html>
+  <body>
+    <h1>Should correctly load a third-party diagram using registerDiagram</h1>
+    <pre id="diagram" class="mermaid">
+mindmap
+  root
+    A
+    B
+    C
+    D
+    E
+    A2
+    B2
+    C2
+    D2
+    E2
+    child1((Circle))
+        grandchild 1
+        grandchild 2
+    child2(Round rectangle)
+        grandchild 3
+        grandchild 4
+    child3[Square]
+        grandchild 5
+        ::icon(mdi mdi-fire)
+        gc6((grand<br/>child 6))
+        ::icon(mdi mdi-fire)
+          gc7((grand<br/>grand<br/>child 8))
+    </pre>
+    <!-- <pre id="diagram" class="mermaid2">
+      example-diagram
+    </pre> -->
+
+    <!-- <div id="cy"></div> -->
+    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
+    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
+    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
+    <!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
+    <script type="module">
+      import mindmap from '../../packages/mermaid-mindmap/src/detector';
+      // import example from '../../packages/mermaid-example-diagram/src/detector';
+      import mermaid from '../../packages/mermaid/src/mermaid';
+
+      await mermaid.registerExternalDiagrams([mindmap]);
+      await mermaid.initialize({ logLevel: 0 });
+      await mermaid.initThrowsErrorsAsync();
+    </script>
+  </body>
+</html>
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -63,24 +63,19 @@
     </pre>
     <pre id="diagram" class="mermaid">
 mindmap
-  root((mindmap))
-    Origins
-      Long history
-      ::icon(fa fa-book)
-      Popularisation
-      ::icon(fa fa-book)
-        British popular psychology author Tony Buzan
-    Research
-      ::icon(fa fa-book)
-      On effectivness<br/>and features
-      On Automatic creation
-        Uses
-            Creative techniques
-            Strategic planning
-            Argument mapping
-    Tools
-      Pen and paper
-      Mermaid
+  root
+    child1((Circle))
+        grandchild 1
+        grandchild 2
+    child2(Round rectangle)
+        grandchild 3
+        grandchild 4
+    child3[Square]
+        grandchild 5
+        ::icon(mdi mdi-fire)
+        gc6((grand<br/>child 6))
+        ::icon(mdi mdi-fire)
+          gc7((grand<br/>grand<br/>child 8))
         </pre>
     <pre id="diagram" class="mermaid">
       gantt

diff --git a/cypress/platform/render-after-error.html b/cypress/platform/render-after-error.html
@@ -14,16 +14,14 @@
       mermaid.init({ startOnLoad: false });
 
       mermaid.mermaidAPI.initialize({ securityLevel: 'strict' });
-      (async () => {
-        try {
-          console.log('rendering');
-          await mermaid.mermaidAPI.render('graphDiv', `>`);
-        } catch (e) {}
+      try {
+        console.log('rendering');
+        mermaid.mermaidAPI.render('graphDiv', `>`);
+      } catch (e) {}
 
-        await mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
-          document.getElementById('graph').innerHTML = html;
-        });
-      })();
+      mermaid.mermaidAPI.render('graphDiv', `graph LR\n a --> b`, (html) => {
+        document.getElementById('graph').innerHTML = html;
+      });
     </script>
   </body>
 </html>
diff --git a/cypress/platform/rerender.html b/cypress/platform/rerender.html
@@ -19,10 +19,9 @@
       function rerender(text) {
         const graphText = `graph TD
         A[${text}] -->|Get money| B(Go shopping)`;
-        mermaid.mermaidAPI.render('id', graphText).then((svg) => {
-          console.log('\x1b[35m%s\x1b[0m', '>> graph', svg);
-          document.getElementById('graph').innerHTML = svg;
-        });
+        const graph = mermaid.mermaidAPI.render('id', graphText);
+        console.log('\x1b[35m%s\x1b[0m', '>> graph', graph);
+        document.getElementById('graph').innerHTML = graph;
       }
     </script>
     <button id="rerender" onclick="rerender('Saturday')">Rerender</button>

diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
@@ -1,4 +1,5 @@
 import mermaid2 from '../../packages/mermaid/src/mermaid';
+import mindmap from '../../packages/mermaid-mindmap/src/detector';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));
@@ -9,7 +10,7 @@ function b64ToUtf8(str) {
  * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
  * page.
  */
-const contentLoaded = function () {
+const contentLoaded = async function () {
   let pos = document.location.href.indexOf('?graph=');
   if (pos > 0) {
     pos = pos + 7;
@@ -36,8 +37,7 @@ const contentLoaded = function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
-    graphObj.mermaid.lazyLoadedDiagrams = ['/mermaid-mindmap-detector.esm.mjs'];
-
+    await mermaid2.registerExternalDiagrams([mindmap]);
     mermaid2.initialize(graphObj.mermaid);
     mermaid2.init();
   }

diff --git a/docs/config/setup/modules/config.md b/docs/config/setup/modules/config.md
@@ -36,7 +36,7 @@ Pushes in a directive to the configuration
 
 #### Defined in
 
-[config.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L191)
+[config.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L193)
 
 ---
 
@@ -60,7 +60,7 @@ The currentConfig
 
 #### Defined in
 
-[config.ts:136](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L136)
+[config.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L138)
 
 ---
 
@@ -84,7 +84,7 @@ The siteConfig
 
 #### Defined in
 
-[config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96)
+[config.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L97)
 
 ---
 
@@ -118,7 +118,7 @@ The siteConfig
 
 #### Defined in
 
-[config.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L223)
+[config.ts:225](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L225)
 
 ---
 
@@ -147,7 +147,7 @@ options in-place
 
 #### Defined in
 
-[config.ts:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L151)
+[config.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L153)
 
 ---
 
@@ -167,7 +167,7 @@ options in-place
 
 #### Defined in
 
-[config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75)
+[config.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L76)
 
 ---
 
@@ -199,7 +199,7 @@ The currentConfig merged with the sanitized conf
 
 #### Defined in
 
-[config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113)
+[config.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L114)
 
 ---
 
@@ -232,7 +232,7 @@ The new siteConfig
 
 #### Defined in
 
-[config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61)
+[config.ts:62](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L62)
 
 ---
 
@@ -273,4 +273,4 @@ The new siteConfig
 
 #### Defined in
 
-[config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79)
+[config.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L80)
diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:1882](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L1882)
+[defaultConfig.ts:1881](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L1881)
 
 ---