feat: Configuration of Mermaid via .js file (#232)

* feat: Enable override of mermaid configuration via a .js file

* fix: Move theme to mermaid config and out of cli extensions

* remove mermaid types stub

* fix theme for readme erd

example-mermaid-config.js

@@ -0,0 +1,17 @@
+/** @type {import('mermaid').MermaidConfig} */
+const config = {
+    deterministicIds: true,
+    maxTextSize: 90000,
+    er: {
+        /**
+         * When this flag is set to `true`, the height and width is set to 100%
+         * and is then scaled with the available space.
+         * If set to `false`, the absolute space required is used.
+         *
+         */
+        useMaxWidth: false,
+    },
+    theme: 'default',
+};
+
+module.exports = config;

package.json

@@ -109,6 +109,7 @@
         "babel-jest": "^29.6.2",
         "concurrently": "^8.2.0",
         "jest": "^29.6.2",
+        "mermaid": "^10.3.0",
         "prettier": "3.0.1",
         "prisma": "^4.0.0 || ^5.0.0",
         "puppeteer": "^21.0.2",

prisma/schema.prisma

@@ -4,10 +4,11 @@ datasource db {
 }
 
 generator erd {
-  provider = "node ./dist/index.js"
-  output   = "../ERD.svg"
-  theme    = "default"
-  mmdcPath = "node_modules/.bin"
+  provider      = "node ./dist/index.js"
+  output        = "../ERD.svg"
+  theme         = "default"
+  mmdcPath      = "node_modules/.bin"
+  mermaidConfig = "example-mermaid-config.js"
 }
 
 model User {

src/generate.ts

@@ -13,6 +13,7 @@ import {
     DMLModel,
     DMLField,
 } from 'types/dml';
+import { MermaidConfig } from 'mermaid';
 
 dotenv.config(); // Load the environment variables
 
@@ -398,14 +399,32 @@ export default async (options: GeneratorOptions) => {
         fs.writeFileSync(tempMermaidFile, mermaid);
 
         // default config parameters https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts
+        const defaultMermaidConfig: MermaidConfig = {
+            deterministicIds: true,
+            maxTextSize: 90000,
+            er: {
+                useMaxWidth: true,
+            },
+            theme: theme,
+        };
+        let mermaidConfig = defaultMermaidConfig;
+
+        if (config?.mermaidConfig) {
+            const importedMermaidConfig = await import(
+                path.resolve(config.mermaidConfig)
+            );
+            if (debug) {
+                console.log('imported mermaid config: ', importedMermaidConfig);
+            }
+            // merge default config with imported config
+            mermaidConfig = {
+                ...defaultMermaidConfig,
+                ...importedMermaidConfig,
+            };
+        }
+
         const tempConfigFile = path.resolve(path.join(tmpDir, 'config.json'));
-        fs.writeFileSync(
-            tempConfigFile,
-            JSON.stringify({
-                deterministicIds: true,
-                maxTextSize: 90000,
-            })
-        );
+        fs.writeFileSync(tempConfigFile, JSON.stringify(mermaidConfig));
 
         // Generator option to adjust puppeteer
         let puppeteerConfig = config.puppeteerConfig;
@@ -478,7 +497,7 @@ export default async (options: GeneratorOptions) => {
             }
         }
 
-        const mermaidCommand = `"${mermaidCliNodePath}" -i "${tempMermaidFile}" -o "${output}" -t ${theme} -c "${tempConfigFile}" -p "${puppeteerConfig}"`;
+        const mermaidCommand = `"${mermaidCliNodePath}" -i "${tempMermaidFile}" -o "${output}" -c "${tempConfigFile}" -p "${puppeteerConfig}"`;
         if (debug && mermaidCommand)
             console.log('mermaid command: ', mermaidCommand);
         child_process.execSync(mermaidCommand, {

src/types/generator.ts

@@ -7,4 +7,5 @@ export interface PrismaERDConfig {
     includeRelationFromFields?: string;
     erdDebug?: string;
     puppeteerConfig?: string;
+    mermaidConfig?: string;
 }

tsconfig.json

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "skipLibCheck": true,
         "target": "es2019",
         "baseUrl": "src",
         "outDir": "dist",