From edad740e15fac589497b496ecc1094b2e3edcb7e Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Fri, 26 Apr 2024 13:17:14 -0700 Subject: [PATCH 01/14] add ai blog post --- docs/news/blog.md | 6 ++++++ packages/mermaid/src/docs/news/blog.md | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/docs/news/blog.md b/docs/news/blog.md index d88c9ed236..3e7e4be4fb 100644 --- a/docs/news/blog.md +++ b/docs/news/blog.md @@ -6,6 +6,12 @@ # Blog +## [AI in software diagramming: What trends will define the future?](https://www.mermaidchart.com/blog/posts/ai-in-software-diagramming/) + +24 April 2024 ·5 mins + +Artificial intelligence (AI) tools are changing the way developers work. + ## [Mermaid Chart Unveils Visual Editor for Sequence Diagrams](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams/) 8 April 2024 · 5 mins diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md index 267bd48a61..5d3c6b9c33 100644 --- a/packages/mermaid/src/docs/news/blog.md +++ b/packages/mermaid/src/docs/news/blog.md @@ -1,5 +1,11 @@ # Blog +## [AI in software diagramming: What trends will define the future?](https://www.mermaidchart.com/blog/posts/ai-in-software-diagramming/) + +24 April 2024 ·5 mins + +Artificial intelligence (AI) tools are changing the way developers work. + ## [Mermaid Chart Unveils Visual Editor for Sequence Diagrams](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams/) 8 April 2024 · 5 mins From 76801ff564b2acfaf0b80772e621375d7470488c Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Mon, 29 Apr 2024 14:12:55 -0700 Subject: [PATCH 02/14] update content --- docs/ecosystem/mermaid-chart.md | 28 +++++++++++-------- .../src/docs/ecosystem/mermaid-chart.md | 28 +++++++++++-------- 2 files changed, 34 insertions(+), 22 deletions(-) diff --git a/docs/ecosystem/mermaid-chart.md b/docs/ecosystem/mermaid-chart.md index 07572d044f..f1ca85af0c 100644 --- a/docs/ecosystem/mermaid-chart.md +++ b/docs/ecosystem/mermaid-chart.md @@ -6,6 +6,10 @@ # Mermaid Chart +The Future of Diagramming & Visual Collaboration + +Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up). +
Mermaid Chart - A smarter way to create diagrams | Product Hunt @@ -18,22 +22,26 @@ - **Editor** - A web based editor for creating and editing Mermaid diagrams. -- **Presentation** - A presentation mode for viewing Mermaid diagrams in a slideshow format. +- **Visual Editor** - The Visual Editor enables users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options. -- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro plan). +- **AI Chat** - Use our embedded AI Chat to generate diagrams from natural language descriptions. - **Plugins** - A plugin system for extending the functionality of Mermaid. - Plugins are available for: + Official Mermaid Chart plugins: - - [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt) + - [Mermaid Chart GPT](https://chat.openai.com/g/g-1IRFKwq4G-mermaid-chart) + - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart) - [JetBrains IDE](https://plugins.jetbrains.com/plugin/23043-mermaid-chart) - [Microsoft PowerPoint and Word](https://appsource.microsoft.com/en-us/product/office/WA200006214?tab=Overview) - - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart) -- **AI diagramming** - A feature for generating Mermaid diagrams from text using AI (Pro plan). + Visit our [Plugins](https://www.mermaidchart.com/plugins) page for more information. -- **More** - To learn more, visit our [Product](https://www.mermaidchart.com/product) page. +- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro and Enterprise plans). + +- **Comments** - Enhance collaboration by adding comments to diagrams. + +- **Presentations** - A presentation mode for viewing Mermaid diagrams in a slideshow format. ## Plans @@ -43,11 +51,9 @@ - **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). +To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page. -Mermaid Chart is currently offering a 14-day free trial of our newly-launched Pro tier. To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page. +Mermaid Chart is currently offering a 14-day free trial on our Pro and Enterprise tiers. Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up). ## Mermaid JS contributions diff --git a/packages/mermaid/src/docs/ecosystem/mermaid-chart.md b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md index 94b6773e4b..732b9b68cd 100644 --- a/packages/mermaid/src/docs/ecosystem/mermaid-chart.md +++ b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md @@ -1,5 +1,9 @@ # Mermaid Chart +The Future of Diagramming & Visual Collaboration + +Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up). +
Mermaid Chart - A smarter way to create diagrams | Product Hunt @@ -12,22 +16,26 @@ - **Editor** - A web based editor for creating and editing Mermaid diagrams. -- **Presentation** - A presentation mode for viewing Mermaid diagrams in a slideshow format. +- **Visual Editor** - The Visual Editor enables users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options. -- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro plan). +- **AI Chat** - Use our embedded AI Chat to generate diagrams from natural language descriptions. - **Plugins** - A plugin system for extending the functionality of Mermaid. - Plugins are available for: + Official Mermaid Chart plugins: - - [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt) + - [Mermaid Chart GPT](https://chat.openai.com/g/g-1IRFKwq4G-mermaid-chart) + - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart) - [JetBrains IDE](https://plugins.jetbrains.com/plugin/23043-mermaid-chart) - [Microsoft PowerPoint and Word](https://appsource.microsoft.com/en-us/product/office/WA200006214?tab=Overview) - - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart) -- **AI diagramming** - A feature for generating Mermaid diagrams from text using AI (Pro plan). + Visit our [Plugins](https://www.mermaidchart.com/plugins) page for more information. -- **More** - To learn more, visit our [Product](https://www.mermaidchart.com/product) page. +- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro and Enterprise plans). + +- **Comments** - Enhance collaboration by adding comments to diagrams. + +- **Presentations** - A presentation mode for viewing Mermaid diagrams in a slideshow format. ## Plans @@ -37,11 +45,9 @@ - **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). +To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page. -Mermaid Chart is currently offering a 14-day free trial of our newly-launched Pro tier. To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page. +Mermaid Chart is currently offering a 14-day free trial on our Pro and Enterprise tiers. Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up). ## Mermaid JS contributions From 4f26f3ae2e4e1f25364a811819084b68038823e7 Mon Sep 17 00:00:00 2001 From: Steph <35910788+huynhicode@users.noreply.github.com> Date: Tue, 14 May 2024 00:39:16 -0700 Subject: [PATCH 03/14] docs: Add blog post - Documentation Software (#5519) Add blog post documentation software --- docs/news/blog.md | 8 +++++++- packages/mermaid/src/docs/news/blog.md | 8 +++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/docs/news/blog.md b/docs/news/blog.md index 3e7e4be4fb..65fa9246e6 100644 --- a/docs/news/blog.md +++ b/docs/news/blog.md @@ -6,9 +6,15 @@ # Blog +## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/) + +7 May 2024 · 5 mins + +How to Choose the Right Documentation Software. Reliable and efficient documentation software is crucial in the fast-paced world of software development. + ## [AI in software diagramming: What trends will define the future?](https://www.mermaidchart.com/blog/posts/ai-in-software-diagramming/) -24 April 2024 ·5 mins +24 April 2024 · 5 mins Artificial intelligence (AI) tools are changing the way developers work. diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md index 5d3c6b9c33..4ada1e05cd 100644 --- a/packages/mermaid/src/docs/news/blog.md +++ b/packages/mermaid/src/docs/news/blog.md @@ -1,8 +1,14 @@ # Blog +## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/) + +7 May 2024 · 5 mins + +How to Choose the Right Documentation Software. Reliable and efficient documentation software is crucial in the fast-paced world of software development. + ## [AI in software diagramming: What trends will define the future?](https://www.mermaidchart.com/blog/posts/ai-in-software-diagramming/) -24 April 2024 ·5 mins +24 April 2024 · 5 mins Artificial intelligence (AI) tools are changing the way developers work. From c7fe9a646574597adefe3e6fb2b3707112a151aa Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 14 May 2024 12:53:41 +0200 Subject: [PATCH 04/14] Fix for proper handling of block-diagram labels --- cypress/integration/other/xss.spec.js | 5 + cypress/platform/xss25.html | 108 ++++++++++++++++++ .../mermaid/src/diagrams/block/blockDB.ts | 8 ++ 3 files changed, 121 insertions(+) create mode 100644 cypress/platform/xss25.html diff --git a/cypress/integration/other/xss.spec.js b/cypress/integration/other/xss.spec.js index 678040f98a..d041fa5f4c 100644 --- a/cypress/integration/other/xss.spec.js +++ b/cypress/integration/other/xss.spec.js @@ -137,4 +137,9 @@ describe('XSS', () => { cy.wait(1000); cy.get('#the-malware').should('not.exist'); }); + it('should sanitize backticks block diagram labels properly', () => { + cy.visit('http://localhost:9000/xss25.html'); + cy.wait(1000); + cy.get('#the-malware').should('not.exist'); + }); }); diff --git a/cypress/platform/xss25.html b/cypress/platform/xss25.html new file mode 100644 index 0000000000..251e1ec23f --- /dev/null +++ b/cypress/platform/xss25.html @@ -0,0 +1,108 @@ + + + + + + + + + + +
Security check
+
+
+
+
+ + + diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts index f4881a203b..b343a110c7 100644 --- a/packages/mermaid/src/diagrams/block/blockDB.ts +++ b/packages/mermaid/src/diagrams/block/blockDB.ts @@ -1,9 +1,11 @@ import type { DiagramDB } from '../../diagram-api/types.js'; import type { BlockConfig, BlockType, Block, ClassDef } from './blockTypes.js'; import * as configApi from '../../config.js'; +import { getConfig } from '../../diagram-api/diagramAPI.js'; import { clear as commonClear } from '../common/commonDb.js'; import { log } from '../../logger.js'; import clone from 'lodash-es/clone.js'; +import common from '../common/common.js'; // Initialize the node database for simple lookups let blockDatabase: Record = {}; @@ -14,9 +16,12 @@ const COLOR_KEYWORD = 'color'; const FILL_KEYWORD = 'fill'; const BG_FILL = 'bgFill'; const STYLECLASS_SEP = ','; +const config = getConfig(); let classes = {} as Record; +const sanitizeText = (txt) => common.sanitizeText(txt, config); + /** * Called when the parser comes across a (style) class definition * @example classDef my-style fill:#f96; @@ -87,6 +92,9 @@ const populateBlockDatabase = (_blockList: Block[] | Block[][], parent: Block): const blockList = _blockList.flat(); const children = []; for (const block of blockList) { + if (block.label) { + block.label = sanitizeText(block.label); + } if (block.type === 'classDef') { addStyleClass(block.id, block.css); continue; From dab26df9c4ca69cc4a8c46a22286a2f63ea9ed3e Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 14 May 2024 12:55:39 +0200 Subject: [PATCH 05/14] Fix for proper handling of block-diagram labels --- packages/mermaid/package.json | 2 +- packages/mermaid/src/diagrams/block/blockDB.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index edb069d98e..1175761ac8 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "mermaid", - "version": "10.9.0", + "version": "10.9.1", "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/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts index b343a110c7..a9ccdaa0c5 100644 --- a/packages/mermaid/src/diagrams/block/blockDB.ts +++ b/packages/mermaid/src/diagrams/block/blockDB.ts @@ -20,7 +20,7 @@ const config = getConfig(); let classes = {} as Record; -const sanitizeText = (txt) => common.sanitizeText(txt, config); +const sanitizeText = (txt:string) => common.sanitizeText(txt, config); /** * Called when the parser comes across a (style) class definition From 8d815f878ce7ba3bc820eb62e36b8a96d1debdbc Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 14 May 2024 13:00:45 +0200 Subject: [PATCH 06/14] Lint fix --- packages/mermaid/src/diagrams/block/blockDB.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts index a9ccdaa0c5..f401495a50 100644 --- a/packages/mermaid/src/diagrams/block/blockDB.ts +++ b/packages/mermaid/src/diagrams/block/blockDB.ts @@ -93,7 +93,7 @@ const populateBlockDatabase = (_blockList: Block[] | Block[][], parent: Block): const children = []; for (const block of blockList) { if (block.label) { - block.label = sanitizeText(block.label); + block.label = sanitizeText(block.label); } if (block.type === 'classDef') { addStyleClass(block.id, block.css); From 9a11cb7bb394fcc2f06017e0993c02d526c0710d Mon Sep 17 00:00:00 2001 From: GRASBOCK <31473223+GRASBOCK@users.noreply.github.com> Date: Mon, 13 May 2024 21:16:12 +0700 Subject: [PATCH 07/14] Update flowchart.md fix callback by setting the window callback to the respective callback function in the jsfiddle and code sample --- packages/mermaid/src/docs/syntax/flowchart.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index a097e9739a..c8ee020972 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -557,7 +557,7 @@ Examples of tooltip usage below: ```html @@ -578,7 +578,7 @@ flowchart LR > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2. -?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/Ogglas/2o73vdez/7). +?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/yk4h7qou/2/). Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported): @@ -610,7 +610,7 @@ Beginner's tip—a full example using interactive links in a html context: @@ -899,7 +899,7 @@ flowchart LR > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2. -?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/Ogglas/2o73vdez/7). +?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/yk4h7qou/2/). Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported): @@ -943,7 +943,7 @@ Beginner's tip—a full example using interactive links in a html context: