Invalid mermaid generated leading to process failure

[habovh]

Hi there! First of all, great plugin! I've been using it a lot to visualise and present the DB schema.

I've updated to version 1.4.2 along with prisma 4.11.0, and now I'm getting the following errors when running yarn prisma generate:

Error: 
✔ Generated Prisma Client (4.11.0 | library) to ./node_modules/@prisma/client in 295ms

✔ Generated Nexus Prisma to ./node_modules/.nexus-prisma in 1.61s

Command failed: /Users/jordanbecker/Repositories/project/node_modules/.bin/mmdc -i /var/folders/n8/l8xdjt192lb9lpfrkyh9v57m0000gn/T/prisma-erd-Li3S4a/prisma.mmd -o /Users/jordanbecker/Repositories/project/prisma/ERD.pdf -t forest -c /var/folders/n8/l8xdjt192lb9lpfrkyh9v57m0000gn/T/prisma-erd-Li3S4a/config.json

error Command failed with exit code 1.

After investigating, it seems the issue comes from an invisible character being added for each field that's a primary key in my schema.prisma file. Here's a screenshot from the generated .mmd file opened in VSCode:

For some reason, the unicode character U+fe0f is being appended after PK. Searching and replacing all the instances of this character fixes the issues and mmdc outputs the PDF/SVG/PNG as expected.

It seems that the key emoji visible in the src and dist version of this package code is responsible for messing the build. However I can't see any reference to this emoji in the code here on GitHub, so I'm wondering how did this emoji appear there?

https://github.com/keonik/prisma-erd-generator/blob/562942d75f17515379f6aee87b43e11a372bc1e1/src/generate.ts#L177-L184

Here's the patch file I'm using to get things working, but I have no clue how this character got here in the first place:

diff --git a/node_modules/prisma-erd-generator/dist/generate.js b/node_modules/prisma-erd-generator/dist/generate.js
index b092e33..c276ff3 100644
--- a/node_modules/prisma-erd-generator/dist/generate.js
+++ b/node_modules/prisma-erd-generator/dist/generate.js
@@ -104,7 +104,7 @@ ${tableOnly
             var _a, _b;
             return `    ${field.type.trimStart()} ${field.name.replace(/^_/, 'z_')} ${field.isId ||
                 ((_b = (_a = model.primaryKey) === null || _a === void 0 ? void 0 : _a.fields) === null || _b === void 0 ? void 0 : _b.includes(field.name))
-                ? 'PK🗝️'
+                ? 'PK'
                 : ''} ${field.isRequired ? '' : '"nullable"'}`;
         })
             .join('\n')}
