diff --git a/README.md b/README.md
index 99e3b29c22..e5b8738afe 100644
--- a/README.md
+++ b/README.md
@@ -59,9 +59,9 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).
[Tutorials](./docs/config/Tutorials.md) has video tutorials.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).
+Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md).
-You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).
+You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.md).
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/intro/getting-started.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 31eb5b1cae..da83494052 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -57,7 +57,7 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd
Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。
Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。
-你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
+你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations-community.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/intro/getting-started.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).
diff --git a/cypress/integration/other/xss.spec.js b/cypress/integration/other/xss.spec.js
index fa4ca4fc80..678040f98a 100644
--- a/cypress/integration/other/xss.spec.js
+++ b/cypress/integration/other/xss.spec.js
@@ -132,4 +132,9 @@ describe('XSS', () => {
cy.wait(1000);
cy.get('#the-malware').should('not.exist');
});
+ it('should sanitize backticks in class names properly', () => {
+ cy.visit('http://localhost:9000/xss24.html');
+ cy.wait(1000);
+ cy.get('#the-malware').should('not.exist');
+ });
});
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index 7c16909522..fea874003b 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -520,6 +520,25 @@ describe('Gantt diagram', () => {
);
});
+ it('should render a gantt diagram with very large intervals, skipping excludes if interval > 5 years', () => {
+ imgSnapshotTest(
+ `gantt
+ title A long Gantt Diagram
+ dateFormat YYYY-MM-DD
+ axisFormat %m-%d
+ tickInterval 1day
+ excludes weekends
+
+ section Section
+ A task : a1, 9999-10-01, 30d
+ Another task : after a1, 20d
+ section Another
+ Task in sec : 2022-10-20, 12d
+ another task : 24d
+ `
+ );
+ });
+
it('should render when compact is true', () => {
imgSnapshotTest(
`
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index f9a9f3756d..6ade6a2e5c 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -58,12 +58,10 @@
diff --git a/docs/ecosystem/integrations.md b/docs/ecosystem/integrations-community.md
similarity index 89%
rename from docs/ecosystem/integrations.md
rename to docs/ecosystem/integrations-community.md
index 5d7ed00eea..b03e5581c7 100644
--- a/docs/ecosystem/integrations.md
+++ b/docs/ecosystem/integrations-community.md
@@ -2,55 +2,43 @@
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/integrations.md](../../packages/mermaid/src/docs/ecosystem/integrations.md).
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/integrations-community.md](../../packages/mermaid/src/docs/ecosystem/integrations-community.md).
-# Integrations
+# Integrations - community
-## Recommendations
+We're excited about the growth of the Mermaid community, and the number of plugins and integrations that have been created with Mermaid.
-### File Extension
+## Community integrations
-Applications that support mermaid files [SHOULD](https://datatracker.ietf.org/doc/html/rfc2119#section-3) use `.mermaid` or `.mmd` file extensions.
+Below are a list of community plugins and integrations created with Mermaid.
-### MIME Type
+### Productivity tools
-The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for mermaid media is `text/vnd.mermaid`.
+✅ = Native support
-[IANA](https://www.iana.org/) recognition pending.
-
----
-
-The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications.
-
-They also serve as proof of concept, for the variety of things that can be built with mermaid.
-
-## Productivity
-
-- [GitHub](https://github.com) (**Native support**)
- - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**)
+- [GitHub](https://github.com) ✅
+ - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) ✅
- [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
- [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
- [GitHub Writer](https://github.com/ckeditor/github-writer)
-- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**Native support**)
-- [Gitea](https://gitea.io) (**Native support**)
-- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
-- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
-- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) (**Native support**)
-- [Deepdwn](https://billiam.itch.io/deepdwn) (**Native support**)
-- [Joplin](https://joplinapp.org) (**Native support**)
-- [Slab](https://slab.com) (**Native support**)
-- [Swimm](https://swimm.io) (**Native support**)
-- [Notion](https://notion.so) (**Native support**)
-- [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**)
-- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) (**Native support**)
+- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
+- [Gitea](https://gitea.io) ✅
+- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
+- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
+- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
+- [Deepdwn](https://billiam.itch.io/deepdwn) ✅
+- [Joplin](https://joplinapp.org) ✅
+- [Slab](https://slab.com) ✅
+- [Swimm](https://swimm.io) ✅
+- [Notion](https://notion.so) ✅
+- [Observable](https://observablehq.com/@observablehq/mermaid) ✅
+- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
- [GitBook](https://gitbook.com)
- [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
- [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
- [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
-- [LiveBook](https://livebook.dev) (**Native support**)
+- [LiveBook](https://livebook.dev) ✅
- [Atlassian Products](https://www.atlassian.com)
- - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
- - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
- [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
- [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
- [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
@@ -63,11 +51,15 @@ They also serve as proof of concept, for the variety of things that can be built
- [mermerd](https://github.com/KarnerTh/mermerd)
- Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
-## CRM/ERP/Similar
+### CRM/ERP
+
+Customer Relationship Management/Enterprise Resource Planning
- [coreBOS](https://blog.corebos.org/blog/december2019)
-## Blogs
+### Blogging
+
+Blogging frameworks and platforms
- [WordPress](https://wordpress.org)
- [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
@@ -79,7 +71,9 @@ They also serve as proof of concept, for the variety of things that can be built
- [Nextra](https://nextra.site/)
- [Mermaid](https://nextra.site/docs/guide/mermaid)
-## CMS
+### CMS/ECM
+
+Content Management Systems/Enterprise Content Management
- [VitePress](https://vitepress.vuejs.org/)
- [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
@@ -89,7 +83,9 @@ They also serve as proof of concept, for the variety of things that can be built
- [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
- [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
-## Communication
+### Communication
+
+Communication tools and platforms
- [Discourse](https://discourse.org)
- [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid)
@@ -100,7 +96,7 @@ They also serve as proof of concept, for the variety of things that can be built
- [NodeBB](https://nodebb.org)
- [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
-## Wikis
+### Wikis
- [MediaWiki](https://www.mediawiki.org)
- [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
@@ -116,7 +112,7 @@ They also serve as proof of concept, for the variety of things that can be built
- [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5)
- [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid)
-## Editor Plugins
+### Editor Plugins
- [VS Code](https://code.visualstudio.com/)
- [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
@@ -167,8 +163,9 @@ They also serve as proof of concept, for the variety of things that can be built
- [Standard Notes](https://standardnotes.com/)
- [sn-mermaid](https://github.com/nienow/sn-mermaid)
-## Document Generation
+### Document Generation
+- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts)
- [Sphinx](https://www.sphinx-doc.org/en/master/)
- [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
- [remark](https://remark.js.org/)
@@ -184,15 +181,15 @@ They also serve as proof of concept, for the variety of things that can be built
- [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)
- [Type Doc](https://typedoc.org/)
- [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
-- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (Native support in theme)
+- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (native support in theme)
- [Codedoc](https://codedoc.cc/)
- [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
- [mdbook](https://rust-lang.github.io/mdBook/index.html)
- [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
- [Quarto](https://quarto.org/)
-- [Typora](https://typora.io/) ([Native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid))
+- [Typora](https://typora.io/) ([native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid))
-## Browser Extensions
+### Browser Extensions
| Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository |
| ------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
@@ -207,7 +204,7 @@ They also serve as proof of concept, for the variety of things that can be built
| Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - |
| Mermaid Previewer | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - |
-## Other
+### Other
- [Jekyll](https://jekyllrb.com/)
- [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
diff --git a/docs/ecosystem/integrations-create.md b/docs/ecosystem/integrations-create.md
new file mode 100644
index 0000000000..3dba1dafba
--- /dev/null
+++ b/docs/ecosystem/integrations-create.md
@@ -0,0 +1,31 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/integrations-create.md](../../packages/mermaid/src/docs/ecosystem/integrations-create.md).
+
+# Integrations - create
+
+## Recommendations
+
+Below are recommendations for creating plugins and integrations with Mermaid.
+
+### File Extension
+
+Applications that support Mermaid files [SHOULD](https://datatracker.ietf.org/doc/html/rfc2119#section-3) use `.mermaid` or `.mmd` file extensions.
+
+### MIME Type
+
+The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for Mermaid media is `text/vnd.mermaid`.
+
+Currently pending [IANA](https://www.iana.org/) recognition.
+
+## Showcase
+
+### Mermaid Slack workspace
+
+We would love to see what you create with Mermaid. Please share your creations with us in our [Slack](https://join.slack.com/t/mermaid-talk/shared_invite/zt-22p2r8p9y-qiyP1H38GjFQ6S6jbBkOxQ) workspace [#community-showcase](https://mermaid-talk.slack.com/archives/C05NK37LT40) channel.
+
+### Add to Mermaid Ecosystem
+
+If you have a plugin or integration that you'd like to add to our [Community integrations](/ecosystem/integrations-community) list, please [open a pull request](https://github.com/mermaid-js/mermaid).
diff --git a/docs/ecosystem/mermaid-chart.md b/docs/ecosystem/mermaid-chart.md
new file mode 100644
index 0000000000..5a0fdc18d9
--- /dev/null
+++ b/docs/ecosystem/mermaid-chart.md
@@ -0,0 +1,43 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/mermaid-chart.md](../../packages/mermaid/src/docs/ecosystem/mermaid-chart.md).
+
+# Mermaid Chart
+
+## About
+
+[Mermaid Chart](https://www.mermaidchart.com) was born out of the Mermaid open source project and was founded by Knut Sveidqvist together with Open Core Ventures. The lead developers from Mermaid have joined the company and there is a strong connection between the project we all love and Mermaid Chart. Mermaid Chart brings resources to the open source development of Mermaid and makes it possible to work with Mermaid professionally.
+
+## Features
+
+- **Editor** - A web based editor for creating and editing Mermaid diagrams.
+
+- **Presentation** - A presentation mode for viewing Mermaid diagrams in a slideshow format.
+
+- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro plan).
+
+- **Plugins** - A plugin system for extending the functionality of Mermaid. Currently includes [VS Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart) and [ChatGPT](https://www.mermaidchart.com/plugins/chatgpt).
+
+- **AI** - An AI chatbot that can generate Mermaid diagrams from text (Pro plan).
+
+- **More** - To learn more, visit our [Product](https://www.mermaidchart.com/product) page.
+
+## Plans
+
+- **Free** - A free plan that includes five diagrams.
+
+- **Pro** - A paid plan that includes unlimited diagrams, access to the collaboration feature, and more.
+
+- **Enterprise** - A paid plan for enterprise use that includes all Pro features, and more.
+
+## Access
+
+Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
+
+Mermaid Chart is currently offering a 30-day free trial of our newly-launched Pro tier. To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
+
+## Mermaid JS contributions
+
+First time contributors are eligible for a free Pro tier account for 1 year.
diff --git a/docs/ecosystem/showcases.md b/docs/ecosystem/showcases.md
deleted file mode 100644
index 9f18103b9b..0000000000
--- a/docs/ecosystem/showcases.md
+++ /dev/null
@@ -1,9 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/showcases.md](../../packages/mermaid/src/docs/ecosystem/showcases.md).
-
-# Showcases
-
-- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts).
diff --git a/docs/intro/getting-started.md b/docs/intro/getting-started.md
index 246e7364c6..95d7b594e0 100644
--- a/docs/intro/getting-started.md
+++ b/docs/intro/getting-started.md
@@ -17,7 +17,7 @@ This section talks about the different ways to deploy Mermaid. Learning the [Syn
## Four ways of using mermaid:
1. Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live).
-2. Using [mermaid plugins](../ecosystem/integrations.md) with programs you are familiar with.
+2. Using [mermaid plugins](../ecosystem/integrations-community.md) with programs you are familiar with.
3. Calling the Mermaid JavaScript API.
4. Deploying Mermaid as a dependency.
@@ -85,7 +85,7 @@ and to View,
Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).
[Tutorials](../config/Tutorials.md) has video tutorials.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../ecosystem/integrations.md).
+
+Use Mermaid with your favorite applications, check out the list of [Community Integrations](../ecosystem/integrations-community.md).
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../intro/getting-started.md) and [Usage](../config/usage.md).
-🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations.md)
+🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations-community.md)
> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
diff --git a/docs/news/announcements.md b/docs/news/announcements.md
index 9ec02d8f40..19568afa46 100644
--- a/docs/news/announcements.md
+++ b/docs/news/announcements.md
@@ -6,8 +6,8 @@
# Announcements
-## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
+## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
-23 August 2023 · 15 mins
+22 September 2023 · 7 mins
-Read about the pitfalls of special cases in programming, illustrating how they can lead to complexity, diminish readability, and create maintenance challenges.
+A git graph is one of the more useful forms of diagrams for developers and DevOps professionals.
diff --git a/docs/news/blog.md b/docs/news/blog.md
index 966956649a..cc34b9f5c5 100644
--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,6 +6,18 @@
# Blog
+## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
+
+22 September 2023 · 7 mins
+
+A git graph is one of the more useful forms of diagrams for developers and DevOps professionals.
+
+## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://www.mermaidchart.com/blog/posts/present-flow-data-using-sankey-diagrams/)
+
+8 September 2023 · 4 mins
+
+Sankey diagrams are a powerful tool for visualizing flow data.
+
## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
23 August 2023 · 15 mins
diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md
index 23b05af7f4..acd7c2db5b 100644
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -1146,7 +1146,7 @@ The layout of the diagram is done with the renderer. The default renderer is dag
Starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams.
-The _elk_ renderer is an experimenal feature.
+The _elk_ renderer is an experimental feature.
You can change the renderer to elk by adding this directive:
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 23138003f6..5877cae7ef 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
{
"name": "mermaid",
- "version": "10.5.0-rc.1",
+ "version": "10.5.0",
"description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module",
"module": "./dist/mermaid.core.mjs",
diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts
index b2485267a5..45ca1ed16c 100644
--- a/packages/mermaid/src/diagrams/class/classDb.ts
+++ b/packages/mermaid/src/diagrams/class/classDb.ts
@@ -36,7 +36,8 @@ let functions: any[] = [];
const sanitizeText = (txt: string) => common.sanitizeText(txt, configApi.getConfig());
-const splitClassNameAndType = function (id: string) {
+const splitClassNameAndType = function (_id: string) {
+ const id = common.sanitizeText(_id, configApi.getConfig());
let genericType = '';
let className = id;
@@ -49,7 +50,8 @@ const splitClassNameAndType = function (id: string) {
return { className: className, type: genericType };
};
-export const setClassLabel = function (id: string, label: string) {
+export const setClassLabel = function (_id: string, label: string) {
+ const id = common.sanitizeText(_id, configApi.getConfig());
if (label) {
label = sanitizeText(label);
}
@@ -64,22 +66,25 @@ export const setClassLabel = function (id: string, label: string) {
* @param id - Id of the class to add
* @public
*/
-export const addClass = function (id: string) {
+export const addClass = function (_id: string) {
+ const id = common.sanitizeText(_id, configApi.getConfig());
const { className, type } = splitClassNameAndType(id);
// Only add class if not exists
if (Object.hasOwn(classes, className)) {
return;
}
-
- classes[className] = {
- id: className,
+ // alert('Adding class: ' + className);
+ const name = common.sanitizeText(className, configApi.getConfig());
+ // alert('Adding class after: ' + name);
+ classes[name] = {
+ id: name,
type: type,
- label: className,
+ label: name,
cssClasses: [],
methods: [],
members: [],
annotations: [],
- domId: MERMAID_DOM_ID_PREFIX + className + '-' + classCounter,
+ domId: MERMAID_DOM_ID_PREFIX + name + '-' + classCounter,
} as ClassNode;
classCounter++;
@@ -91,7 +96,8 @@ export const addClass = function (id: string) {
* @param id - class ID to lookup
* @public
*/
-export const lookUpDomId = function (id: string): string {
+export const lookUpDomId = function (_id: string): string {
+ const id = common.sanitizeText(_id, configApi.getConfig());
if (id in classes) {
return classes[id].domId;
}
@@ -296,7 +302,8 @@ export const setClickEvent = function (ids: string, functionName: string, functi
setCssClass(ids, 'clickable');
};
-const setClickFunc = function (domId: string, functionName: string, functionArgs: string) {
+const setClickFunc = function (_domId: string, functionName: string, functionArgs: string) {
+ const domId = common.sanitizeText(_domId, configApi.getConfig());
const config = configApi.getConfig();
if (config.securityLevel !== 'loose') {
return;
diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 935ecc9285..55b5607a28 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -497,20 +497,37 @@ export const draw = function (text, id, version, diagObj) {
* @param w
* @param h
* @param tasks
- * @param excludes
- * @param includes
+ * @param {unknown[]} excludes
+ * @param {unknown[]} includes
*/
function drawExcludeDays(theGap, theTopPad, theSidePad, w, h, tasks, excludes, includes) {
- const minTime = tasks.reduce(
- (min, { startTime }) => (min ? Math.min(min, startTime) : startTime),
- 0
- );
- const maxTime = tasks.reduce((max, { endTime }) => (max ? Math.max(max, endTime) : endTime), 0);
- const dateFormat = diagObj.db.getDateFormat();
+ if (excludes.length === 0 && includes.length === 0) {
+ return;
+ }
+
+ let minTime;
+ let maxTime;
+ for (const { startTime, endTime } of tasks) {
+ if (minTime === undefined || startTime < minTime) {
+ minTime = startTime;
+ }
+ if (maxTime === undefined || endTime > maxTime) {
+ maxTime = endTime;
+ }
+ }
+
if (!minTime || !maxTime) {
return;
}
+ if (dayjs(maxTime).diff(dayjs(minTime), 'year') > 5) {
+ log.warn(
+ 'The difference between the min and max time is more than 5 years. This will cause performance issues. Skipping drawing exclude days.'
+ );
+ return;
+ }
+
+ const dateFormat = diagObj.db.getDateFormat();
const excludeRanges = [];
let range = null;
let d = dayjs(minTime);
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index a596a3a029..a41c3877fe 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -1421,23 +1421,30 @@ const buildMessageModel = function (msg, actors, diagObj) {
return isArrowToRight ? -value : value;
};
- /**
- * This is an edge case for the first activation.
- * Proper fix would require significant changes.
- * So, we set an activate flag in the message, and cross check that with isToActivation
- * In cases where the message is to an activation that was properly detected, we don't want to move the arrow head
- * The activation will not be detected on the first message, so we need to move the arrow head
- */
- if (msg.activate && !isArrowToActivation) {
- stopx += adjustValue(conf.activationWidth / 2 - 1);
- }
+ if (msg.from === msg.to) {
+ // This is a self reference, so we need to make sure the arrow is drawn correctly
+ // There are many checks in the downstream rendering that checks for equality.
+ // The lines on loops will be off by few pixels, but that's fine for now.
+ stopx = startx;
+ } else {
+ /**
+ * This is an edge case for the first activation.
+ * Proper fix would require significant changes.
+ * So, we set an activate flag in the message, and cross check that with isToActivation
+ * In cases where the message is to an activation that was properly detected, we don't want to move the arrow head
+ * The activation will not be detected on the first message, so we need to move the arrow head
+ */
+ if (msg.activate && !isArrowToActivation) {
+ stopx += adjustValue(conf.activationWidth / 2 - 1);
+ }
- /**
- * Shorten the length of arrow at the end and move the marker forward (using refX) to have a clean arrowhead
- * This is not required for open arrows that don't have arrowheads
- */
- if (![diagObj.db.LINETYPE.SOLID_OPEN, diagObj.db.LINETYPE.DOTTED_OPEN].includes(msg.type)) {
- stopx += adjustValue(3);
+ /**
+ * Shorten the length of arrow at the end and move the marker forward (using refX) to have a clean arrowhead
+ * This is not required for open arrows that don't have arrowheads
+ */
+ if (![diagObj.db.LINETYPE.SOLID_OPEN, diagObj.db.LINETYPE.DOTTED_OPEN].includes(msg.type)) {
+ stopx += adjustValue(3);
+ }
}
const allBounds = [fromLeft, fromRight, toLeft, toRight];
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index e30f91e135..040a669133 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -71,7 +71,11 @@ function nav() {
link: '/config/Tutorials',
activeMatch: '/config/',
},
- { text: 'Integrations', link: '/ecosystem/integrations', activeMatch: '/ecosystem/' },
+ {
+ text: 'Integrations',
+ link: '/ecosystem/integrations-community',
+ activeMatch: '/ecosystem/',
+ },
{
text: 'Contributing',
link: '/community/development.html',
@@ -181,8 +185,9 @@ function sidebarEcosystem() {
text: '📚 Ecosystem',
collapsed: false,
items: [
- { text: 'Showcases', link: '/ecosystem/showcases' },
- { text: 'Use-Cases and Integrations', link: '/ecosystem/integrations' },
+ { text: 'Mermaid Chart', link: '/ecosystem/mermaid-chart' },
+ { text: 'Integrations - Community', link: '/ecosystem/integrations-community' },
+ { text: 'Integrations - Create', link: '/ecosystem/integrations-create' },
],
},
];
diff --git a/packages/mermaid/src/docs/.vitepress/theme/redirect.ts b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts
index ca8e5bda18..e24d2beb9d 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/redirect.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts
@@ -86,6 +86,8 @@ const urlRedirectMap: Record = {
// Old URL: New URL
'/misc/faq.html': 'configure/faq.html',
'/syntax/c4c.html': 'syntax/c4.html',
+ '/ecosystem/integrations.html': 'ecosystem/integrations-community.html',
+ '/ecosystem/showcases.html': 'ecosystem/integrations-create',
'/config/n00b-advanced.html': 'config/advanced',
'/intro/n00b-gettingStarted.html': 'intro/getting-started',
'/intro/n00b-syntaxReference.html': 'intro/syntax-reference',
diff --git a/packages/mermaid/src/docs/ecosystem/integrations.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md
similarity index 90%
rename from packages/mermaid/src/docs/ecosystem/integrations.md
rename to packages/mermaid/src/docs/ecosystem/integrations-community.md
index c03d204def..6fce7c5e71 100644
--- a/packages/mermaid/src/docs/ecosystem/integrations.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -1,47 +1,41 @@
-# Integrations
-
-## Recommendations
-
-### File Extension
-
-Applications that support mermaid files [SHOULD](https://datatracker.ietf.org/doc/html/rfc2119#section-3) use `.mermaid` or `.mmd` file extensions.
+---
+outline: 'deep' # shows all h3 headings in outline in Vitepress
+---
-### MIME Type
+# Integrations - community
-The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for mermaid media is `text/vnd.mermaid`.
+We're excited about the growth of the Mermaid community, and the number of plugins and integrations that have been created with Mermaid.
-[IANA](https://www.iana.org/) recognition pending.
+## Community integrations
----
+Below are a list of community plugins and integrations created with Mermaid.
-The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications.
+### Productivity tools
-They also serve as proof of concept, for the variety of things that can be built with mermaid.
+✅ = Native support
-## Productivity
-
-- [GitHub](https://github.com) (**Native support**)
- - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**)
+- [GitHub](https://github.com) ✅
+ - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) ✅
- [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
- [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
- [GitHub Writer](https://github.com/ckeditor/github-writer)
-- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**Native support**)
-- [Gitea](https://gitea.io) (**Native support**)
-- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
-- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
-- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) (**Native support**)
-- [Deepdwn](https://billiam.itch.io/deepdwn) (**Native support**)
-- [Joplin](https://joplinapp.org) (**Native support**)
-- [Slab](https://slab.com) (**Native support**)
-- [Swimm](https://swimm.io) (**Native support**)
-- [Notion](https://notion.so) (**Native support**)
-- [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**)
-- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) (**Native support**)
+- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
+- [Gitea](https://gitea.io) ✅
+- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
+- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
+- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
+- [Deepdwn](https://billiam.itch.io/deepdwn) ✅
+- [Joplin](https://joplinapp.org) ✅
+- [Slab](https://slab.com) ✅
+- [Swimm](https://swimm.io) ✅
+- [Notion](https://notion.so) ✅
+- [Observable](https://observablehq.com/@observablehq/mermaid) ✅
+- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
- [GitBook](https://gitbook.com)
- [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
- [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
- [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
-- [LiveBook](https://livebook.dev) (**Native support**)
+- [LiveBook](https://livebook.dev) ✅
- [Atlassian Products](https://www.atlassian.com)
- [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
- [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
@@ -53,15 +47,19 @@ They also serve as proof of concept, for the variety of things that can be built
- [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
- [redmine-mermaid](https://github.com/styz/redmine_mermaid)
- [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
-- [JetBrains IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
+- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
- [mermerd](https://github.com/KarnerTh/mermerd)
- Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
-## CRM/ERP/Similar
+### CRM/ERP
+
+Customer Relationship Management/Enterprise Resource Planning
- [coreBOS](https://blog.corebos.org/blog/december2019)
-## Blogs
+### Blogging
+
+Blogging frameworks and platforms
- [WordPress](https://wordpress.org)
- [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
@@ -73,7 +71,9 @@ They also serve as proof of concept, for the variety of things that can be built
- [Nextra](https://nextra.site/)
- [Mermaid](https://nextra.site/docs/guide/mermaid)
-## CMS
+### CMS/ECM
+
+Content Management Systems/Enterprise Content Management
- [VitePress](https://vitepress.vuejs.org/)
- [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
@@ -83,7 +83,9 @@ They also serve as proof of concept, for the variety of things that can be built
- [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
- [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
-## Communication
+### Communication
+
+Communication tools and platforms
- [Discourse](https://discourse.org)
- [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid)
@@ -94,7 +96,7 @@ They also serve as proof of concept, for the variety of things that can be built
- [NodeBB](https://nodebb.org)
- [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
-## Wikis
+### Wikis
- [MediaWiki](https://www.mediawiki.org)
- [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
@@ -110,7 +112,7 @@ They also serve as proof of concept, for the variety of things that can be built
- [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5)
- [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid)
-## Editor Plugins
+### Editor Plugins
- [VS Code](https://code.visualstudio.com/)
- [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
@@ -161,8 +163,9 @@ They also serve as proof of concept, for the variety of things that can be built
- [Standard Notes](https://standardnotes.com/)
- [sn-mermaid](https://github.com/nienow/sn-mermaid)
-## Document Generation
+### Document Generation
+- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts)
- [Sphinx](https://www.sphinx-doc.org/en/master/)
- [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
- [remark](https://remark.js.org/)
@@ -178,15 +181,15 @@ They also serve as proof of concept, for the variety of things that can be built
- [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)
- [Type Doc](https://typedoc.org/)
- [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
-- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (Native support in theme)
+- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (native support in theme)
- [Codedoc](https://codedoc.cc/)
- [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
- [mdbook](https://rust-lang.github.io/mdBook/index.html)
- [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
- [Quarto](https://quarto.org/)
-- [Typora](https://typora.io/) ([Native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid))
+- [Typora](https://typora.io/) ([native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid))
-## Browser Extensions
+### Browser Extensions
| Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository |
| ------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
@@ -201,7 +204,7 @@ They also serve as proof of concept, for the variety of things that can be built
| Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - |
| Mermaid Previewer | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | - | - | - | - |
-## Other
+### Other
- [Jekyll](https://jekyllrb.com/)
- [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
diff --git a/packages/mermaid/src/docs/ecosystem/integrations-create.md b/packages/mermaid/src/docs/ecosystem/integrations-create.md
new file mode 100644
index 0000000000..421240729c
--- /dev/null
+++ b/packages/mermaid/src/docs/ecosystem/integrations-create.md
@@ -0,0 +1,29 @@
+---
+outline: 'deep' # shows all h3 headings in outline in Vitepress
+---
+
+# Integrations - create
+
+## Recommendations
+
+Below are recommendations for creating plugins and integrations with Mermaid.
+
+### File Extension
+
+Applications that support Mermaid files [SHOULD](https://datatracker.ietf.org/doc/html/rfc2119#section-3) use `.mermaid` or `.mmd` file extensions.
+
+### MIME Type
+
+The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for Mermaid media is `text/vnd.mermaid`.
+
+Currently pending [IANA](https://www.iana.org/) recognition.
+
+## Showcase
+
+### Mermaid Slack workspace
+
+We would love to see what you create with Mermaid. Please share your creations with us in our [Slack](https://join.slack.com/t/mermaid-talk/shared_invite/zt-22p2r8p9y-qiyP1H38GjFQ6S6jbBkOxQ) workspace [#community-showcase](https://mermaid-talk.slack.com/archives/C05NK37LT40) channel.
+
+### Add to Mermaid Ecosystem
+
+If you have a plugin or integration that you'd like to add to our [Community integrations](/ecosystem/integrations-community) list, please [open a pull request](https://github.com/mermaid-js/mermaid).
diff --git a/packages/mermaid/src/docs/ecosystem/mermaid-chart.md b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md
new file mode 100644
index 0000000000..7312299b41
--- /dev/null
+++ b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md
@@ -0,0 +1,41 @@
+---
+outline: 'deep' # shows all h3 headings in outline in Vitepress
+---
+
+# Mermaid Chart
+
+## About
+
+[Mermaid Chart](https://www.mermaidchart.com) was born out of the Mermaid open source project and was founded by Knut Sveidqvist together with Open Core Ventures. The lead developers from Mermaid have joined the company and there is a strong connection between the project we all love and Mermaid Chart. Mermaid Chart brings resources to the open source development of Mermaid and makes it possible to work with Mermaid professionally.
+
+## Features
+
+- **Editor** - A web based editor for creating and editing Mermaid diagrams.
+
+- **Presentation** - A presentation mode for viewing Mermaid diagrams in a slideshow format.
+
+- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro plan).
+
+- **Plugins** - A plugin system for extending the functionality of Mermaid. Currently includes [VS Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart) and [ChatGPT](https://www.mermaidchart.com/plugins/chatgpt).
+
+- **AI** - An AI chatbot that can generate Mermaid diagrams from text (Pro plan).
+
+- **More** - To learn more, visit our [Product](https://www.mermaidchart.com/product) page.
+
+## Plans
+
+- **Free** - A free plan that includes five diagrams.
+
+- **Pro** - A paid plan that includes unlimited diagrams, access to the collaboration feature, and more.
+
+- **Enterprise** - A paid plan for enterprise use that includes all Pro features, and more.
+
+## Access
+
+Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
+
+Mermaid Chart is currently offering a 30-day free trial of our newly-launched Pro tier. To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
+
+## Mermaid JS contributions
+
+First time contributors are eligible for a free Pro tier account for 1 year.
diff --git a/packages/mermaid/src/docs/ecosystem/showcases.md b/packages/mermaid/src/docs/ecosystem/showcases.md
deleted file mode 100644
index 0c756759f2..0000000000
--- a/packages/mermaid/src/docs/ecosystem/showcases.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Showcases
-
-- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts).
diff --git a/packages/mermaid/src/docs/index.md b/packages/mermaid/src/docs/index.md
index dd1025d56a..8e92edd114 100644
--- a/packages/mermaid/src/docs/index.md
+++ b/packages/mermaid/src/docs/index.md
@@ -26,7 +26,7 @@ features:
link: https://mermaid.live/
- title: 🧩 Integrations available!
details: Use Mermaid with your favorite applications, check out the integrations list.
- link: ../../ecosystem/integrations.md
+ link: ../../ecosystem/integrations-community.md
- title: 🏆 Award winning!
details: 2019 JavaScript Open Source Award winner for "The Most Exciting Use of Technology".
link: https://osawards.com/javascript/2019
diff --git a/packages/mermaid/src/docs/intro/getting-started.md b/packages/mermaid/src/docs/intro/getting-started.md
index d61737f924..7603906c1b 100644
--- a/packages/mermaid/src/docs/intro/getting-started.md
+++ b/packages/mermaid/src/docs/intro/getting-started.md
@@ -11,7 +11,7 @@ This section talks about the different ways to deploy Mermaid. Learning the [Syn
## Four ways of using mermaid:
1. Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live).
-2. Using [mermaid plugins](../ecosystem/integrations.md) with programs you are familiar with.
+2. Using [mermaid plugins](../ecosystem/integrations-community.md) with programs you are familiar with.
3. Calling the Mermaid JavaScript API.
4. Deploying Mermaid as a dependency.
@@ -68,7 +68,7 @@ and to View, https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/
## 2. Using Mermaid Plugins:
-You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](../ecosystem/integrations.md).
+You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](../ecosystem/integrations-community.md).
**This is covered in greater detail in the [Usage section](../config/usage.md)**
diff --git a/packages/mermaid/src/docs/intro/index.md b/packages/mermaid/src/docs/intro/index.md
index 7718949b7f..bd45ffaf1a 100644
--- a/packages/mermaid/src/docs/intro/index.md
+++ b/packages/mermaid/src/docs/intro/index.md
@@ -37,11 +37,12 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).
[Tutorials](../config/Tutorials.md) has video tutorials.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../ecosystem/integrations.md).
+
+Use Mermaid with your favorite applications, check out the list of [Community Integrations](../ecosystem/integrations-community.md).
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../intro/getting-started.md) and [Usage](../config/usage.md).
-🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations.md)
+🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations-community.md)
> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md
index 951c42cbde..8a8d000a5e 100644
--- a/packages/mermaid/src/docs/news/announcements.md
+++ b/packages/mermaid/src/docs/news/announcements.md
@@ -1,7 +1,7 @@
# Announcements
-## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
+## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
-23 August 2023 · 15 mins
+22 September 2023 · 7 mins
-Read about the pitfalls of special cases in programming, illustrating how they can lead to complexity, diminish readability, and create maintenance challenges.
+A git graph is one of the more useful forms of diagrams for developers and DevOps professionals.
diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md
index b18e11650b..fa581349f1 100644
--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,5 +1,17 @@
# Blog
+## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
+
+22 September 2023 · 7 mins
+
+A git graph is one of the more useful forms of diagrams for developers and DevOps professionals.
+
+## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://www.mermaidchart.com/blog/posts/present-flow-data-using-sankey-diagrams/)
+
+8 September 2023 · 4 mins
+
+Sankey diagrams are a powerful tool for visualizing flow data.
+
## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
23 August 2023 · 15 mins
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 7946d57251..d06e75c22b 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -783,7 +783,7 @@ The layout of the diagram is done with the renderer. The default renderer is dag
Starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams.
-The _elk_ renderer is an experimenal feature.
+The _elk_ renderer is an experimental feature.
You can change the renderer to elk by adding this directive:
```
` <|-- `Class2