From 6155b2cc38a1c7485065c397453dad1ab86079f0 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Wed, 6 Sep 2023 22:04:35 -0700 Subject: [PATCH 01/23] update content --- ...egrations.md => integrations-community.md} | 85 +++++++++---------- docs/ecosystem/integrations-create.md | 31 +++++++ docs/ecosystem/mermaid-chart.md | 43 ++++++++++ docs/ecosystem/showcases.md | 9 -- .../mermaid/src/docs/.vitepress/config.ts | 11 ++- ...egrations.md => integrations-community.md} | 85 ++++++++++--------- .../src/docs/ecosystem/integrations-create.md | 29 +++++++ .../src/docs/ecosystem/mermaid-chart.md | 41 +++++++++ .../mermaid/src/docs/ecosystem/showcases.md | 3 - pnpm-lock.yaml | 78 +++++++++++++++-- 10 files changed, 310 insertions(+), 105 deletions(-) rename docs/ecosystem/{integrations.md => integrations-community.md} (90%) create mode 100644 docs/ecosystem/integrations-create.md create mode 100644 docs/ecosystem/mermaid-chart.md delete mode 100644 docs/ecosystem/showcases.md rename packages/mermaid/src/docs/ecosystem/{integrations.md => integrations-community.md} (90%) create mode 100644 packages/mermaid/src/docs/ecosystem/integrations-create.md create mode 100644 packages/mermaid/src/docs/ecosystem/mermaid-chart.md delete mode 100644 packages/mermaid/src/docs/ecosystem/showcases.md diff --git a/docs/ecosystem/integrations.md b/docs/ecosystem/integrations-community.md similarity index 90% rename from docs/ecosystem/integrations.md rename to docs/ecosystem/integrations-community.md index c0e8f96c85..81af789aee 100644 --- a/docs/ecosystem/integrations.md +++ b/docs/ecosystem/integrations-community.md @@ -2,52 +2,42 @@ > > ## 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 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) @@ -60,11 +50,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) @@ -76,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/) @@ -86,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) @@ -97,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) @@ -113,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) @@ -164,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/) @@ -181,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 | | ------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | @@ -204,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 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/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index d787fe6ea1..51d87ce985 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/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 4935fc96ad..0b428ff89c 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 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) @@ -54,11 +48,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) @@ -70,7 +68,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/) @@ -80,7 +80,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) @@ -91,7 +93,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) @@ -107,7 +109,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) @@ -158,8 +160,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/) @@ -175,15 +178,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 | | ------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | @@ -198,7 +201,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/pnpm-lock.yaml b/pnpm-lock.yaml index 368c901ecb..0770c568b1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -481,6 +481,61 @@ importers: specifier: ^7.0.0 version: 7.0.0 + packages/mermaid/src/vitepress: + dependencies: + '@vueuse/core': + specifier: ^10.1.0 + version: 10.1.0(vue@3.3.4) + jiti: + specifier: ^1.18.2 + version: 1.18.2 + mermaid: + specifier: workspace:^ + version: link:../.. + vue: + specifier: ^3.3 + version: 3.3.4 + devDependencies: + '@iconify-json/carbon': + specifier: ^1.1.16 + version: 1.1.16 + '@unocss/reset': + specifier: ^0.55.2 + version: 0.55.2 + '@vite-pwa/vitepress': + specifier: ^0.2.0 + version: 0.2.0(vite-plugin-pwa@0.16.0) + '@vitejs/plugin-vue': + specifier: ^4.2.1 + version: 4.2.1(vite@4.3.9)(vue@3.3.4) + fast-glob: + specifier: ^3.2.12 + version: 3.2.12 + https-localhost: + specifier: ^4.7.1 + version: 4.7.1 + pathe: + specifier: ^1.1.0 + version: 1.1.0 + unocss: + specifier: ^0.55.2 + version: 0.55.2(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9) + unplugin-vue-components: + specifier: ^0.25.0 + version: 0.25.0(rollup@2.79.1)(vue@3.3.4) + vite: + specifier: ^4.3.9 + version: 4.3.9(@types/node@18.16.0) + vite-plugin-pwa: + specifier: ^0.16.0 + version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0) + vitepress: + specifier: 1.0.0-rc.4 + version: 1.0.0-rc.4(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0) + workbox-window: + specifier: ^7.0.0 + version: 7.0.0 + tests/webpack: dependencies: '@mermaid-js/mermaid-example-diagram': @@ -1403,6 +1458,7 @@ packages: /@babel/plugin-proposal-async-generator-functions@7.20.7(@babel/core@7.12.3): resolution: {integrity: sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1418,6 +1474,7 @@ packages: /@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.12.3): resolution: {integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1431,6 +1488,7 @@ packages: /@babel/plugin-proposal-class-static-block@7.21.0(@babel/core@7.12.3): resolution: {integrity: sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-static-block instead. peerDependencies: '@babel/core': ^7.12.0 dependencies: @@ -1445,6 +1503,7 @@ packages: /@babel/plugin-proposal-dynamic-import@7.18.6(@babel/core@7.12.3): resolution: {integrity: sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-dynamic-import instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1456,6 +1515,7 @@ packages: /@babel/plugin-proposal-export-namespace-from@7.18.9(@babel/core@7.12.3): resolution: {integrity: sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-export-namespace-from instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1467,6 +1527,7 @@ packages: /@babel/plugin-proposal-json-strings@7.18.6(@babel/core@7.12.3): resolution: {integrity: sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-json-strings instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1478,6 +1539,7 @@ packages: /@babel/plugin-proposal-logical-assignment-operators@7.20.7(@babel/core@7.12.3): resolution: {integrity: sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-logical-assignment-operators instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1489,6 +1551,7 @@ packages: /@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.12.3): resolution: {integrity: sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1500,6 +1563,7 @@ packages: /@babel/plugin-proposal-numeric-separator@7.18.6(@babel/core@7.12.3): resolution: {integrity: sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1511,6 +1575,7 @@ packages: /@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.12.3): resolution: {integrity: sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1525,6 +1590,7 @@ packages: /@babel/plugin-proposal-optional-catch-binding@7.18.6(@babel/core@7.12.3): resolution: {integrity: sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1536,6 +1602,7 @@ packages: /@babel/plugin-proposal-optional-chaining@7.21.0(@babel/core@7.12.3): resolution: {integrity: sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1548,6 +1615,7 @@ packages: /@babel/plugin-proposal-private-methods@7.18.6(@babel/core@7.12.3): resolution: {integrity: sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1561,6 +1629,7 @@ packages: /@babel/plugin-proposal-private-property-in-object@7.21.0(@babel/core@7.12.3): resolution: {integrity: sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==} engines: {node: '>=6.9.0'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -1576,6 +1645,7 @@ packages: /@babel/plugin-proposal-unicode-property-regex@7.18.6(@babel/core@7.12.3): resolution: {integrity: sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==} engines: {node: '>=4'} + deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-unicode-property-regex instead. peerDependencies: '@babel/core': ^7.0.0-0 dependencies: @@ -12283,10 +12353,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 @@ -13767,7 +13833,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: @@ -15000,7 +15066,7 @@ packages: optional: true dependencies: '@antfu/utils': 0.7.5 - '@rollup/pluginutils': 5.0.2(rollup@2.79.1) + '@rollup/pluginutils': 5.0.3(rollup@2.79.1) chokidar: 3.5.3 debug: 4.3.4(supports-color@8.1.1) fast-glob: 3.3.1 From 809103ccdd11bda7a41128ecf2f27c643f24f424 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Thu, 7 Sep 2023 11:45:24 -0700 Subject: [PATCH 02/23] add link to redirect file --- packages/mermaid/src/docs/.vitepress/theme/redirect.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mermaid/src/docs/.vitepress/theme/redirect.ts b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts index 8d576fece9..bcb3386613 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/redirect.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts @@ -78,6 +78,7 @@ const idRedirectMap: Record = { const urlRedirectMap: Record = { '/misc/faq.html': 'configure/faq.html', '/syntax/c4c.html': 'syntax/c4.html', + '/ecosystem/integrations.html': 'ecosystem/integrations-community.html', }; /** From 8a0ca8c43c039f306dc9cefc766df7d79c4980cc Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Fri, 8 Sep 2023 10:28:50 -0700 Subject: [PATCH 03/23] update redirect --- packages/mermaid/src/docs/.vitepress/theme/redirect.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mermaid/src/docs/.vitepress/theme/redirect.ts b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts index bcb3386613..a898f5856a 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/redirect.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts @@ -79,6 +79,7 @@ const urlRedirectMap: Record = { '/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', }; /** From 3824daea0bd8f96116d4c3228a59958f6f50ced1 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Fri, 8 Sep 2023 22:49:28 -0700 Subject: [PATCH 04/23] add blog post (#4822) --- docs/news/announcements.md | 6 +++--- docs/news/blog.md | 6 ++++++ packages/mermaid/src/docs/news/announcements.md | 6 +++--- packages/mermaid/src/docs/news/blog.md | 6 ++++++ 4 files changed, 18 insertions(+), 6 deletions(-) diff --git a/docs/news/announcements.md b/docs/news/announcements.md index 9ec02d8f40..53542869a7 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/) +## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://www.mermaidchart.com/blog/posts/present-flow-data-using-sankey-diagrams/) -23 August 2023 · 15 mins +8 September 2023 · 4 mins -Read about the pitfalls of special cases in programming, illustrating how they can lead to complexity, diminish readability, and create maintenance challenges. +Sankey diagrams are a powerful tool for visualizing flow data. diff --git a/docs/news/blog.md b/docs/news/blog.md index 966956649a..e57bc7ae20 100644 --- a/docs/news/blog.md +++ b/docs/news/blog.md @@ -6,6 +6,12 @@ # Blog +## [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/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md index 951c42cbde..47509b33a1 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/) +## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://www.mermaidchart.com/blog/posts/present-flow-data-using-sankey-diagrams/) -23 August 2023 · 15 mins +8 September 2023 · 4 mins -Read about the pitfalls of special cases in programming, illustrating how they can lead to complexity, diminish readability, and create maintenance challenges. +Sankey diagrams are a powerful tool for visualizing flow data. diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md index b18e11650b..d39398d772 100644 --- a/packages/mermaid/src/docs/news/blog.md +++ b/packages/mermaid/src/docs/news/blog.md @@ -1,5 +1,11 @@ # Blog +## [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 From ad596086eaadfa5daa62325d5d95668359f087be Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 15 Sep 2023 01:24:02 +0530 Subject: [PATCH 05/23] 10.5.0-rc.2 --- packages/mermaid/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 23138003f6..84df92fb37 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-rc.2", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "module": "./dist/mermaid.core.mjs", From a0e9b0c96d839742ba98386af82f43fbf303053c Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Fri, 22 Sep 2023 10:09:05 -0700 Subject: [PATCH 06/23] add git graph blog post --- docs/news/announcements.md | 6 +++--- docs/news/blog.md | 6 ++++++ packages/mermaid/src/docs/news/announcements.md | 6 +++--- packages/mermaid/src/docs/news/blog.md | 6 ++++++ 4 files changed, 18 insertions(+), 6 deletions(-) diff --git a/docs/news/announcements.md b/docs/news/announcements.md index 53542869a7..19568afa46 100644 --- a/docs/news/announcements.md +++ b/docs/news/announcements.md @@ -6,8 +6,8 @@ # Announcements -## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://www.mermaidchart.com/blog/posts/present-flow-data-using-sankey-diagrams/) +## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/) -8 September 2023 · 4 mins +22 September 2023 · 7 mins -Sankey diagrams are a powerful tool for visualizing flow data. +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 e57bc7ae20..cc34b9f5c5 100644 --- a/docs/news/blog.md +++ b/docs/news/blog.md @@ -6,6 +6,12 @@ # 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 diff --git a/packages/mermaid/src/docs/news/announcements.md b/packages/mermaid/src/docs/news/announcements.md index 47509b33a1..8a8d000a5e 100644 --- a/packages/mermaid/src/docs/news/announcements.md +++ b/packages/mermaid/src/docs/news/announcements.md @@ -1,7 +1,7 @@ # Announcements -## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://www.mermaidchart.com/blog/posts/present-flow-data-using-sankey-diagrams/) +## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/) -8 September 2023 · 4 mins +22 September 2023 · 7 mins -Sankey diagrams are a powerful tool for visualizing flow data. +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 d39398d772..fa581349f1 100644 --- a/packages/mermaid/src/docs/news/blog.md +++ b/packages/mermaid/src/docs/news/blog.md @@ -1,5 +1,11 @@ # 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 From a3456ec933e60fc2d6379e7245797a2d98e82309 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 26 Sep 2023 18:36:05 +0530 Subject: [PATCH 07/23] fix: Sequence diagram loop rendering --- .../src/diagrams/sequence/sequenceRenderer.ts | 40 +++++++++++-------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts index a596a3a029..058646dc8b 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts +++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts @@ -1421,23 +1421,31 @@ 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); - } + // 3 is max difference for +/- 1 + if (Math.abs(startx - stopx) <= 3) { + // 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]; From 5f5b216428c54336ac87ca1b759f6e32678a62ae Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 26 Sep 2023 19:15:44 +0530 Subject: [PATCH 08/23] fix: Performance issue in Gantt diagram --- .../src/diagrams/gantt/ganttRenderer.js | 33 ++++++++++++++----- 1 file changed, 25 insertions(+), 8 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 935ecc9285..554df8c3c1 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') > 10) { + console.warn( + 'The difference between the min and max time is more than 10 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); From 7cb1c2e0aa8d067b90c188a6e916937d2955cc6a Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 26 Sep 2023 19:21:05 +0530 Subject: [PATCH 09/23] fix(gantt): Set max exclude interval length to 5 years --- packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 554df8c3c1..c0622ec3b2 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -520,9 +520,9 @@ export const draw = function (text, id, version, diagObj) { return; } - if (dayjs(maxTime).diff(dayjs(minTime), 'year') > 10) { + if (dayjs(maxTime).diff(dayjs(minTime), 'year') > 5) { console.warn( - 'The difference between the min and max time is more than 10 years. This will cause performance issues. Skipping drawing exclude days.' + 'The difference between the min and max time is more than 5 years. This will cause performance issues. Skipping drawing exclude days.' ); return; } From 63f4a56ec556aa729b465f4d40c8078b2f65cdd0 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 26 Sep 2023 19:21:14 +0530 Subject: [PATCH 10/23] chore: Add test for gantt rendering --- cypress/integration/rendering/gantt.spec.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) 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( ` From ee58743a04226f4ef71ed1bf6aa02c0ce1814ced Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 26 Sep 2023 19:24:39 +0530 Subject: [PATCH 11/23] fix: Use log instead of console --- packages/mermaid/src/diagrams/gantt/ganttRenderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index c0622ec3b2..55b5607a28 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -521,7 +521,7 @@ export const draw = function (text, id, version, diagObj) { } if (dayjs(maxTime).diff(dayjs(minTime), 'year') > 5) { - console.warn( + 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; From f96d351fdc754da8a93688978b6893aa5239cf62 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 28 Sep 2023 13:09:56 +0530 Subject: [PATCH 12/23] fix: Sequence loop rendering --- packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts index 058646dc8b..a41c3877fe 100644 --- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts +++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts @@ -1421,8 +1421,7 @@ const buildMessageModel = function (msg, actors, diagObj) { return isArrowToRight ? -value : value; }; - // 3 is max difference for +/- 1 - if (Math.abs(startx - stopx) <= 3) { + 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. From f8a3807b3294da3500ab9e76e684ac4de4195a88 Mon Sep 17 00:00:00 2001 From: Ivan Posti Date: Thu, 28 Sep 2023 12:58:33 +0200 Subject: [PATCH 13/23] Update link for the Mermaid integration in JetBrains IDEs --- docs/ecosystem/integrations.md | 2 +- packages/mermaid/src/docs/ecosystem/integrations.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/ecosystem/integrations.md b/docs/ecosystem/integrations.md index 5d7ed00eea..6b65237ee9 100644 --- a/docs/ecosystem/integrations.md +++ b/docs/ecosystem/integrations.md @@ -59,7 +59,7 @@ 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) diff --git a/packages/mermaid/src/docs/ecosystem/integrations.md b/packages/mermaid/src/docs/ecosystem/integrations.md index c03d204def..ef9abfc7ac 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations.md +++ b/packages/mermaid/src/docs/ecosystem/integrations.md @@ -53,7 +53,7 @@ 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) From 874ccfb5a7574d9b50ed7b75888c5820cd1def79 Mon Sep 17 00:00:00 2001 From: steph Date: Thu, 28 Sep 2023 23:28:33 -0700 Subject: [PATCH 14/23] fix links --- docs/intro/index.md | 5 +++-- packages/mermaid/src/docs/intro/index.md | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/intro/index.md b/docs/intro/index.md index 974003fd6c..1f07a7d1af 100644 --- a/docs/intro/index.md +++ b/docs/intro/index.md @@ -42,11 +42,12 @@ But not having diagrams or docs ruins productivity and hurts organizational lear Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).

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/n00b-gettingStarted.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/intro/index.md b/packages/mermaid/src/docs/intro/index.md index 84fec41f86..4f1ed6696c 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/n00b-gettingStarted.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). From 2cb1a88913f6dae29f830560600cad8575aad837 Mon Sep 17 00:00:00 2001 From: steph Date: Thu, 28 Sep 2023 23:37:59 -0700 Subject: [PATCH 15/23] more link fixes --- docs/intro/n00b-gettingStarted.md | 4 ++-- packages/mermaid/src/docs/intro/n00b-gettingStarted.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/intro/n00b-gettingStarted.md b/docs/intro/n00b-gettingStarted.md index f4fb69b909..cad486f63f 100644 --- a/docs/intro/n00b-gettingStarted.md +++ b/docs/intro/n00b-gettingStarted.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/integration-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, Date: Thu, 28 Sep 2023 23:46:32 -0700 Subject: [PATCH 16/23] fix typo --- docs/intro/n00b-gettingStarted.md | 2 +- packages/mermaid/src/docs/intro/n00b-gettingStarted.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/intro/n00b-gettingStarted.md b/docs/intro/n00b-gettingStarted.md index cad486f63f..b863d422a1 100644 --- a/docs/intro/n00b-gettingStarted.md +++ b/docs/intro/n00b-gettingStarted.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/integration-community.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. diff --git a/packages/mermaid/src/docs/intro/n00b-gettingStarted.md b/packages/mermaid/src/docs/intro/n00b-gettingStarted.md index d9323e391e..190137dedb 100644 --- a/packages/mermaid/src/docs/intro/n00b-gettingStarted.md +++ b/packages/mermaid/src/docs/intro/n00b-gettingStarted.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/integration-community.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. From f1895ac59911b649b1ec51af4cb202d3c3e9e2b6 Mon Sep 17 00:00:00 2001 From: steph Date: Thu, 28 Sep 2023 23:52:53 -0700 Subject: [PATCH 17/23] more fixes --- README.md | 4 ++-- README.zh-CN.md | 2 +- packages/mermaid/src/docs/index.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 0f47ceca2d..d4a8911964 100644 --- a/README.md +++ b/README.md @@ -56,9 +56,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/n00b-gettingStarted.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 0cc05906e2..de8ec78afd 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -53,7 +53,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/n00b-gettingStarted.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md). 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 From 47acc1e423d6922f006a32f6fbeb5e72f57790d0 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 29 Sep 2023 13:38:00 +0200 Subject: [PATCH 18/23] Fix for issue with backticks in ids in classDiagrams --- cypress/integration/other/xss.spec.js | 5 + cypress/platform/knsv2.html | 10 +- cypress/platform/xss10.html | 10 ++ cypress/platform/xss11.html | 10 ++ cypress/platform/xss12.html | 10 ++ cypress/platform/xss13.html | 10 ++ cypress/platform/xss15.html | 10 ++ cypress/platform/xss16.html | 10 ++ cypress/platform/xss17.html | 10 ++ cypress/platform/xss18.html | 10 ++ cypress/platform/xss19.html | 10 ++ cypress/platform/xss20.html | 10 ++ cypress/platform/xss21.html | 10 ++ cypress/platform/xss23-css.html | 10 ++ cypress/platform/xss24.html | 109 ++++++++++++++++++ cypress/platform/xss5.html | 18 +-- cypress/platform/xss6.html | 10 ++ cypress/platform/xss7.html | 10 ++ cypress/platform/xss8.html | 10 ++ cypress/platform/xss9.html | 10 ++ .../mermaid/src/diagrams/class/classDb.ts | 27 +++-- 21 files changed, 305 insertions(+), 24 deletions(-) create mode 100644 cypress/platform/xss24.html 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/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 @@ 
-      flowchart
-        classDef mainCategories fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
-        CS(Customer Awareness Journey):::mainCategories
-
- 
+      classDiagram
+  `Class` <|-- `Class2`
+
+ 
 flowchart
 Node1:::class1 --> Node2:::class2
 Node1:::class1 --> Node3:::class2
diff --git a/cypress/platform/xss10.html b/cypress/platform/xss10.html
index 3a8157fed2..79fa97136e 100644
--- a/cypress/platform/xss10.html
+++ b/cypress/platform/xss10.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     
+    
   
   
     
Security check

diff --git a/cypress/platform/xss11.html b/cypress/platform/xss11.html
index 302f39ee90..3b505b7411 100644
--- a/cypress/platform/xss11.html
+++ b/cypress/platform/xss11.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     
+    
   
   
     
Security check

diff --git a/cypress/platform/xss12.html b/cypress/platform/xss12.html
index b1e2c1d0ab..75059e8af8 100644
--- a/cypress/platform/xss12.html
+++ b/cypress/platform/xss12.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     
+    
   
   
     
Security check

diff --git a/cypress/platform/xss13.html b/cypress/platform/xss13.html
index 9f505ea7b8..9ee2a73044 100644
--- a/cypress/platform/xss13.html
+++ b/cypress/platform/xss13.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     
+    
   
   
     
Security check

diff --git a/cypress/platform/xss15.html b/cypress/platform/xss15.html
index 3fa6b7151a..bfd3f1652d 100644
--- a/cypress/platform/xss15.html
+++ b/cypress/platform/xss15.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     
+    
   
   
     
