Add @mermaid-js/mermaid-zenuml package for zenuml Integration

[sidharthv96]

📑 Summary

Adds ZenUML as an external mermaid diagram using @mermaid-js/mermaid-zenuml.

Resolves #3983, resolves #3435

📏 Design Decisions

ZenUML is released from mermaid repo now.

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added unit/e2e tests (if appropriate)
• 📓 have added documentation (if appropriate)
• 🔖 targeted develop branch

[sidharthv96]

@MrCoder I'm getting this error inside zenuml.

[MrCoder]

Hi @sidharthv96, I have a fix (Thanks to @dontry), but I don't have permission to push to your branch. Could you please give me permission or apply the following patch (pnpm-lock.yaml changes ignored):

diff --git a/packages/mermaid-zenuml/package.json b/packages/mermaid-zenuml/package.json
--- a/packages/mermaid-zenuml/package.json	(revision 12ed81855a90c7dd2d8ce2f74d7e60270da80ff3)
+++ b/packages/mermaid-zenuml/package.json	(revision f8a1d8239eee5e0c899b98ab8aceccad9e3db3aa)
@@ -36,7 +36,7 @@
     ]
   },
   "dependencies": {
-    "@zenuml/core": "^2.0.36"
+    "@zenuml/core": "^3.0.0"
   },
   "devDependencies": {
     "mermaid": "workspace:*"

[aloisklink]

This looks great! I love how the ZenUML diagrams look too :)

Most of my comments are pretty minor, so here's the changes I think are required:

• PR description is currently blank, please fill it in, for anybody that sees this change in the Release notes and wants more info! (maybe with an example screenshot, since these ZenUML diagrams look pretty good!)
  • Maybe we should add @mermaid-js/mermaid-zenuml to the PR title too?
• package.json: The version of @mermaid-js/mermaid-zenuml shouldn't be 0.0.1 (please use 0.1.0/1.0.0/1.0.0-alpha.0)
• package.json: There should be a peerDependency on mermaid so we know which versions of mermaid the @mermaid-js/mermaid-zenuml plugin is compatible with
• README.md: Please add a README.md file for people that go to https://npmjs.com/package/@mermaid-js/mermaid-zenuml (once it exists).
• docs/syntax/zenuml.md: Mention the mermaid.registerExternalDiagrams usage (can copy this from the mindmap docs)
• docs/syntax/zenuml.md: Add ```zenuml to all of the ``` code blocks with no language (Vitepress makes them look very ugly currently)
  • Ideally they should be fully working ```mermaid-example blocks, but I know that's quite a lot of work, so maybe that's a future thing to do.

[sidharthv96]

@MrCoder as you can't push to this branch, can you please fork sidv/zenuml branch and address the above comments?
I'll merge it to this branch and we can then merge this PR.

[dontry]

@MrCoder as you can't push to this branch, can you please fork sidv/zenuml branch and address the above comments? I'll merge it to this branch and we can then merge this PR.

Hi @sidharthv96, I've mostly done the zenuml plugin work. I will address the comments

[aloisklink]

@dontry, thanks for making the fixes!

Sorry, there's one last issue I didn't notice in my last review. TypeScript is broken for the mermaid-zenuml package.

There needs to be a change in package.json to build the types first:

diff --git a/package.json b/package.json
index fe7a3ba0..61162202 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "build:vite": "ts-node-esm --transpileOnly .vite/build.ts",
     "build:mermaid": "pnpm build:vite --mermaid",
     "build:viz": "pnpm build:mermaid --visualize",
-    "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly",
+    "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-zenuml/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly",
     "build:watch": "pnpm build:vite --watch",
     "build": "pnpm run -r clean && pnpm build:types && pnpm build:vite",
     "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",

After that, there is one tiny bug TypeScript bug, but it's very minor, so you can ignore the error with a // @ts-expect-error comment if you want.

[aloisklink]

Looks great to me! I'm happy for this to be merged (assuming it all passes CI)

@dontry, I've done a git rebase and changed your git author details! You can confirm it by doing a git log.

@sidharthv96, it would still be nice to have a better PR title/description. Maybe we can mention something about the @mermaid-js/mermaid-zenuml and an example diagram? It's up to you :)

[dontry]

Thank you @aloisklink and @sidharthv96. You are really kind and supportive.

[dontry]

Hey @aloisklink , I wonder when this PR is ready to get merged?

[sidharthv96]

I've resolved the conflicts.
I'll leave the merging upto @knsv as it's a very important PR.

[knsv]

This is ready to be merged, just fix the pnpm-lock file

[morandalex]

Hi guys, can you please check this pull? I am really interested on having zenuml in mermaid!. it is missing only one last check!!

[knsv]

Thanks all! Good job!