Merge branch 'develop' of https://github.com/mermaid-js/mermaid into knsv/new-shapes

.github/workflows/autofix.yml

@@ -2,6 +2,8 @@ name: autofix.ci # needed to securely identify the workflow
 
 on:
   pull_request:
+    branches-ignore:
+      - 'renovate/**'
 permissions:
   contents: read
 

docs/config/setup/interfaces/mermaid.Mermaid.md

@@ -147,7 +147,7 @@ Internal helpers for mermaid
 | `common.sanitizeTextOrArray` | (`a`: `string` \| `string`\[] \| `string`\[]\[], `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` \| `string`\[]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | `common.splitBreaks`         | (`text`: `string`) => `string`\[]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `getConfig`                  | () => [`MermaidConfig`](mermaid.MermaidConfig.md)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `insertCluster`              | (`elem`: `any`, `node`: `any`) => `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `insertCluster`              | (`elem`: `any`, `node`: `any`) => `Promise`<`any`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | `insertEdge`                 | (`elem`: `any`, `edge`: `any`, `clusterDb`: `any`, `diagramType`: `any`, `startNode`: `any`, `endNode`: `any`, `id`: `any`) => { `originalPath`: `any` ; `updatedPath`: `any` }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | `insertEdgeLabel`            | (`elem`: `any`, `edge`: `any`) => `Promise`<`any`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | `insertMarkers`              | (`elem`: `any`, `markerArray`: `any`, `type`: `any`, `id`: `any`) => `void`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
@@ -165,7 +165,7 @@ Internal helpers for mermaid
 
 ### mermaidAPI
 
-• **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.defaultConfig; `getConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.setConfig; `updateSiteConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.updateSiteConfig }>
+• **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.defaultConfig; `getConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`userOptions`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.setConfig; `updateSiteConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.updateSiteConfig }>
 
 **`Deprecated`**
 

docs/config/setup/modules/defaultConfig.md

@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/defaultConfig.ts:279](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L279)
+[packages/mermaid/src/defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266)
 
 ---
 

docs/ecosystem/integrations-community.md

@@ -56,6 +56,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
   - [SVG diagram generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
 - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
+- [MonsterWriter](https://www.monsterwriter.com/) ✅
 - [Joplin](https://joplinapp.org) ✅
 - [LiveBook](https://livebook.dev) ✅
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅

packages/mermaid/src/defaultConfig.ts

@@ -248,19 +248,6 @@ const config: RequiredDeep<MermaidConfig> = {
     ...defaultConfigJson.requirement,
     useWidth: undefined,
   },
-  gitGraph: {
-    ...defaultConfigJson.gitGraph,
-    // TODO: This is a temporary override for `gitGraph`, since every other
-    //       diagram does have `useMaxWidth`, but instead sets it to `true`.
-    //       Should we set this to `true` instead?
-    useMaxWidth: false,
-  },
-  sankey: {
-    ...defaultConfigJson.sankey,
-    // this is false, unlike every other diagram (other than gitGraph)
-    // TODO: can we make this default to `true` instead?
-    useMaxWidth: false,
-  },
   packet: {
     ...defaultConfigJson.packet,
   },

packages/mermaid/src/diagrams/requirement/requirementRenderer.js

@@ -1,11 +1,11 @@
 import { line, select } from 'd3';
 import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
+import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { log } from '../../logger.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import common from '../common/common.js';
 import markers from './requirementMarkers.js';
-import { getConfig } from '../../diagram-api/diagramAPI.js';
 
 let conf = {};
 let relCnt = 0;

packages/mermaid/src/diagrams/state/dataFetcher.js

@@ -166,43 +166,11 @@ function insertOrUpdateNode(nodes, nodeData, classes) {
  * @returns {string}
  */
 function getClassesFromDbInfo(dbInfoItem) {
-  if (dbInfoItem === undefined || dbInfoItem === null) {
+  return dbInfoItem?.classes?.join(' ') ?? '';
-    return '';
-  } else {
-    if (dbInfoItem.classes) {
-      let classStr = '';
-      // for each class in classes, add it to the string as comma separated
-      for (let i = 0; i < dbInfoItem.classes.length; i++) {
-        //do not add comma for the last class
-        if (i === dbInfoItem.classes.length - 1) {
-          classStr += dbInfoItem.classes[i];
-        }
-        //add comma for all other classes
-        else {
-          classStr += dbInfoItem.classes[i] + ' ';
-        }
-      }
-      return classStr;
-    } else {
-      return '';
-    }
-  }
 }
-/**
+
- * Get classes from the db for the info item.
- * If there aren't any or if dbInfoItem isn't defined, return an empty string.
- * Else create 1 string from the list of classes found
- */
 function getStylesFromDbInfo(dbInfoItem) {
-  if (dbInfoItem === undefined || dbInfoItem === null) {
+  return dbInfoItem?.styles ?? [];
-    return;
-  } else {
-    if (dbInfoItem.styles) {
-      return dbInfoItem.styles;
-    } else {
-      return [];
-    }
-  }
 }
 
 export const dataFetcher = (
@@ -224,10 +192,10 @@ export const dataFetcher = (
 
   if (itemId !== 'root') {
     let shape = SHAPE_STATE;
+    // The if === true / false can be removed if we can guarantee that the parsedItem.start is always a boolean
     if (parsedItem.start === true) {
       shape = SHAPE_START;
-    }
+    } else if (parsedItem.start === false) {
-    if (parsedItem.start === false) {
       shape = SHAPE_END;
     }
     if (parsedItem.type !== DEFAULT_STATE_TYPE) {

packages/mermaid/src/diagrams/timeline/parser/timeline.jison

@@ -18,7 +18,7 @@
 \#[^\n]*                /* skip comments */
 
 "timeline"               return 'timeline';
-"title"\s[^#\n;]+       return 'title';
+"title"\s[^\n]+       return 'title';
 accTitle\s*":"\s*                                               { this.begin("acc_title");return 'acc_title'; }
 <acc_title>(?!\n|;|#)*[^\n]*                                    { this.popState(); return "acc_title_value"; }
 accDescr\s*":"\s*                                               { this.begin("acc_descr");return 'acc_descr'; }
@@ -26,11 +26,11 @@ accDescr\s*":"\s*                                               { this.begin("ac
 accDescr\s*"{"\s*                                { this.begin("acc_descr_multiline");}
 <acc_descr_multiline>[\}]                       { this.popState(); }
 <acc_descr_multiline>[^\}]*                     return "acc_descr_multiline_value";
-"section"\s[^#:\n;]+    return 'section';
+"section"\s[^:\n]+    return 'section';
 
 // event starting with "==>" keyword
-":"\s[^#:\n;]+        return 'event';
+":"\s[^:\n]+        return 'event';
-[^#:\n;]+               return 'period';
+[^#:\n]+               return 'period';
 
 
 <<EOF>>                 return 'EOF';

packages/mermaid/src/diagrams/timeline/timeline.spec.js

@@ -1,6 +1,7 @@
+import { setLogLevel } from '../../diagram-api/diagramAPI.js';
+import * as commonDb from '../common/commonDb.js';
 import { parser as timeline } from './parser/timeline.jison';
 import * as timelineDB from './timelineDb.js';
-import { setLogLevel } from '../../diagram-api/diagramAPI.js';
 
 describe('when parsing a timeline ', function () {
   beforeEach(function () {
@@ -9,7 +10,7 @@ describe('when parsing a timeline ', function () {
     setLogLevel('trace');
   });
   describe('Timeline', function () {
-    it('TL-1 should handle a simple section definition abc-123', function () {
+    it('should handle a simple section definition abc-123', function () {
       let str = `timeline
     section abc-123`;
 
@@ -17,7 +18,7 @@ describe('when parsing a timeline ', function () {
       expect(timelineDB.getSections()).to.deep.equal(['abc-123']);
     });
 
-    it('TL-2 should handle a simple section and only two tasks', function () {
+    it('should handle a simple section and only two tasks', function () {
       let str = `timeline
     section abc-123
     task1
@@ -29,7 +30,7 @@ describe('when parsing a timeline ', function () {
       });
     });
 