Security check

diff --git a/cypress/platform/xss16.html b/cypress/platform/xss16.html
index 6f8a734eb6..0b8c0c9f78 100644
--- a/cypress/platform/xss16.html
+++ b/cypress/platform/xss16.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     
+    
   
   
     
Security check

diff --git a/cypress/platform/xss17.html b/cypress/platform/xss17.html
index bd7e1c57eb..2a04701264 100644
--- a/cypress/platform/xss17.html
+++ b/cypress/platform/xss17.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     
+    
   
   
     
Security check

diff --git a/cypress/platform/xss18.html b/cypress/platform/xss18.html
index ccacfadbb1..df1bee1dd6 100644
--- a/cypress/platform/xss18.html
+++ b/cypress/platform/xss18.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     
+    
   
   
     
Security check

diff --git a/cypress/platform/xss19.html b/cypress/platform/xss19.html
index 7966abb8c1..4d7bb6e08b 100644
--- a/cypress/platform/xss19.html
+++ b/cypress/platform/xss19.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     
+    
   
   
     
Security check

diff --git a/cypress/platform/xss20.html b/cypress/platform/xss20.html
index f290898b2f..bbe2dd00b8 100644
--- a/cypress/platform/xss20.html
+++ b/cypress/platform/xss20.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     
+    
   
   
     
