diff --git a/.gitignore b/.gitignore index 267ff4091..7448f2a81 100644 --- a/.gitignore +++ b/.gitignore @@ -48,6 +48,7 @@ demos/dev/** !/demos/dev/example.html !/demos/dev/reload.js tsx-0/** +vite.config.ts.timestamp-* # autogenereated by langium-cli -generated/ \ No newline at end of file +generated/ diff --git a/cypress/integration/other/xss.spec.js b/cypress/integration/other/xss.spec.js index 678040f98..d041fa5f4 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 000000000..251e1ec23 --- /dev/null +++ b/cypress/platform/xss25.html @@ -0,0 +1,108 @@ + + + + + + + + + + +
Security check
+
+
+
+
+ + + diff --git a/docs/config/img/mathMLDifferences.png b/docs/config/img/mathMLDifferences.png new file mode 100644 index 000000000..6b7a86400 Binary files /dev/null and b/docs/config/img/mathMLDifferences.png differ diff --git a/docs/config/math.md b/docs/config/math.md index 154158508..b2063e3af 100644 --- a/docs/config/math.md +++ b/docs/config/math.md @@ -84,3 +84,13 @@ Example with legacy mode enabled (the latest version of KaTeX's stylesheet can b ``` + +## Handling Rendering Differences + +Due to differences between default fonts across operating systems and browser's MathML implementations, inconsistent results can be seen across platforms. If having consistent results are important, or the most optimal rendered results are desired, `forceLegacyMathML` can be enabled in the config. + +This option will always use KaTeX's stylesheet instead of only when MathML is not supported (as with `legacyMathML`). Note that only `forceLegacyMathML` needs to be set. + +If including KaTeX's stylesheet is not a concern, enabling this option is recommended to avoid scenarios where no MathML implementation within a browser provides the desired output (as seen below). + +![Image showing differences between Browsers](img/mathMLDifferences.png) diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md index 1a68b05bd..d17533a03 100644 --- a/docs/config/setup/modules/mermaidAPI.md +++ b/docs/config/setup/modules/mermaidAPI.md @@ -98,7 +98,7 @@ mermaid.initialize(config); #### Defined in -[mermaidAPI.ts:635](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L635) +[mermaidAPI.ts:634](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L634) ## Functions @@ -129,7 +129,7 @@ Return the last node appended #### Defined in -[mermaidAPI.ts:277](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L277) +[mermaidAPI.ts:276](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L276) --- @@ -155,7 +155,7 @@ the cleaned up svgCode #### Defined in -[mermaidAPI.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L223) +[mermaidAPI.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L222) --- @@ -167,10 +167,10 @@ Create the user styles #### Parameters -| Name | Type | Description | -| :---------- | :------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------ | -| `config` | `MermaidConfig` | configuration that has style and theme settings to use | -| `classDefs` | `undefined` \| `null` \| `Record`<`string`, `DiagramStyleClassDef`> | the classDefs in the diagram text. Might be null if none were defined. Usually is the result of a call to getClasses(...) | +| Name | Type | Description | +| :---------- | :--------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------ | +| `config` | `MermaidConfig` | configuration that has style and theme settings to use | +| `classDefs` | `undefined` \| `null` \| `Map`<`string`, `DiagramStyleClassDef`> | the classDefs in the diagram text. Might be null if none were defined. Usually is the result of a call to getClasses(...) | #### Returns @@ -190,12 +190,12 @@ the string with all the user styles #### Parameters -| Name | Type | -| :---------- | :-------------------------------------------------------- | -| `config` | `MermaidConfig` | -| `graphType` | `string` | -| `classDefs` | `undefined` \| `Record`<`string`, `DiagramStyleClassDef`> | -| `svgId` | `string` | +| Name | Type | +| :---------- | :----------------------------------------------------- | +| `config` | `MermaidConfig` | +| `graphType` | `string` | +| `classDefs` | `undefined` \| `Map`<`string`, `DiagramStyleClassDef`> | +| `svgId` | `string` | #### Returns @@ -203,7 +203,7 @@ the string with all the user styles #### Defined in -[mermaidAPI.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L200) +[mermaidAPI.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L199) --- @@ -256,7 +256,7 @@ Put the svgCode into an iFrame. Return the iFrame code #### Defined in -[mermaidAPI.ts:254](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L254) +[mermaidAPI.ts:253](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L253) --- @@ -281,4 +281,4 @@ Remove any existing elements from the given document #### Defined in -[mermaidAPI.ts:327](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L327) +[mermaidAPI.ts:326](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L326) diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index 01a32ae43..b7dd757b7 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -240,6 +240,8 @@ Communication tools and platforms ### Other +- [Astro](https://astro.build/) + - [Adding diagrams to your Astro site with MermaidJS and Playwright](https://agramont.net/blog/diagraming-with-mermaidjs-astro/) - [Bisheng](https://www.npmjs.com/package/bisheng) - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid) - [Blazorade Mermaid: Render Mermaid diagrams in Blazor applications](https://github.com/Blazorade/Blazorade-Mermaid/wiki) @@ -249,6 +251,7 @@ Communication tools and platforms - [Jekyll](https://jekyllrb.com/) - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid) - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams) +- [MarkChart: Preview Mermaid diagrams on macOS](https://markchart.app/) - [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic) - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server) - [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io) ✅ diff --git a/docs/ecosystem/mermaid-chart.md b/docs/ecosystem/mermaid-chart.md index 07572d044..f1ca85af0 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 +To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page. -Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up). - -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/docs/intro/getting-started.md b/docs/intro/getting-started.md index 735859644..a626d1f53 100644 --- a/docs/intro/getting-started.md +++ b/docs/intro/getting-started.md @@ -157,7 +157,7 @@ For a list of Mermaid Plugins and Integrations, visit the [Integrations page](.. Mermaid Chart plugins are available for: -- [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt) +- [ChatGPT](https://docs.mermaidchart.com/plugins/mermaid-chart-gpt) - [JetBrains IDE](https://docs.mermaidchart.com/plugins/jetbrains-ide) - [Microsoft PowerPoint](https://docs.mermaidchart.com/plugins/microsoft-powerpoint) - [Microsoft Word](https://docs.mermaidchart.com/plugins/microsoft-word) diff --git a/docs/news/blog.md b/docs/news/blog.md index d88c9ed23..65fa9246e 100644 --- a/docs/news/blog.md +++ b/docs/news/blog.md @@ -6,6 +6,18 @@ # 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 + +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/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 8edb5e208..7efc5497b 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -881,7 +881,7 @@ Examples of tooltip usage below: ```html @@ -913,7 +913,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): @@ -957,7 +957,7 @@ Beginner's tip—a full example using interactive links in a html context: ' ); let states = stateDb.getStates(); - expect(states[testStateId].descriptions[0]).toEqual('desc outside the script '); + expect(states.get(testStateId).descriptions[0]).toEqual('desc outside the script '); }); it('adds the description to the state with the given id', () => { stateDb.addDescription(testStateId, 'the description'); let states = stateDb.getStates(); - expect(states[testStateId].descriptions[0]).toEqual('the description'); + expect(states.get(testStateId).descriptions[0]).toEqual('the description'); }); }); }); diff --git a/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js b/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js index c387ff7b3..53063f41a 100644 --- a/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js +++ b/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js @@ -405,7 +405,7 @@ describe('state diagram V2, ', function () { stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2()); const states = stateDb.getStates(); - expect(states['Active'].doc[0].id).toEqual('Idle'); + expect(states.get('Active').doc[0].id).toEqual('Idle'); const rels = stateDb.getRelations(); const rel_Inactive_Idle = rels.find((rel) => rel.id1 === 'Inactive' && rel.id2 === 'Idle'); diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js index 482e37cae..0ecc0a73a 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js +++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js @@ -5,7 +5,7 @@ import { render } from '../../dagre-wrapper/index.js'; import { log } from '../../logger.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import common from '../common/common.js'; -import utils from '../../utils.js'; +import utils, { getEdgeId } from '../../utils.js'; import { DEFAULT_DIAGRAM_DIRECTION, @@ -81,7 +81,7 @@ export const setConf = function (cnf) { * * @param {string} text - the diagram text to be parsed * @param diagramObj - * @returns {Record} ClassDef styles (a Map with keys = strings, values = ) + * @returns {Map} ClassDef styles (a Map with keys = strings, values = ) */ export const getClasses = function (text, diagramObj) { diagramObj.db.extract(diagramObj.db.getRootDocV2()); @@ -129,13 +129,13 @@ export function stateDomId(itemId = '', counter = 0, type = '', typeSpacer = DOM * @param g - graph * @param {object} parent * @param {object} parsedItem - parsed statement item - * @param {object[]} diagramStates - the list of all known states for the diagram + * @param {Map} diagramStates - the list of all known states for the diagram * @param {object} diagramDb * @param {boolean} altFlag - for clusters, add the "statediagram-cluster-alt" CSS class */ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) => { const itemId = parsedItem.id; - const classStr = getClassesFromDbInfo(diagramStates[itemId]); + const classStr = getClassesFromDbInfo(diagramStates.get(itemId)); if (itemId !== 'root') { let shape = SHAPE_STATE; @@ -252,7 +252,6 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) => type: 'group', padding: 0, //getConfig().flowchart.padding }; - graphItemCount++; const parentNodeId = itemId + PARENT_ID; g.setNode(parentNodeId, groupData); @@ -270,17 +269,23 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) => from = noteData.id; to = itemId; } + g.setEdge(from, to, { arrowhead: 'none', arrowType: '', style: G_EDGE_STYLE, labelStyle: '', + id: getEdgeId(from, to, { + counter: graphItemCount, + }), classes: CSS_EDGE_NOTE_EDGE, arrowheadStyle: G_EDGE_ARROWHEADSTYLE, labelpos: G_EDGE_LABELPOS, labelType: G_EDGE_LABELTYPE, thickness: G_EDGE_THICKNESS, }); + + graphItemCount++; } else { g.setNode(itemId, nodeData); } @@ -303,7 +308,7 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) => * @param g * @param parentParsedItem - parsed Item that is the parent of this document (doc) * @param doc - the document to set up; it is a list of parsed statements - * @param {object[]} diagramStates - the list of all known states for the diagram + * @param {Map} diagramStates - the list of all known states for the diagram * @param diagramDb * @param {boolean} altFlag * @todo This duplicates some of what is done in stateDb.js extract method @@ -324,7 +329,9 @@ const setupDoc = (g, parentParsedItem, doc, diagramStates, diagramDb, altFlag) = setupNode(g, parentParsedItem, item.state1, diagramStates, diagramDb, altFlag); setupNode(g, parentParsedItem, item.state2, diagramStates, diagramDb, altFlag); const edgeData = { - id: 'edge' + graphItemCount, + id: getEdgeId(item.state1.id, item.state2.id, { + counter: graphItemCount, + }), arrowhead: 'normal', arrowTypeEnd: 'arrow_barb', style: G_EDGE_STYLE, diff --git a/packages/mermaid/src/docs/config/img/mathMLDifferences.png b/packages/mermaid/src/docs/config/img/mathMLDifferences.png new file mode 100644 index 000000000..6b7a86400 Binary files /dev/null and b/packages/mermaid/src/docs/config/img/mathMLDifferences.png differ diff --git a/packages/mermaid/src/docs/config/math.md b/packages/mermaid/src/docs/config/math.md index 22b398e08..a53dceaf2 100644 --- a/packages/mermaid/src/docs/config/math.md +++ b/packages/mermaid/src/docs/config/math.md @@ -60,3 +60,13 @@ Example with legacy mode enabled (the latest version of KaTeX's stylesheet can b ``` + +## Handling Rendering Differences + +Due to differences between default fonts across operating systems and browser's MathML implementations, inconsistent results can be seen across platforms. If having consistent results are important, or the most optimal rendered results are desired, `forceLegacyMathML` can be enabled in the config. + +This option will always use KaTeX's stylesheet instead of only when MathML is not supported (as with `legacyMathML`). Note that only `forceLegacyMathML` needs to be set. + +If including KaTeX's stylesheet is not a concern, enabling this option is recommended to avoid scenarios where no MathML implementation within a browser provides the desired output (as seen below). + +![Image showing differences between Browsers](img/mathMLDifferences.png) diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md index 95e71d626..54968471f 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations-community.md +++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md @@ -235,6 +235,8 @@ Communication tools and platforms ### Other +- [Astro](https://astro.build/) + - [Adding diagrams to your Astro site with MermaidJS and Playwright](https://agramont.net/blog/diagraming-with-mermaidjs-astro/) - [Bisheng](https://www.npmjs.com/package/bisheng) - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid) - [Blazorade Mermaid: Render Mermaid diagrams in Blazor applications](https://github.com/Blazorade/Blazorade-Mermaid/wiki) @@ -244,6 +246,7 @@ Communication tools and platforms - [Jekyll](https://jekyllrb.com/) - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid) - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams) +- [MarkChart: Preview Mermaid diagrams on macOS](https://markchart.app/) - [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic) - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server) - [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io) ✅ diff --git a/packages/mermaid/src/docs/ecosystem/mermaid-chart.md b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md index 94b6773e4..732b9b68c 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 +To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page. -Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up). - -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/intro/getting-started.md b/packages/mermaid/src/docs/intro/getting-started.md index 2bfa36bb7..574881c4f 100644 --- a/packages/mermaid/src/docs/intro/getting-started.md +++ b/packages/mermaid/src/docs/intro/getting-started.md @@ -146,7 +146,7 @@ For a list of Mermaid Plugins and Integrations, visit the [Integrations page](.. Mermaid Chart plugins are available for: -- [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt) +- [ChatGPT](https://docs.mermaidchart.com/plugins/mermaid-chart-gpt) - [JetBrains IDE](https://docs.mermaidchart.com/plugins/jetbrains-ide) - [Microsoft PowerPoint](https://docs.mermaidchart.com/plugins/microsoft-powerpoint) - [Microsoft Word](https://docs.mermaidchart.com/plugins/microsoft-word) diff --git a/packages/mermaid/src/docs/news/blog.md b/packages/mermaid/src/docs/news/blog.md index 267bd48a6..4ada1e05c 100644 --- a/packages/mermaid/src/docs/news/blog.md +++ b/packages/mermaid/src/docs/news/blog.md @@ -1,5 +1,17 @@ # 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 + +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/package.json b/packages/mermaid/src/docs/package.json index 5f6e338a0..146c4d2d8 100644 --- a/packages/mermaid/src/docs/package.json +++ b/packages/mermaid/src/docs/package.json @@ -34,7 +34,7 @@ "unplugin-vue-components": "^0.26.0", "vite": "^5.0.0", "vite-plugin-pwa": "^0.19.7", - "vitepress": "1.1.0", + "vitepress": "1.1.4", "workbox-window": "^7.0.0" } } diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index ba0e9ce9e..acffbc693 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -567,7 +567,7 @@ Examples of tooltip usage below: ```html @@ -588,7 +588,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): @@ -620,7 +620,7 @@ Beginner's tip—a full example using interactive links in a html context: