Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add support for @mermaid-js/mermaid-zenuml #566

Merged

Conversation

aloisklink
Copy link
Member

📑 Summary

Mermaid now has support for ZenUML diagrams, but it requires using a Mermaid plugin diagram, see https://mermaid.js.org/syntax/zenuml.html

ZenUML adds about 700 KiB to our dist/index.html file, or about 200 KiB when gzipped.

Resolves #564

📏 Design Decisions

Adding support for ZenUML diagrams is just like how we previously added support for mindmap diagrams in PR #424, so please see discussion in that PR for design decisions.

By the way, I had to manually limit the version of antlr4 to ~4.11.0, since v4.12.0 (in commit antlr/antlr4@2c75e64) drops NodeJS v14 support.

New size of mermaid-cli package:

ZenUML adds about 700 KiB to our dist/index.html file, or about 200 KiB when gzipped. Additionally, it takes about 2.5 seconds longer to build the dist/index.html file, about a 25% increase.

Currently

me@pc:~/mermaid-cli (master)$ yarn
yarn install v1.22.19
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
warning " > vite-plugin-singlefile@0.13.5" has unmet peer dependency "rollup@>=2.79.0".
[5/5] Building fresh packages...
$ tsc && vite build
[##################################################################################################################################################################################################################################################################################] 1276/1276vite v4.4.2 building for production...
✓ 1517 modules transformed.
rendering chunks (1)...WARNING: asset not inlined: assets/fa-regular-400-be0a0849.svg
WARNING: asset not inlined: assets/fa-brands-400-a3b98177.svg
WARNING: asset not inlined: assets/fa-solid-900-9674eb1b.svg
dist/assets/fa-regular-400-be0a0849.svg    144.71 kB │ gzip:    37.36 kB
dist/assets/fa-brands-400-a3b98177.svg     747.93 kB │ gzip:   255.18 kB
dist/assets/fa-solid-900-9674eb1b.svg      918.99 kB │ gzip:   257.13 kB
dist/index.html                          4,927.21 kB │ gzip: 2,039.63 kB
✓ built in 10.96s
Done in 13.84s.

After adding @mermaid-js/mermaid-zenuml

me@pc:~/mermaid-cli (feat/support-mermaid-zenuml)$ yarn
yarn install v1.22.19
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
warning " > vite-plugin-singlefile@0.13.5" has unmet peer dependency "rollup@>=2.79.0".
[5/5] Building fresh packages...
$ tsc && vite build
[##################################################################################################################################################################################################################################################################################] 1446/1446vite v4.4.2 building for production...
✓ 1520 modules transformed.
rendering chunks (1)...WARNING: asset not inlined: assets/fa-regular-400-be0a0849.svg
WARNING: asset not inlined: assets/fa-brands-400-a3b98177.svg
WARNING: asset not inlined: assets/fa-solid-900-9674eb1b.svg
dist/assets/fa-regular-400-be0a0849.svg    144.71 kB │ gzip:    37.36 kB
dist/assets/fa-brands-400-a3b98177.svg     747.93 kB │ gzip:   255.18 kB
dist/assets/fa-solid-900-9674eb1b.svg      918.99 kB │ gzip:   257.13 kB
dist/index.html                          5,618.50 kB │ gzip: 2,241.95 kB
✓ built in 13.29s
Done in 16.43s.

📋 Tasks

Make sure you

  • 📖 have read the contribution guidelines
  • 💻 have added unit/e2e tests (if appropriate)
    • Added at test-positive/zenuml.mmd
  • 🔖 targeted master branch

@MindaugasLaganeckas
Copy link
Member

Thank you! :)

@MindaugasLaganeckas
Copy link
Member

Please, resolve the merge conflicts and let's merge it 😄

Mermaid now has support for ZenUML diagrams, but it requires using a
Mermaid plugin diagram, see https://mermaid.js.org/syntax/zenuml.html

ZenUML adds about 700 KiB to our `dist/index.html` file, or about 200
KiB when gzipped.
Limit antlr4 to `~4.11.0` to support Node v14.

antlr4 `4.12.0` drops Node.JS v14 support,
see antlr/antlr4@2c75e64
@aloisklink
Copy link
Member Author

I've rebased on to master to solve the merge conflicts!

Hmmmm, the generated ZenUML png have a lot of whitespace on the right of the image, see

image

Do you think this is okay to merge? My gut feeling is yes, since having an image is better than having no image, and users can always use something like imagemaick's -trim to auto-crop the image.

@MindaugasLaganeckas MindaugasLaganeckas merged commit a77d2cc into mermaid-js:master Aug 3, 2023
6 of 7 checks passed
@aloisklink aloisklink deleted the feat/support-mermaid-zenuml branch August 3, 2023 11:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

How to use zenuml in mmdc
2 participants