Security check

diff --git a/cypress/platform/xss21.html b/cypress/platform/xss21.html
index 7cfa17c9ee..be7289b7f1 100644
--- a/cypress/platform/xss21.html
+++ b/cypress/platform/xss21.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     
+    
   
   
     
Security check

diff --git a/cypress/platform/xss23-css.html b/cypress/platform/xss23-css.html
index cc5b6f0bf7..c4bc43b6a0 100644
--- a/cypress/platform/xss23-css.html
+++ b/cypress/platform/xss23-css.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     
+    
   
   
     
Security check

diff --git a/cypress/platform/xss24.html b/cypress/platform/xss24.html
new file mode 100644
index 0000000000..5ca092d657
--- /dev/null
+++ b/cypress/platform/xss24.html
@@ -0,0 +1,109 @@
+
+  
+    
+    
+    
+    
+    
+    
+  
+  
+    
Security check

+    

+      

+      

+    

+    
+  
+
diff --git a/cypress/platform/xss5.html b/cypress/platform/xss5.html
index f7abf7a45c..e9855f3f7c 100644
--- a/cypress/platform/xss5.html
+++ b/cypress/platform/xss5.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     
+    
   
   
     
Security check

@@ -84,14 +94,6 @@
       function callback() {
         alert('It worked');
       }