-    it('TL-3 should handle a two section and two coressponding tasks', function () {
+    it('should handle a two section and two coressponding tasks', function () {
       let str = `timeline
     section abc-123
     task1
@@ -50,7 +51,7 @@ describe('when parsing a timeline ', function () {
       });
     });
 
-    it('TL-4 should handle a section, and task and its events', function () {
+    it('should handle a section, and task and its events', function () {
       let str = `timeline
     section abc-123
       task1: event1
@@ -74,7 +75,7 @@ describe('when parsing a timeline ', function () {
       });
     });
 
-    it('TL-5 should handle a section, and task and its multi line events', function () {
+    it('should handle a section, and task and its multi line events', function () {
       let str = `timeline
     section abc-123
       task1: event1
@@ -98,5 +99,42 @@ describe('when parsing a timeline ', function () {
         }
       });
     });
+
+    it('should handle a title, section, task, and events with semicolons', function () {
+      let str = `timeline
+      title ;my;title;
+      section ;a;bc-123;
+      ;ta;sk1;: ;ev;ent1; : ;ev;ent2; : ;ev;ent3;
+   `;
+      timeline.parse(str);
+      expect(commonDb.getDiagramTitle()).equal(';my;title;');
+      expect(timelineDB.getSections()).to.deep.equal([';a;bc-123;']);
+      expect(timelineDB.getTasks()[0].events).toMatchInlineSnapshot(`
+        [
+          ";ev;ent1; ",
+          ";ev;ent2; ",
+          ";ev;ent3;",
+        ]
+      `);
+    });
+
+    it('should handle a title, section, task, and events with hashtags', function () {
+      let str = `timeline
+      title #my#title#
+      section #a#bc-123#
+      task1: #ev#ent1# : #ev#ent2# : #ev#ent3#
+   `;
+      timeline.parse(str);
+      expect(commonDb.getDiagramTitle()).equal('#my#title#');
+      expect(timelineDB.getSections()).to.deep.equal(['#a#bc-123#']);
+      expect(timelineDB.getTasks()[0].task).equal('task1');
+      expect(timelineDB.getTasks()[0].events).toMatchInlineSnapshot(`
+        [
+          "#ev#ent1# ",
+          "#ev#ent2# ",
+          "#ev#ent3#",
+        ]
+      `);
+    });
   });
 });

packages/mermaid/src/docs/ecosystem/integrations-community.md

@@ -51,6 +51,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
   - [SVG diagram generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
 - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
+- [MonsterWriter](https://www.monsterwriter.com/) ✅
 - [Joplin](https://joplinapp.org) ✅
 - [LiveBook](https://livebook.dev) ✅
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅

packages/mermaid/src/mermaidAPI.ts

@@ -25,6 +25,7 @@ import { preprocessDiagram } from './preprocess.js';
 import { decodeEntities } from './utils.js';
 import { toBase64 } from './utils/base64.js';
 import type { D3Element, ParseOptions, ParseResult, RenderResult } from './types.js';
+import assignWithDepth from './assignWithDepth.js';
 
 const MAX_TEXTLENGTH = 50_000;
 const MAX_TEXTLENGTH_EXCEEDED_MSG =
@@ -473,9 +474,10 @@ const render = async function (
 };
 
 /**
- * @param  options - Initial Mermaid options
+ * @param  userOptions - Initial Mermaid options
  */
-function initialize(options: MermaidConfig = {}) {
+function initialize(userOptions: MermaidConfig = {}) {
+  const options = assignWithDepth({}, userOptions);
   // Handle legacy location of font-family configuration
   if (options?.fontFamily && !options.themeVariables?.fontFamily) {
     if (!options.themeVariables) {

packages/mermaid/src/styles.ts

@@ -70,6 +70,9 @@ const getStyles = (
     font-family: ${options.fontFamily};
     font-size: ${options.fontSize};
   }
+   & p {
+    margin: 0
+   }
 
   ${diagramStyles}