search

mermaid-js / mermaid-cli

Command line tool for the Mermaid library
MIT License
2.31k stars 223 forks source link

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

Closed aloisklink closed 1 year ago

aloisklink commented 1 year ago

:bookmark_tabs: 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

:straight_ruler: Design Decisions

Adding support for ZenUML diagrams is just like how we previously added support for mindmap diagrams in PR https://github.com/mermaid-js/mermaid-cli/pull/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 https://github.com/antlr/antlr4/commit/2c75e642796718273fd215b03a310d4958319bad) 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.

:clipboard: Tasks

Make sure you

MindaugasLaganeckas commented 1 year ago

Thank you! :)

MindaugasLaganeckas commented 1 year ago

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

aloisklink commented 1 year ago

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.