-      function xssAttack() {
-        const div = document.createElement('div');
-        div.id = 'the-malware';
-        div.className = 'malware';
-        div.innerHTML = 'XSS Succeeded';
-        document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeeded');
-      }
       let diagram = 'graph LR\n';
       diagram += 'B-->D("
+    
   
   
     
Security check

diff --git a/cypress/platform/xss7.html b/cypress/platform/xss7.html
index 177b4342ca..36abe7b418 100644
--- a/cypress/platform/xss7.html
+++ b/cypress/platform/xss7.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     
+    
   
   
     
Security check

diff --git a/cypress/platform/xss8.html b/cypress/platform/xss8.html
index 5852c2693f..15358b6f07 100644
--- a/cypress/platform/xss8.html
+++ b/cypress/platform/xss8.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     
+    
   
   
     
Security check

diff --git a/cypress/platform/xss9.html b/cypress/platform/xss9.html
index cf2ad1359f..a9c652b59b 100644
--- a/cypress/platform/xss9.html
+++ b/cypress/platform/xss9.html
@@ -42,6 +42,16 @@
         font-size: 72px;
       }
     
+    
   
   
     
Security check

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;

From f931c30f0a40670a819048f46d044329d9ed88fd Mon Sep 17 00:00:00 2001
From: Dennis Ko <50710829+dennis0324@users.noreply.github.com>
Date: Sat, 30 Sep 2023 23:33:51 +0900
Subject: [PATCH 19/23] docs: typo fixed