diff --git a/node_modules/prisma-erd-generator/src/generate.ts b/node_modules/prisma-erd-generator/src/generate.ts
index 23bfaf1..d782524 100644
--- a/node_modules/prisma-erd-generator/src/generate.ts
+++ b/node_modules/prisma-erd-generator/src/generate.ts
@@ -177,7 +177,7 @@ ${
                   )} ${
                       field.isId ||
                       model.primaryKey?.fields?.includes(field.name)
-                          ? 'PK🗝️'
+                          ? 'PK'
                           : ''
                   } ${field.isRequired ? '' : '"nullable"'}`;
               })

[keonik]

This was me 🥲 there is/was an issue open to #121 make erd more user friendly. I applied the PK to be a 🔑 and nullable to be a ❓

I didn’t see it causing any issues. I can revert it if needed. Do you have a different version of mermaid CLI than what’s current? I’m just trying to see if this can be kept. It is slightly cleaner to look at when you have a large schema.

[habovh]

I updated the mermaid CLI as well and made sure it wasn’t coming from there.

I agree emojis make for a better looking output but I’d rather have a slightly less beautiful output over no output at all 😅

Jokes aside, maybe there’s another way to include emojis within Mermaid files? Maybe the Unicode character is not the one you intended? Emojis should not be invisible characters, maybe the encoded input was simply wrong? I’d suggest double checking the Unicode and maybe see wether Mermaid allows alternat input methods, such as specifying the Unicode instead of the emoji itself.

And also, why aren’t the published source files matching the repo here on GitHub? It makes it quite difficult to contribute to the repo with the version tags out of sync between GitHub and the NPM package, plus code not matching distributed package.

[keonik]

I updated the mermaid CLI as well and made sure it wasn’t coming from there.

I agree emojis make for a better looking output but I’d rather have a slightly less beautiful output over no output at all 😅

Jokes aside, maybe there’s another way to include emojis within Mermaid files? Maybe the Unicode character is not the one you intended? Emojis should not be invisible characters, maybe the encoded input was simply wrong? I’d suggest double checking the Unicode and maybe see wether Mermaid allows alternat input methods, such as specifying the Unicode instead of the emoji itself.

Alpha has the fix for this. Mermaid fails if you don't wrap special characters in quotes. Alpha (1.4.4) has the fix to support the emojis.

And also, why aren’t the published source files matching the repo here on GitHub? It makes it quite difficult to contribute to the repo with the version tags out of sync between GitHub and the NPM package, plus code not matching distributed package.

I'm trying to set up an alpha/beta/main release and its not working at all. Something goofy is happening with semantic release. I've had to do manual releases and it has been released as main already. Just use alpha to branch off of.

[keonik]

I'll try and push this alpha version to main 🤞🏼 any advice on a better setup will be most appreciated. If alpha works for you let me know. I'll close this issue once I get latest caught up

[keonik]

latest is caught up. Versioning embarrassments out there 🙃

npm i -D prisma-erd-generator@latest

[habovh]

Sorry I didn't have the time to try with alpha, but just installed the latest 1.5.2 and everything works great! Thanks a lot! If only all maintainers were as quick as you to fix/update their libraries 😅

As per the release setup I'm not sure how I'd approach it 🤔 I guess I'm used to having the main branch of the repo contain the code for the current major version, including up and coming non-breaking features and patches. This approach allows you to push tags whenever you're publishing a version on NPM so it's easy to browse the source on GitHub as well. In short, keeping it simple with one branch and many tags. For major versions and breaking changes, I think it makes sense to have another branch that often get rebased on and eventually gets merged to the main one at some point. For beta/alpha, I'd personally use the target branch URL as the package version. Doesn't work for libraries that require some kind of build process though... Food for thought!

Anyhow, here's my two cents!

Again, thanks for being so quick to fix/update the package! I've never had to keep a patch around for such a short amount of time on a repo! In fact, it'll not even make it to the main branch 😅

[keonik]

I'm not normally that quick with responses. I took a couple months off maintaining this and had finally built up the interest to update again. Lucky timing haha.

[luskin]

Does not work for me on 1.5.4. Console logs are simply:

$ npx prisma generate
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Error: 
✔ Generated Prisma Client (4.12.0 | library) to ./node_modules/@prisma/client in 338ms

Command failed: /.../node_modules/.bin/mmdc -i /var/folders/0w/y98ssfzn1zlf6j0lh1dzlg8w0000gn/T/prisma-erd-9TWOvS/prisma.mmd -o /.../prisma/ERD.svg -t forest -c /var/folders/0w/y98ssfzn1zlf6j0lh1dzlg8w0000gn/T/prisma-erd-9TWOvS/config.json

error Command failed with exit code 1.

Any advice from the community? @habovh anything else we can try?

Update: Turns out on mac chip you need to follow a few more steps, here's what we did to get it working:

1. Reinstall chromium via brew brew reinstall --cask chromium
2. Add to .zshrc:

   export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
   export PUPPETEER_EXECUTABLE_PATH=`which chromium`

3. Reload your terminal and try again.

[habovh]

@luskin glad you worked it out! I was simply going to suggest running the commands manually until you got some useful debug information.

Thanks for sharing your solution! 🙌