✨ Announcing maxGraph 0.17.0 🎉

[tbouffard]

⚡ This new version improves graph fitting, makes i18n fully configurable, and reduces bundle size significantly. ⚡

Resources

• npm package: @maxgraph/core 0.17.0
• Fixed issues: milestone 0.17.0
• Documentation: maxgraph_0.17.0_website.zip
• Examples: maxgraph_0.17.0_examples.zip
• Changelog (only includes a summary and breaking changes): changelog

Breaking changes

Important

These changes may impact existing usages. Please review them carefully and check the related pull requests for migration guidance.

🔐 Eval usage is now disabled by default

To prevent potential security issues, StylesheetCodec.allowEval is now false by default.

Note

See #736 for details.

🌐 Configurable i18n

The built-in Translations class is no longer used by default. If you want to keep using it, you must now explicitly enable it:

GlobalConfig.i18n = new TranslationsAsI18n();

Note

See #737

🧰 Utility functions access changes

Several utils have been reorganized for better clarity and maintainability:

• These functions are now accessed through specific namespaces:
  • get, getAll, load, post, submit → requestUtils
  • error, popup → guiUtils
• The old utils namespace has been removed.
• Remaining relevant properties were moved to guiUtils.

Note

See #740

💥 Removed internal functions

Some functions that were mistakenly exposed as public have been removed:

• Utils.copyTextToClipboard is no longer available.

  See #738

• cellArrayUtils.filterCells was removed - just use the native Array.filter() instead!

  See #752

Highlights

🎯 New: Fit Center

You can now center and fit your graph into the container with the new FitPlugin.
The method is inspired by the former example provided in the JSDoc of Graph.fit() but improved to:

• handle margins better,
• reduce visual shifts when called multiple times.

The storybook and TypeScript example have been updated to showcase how it works in various contexts.

PR_733_story_fit_center.mp4

Note

See #733

🌍 Configurable i18n support

Until now, the Translations class was always used internally. Now you can:

• Disable i18n completely for smaller bundles,
• Plug in your own i18n solution.

This makes maxGraph more flexible and lighter by default.

Note

See #737

📦 Smaller bundle size

Thanks to the new i18n configuration, tree-shaking now works better.
Depending on your setup, you could reduce the size of your app by 5-10kB - and probably more with tuned bundler configs!

Tip

Examples use default bundler configs and still show measurable gains.

🔬 Examples in the maxGraph repo

Example	0.16.0	0.17.0
js-example	484.1 kB	475.71 kB
js-example-without-defaults	462.4 kB	452.13 kB
ts-example	444.4 kB	439.15 kB
ts-example-without-defaults	440.4 kB	435.12 kB

📖 See documentation for what each example includes.

🔬 Examples in maxgraph-integration-examples

All integration projects reuse a shared core similar to ts-example. Here's the app size:

Example	0.16.0	0.17.0
farm	461.0 kB	453.9 kB
lit with vite	471.7 kB	466.5 kB
parcel[1]	521.2 KB	528.1 kB
rollup	443.7 kB	438.3 kB
rsbuild	429.4 kB	417.3 kB
vite	447.5 kB	442.2 kB

[1] parcel is the sole bundler that increases the size of the application. Parcel was bump from 2.13.3 to 2.14.4 which may have introduced changes.

➰ New story: curved edges

We've added a story to show the difference between:

• default edges
• curved edges
• rounded edges

PR_731_story_edges_curved_and_rounded.mp4

Note

See #731

What's Changed

🎉 New Features

• feat: refine the type of CellStateStyle.elbow by @tbouffard in feat: refine the type of CellStateStyle.elbow #701
• feat: CellStateStyle port constraints accept multiple DirectionValue by @tbouffard in feat: CellStateStyle port constraints accept multiple DirectionValue #721
• feat: let "fit center" with the new FitPlugin by @tbouffard in feat: let "fit center" with the new FitPlugin #733
• feat!: limit usage of the eval function by @tbouffard in feat!: limit usage of the eval function #736
• feat!: introduce a way to configure the I18n provider by @tbouffard in feat!: introduce a way to configure the I18n provider #737

🐛 Bug Fixes

• fix: consider ManhattanConnector as orthogonal by @tbouffard in fix: consider ManhattanConnector as orthogonal #707
• fix(type): let Graph fitScale properties allow null by @tbouffard in fix(type): let Graph fitScale properties allow null #715
• fix(story): add buttons to container, not to the document by @tbouffard in fix(story): add buttons to container, not to the document #750
• fix(story): ensure that the Model Codecs are always registered by @tbouffard in fix(story): ensure that the Model Codecs are always registered #749
• fix: make Graph.options truly per-instance by @tbouffard in fix: make Graph.options truly per-instance #751

📝 Documentation

• docs: add more JSDoc categories by @tbouffard in docs: add more JSDoc categories #714
• docs: improve jsdoc for custom implementation of EdgeStyle by @tbouffard in docs: improve jsdoc for custom implementation of EdgeStyle #724
• docs: improve JSDoc of styleUtils by @tbouffard in docs: improve JSDoc of styleUtils #727
• docs: improve JSDoc of allowEval properties by @tbouffard in docs: improve JSDoc of allowEval properties #729
• docs: update reference to functions moved to dedicated namespaces by @tbouffard in docs: update reference to functions moved to dedicated namespaces #746

⚙️ Refactor

• refactor: migrate the Events story to TypeScript by @tbouffard in refactor: migrate the Events story to TypeScript #702
• refactor: introduce shared code to manage description of story by @tbouffard in refactor: introduce shared code to manage description of story #703
• refactor: migrate the Wrapping story to TypeScript by @tbouffard in refactor: migrate the Wrapping story to TypeScript #720
• refactor: simplify type management in Codecs by @tbouffard in refactor: simplify type management in Codecs #723
• refactor: apply internal improvements to editor classes by @tbouffard in refactor: apply internal improvements to editor classes #726
• refactor: improve the management of CellStateStyle.curved by @tbouffard in refactor: improve the management of CellStateStyle.curved #731
• refactor: remove isNotNullish internal function by @tbouffard in refactor: remove isNotNullish internal function #732
• refactor: move plugins to a dedicated folder by @tbouffard in refactor: move plugins to a dedicated folder #735
• refactor!: move internal utils functions to a dedicated directory by @tbouffard in refactor!: move internal utils functions to a dedicated directory #738
• refactor!: expose all exported functions in namespaces by @tbouffard in refactor!: expose all exported functions in namespaces #740
• refactor!: move properties of utils to guiUtils by @tbouffard in refactor!: move properties of utils to guiUtils #741
• refactor(types): simplify imports of the Graph types by @tbouffard in refactor(types): simplify imports of the Graph types #743
• refactor!: remove cellArrayUtils.filterCells by @tbouffard in refactor!: remove cellArrayUtils.filterCells #752

🛠 Chore

• chore: add more checks in ts-support by @tbouffard in chore: add more checks in ts-support #728
• chore(types): enforce usage of explicit override keyword in examples by @tbouffard in chore(types): enforce usage of explicit override keyword in examples #739

Full Changelog: v0.16.0...v0.17.0

---

This discussion was created from the release 0.17.0.