---
 docs/syntax/flowchart.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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"}} }%%

From 595c63973f085c1ceb56e7828bd3e26817720881 Mon Sep 17 00:00:00 2001
From: Dennis Ko <50710829+dennis0324@users.noreply.github.com>
Date: Sat, 30 Sep 2023 23:34:48 +0900
Subject: [PATCH 20/23] docs: typo fixed

---
 packages/mermaid/src/docs/syntax/flowchart.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

From bb0d549d0dc489767b240a910a6831b4a7771fd2 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Mon, 2 Oct 2023 10:00:13 +0200
Subject: [PATCH 21/23] Mermaid release v10.5.0

---
 packages/mermaid/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 84df92fb37..5877cae7ef 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.5.0-rc.2",
+  "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",

From e6bbc71f86eec9cb38073ad6fc1938bbdd1a591d Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Mon, 2 Oct 2023 10:19:52 +0200
Subject: [PATCH 22/23] Merge branch 'release/10.5.0'

---
 pnpm-lock.yaml | 63 ++++----------------------------------------------
 1 file changed, 4 insertions(+), 59 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 54a439843e..d2a3bdcf8b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 importers:
 
   .:
@@ -481,61 +477,6 @@ importers:
         specifier: ^7.0.0
         version: 7.0.0
 
