diff --git a/README.md b/README.md
index 99e3b29c2..e5b8738af 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 31eb5b1ca..da8349405 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 fa4ca4fc8..678040f98 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 7c1690952..fea874003 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 f9a9f3756..6ade6a2e5 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 88%
rename from docs/ecosystem/integrations.md
rename to docs/ecosystem/integrations-community.md
index 6b65237ee..81af789ae 100644
--- a/docs/ecosystem/integrations.md
+++ b/docs/ecosystem/integrations-community.md
@@ -2,56 +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)
- [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid)
@@ -59,15 +46,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)
-- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
+- [JetBrains IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
- [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 +70,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 +82,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 +95,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 +111,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 +162,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 +180,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 +203,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 000000000..3dba1dafb
--- /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 000000000..5a0fdc18d
--- /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 9f18103b9..000000000
--- 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/examples.md b/docs/intro/examples.md
new file mode 100644
index 000000000..d9bb187e1
--- /dev/null
+++ b/docs/intro/examples.md
@@ -0,0 +1,227 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/examples.md](../../packages/mermaid/src/docs/intro/examples.md).
+
+## Diagram Types
+
+### [Flowchart](../syntax/flowchart.md?id=flowcharts-basic-syntax)
+
+```mermaid-example
+graph TD;
+ A-->B;
+ A-->C;
+ B-->D;
+ C-->D;
+```
+
+```mermaid
+graph TD;
+ A-->B;
+ A-->C;
+ B-->D;
+ C-->D;
+```
+
+### [Sequence diagram](../syntax/sequenceDiagram.md)
+
+```mermaid-example
+sequenceDiagram
+ participant Alice
+ participant Bob
+ Alice->>John: Hello John, how are you?
+ loop Healthcheck
+ John->>John: Fight against hypochondria
+ end
+ Note right of John: Rational thoughts prevail!
+ John-->>Alice: Great!
+ John->>Bob: How about you?
+ Bob-->>John: Jolly good!
+```
+
+```mermaid
+sequenceDiagram
+ participant Alice
+ participant Bob
+ Alice->>John: Hello John, how are you?
+ loop Healthcheck
+ John->>John: Fight against hypochondria
+ end
+ Note right of John: Rational thoughts prevail!
+ John-->>Alice: Great!
+ John->>Bob: How about you?
+ Bob-->>John: Jolly good!
+```
+
+### [Gantt diagram](../syntax/gantt.md)
+
+```mermaid-example
+gantt
+dateFormat YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+section A section
+Completed task :done, des1, 2014-01-06,2014-01-08
+Active task :active, des2, 2014-01-09, 3d
+Future task : des3, after des2, 5d
+Future task2 : des4, after des3, 5d
+```
+
+```mermaid
+gantt
+dateFormat YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+section A section
+Completed task :done, des1, 2014-01-06,2014-01-08
+Active task :active, des2, 2014-01-09, 3d
+Future task : des3, after des2, 5d
+Future task2 : des4, after des3, 5d
+```
+
+### [Class diagram](../syntax/classDiagram.md)
+
+```mermaid-example
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+Class03 *-- Class04
+Class05 o-- Class06
+Class07 .. Class08
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+Class08 <--> C2: Cool label
+```
+
+```mermaid
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+Class03 *-- Class04
+Class05 o-- Class06
+Class07 .. Class08
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+Class08 <--> C2: Cool label
+```
+
+### [Git graph](../syntax/gitgraph.md)
+
+```mermaid-example
+ gitGraph
+ commit
+ commit
+ branch develop
+ commit
+ commit
+ commit
+ checkout main
+ commit
+ commit
+```
+
+```mermaid
+ gitGraph
+ commit
+ commit
+ branch develop
+ commit
+ commit
+ commit
+ checkout main
+ commit
+ commit
+```
+
+### [Entity Relationship Diagram - :exclamation: experimental](../syntax/entityRelationshipDiagram.md)
+
+```mermaid-example
+erDiagram
+ CUSTOMER ||--o{ ORDER : places
+ ORDER ||--|{ LINE-ITEM : contains
+ CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+
+```
+
+```mermaid
+erDiagram
+ CUSTOMER ||--o{ ORDER : places
+ ORDER ||--|{ LINE-ITEM : contains
+ CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+
+```
+
+### [User Journey Diagram](../syntax/userJourney.md)
+
+```mermaid-example
+journey
+ title My working day
+ section Go to work
+ Make tea: 5: Me
+ Go upstairs: 3: Me
+ Do work: 1: Me, Cat
+ section Go home
+ Go downstairs: 5: Me
+ Sit down: 5: Me
+```
+
+```mermaid
+journey
+ title My working day
+ section Go to work
+ Make tea: 5: Me
+ Go upstairs: 3: Me
+ Do work: 1: Me, Cat
+ section Go home
+ Go downstairs: 5: Me
+ Sit down: 5: Me
+```
+
+### [Quadrant Chart](../syntax/quadrantChart.md)
+
+```mermaid-example
+quadrantChart
+ title Reach and engagement of campaigns
+ x-axis Low Reach --> High Reach
+ y-axis Low Engagement --> High Engagement
+ quadrant-1 We should expand
+ quadrant-2 Need to promote
+ quadrant-3 Re-evaluate
+ quadrant-4 May be improved
+ Campaign A: [0.3, 0.6]
+ Campaign B: [0.45, 0.23]
+ Campaign C: [0.57, 0.69]
+ Campaign D: [0.78, 0.34]
+ Campaign E: [0.40, 0.34]
+ Campaign F: [0.35, 0.78]
+```
+
+```mermaid
+quadrantChart
+ title Reach and engagement of campaigns
+ x-axis Low Reach --> High Reach
+ y-axis Low Engagement --> High Engagement
+ quadrant-1 We should expand
+ quadrant-2 Need to promote
+ quadrant-3 Re-evaluate
+ quadrant-4 May be improved
+ Campaign A: [0.3, 0.6]
+ Campaign B: [0.45, 0.23]
+ Campaign C: [0.57, 0.69]
+ Campaign D: [0.78, 0.34]
+ Campaign E: [0.40, 0.34]
+ Campaign F: [0.35, 0.78]
+```
diff --git a/docs/intro/getting-started.md b/docs/intro/getting-started.md
index 246e7364c..95d7b594e 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 9ec02d8f4..19568afa4 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 966956649..cc34b9f5c 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/packages/mermaid/package.json b/packages/mermaid/package.json
index 23138003f..5877cae7e 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 b2485267a..45ca1ed16 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 935ecc928..55b5607a2 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 a596a3a02..a41c3877f 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 ede064fa4..a950c7f01 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',
@@ -180,8 +184,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 ca8e5bda1..e24d2beb9 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 ef9abfc7a..6fce7c5e7 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.
-
-### MIME Type
-
-The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for mermaid media is `text/vnd.mermaid`.
-
-[IANA](https://www.iana.org/) recognition pending.
-
+---
+outline: 'deep' # shows all h3 headings in outline in Vitepress
---
-The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications.
+# Integrations - community
-They also serve as proof of concept, for the variety of things that can be built with mermaid.
+We're excited about the growth of the Mermaid community, and the number of plugins and integrations that have been created with Mermaid.
-## Productivity
+## Community integrations
-- [GitHub](https://github.com) (**Native support**)
- - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**)
+Below are a list of community plugins and integrations created with Mermaid.
+
+### Productivity tools
+
+✅ = 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/)
@@ -57,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)
@@ -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 000000000..421240729
--- /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 000000000..7312299b4
--- /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 0c756759f..000000000
--- 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 dd1025d56..8e92edd11 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 d61737f92..7603906c1 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 7718949b7..bd45ffaf1 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 951c42cbd..8a8d000a5 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 b18e11650..fa581349f 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/pnpm-lock.yaml b/pnpm-lock.yaml
index 8dc223204..4f44511fb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,5 @@
lockfileVersion: '6.0'
-settings:
- autoInstallPeers: true
- excludeLinksFromLockfile: false
-
importers:
.:
@@ -12566,10 +12562,6 @@ packages:
engines: {node: '>= 6'}
dev: false
- /object-inspect@1.12.2:
- resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==}
- dev: true
-
/object-inspect@1.12.3:
resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
dev: true
@@ -14067,7 +14059,7 @@ packages:
dependencies:
call-bind: 1.0.2
get-intrinsic: 1.2.0
- object-inspect: 1.12.2
+ object-inspect: 1.12.3
dev: true
/siginfo@2.0.0:
@@ -16564,3 +16556,7 @@ packages:
/zwitch@2.0.2:
resolution: {integrity: sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==}
dev: true
+
+settings:
+ autoInstallPeers: true
+ excludeLinksFromLockfile: false
` <|-- `Class2