diff --git a/.changeset/beige-peas-shave.md b/.changeset/beige-peas-shave.md deleted file mode 100644 index c405f3dcc..000000000 --- a/.changeset/beige-peas-shave.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@mermaid-js/mermaid-zenuml': patch ---- - -Fixed a critical bug that the ZenUML diagram is not rendered. diff --git a/.changeset/busy-clocks-melt.md b/.changeset/busy-clocks-melt.md deleted file mode 100644 index bde4b81de..000000000 --- a/.changeset/busy-clocks-melt.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@mermaid-js/layout-elk': patch -'mermaid': patch ---- - -feat: Exposing elk configuration forceNodeModelOrder and considerModelOrder to the mermaid configuration diff --git a/.changeset/chatty-lemons-stick.md b/.changeset/chatty-lemons-stick.md deleted file mode 100644 index 733e374ef..000000000 --- a/.changeset/chatty-lemons-stick.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -chore: Remove the "-beta" suffix from the XYChart, Block, Sankey diagrams to reflect their stable status diff --git a/.changeset/cold-sites-accept.md b/.changeset/cold-sites-accept.md deleted file mode 100644 index cba7ae414..000000000 --- a/.changeset/cold-sites-accept.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -fix: Position the edge label in state diagram correctly relative to the edge diff --git a/.changeset/empty-clouds-cry.md b/.changeset/empty-clouds-cry.md deleted file mode 100644 index c513542f1..000000000 --- a/.changeset/empty-clouds-cry.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -fix: Apply correct dateFormat in Gantt chart to show only day when specified diff --git a/.changeset/fuzzy-pears-cough.md b/.changeset/fuzzy-pears-cough.md deleted file mode 100644 index 6ed777506..000000000 --- a/.changeset/fuzzy-pears-cough.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -fix: handle exclude dates properly in Gantt charts when using dateFormat: 'YYYY-MM-DD HH:mm:ss' diff --git a/.changeset/gold-spiders-join.md b/.changeset/gold-spiders-join.md deleted file mode 100644 index 56bccc244..000000000 --- a/.changeset/gold-spiders-join.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -fix: fixed connection gaps in flowchart for roundedRect, stadium and diamond shape diff --git a/.changeset/good-weeks-tickle.md b/.changeset/good-weeks-tickle.md deleted file mode 100644 index 97c0c3660..000000000 --- a/.changeset/good-weeks-tickle.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'mermaid': patch ---- - -fix: sanitize icon labels and icon SVGs - -Resolves CVE-2025-54880 reported by @fourcube diff --git a/.changeset/large-mirrors-cheer.md b/.changeset/large-mirrors-cheer.md deleted file mode 100644 index 4e3903039..000000000 --- a/.changeset/large-mirrors-cheer.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -fix: Update casing of ID in requirement diagram diff --git a/.changeset/lemon-masks-unite.md b/.changeset/lemon-masks-unite.md deleted file mode 100644 index 306ff1cce..000000000 --- a/.changeset/lemon-masks-unite.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': minor ---- - -feat: Added support for per link curve styling in flowchart diagram using edge ids diff --git a/.changeset/light-flowers-judge.md b/.changeset/light-flowers-judge.md deleted file mode 100644 index 6378a9b0a..000000000 --- a/.changeset/light-flowers-judge.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -fix: Make flowchart elk detector regex match less greedy diff --git a/.changeset/lovely-queens-own.md b/.changeset/lovely-queens-own.md deleted file mode 100644 index edc8dda2d..000000000 --- a/.changeset/lovely-queens-own.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -'mermaid': patch ---- - -fix(block): overflowing blocks no longer affect later lines - -This may change the layout of block diagrams that have overflowing lines -(i.e. block diagrams that use up more columns that the `columns` specifier). diff --git a/.changeset/ninety-roses-turn.md b/.changeset/ninety-roses-turn.md deleted file mode 100644 index a69a6e7a0..000000000 --- a/.changeset/ninety-roses-turn.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'mermaid': patch ---- - -fix: log warning for blocks exceeding column width - -This update adds a validation check that logs a warning message when a block's width exceeds the defined column layout. diff --git a/.changeset/rare-women-fly.md b/.changeset/rare-women-fly.md deleted file mode 100644 index 46d08dd10..000000000 --- a/.changeset/rare-women-fly.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -fix: Add escaped class literal name on namespace diff --git a/.changeset/red-zebras-happen.md b/.changeset/red-zebras-happen.md deleted file mode 100644 index cadf3d0fb..000000000 --- a/.changeset/red-zebras-happen.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -fix: Allow equals sign in sequenceDiagram labels diff --git a/.changeset/seven-papayas-film.md b/.changeset/seven-papayas-film.md deleted file mode 100644 index 109743117..000000000 --- a/.changeset/seven-papayas-film.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -'mermaid': patch ---- - -Add validation for negative values in pie charts: - -Prevents crashes during parsing by validating values post-parsing. - -Provides clearer, user-friendly error messages for invalid negative inputs. diff --git a/.changeset/silver-eyes-build.md b/.changeset/silver-eyes-build.md deleted file mode 100644 index 76f0a0125..000000000 --- a/.changeset/silver-eyes-build.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -chore: migrate to class-based ArchitectureDB implementation diff --git a/.changeset/six-planets-rescue.md b/.changeset/six-planets-rescue.md deleted file mode 100644 index 8b04a69ed..000000000 --- a/.changeset/six-planets-rescue.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -fix: node border style for handdrawn shapes diff --git a/.changeset/smart-humans-cover.md b/.changeset/smart-humans-cover.md deleted file mode 100644 index 4408e0a9c..000000000 --- a/.changeset/smart-humans-cover.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -fix: Update flowchart direction TD's behavior to be the same as TB diff --git a/.changeset/spicy-ties-see.md b/.changeset/spicy-ties-see.md deleted file mode 100644 index 25fc643e0..000000000 --- a/.changeset/spicy-ties-see.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@mermaid-js/layout-elk': patch ---- - -Make elk not force node model order, but strongly consider it instead diff --git a/.changeset/strong-dryers-pay.md b/.changeset/strong-dryers-pay.md deleted file mode 100644 index 495cde202..000000000 --- a/.changeset/strong-dryers-pay.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -fix: correctly render non-directional lines for '---' in block diagrams diff --git a/.changeset/strong-laws-confess.md b/.changeset/strong-laws-confess.md deleted file mode 100644 index be0621d10..000000000 --- a/.changeset/strong-laws-confess.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -'mermaid': patch ---- - -fix: fallback to raw text instead of rendering _Unsupported markdown_ or empty blocks - -Instead of printing **Unsupported markdown: XXX**, or empty blocks when using a markdown feature -that Mermaid does not yet support when `htmlLabels: true`(default) or `htmlLabels: false`, -fallback to the raw markdown text. diff --git a/.changeset/tidy-weeks-play.md b/.changeset/tidy-weeks-play.md deleted file mode 100644 index 266f57552..000000000 --- a/.changeset/tidy-weeks-play.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'mermaid': patch ---- - -fix: sanitize KATEX blocks - -Resolves CVE-2025-54881 reported by @fourcube diff --git a/.changeset/vast-buses-see.md b/.changeset/vast-buses-see.md deleted file mode 100644 index fc2a0e6c6..000000000 --- a/.changeset/vast-buses-see.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'mermaid': patch ---- - -chore: Update packet diagram to use new class-based database structure diff --git a/.cspell/contributors.txt b/.cspell/contributors.txt index 80f4df22a..a95f8654e 100644 --- a/.cspell/contributors.txt +++ b/.cspell/contributors.txt @@ -2,6 +2,7 @@ Ashish Jain cpettitt Dong Cai +fourcube knsv Knut Sveidqvist Nikolay Rozhkov diff --git a/.github/lychee.toml b/.github/lychee.toml index fbe7a71a2..06b3aa707 100644 --- a/.github/lychee.toml +++ b/.github/lychee.toml @@ -59,6 +59,7 @@ exclude = [ "https://huehive.co", "https://foswiki.org", "https://www.gnu.org", +"https://redmine.org", "https://mermaid-preview.com" ] diff --git a/.lintstagedrc.mjs b/.lintstagedrc.mjs index 951bc889c..86af4f513 100644 --- a/.lintstagedrc.mjs +++ b/.lintstagedrc.mjs @@ -7,6 +7,5 @@ export default { 'prettier --write', ], '.cspell/*.txt': ['tsx scripts/fixCSpell.ts'], - '**/*.md': ['pnpm cspell'], '**/*.jison': ['pnpm -w run lint:jison'], }; diff --git a/cypress/platform/sidv.html b/cypress/platform/sidv.html index b0a1699da..1651b0737 100644 --- a/cypress/platform/sidv.html +++ b/cypress/platform/sidv.html @@ -41,10 +41,6 @@ graph TB const { svg } = await mermaid.render('d22', value); console.log(svg); el.innerHTML = svg; - // mermaid.test1('first_slow', 1200).then((r) => console.info(r)); - // mermaid.test1('second_fast', 200).then((r) => console.info(r)); - // mermaid.test1('third_fast', 200).then((r) => console.info(r)); - // mermaid.test1('forth_slow', 1200).then((r) => console.info(r)); diff --git a/cypress/timings.json b/cypress/timings.json index 50130f180..86d5b5222 100644 --- a/cypress/timings.json +++ b/cypress/timings.json @@ -2,219 +2,219 @@ "durations": [ { "spec": "cypress/integration/other/configuration.spec.js", - "duration": 5815 + "duration": 6297 }, { "spec": "cypress/integration/other/external-diagrams.spec.js", - "duration": 2035 + "duration": 2187 }, { "spec": "cypress/integration/other/ghsa.spec.js", - "duration": 3386 + "duration": 3509 }, { "spec": "cypress/integration/other/iife.spec.js", - "duration": 2089 + "duration": 2218 }, { "spec": "cypress/integration/other/interaction.spec.js", - "duration": 11578 + "duration": 12104 }, { "spec": "cypress/integration/other/rerender.spec.js", - "duration": 2119 + "duration": 2151 }, { "spec": "cypress/integration/other/xss.spec.js", - "duration": 27282 + "duration": 33064 }, { "spec": "cypress/integration/rendering/appli.spec.js", - "duration": 3377 + "duration": 3488 }, { "spec": "cypress/integration/rendering/architecture.spec.ts", - "duration": 97 + "duration": 106 }, { "spec": "cypress/integration/rendering/block.spec.js", - "duration": 18137 + "duration": 18317 }, { "spec": "cypress/integration/rendering/c4.spec.js", - "duration": 5455 + "duration": 5592 }, { "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js", - "duration": 40850 + "duration": 39358 }, { "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js", - "duration": 37964 + "duration": 37160 }, { "spec": "cypress/integration/rendering/classDiagram-v2.spec.js", - "duration": 23446 + "duration": 23660 }, { "spec": "cypress/integration/rendering/classDiagram-v3.spec.js", - "duration": 37207 + "duration": 36866 }, { "spec": "cypress/integration/rendering/classDiagram.spec.js", - "duration": 16531 + "duration": 17334 }, { "spec": "cypress/integration/rendering/conf-and-directives.spec.js", - "duration": 9385 + "duration": 9871 }, { "spec": "cypress/integration/rendering/current.spec.js", - "duration": 2697 + "duration": 2833 }, { "spec": "cypress/integration/rendering/erDiagram-unified.spec.js", - "duration": 88648 + "duration": 85321 }, { "spec": "cypress/integration/rendering/erDiagram.spec.js", - "duration": 15094 + "duration": 15673 }, { "spec": "cypress/integration/rendering/errorDiagram.spec.js", - "duration": 3548 + "duration": 3724 }, { "spec": "cypress/integration/rendering/flowchart-elk.spec.js", - "duration": 44889 + "duration": 41178 }, { "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js", - "duration": 30487 + "duration": 29966 }, { "spec": "cypress/integration/rendering/flowchart-icon.spec.js", - "duration": 7375 + "duration": 7689 }, { "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts", - "duration": 24913 + "duration": 24709 }, { "spec": "cypress/integration/rendering/flowchart-v2.spec.js", - "duration": 51927 + "duration": 45565 }, { "spec": "cypress/integration/rendering/flowchart.spec.js", - "duration": 31676 + "duration": 31144 }, { "spec": "cypress/integration/rendering/gantt.spec.js", - "duration": 19897 + "duration": 20808 }, { "spec": "cypress/integration/rendering/gitGraph.spec.js", - "duration": 53450 + "duration": 49985 }, { "spec": "cypress/integration/rendering/iconShape.spec.ts", - "duration": 287035 + "duration": 273272 }, { "spec": "cypress/integration/rendering/imageShape.spec.ts", - "duration": 58555 + "duration": 55880 }, { "spec": "cypress/integration/rendering/info.spec.ts", - "duration": 3179 + "duration": 3271 }, { "spec": "cypress/integration/rendering/journey.spec.js", - "duration": 7099 + "duration": 7293 }, { "spec": "cypress/integration/rendering/kanban.spec.ts", - "duration": 7628 + "duration": 7861 }, { "spec": "cypress/integration/rendering/katex.spec.js", - "duration": 3764 + "duration": 3922 }, { "spec": "cypress/integration/rendering/marker_unique_id.spec.js", - "duration": 2573 + "duration": 2726 }, { "spec": "cypress/integration/rendering/mindmap.spec.ts", - "duration": 11269 + "duration": 11670 }, { "spec": "cypress/integration/rendering/newShapes.spec.ts", - "duration": 148389 + "duration": 146020 }, { "spec": "cypress/integration/rendering/oldShapes.spec.ts", - "duration": 113395 + "duration": 114244 }, { "spec": "cypress/integration/rendering/packet.spec.ts", - "duration": 4714 + "duration": 5036 }, { "spec": "cypress/integration/rendering/pie.spec.ts", - "duration": 6446 + "duration": 6545 }, { "spec": "cypress/integration/rendering/quadrantChart.spec.js", - "duration": 9133 + "duration": 9097 }, { "spec": "cypress/integration/rendering/radar.spec.js", - "duration": 5544 + "duration": 5676 }, { "spec": "cypress/integration/rendering/requirement.spec.js", - "duration": 2709 + "duration": 2795 }, { "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js", - "duration": 55647 + "duration": 51660 }, { "spec": "cypress/integration/rendering/sankey.spec.ts", - "duration": 6751 + "duration": 6957 }, { "spec": "cypress/integration/rendering/sequencediagram.spec.js", - "duration": 36618 + "duration": 36026 }, { "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js", - "duration": 29642 + "duration": 29551 }, { "spec": "cypress/integration/rendering/stateDiagram.spec.js", - "duration": 16037 + "duration": 17364 }, { "spec": "cypress/integration/rendering/theme.spec.js", - "duration": 30006 + "duration": 30209 }, { "spec": "cypress/integration/rendering/timeline.spec.ts", - "duration": 8451 + "duration": 8699 }, { "spec": "cypress/integration/rendering/treemap.spec.ts", - "duration": 11996 + "duration": 12168 }, { "spec": "cypress/integration/rendering/xyChart.spec.js", - "duration": 20627 + "duration": 21453 }, { "spec": "cypress/integration/rendering/zenuml.spec.js", - "duration": 3472 + "duration": 3577 } ] } diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index c2887c43e..6bc16e3e2 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -73,7 +73,7 @@ To add an integration to this list, see the [Integrations - create page](./integ - [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅ - [Outline](https://docs.getoutline.com/s/guide/doc/diagrams-KQiKoT4wzK) ✅ - [Redmine](https://redmine.org) - - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro) + - [Mermaid Macro](https://redmine.org/plugins/redmine_mermaid_macro) - [Markdown for mermaid plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin) - [redmine-mermaid](https://github.com/styz/redmine_mermaid) - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive) diff --git a/docs/news/blog.md b/docs/news/blog.md index ff5f1b46b..eda497fdf 100644 --- a/docs/news/blog.md +++ b/docs/news/blog.md @@ -6,6 +6,66 @@ # Blog +## [Mermaid introduces the Visual Editor for Entity Relationship diagrams](https://docs.mermaidchart.com/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams) + +7/15/2025 • 7 mins + +Mermaid just introduced a Visual Editor for Entity Relationship diagrams, letting anyone map database structures through a simple point-and-click interface instead of code. This no-code ER builder now sits alongside Mermaid’s editors for flowcharts, sequence, and class diagrams, enabling teams to craft and share polished data models for apps, AI, and business processes. + +## [Mermaid supports Treemap Diagrams now!!!](https://docs.mermaidchart.com/blog/posts/mermaid-have-treemap-diagrams-now) + +7/3/2025 • 4 mins + +Mermaid has introduced Treemap diagrams, currently in beta, enhancing hierarchical data visualization. Treemap diagrams use nested rectangles to represent data relationships, focusing on size and proportions. They offer various applications, including budget visualization and market analysis. With simple syntax and customization options, users can effectively present complex data hierarchies. + +## [AI Diagram Generators and Data Visualization: Best Practices](https://docs.mermaidchart.com/blog/posts/ai-diagram-generators-and-data-visualization-best-practices) + +7/2/2025 • 6 mins + +AI diagram generators transform complex data into clear, interactive visuals – enabling faster analysis, better decisions, and stronger collaboration across teams. By combining automation with manual refinement, these tools empower anyone to communicate insights effectively, regardless of technical skill level. + +## [How to Choose the Best AI Diagram Generator for Your Needs (2025)](https://docs.mermaidchart.com/blog/posts/how-to-choose-the-best-ai-diagram-generator-for-your-needs-2025) + +6/26/2025 • 14 mins + +AI diagram generators are transforming how developers visualize and communicate complex systems, reducing hours of manual work into minutes. With tools like Mermaid AI, users benefit from both code-based and visual editing, enabling seamless collaboration and precision. Whether you’re diagramming workflows, software architecture, or data relationships, the right AI tool can significantly boost productivity and streamline communication. + +## [5 Time-Saving Tips for Using Mermaid’s AI Diagram Generator Effectively](https://docs.mermaidchart.com/blog/posts/5-time-saving-tips-for-using-mermaids-ai-diagram-generator-effectively) + +6/11/2025 • 10 mins + +See how developers can save time and boost productivity using Mermaid Chart’s AI diagram generator. Learn five practical tips that help turn plain language into powerful, professional diagrams. + +## [Enhancing Team Collaboration with AI-Powered Diagrams](https://docs.mermaidchart.com/blog/posts/enhancing-team-collaboration-with-ai-powered-diagrams) + +5/27/2025 • 6 mins + +Software teams move fast, but old-school diagramming tools can’t keep up. Mermaid Chart replaces static slides and whiteboards with real-time, AI-generated visuals that evolve with your code and ideas. Just describe a process in plain English, and watch it come to life. + +## [What is an AI Diagram Generator? Benefits and Use Cases](https://docs.mermaidchart.com/blog/posts/what-is-an-ai-diagram-generator-benefits-and-use-cases) + +5/22/2025 • 6 mins + +Discover how AI diagram generators like Mermaid Chart transform developer workflows. Instantly turn text into flowcharts, ERDs, and system diagrams, no manual drag-and-drop needed. Learn how it works, key benefits, and real-world use cases. + +## [How to Use Mermaid Chart as an AI Diagram Generator for Developers](https://docs.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator) + +5/21/2025 • 9 mins + +Would an AI diagram generator make your life easier? We think it would! + +## [Mermaid Chart VS Code Plugin: Create and Edit Mermaid.js Diagrams in Visual Studio Code](https://docs.mermaidchart.com/blog/posts/mermaid-chart-vs-code-plugin-create-and-edit-mermaid-js-diagrams-in-visual-studio-code) + +3/21/2025 • 5 mins + +The Mermaid Chart VS Code Plugin is a powerful developer diagramming tool that brings Mermaid.js diagramming directly into your Visual Studio Code environment. Whether you’re visualizing software architecture, documenting API flows, fixing bad documentation, or managing flowcharts and sequence diagrams, this plugin integrates seamlessly into your workflow. Key Features of the Mermaid Chart VS Code \[…] + +## [Mermaid Chart: The Evolution of Mermaid](https://docs.mermaidchart.com/blog/posts/mermaid-chart-the-evolution-of-mermaid) + +1/30/2025 • 3 mins + +Mermaid revolutionized diagramming with its simple, markdown-style syntax, empowering millions of developers worldwide. Now, Mermaid Chart takes it further with AI-powered visuals, a GUI for seamless editing, real-time collaboration, and advanced design tools. Experience the next generation of diagramming—faster, smarter, and built for modern teams. Try Mermaid Chart today! + ## [GUI for editing Mermaid Class Diagrams](https://docs.mermaidchart.com/blog/posts/gui-for-editing-mermaid-class-diagrams) 1/17/2025 • 5 mins diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 5f827e52a..daaa29581 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -1816,7 +1816,7 @@ config: graph LR ``` -#### Edge level curve style using Edge IDs (v\+) +#### Edge level curve style using Edge IDs (v11.10.0+) You can assign IDs to [edges](#attaching-an-id-to-edges). After assigning an ID you can modify the line style by modifying the edge's `curve` property using the following syntax: diff --git a/packages/examples/package.json b/packages/examples/package.json index 26ae83e15..cd0fc0bd0 100644 --- a/packages/examples/package.json +++ b/packages/examples/package.json @@ -27,9 +27,6 @@ "devDependencies": { "mermaid": "workspace:*" }, - "peerDependencies": { - "mermaid": "workspace:~" - }, "publishConfig": { "access": "public" } diff --git a/packages/mermaid-layout-elk/CHANGELOG.md b/packages/mermaid-layout-elk/CHANGELOG.md index 96b5d2fae..ef40f04a0 100644 --- a/packages/mermaid-layout-elk/CHANGELOG.md +++ b/packages/mermaid-layout-elk/CHANGELOG.md @@ -1,5 +1,16 @@ # @mermaid-js/layout-elk +## 0.1.9 + +### Patch Changes + +- [#6857](https://github.com/mermaid-js/mermaid/pull/6857) [`b9ef683`](https://github.com/mermaid-js/mermaid/commit/b9ef683fb67b8959abc455d6cc5266c37ba435f6) Thanks [@knsv](https://github.com/knsv)! - feat: Exposing elk configuration forceNodeModelOrder and considerModelOrder to the mermaid configuration + +- [#6849](https://github.com/mermaid-js/mermaid/pull/6849) [`2260948`](https://github.com/mermaid-js/mermaid/commit/2260948b7bda08f00616c2ce678bed1da69eb96c) Thanks [@anderium](https://github.com/anderium)! - Make elk not force node model order, but strongly consider it instead + +- Updated dependencies [[`b9ef683`](https://github.com/mermaid-js/mermaid/commit/b9ef683fb67b8959abc455d6cc5266c37ba435f6), [`2c0931d`](https://github.com/mermaid-js/mermaid/commit/2c0931da46794b49d2523211e25f782900c34e94), [`33e08da`](https://github.com/mermaid-js/mermaid/commit/33e08daf175125295a06b1b80279437004a4e865), [`814b68b`](https://github.com/mermaid-js/mermaid/commit/814b68b4a94813f7c6b3d7fb4559532a7bab2652), [`fce7cab`](https://github.com/mermaid-js/mermaid/commit/fce7cabb71d68a20a66246fe23d066512126a412), [`fc07f0d`](https://github.com/mermaid-js/mermaid/commit/fc07f0d8abca49e4f887d7457b7b94fb07d1e3da), [`12e01bd`](https://github.com/mermaid-js/mermaid/commit/12e01bdb5cacf3569133979a5a4f1d8973e9aec1), [`01aaef3`](https://github.com/mermaid-js/mermaid/commit/01aaef39b4a1ec8bc5a0c6bfa3a20b712d67f4dc), [`daf8d8d`](https://github.com/mermaid-js/mermaid/commit/daf8d8d3befcd600618a629977b76463b38d0ad9), [`c36cd05`](https://github.com/mermaid-js/mermaid/commit/c36cd05c45ac3090181152b4dae41f8d7b569bd6), [`8bb29fc`](https://github.com/mermaid-js/mermaid/commit/8bb29fc879329ad109898e4025b4f4eba2ab0649), [`71b04f9`](https://github.com/mermaid-js/mermaid/commit/71b04f93b07f876df2b30656ef36036c1d0e4e4f), [`c99bce6`](https://github.com/mermaid-js/mermaid/commit/c99bce6bab4c7ce0b81b66d44f44853ce4aeb1c3), [`6cc1926`](https://github.com/mermaid-js/mermaid/commit/6cc192680a2531cab28f87a8061a53b786e010f3), [`9da6fb3`](https://github.com/mermaid-js/mermaid/commit/9da6fb39ae278401771943ac85d6d1b875f78cf1), [`e48b0ba`](https://github.com/mermaid-js/mermaid/commit/e48b0ba61dab7f95aa02da603b5b7d383b894932), [`4d62d59`](https://github.com/mermaid-js/mermaid/commit/4d62d5963238400270e9314c6e4d506f48147074), [`e9ce8cf`](https://github.com/mermaid-js/mermaid/commit/e9ce8cf4da9062d85098042044822100889bb0dd), [`9258b29`](https://github.com/mermaid-js/mermaid/commit/9258b2933bbe1ef41087345ffea3731673671c49), [`da90f67`](https://github.com/mermaid-js/mermaid/commit/da90f6760b6efb0da998bcb63b75eecc29e06c08), [`0133f1c`](https://github.com/mermaid-js/mermaid/commit/0133f1c0c5cff4fc4c8e0b99e9cf0b3d49dcbe71), [`895f9d4`](https://github.com/mermaid-js/mermaid/commit/895f9d43ff98ca05ebfba530789f677f31a011ff)]: + - mermaid@11.10.0 + ## 0.1.8 ### Patch Changes diff --git a/packages/mermaid-layout-elk/package.json b/packages/mermaid-layout-elk/package.json index 023958c1f..176c14b25 100644 --- a/packages/mermaid-layout-elk/package.json +++ b/packages/mermaid-layout-elk/package.json @@ -1,6 +1,6 @@ { "name": "@mermaid-js/layout-elk", - "version": "0.1.8", + "version": "0.1.9", "description": "ELK layout engine for mermaid", "module": "dist/mermaid-layout-elk.core.mjs", "types": "dist/layouts.d.ts", diff --git a/packages/mermaid-zenuml/CHANGELOG.md b/packages/mermaid-zenuml/CHANGELOG.md index 57e8795a4..a7fe35c78 100644 --- a/packages/mermaid-zenuml/CHANGELOG.md +++ b/packages/mermaid-zenuml/CHANGELOG.md @@ -1,5 +1,14 @@ # @mermaid-js/mermaid-zenuml +## 0.2.2 + +### Patch Changes + +- [#6798](https://github.com/mermaid-js/mermaid/pull/6798) [`3ffe961`](https://github.com/mermaid-js/mermaid/commit/3ffe9618aebc9ac96de6e3c826481f542f18c2a9) Thanks [@MrCoder](https://github.com/MrCoder)! - Fixed a critical bug that the ZenUML diagram is not rendered. + +- Updated dependencies [[`b9ef683`](https://github.com/mermaid-js/mermaid/commit/b9ef683fb67b8959abc455d6cc5266c37ba435f6), [`2c0931d`](https://github.com/mermaid-js/mermaid/commit/2c0931da46794b49d2523211e25f782900c34e94), [`33e08da`](https://github.com/mermaid-js/mermaid/commit/33e08daf175125295a06b1b80279437004a4e865), [`814b68b`](https://github.com/mermaid-js/mermaid/commit/814b68b4a94813f7c6b3d7fb4559532a7bab2652), [`fce7cab`](https://github.com/mermaid-js/mermaid/commit/fce7cabb71d68a20a66246fe23d066512126a412), [`fc07f0d`](https://github.com/mermaid-js/mermaid/commit/fc07f0d8abca49e4f887d7457b7b94fb07d1e3da), [`12e01bd`](https://github.com/mermaid-js/mermaid/commit/12e01bdb5cacf3569133979a5a4f1d8973e9aec1), [`01aaef3`](https://github.com/mermaid-js/mermaid/commit/01aaef39b4a1ec8bc5a0c6bfa3a20b712d67f4dc), [`daf8d8d`](https://github.com/mermaid-js/mermaid/commit/daf8d8d3befcd600618a629977b76463b38d0ad9), [`c36cd05`](https://github.com/mermaid-js/mermaid/commit/c36cd05c45ac3090181152b4dae41f8d7b569bd6), [`8bb29fc`](https://github.com/mermaid-js/mermaid/commit/8bb29fc879329ad109898e4025b4f4eba2ab0649), [`71b04f9`](https://github.com/mermaid-js/mermaid/commit/71b04f93b07f876df2b30656ef36036c1d0e4e4f), [`c99bce6`](https://github.com/mermaid-js/mermaid/commit/c99bce6bab4c7ce0b81b66d44f44853ce4aeb1c3), [`6cc1926`](https://github.com/mermaid-js/mermaid/commit/6cc192680a2531cab28f87a8061a53b786e010f3), [`9da6fb3`](https://github.com/mermaid-js/mermaid/commit/9da6fb39ae278401771943ac85d6d1b875f78cf1), [`e48b0ba`](https://github.com/mermaid-js/mermaid/commit/e48b0ba61dab7f95aa02da603b5b7d383b894932), [`4d62d59`](https://github.com/mermaid-js/mermaid/commit/4d62d5963238400270e9314c6e4d506f48147074), [`e9ce8cf`](https://github.com/mermaid-js/mermaid/commit/e9ce8cf4da9062d85098042044822100889bb0dd), [`9258b29`](https://github.com/mermaid-js/mermaid/commit/9258b2933bbe1ef41087345ffea3731673671c49), [`da90f67`](https://github.com/mermaid-js/mermaid/commit/da90f6760b6efb0da998bcb63b75eecc29e06c08), [`0133f1c`](https://github.com/mermaid-js/mermaid/commit/0133f1c0c5cff4fc4c8e0b99e9cf0b3d49dcbe71), [`895f9d4`](https://github.com/mermaid-js/mermaid/commit/895f9d43ff98ca05ebfba530789f677f31a011ff)]: + - mermaid@11.10.0 + ## 0.2.1 ### Patch Changes diff --git a/packages/mermaid-zenuml/package.json b/packages/mermaid-zenuml/package.json index ec7b9486d..cc9ce0d4a 100644 --- a/packages/mermaid-zenuml/package.json +++ b/packages/mermaid-zenuml/package.json @@ -1,6 +1,6 @@ { "name": "@mermaid-js/mermaid-zenuml", - "version": "0.2.1", + "version": "0.2.2", "description": "MermaidJS plugin for ZenUML integration", "module": "dist/mermaid-zenuml.core.mjs", "types": "dist/detector.d.ts", diff --git a/packages/mermaid/CHANGELOG.md b/packages/mermaid/CHANGELOG.md index 49756233a..df67f0cfd 100644 --- a/packages/mermaid/CHANGELOG.md +++ b/packages/mermaid/CHANGELOG.md @@ -1,5 +1,72 @@ # mermaid +## 11.10.0 + +### Minor Changes + +- [#6744](https://github.com/mermaid-js/mermaid/pull/6744) [`daf8d8d`](https://github.com/mermaid-js/mermaid/commit/daf8d8d3befcd600618a629977b76463b38d0ad9) Thanks [@SpecularAura](https://github.com/SpecularAura)! - feat: Added support for per link curve styling in flowchart diagram using edge ids + +### Patch Changes + +- [#6857](https://github.com/mermaid-js/mermaid/pull/6857) [`b9ef683`](https://github.com/mermaid-js/mermaid/commit/b9ef683fb67b8959abc455d6cc5266c37ba435f6) Thanks [@knsv](https://github.com/knsv)! - feat: Exposing elk configuration forceNodeModelOrder and considerModelOrder to the mermaid configuration + +- [#6653](https://github.com/mermaid-js/mermaid/pull/6653) [`2c0931d`](https://github.com/mermaid-js/mermaid/commit/2c0931da46794b49d2523211e25f782900c34e94) Thanks [@darshanr0107](https://github.com/darshanr0107)! - chore: Remove the "-beta" suffix from the XYChart, Block, Sankey diagrams to reflect their stable status + +- [#6683](https://github.com/mermaid-js/mermaid/pull/6683) [`33e08da`](https://github.com/mermaid-js/mermaid/commit/33e08daf175125295a06b1b80279437004a4e865) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Position the edge label in state diagram correctly relative to the edge + +- [#6693](https://github.com/mermaid-js/mermaid/pull/6693) [`814b68b`](https://github.com/mermaid-js/mermaid/commit/814b68b4a94813f7c6b3d7fb4559532a7bab2652) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Apply correct dateFormat in Gantt chart to show only day when specified + +- [#6734](https://github.com/mermaid-js/mermaid/pull/6734) [`fce7cab`](https://github.com/mermaid-js/mermaid/commit/fce7cabb71d68a20a66246fe23d066512126a412) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: handle exclude dates properly in Gantt charts when using dateFormat: 'YYYY-MM-DD HH:mm:ss' + +- [#6733](https://github.com/mermaid-js/mermaid/pull/6733) [`fc07f0d`](https://github.com/mermaid-js/mermaid/commit/fc07f0d8abca49e4f887d7457b7b94fb07d1e3da) Thanks [@omkarht](https://github.com/omkarht)! - fix: fixed connection gaps in flowchart for roundedRect, stadium and diamond shape + +- [#6876](https://github.com/mermaid-js/mermaid/pull/6876) [`12e01bd`](https://github.com/mermaid-js/mermaid/commit/12e01bdb5cacf3569133979a5a4f1d8973e9aec1) Thanks [@sidharthv96](https://github.com/sidharthv96)! - fix: sanitize icon labels and icon SVGs + + Resolves CVE-2025-54880 reported by @fourcube + +- [#6801](https://github.com/mermaid-js/mermaid/pull/6801) [`01aaef3`](https://github.com/mermaid-js/mermaid/commit/01aaef39b4a1ec8bc5a0c6bfa3a20b712d67f4dc) Thanks [@sidharthv96](https://github.com/sidharthv96)! - fix: Update casing of ID in requirement diagram + +- [#6796](https://github.com/mermaid-js/mermaid/pull/6796) [`c36cd05`](https://github.com/mermaid-js/mermaid/commit/c36cd05c45ac3090181152b4dae41f8d7b569bd6) Thanks [@HashanCP](https://github.com/HashanCP)! - fix: Make flowchart elk detector regex match less greedy + +- [#6702](https://github.com/mermaid-js/mermaid/pull/6702) [`8bb29fc`](https://github.com/mermaid-js/mermaid/commit/8bb29fc879329ad109898e4025b4f4eba2ab0649) Thanks [@qraqras](https://github.com/qraqras)! - fix(block): overflowing blocks no longer affect later lines + + This may change the layout of block diagrams that have overflowing lines + (i.e. block diagrams that use up more columns that the `columns` specifier). + +- [#6717](https://github.com/mermaid-js/mermaid/pull/6717) [`71b04f9`](https://github.com/mermaid-js/mermaid/commit/71b04f93b07f876df2b30656ef36036c1d0e4e4f) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: log warning for blocks exceeding column width + + This update adds a validation check that logs a warning message when a block's width exceeds the defined column layout. + +- [#6820](https://github.com/mermaid-js/mermaid/pull/6820) [`c99bce6`](https://github.com/mermaid-js/mermaid/commit/c99bce6bab4c7ce0b81b66d44f44853ce4aeb1c3) Thanks [@kriss-u](https://github.com/kriss-u)! - fix: Add escaped class literal name on namespace + +- [#6332](https://github.com/mermaid-js/mermaid/pull/6332) [`6cc1926`](https://github.com/mermaid-js/mermaid/commit/6cc192680a2531cab28f87a8061a53b786e010f3) Thanks [@ajuckel](https://github.com/ajuckel)! - fix: Allow equals sign in sequenceDiagram labels + +- [#6651](https://github.com/mermaid-js/mermaid/pull/6651) [`9da6fb3`](https://github.com/mermaid-js/mermaid/commit/9da6fb39ae278401771943ac85d6d1b875f78cf1) Thanks [@darshanr0107](https://github.com/darshanr0107)! - Add validation for negative values in pie charts: + + Prevents crashes during parsing by validating values post-parsing. + + Provides clearer, user-friendly error messages for invalid negative inputs. + +- [#6803](https://github.com/mermaid-js/mermaid/pull/6803) [`e48b0ba`](https://github.com/mermaid-js/mermaid/commit/e48b0ba61dab7f95aa02da603b5b7d383b894932) Thanks [@omkarht](https://github.com/omkarht)! - chore: migrate to class-based ArchitectureDB implementation + +- [#6838](https://github.com/mermaid-js/mermaid/pull/6838) [`4d62d59`](https://github.com/mermaid-js/mermaid/commit/4d62d5963238400270e9314c6e4d506f48147074) Thanks [@saurabhg772244](https://github.com/saurabhg772244)! - fix: node border style for handdrawn shapes + +- [#6739](https://github.com/mermaid-js/mermaid/pull/6739) [`e9ce8cf`](https://github.com/mermaid-js/mermaid/commit/e9ce8cf4da9062d85098042044822100889bb0dd) Thanks [@kriss-u](https://github.com/kriss-u)! - fix: Update flowchart direction TD's behavior to be the same as TB + +- [#6833](https://github.com/mermaid-js/mermaid/pull/6833) [`9258b29`](https://github.com/mermaid-js/mermaid/commit/9258b2933bbe1ef41087345ffea3731673671c49) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: correctly render non-directional lines for '---' in block diagrams + +- [#6855](https://github.com/mermaid-js/mermaid/pull/6855) [`da90f67`](https://github.com/mermaid-js/mermaid/commit/da90f6760b6efb0da998bcb63b75eecc29e06c08) Thanks [@sidharthv96](https://github.com/sidharthv96)! - fix: fallback to raw text instead of rendering _Unsupported markdown_ or empty blocks + + Instead of printing **Unsupported markdown: XXX**, or empty blocks when using a markdown feature + that Mermaid does not yet support when `htmlLabels: true`(default) or `htmlLabels: false`, + fallback to the raw markdown text. + +- [#6876](https://github.com/mermaid-js/mermaid/pull/6876) [`0133f1c`](https://github.com/mermaid-js/mermaid/commit/0133f1c0c5cff4fc4c8e0b99e9cf0b3d49dcbe71) Thanks [@sidharthv96](https://github.com/sidharthv96)! - fix: sanitize KATEX blocks + + Resolves CVE-2025-54881 reported by @fourcube + +- [#6804](https://github.com/mermaid-js/mermaid/pull/6804) [`895f9d4`](https://github.com/mermaid-js/mermaid/commit/895f9d43ff98ca05ebfba530789f677f31a011ff) Thanks [@omkarht](https://github.com/omkarht)! - chore: Update packet diagram to use new class-based database structure + ## 11.9.0 ### Minor Changes diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 5a9669ff6..56446c34b 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "11.9.0", + "version": "11.10.0", "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.", "type": "module", "module": "./dist/mermaid.core.mjs", diff --git a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue index e41a7096d..2334d446f 100644 --- a/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue +++ b/packages/mermaid/src/docs/.vitepress/components/EditorSelectionModal.vue @@ -9,56 +9,136 @@ interface Feature { interface EditorColumn { title: string; description: string; - redirectUrl: string; + redBarText?: string; + redirectUrl?: string; + buttonText?: string; highlighted?: boolean; + proTrialUrl?: string; + proTrialButtonText?: string; features: Feature[]; + isButtonMargined?: boolean; } -const editorColumns: EditorColumn[] = [ - { - title: 'Playground', - description: 'Basic features, no login', - redirectUrl: - 'https://www.mermaidchart.com/play?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=playground', - features: [ - { iconUrl: '/icons/public.svg', featureName: 'Diagram stored in URL' }, - { iconUrl: '/icons/terminal.svg', featureName: 'Code editor' }, - { iconUrl: '/icons/whiteboard.svg', featureName: 'Whiteboard' }, - ], - }, - { - title: 'Free', - description: 'Advanced features, free account', - redirectUrl: - 'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection&utm_campaign=mermaid_chart&redirect=%2Fapp%2Fdiagrams%2Fnew', - highlighted: true, - features: [ - { iconUrl: '/icons/folder.svg', featureName: 'Storage' }, - { iconUrl: '/icons/terminal.svg', featureName: 'Code editor' }, - { iconUrl: '/icons/ai-diagram.svg', featureName: 'AI diagram generator' }, - { iconUrl: '/icons/whiteboard.svg', featureName: 'Whiteboard' }, - { iconUrl: '/icons/group.svg', featureName: 'Teams' }, - { iconUrl: '/icons/groups.svg', featureName: 'Multi-user editing' }, - { iconUrl: '/icons/ai-repair.svg', featureName: 'AI diagram repair' }, - { iconUrl: '/icons/version-history.svg', featureName: 'Version history' }, - { iconUrl: '/icons/comment.svg', featureName: 'Comments' }, - { iconUrl: '/icons/presentation.svg', featureName: 'Presentations' }, - { iconUrl: '/icons/plugins.svg', featureName: 'Advanced Plugins' }, - ], - }, - { - title: 'Open Source', - description: 'Code only, no login', - redirectUrl: 'https://mermaid.live/edit', - features: [ - { iconUrl: '/icons/public.svg', featureName: 'Diagram stored in URL' }, - { iconUrl: '/icons/terminal.svg', featureName: 'Code editor' }, - { iconUrl: '/icons/open-source.svg', featureName: 'Open source' }, - { iconUrl: '/icons/version-history.svg', featureName: 'Version history' }, - ], - }, +const mermaidChartFeatures: Feature[] = [ + { iconUrl: '/icons/folder.svg', featureName: 'Storage' }, + { iconUrl: '/icons/terminal.svg', featureName: 'Code editor' }, + { iconUrl: '/icons/ai-diagram.svg', featureName: 'AI diagram generator' }, + { iconUrl: '/icons/whiteboard.svg', featureName: 'Whiteboard' }, + { iconUrl: '/icons/group.svg', featureName: 'Teams' }, + { iconUrl: '/icons/groups.svg', featureName: 'Multi-user editing' }, + { iconUrl: '/icons/ai-repair.svg', featureName: 'AI diagram repair' }, + { iconUrl: '/icons/version-history.svg', featureName: 'Version history' }, + { iconUrl: '/icons/comment.svg', featureName: 'Comments' }, + { iconUrl: '/icons/presentation.svg', featureName: 'Presentations' }, + { iconUrl: '/icons/plugins.svg', featureName: 'Advanced plugins' }, ]; +const openSourceFeatures: Feature[] = [ + { iconUrl: '/icons/public.svg', featureName: 'Diagram stored in URL' }, + { iconUrl: '/icons/terminal.svg', featureName: 'Code editor' }, + { iconUrl: '/icons/open-source.svg', featureName: 'Open source' }, + { iconUrl: '/icons/version-history.svg', featureName: 'Version history' }, +]; + +const playgroundFeatures: Feature[] = [ + { iconUrl: '/icons/public.svg', featureName: 'Diagram stored in URL' }, + { iconUrl: '/icons/terminal.svg', featureName: 'Code editor' }, + { iconUrl: '/icons/whiteboard.svg', featureName: 'Whiteboard' }, +]; + +const editorColumnVariants: EditorColumn[][] = [ + [ + { + title: 'Playground', + description: 'Basic features, no login', + redirectUrl: + 'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=3_editor_selection_A&utm_campaign=start_playground', + buttonText: 'Start free', + features: playgroundFeatures, + }, + { + title: 'Free or Pro', + description: 'Advanced features, Free or Pro account', + proTrialUrl: + 'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=3_editor_selection_A&utm_campaign=start_free', + proTrialButtonText: 'Start free', + highlighted: true, + redBarText: 'Best for collaboration', + features: mermaidChartFeatures, + }, + { + title: 'Open Source', + description: 'Code only, no login', + redirectUrl: 'https://mermaid.live/edit', + buttonText: 'Start free', + features: openSourceFeatures, + }, + ], + [ + { + title: 'Mermaid Pro', + description: 'Unlock AI and real-time collaboration', + redirectUrl: + 'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_B&utm_campaign=start_free', + buttonText: 'Start Free', + highlighted: true, + redBarText: 'Recommended', + proTrialButtonText: 'Start Pro trial', + proTrialUrl: + 'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_B&utm_campaign=start_trial&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue', + features: mermaidChartFeatures, + }, + { + title: 'Open Source', + description: 'Code only, no login', + buttonText: 'Start free', + redirectUrl: 'https://mermaid.live/edit', + isButtonMargined: true, + features: openSourceFeatures, + }, + ], + [ + { + title: 'Mermaid Pro', + description: 'Unlock AI and real-time collaboration', + highlighted: true, + redBarText: 'Recommended', + proTrialButtonText: 'Start free trial', + proTrialUrl: + 'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_C&utm_campaign=start_trial&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue', + features: mermaidChartFeatures, + }, + { + title: 'Open Source', + description: 'Code only, no login', + buttonText: 'Start free', + redirectUrl: 'https://mermaid.live/edit', + features: openSourceFeatures, + }, + ], + [ + { + title: 'Mermaid Pro', + description: 'Unlock AI and real-time collaboration', + highlighted: true, + redBarText: 'Recommended', + proTrialButtonText: 'Start free', + proTrialUrl: + 'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_D&utm_campaign=start_free', + features: mermaidChartFeatures, + }, + { + title: 'Open Source', + description: 'Code only, no login', + redirectUrl: 'https://mermaid.live/edit', + buttonText: 'Start free', + features: openSourceFeatures, + }, + ], +]; + +const editorColumns = editorColumnVariants[Math.floor(Math.random() * editorColumnVariants.length)]; + const isVisible = ref(false); const handleMouseDown = (e: MouseEvent) => { @@ -84,44 +164,53 @@ onUnmounted(() => {