-  packages/mermaid/src/vitepress:
-    dependencies:
-      '@vueuse/core':
-        specifier: ^10.1.0
-        version: 10.1.0(vue@3.3.4)
-      jiti:
-        specifier: ^1.18.2
-        version: 1.18.2
-      mermaid:
-        specifier: workspace:^
-        version: link:../..
-      vue:
-        specifier: ^3.3
-        version: 3.3.4
-    devDependencies:
-      '@iconify-json/carbon':
-        specifier: ^1.1.16
-        version: 1.1.16
-      '@unocss/reset':
-        specifier: ^0.55.2
-        version: 0.55.2
-      '@vite-pwa/vitepress':
-        specifier: ^0.2.0
-        version: 0.2.0(vite-plugin-pwa@0.16.0)
-      '@vitejs/plugin-vue':
-        specifier: ^4.2.1
-        version: 4.2.1(vite@4.3.9)(vue@3.3.4)
-      fast-glob:
-        specifier: ^3.2.12
-        version: 3.2.12
-      https-localhost:
-        specifier: ^4.7.1
-        version: 4.7.1
-      pathe:
-        specifier: ^1.1.0
-        version: 1.1.0
-      unocss:
-        specifier: ^0.55.2
-        version: 0.55.2(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9)
-      unplugin-vue-components:
-        specifier: ^0.25.0
-        version: 0.25.0(rollup@2.79.1)(vue@3.3.4)
-      vite:
-        specifier: ^4.3.9
-        version: 4.3.9(@types/node@18.16.0)
-      vite-plugin-pwa:
-        specifier: ^0.16.0
-        version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
-      vitepress:
-        specifier: 1.0.0-rc.4
-        version: 1.0.0-rc.4(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
-      workbox-window:
-        specifier: ^7.0.0
-        version: 7.0.0
-
   tests/webpack:
     dependencies:
       '@mermaid-js/mermaid-example-diagram':
@@ -16452,3 +16393,7 @@ packages:
   /zwitch@2.0.2:
     resolution: {integrity: sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==}
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false

From b83fff2fa0838bc5353a25bea32220a7f7f17e58 Mon Sep 17 00:00:00 2001
From: knsv 
Date: Mon, 2 Oct 2023 08:24:42 +0000
Subject: [PATCH 23/23] Update docs

---
 docs/ecosystem/integrations-community.md |   1 +
 docs/intro/examples.md                   | 227 -----------------------
 2 files changed, 1 insertion(+), 227 deletions(-)
 delete mode 100644 docs/intro/examples.md

diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md
index 81af789aee..b03e5581c7 100644
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -39,6 +39,7 @@ Below are a list of community plugins and integrations created with Mermaid.
   - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
 - [LiveBook](https://livebook.dev) ✅
 - [Atlassian Products](https://www.atlassian.com)
+  - [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)
diff --git a/docs/intro/examples.md b/docs/intro/examples.md
deleted file mode 100644
index d9bb187e1e..0000000000
--- a/docs/intro/examples.md
+++ /dev/null
@@ -1,227 +0,0 @@
-> **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]
-```