Merge branch 'develop' into docs/2910_update-contributing-guidelines

mermaid-js · Jan 15, 2024 · 36fdff8 · 36fdff8
2 parents bafb991 + dc857f8
commit 36fdff8
Show file tree

Hide file tree

Showing 19 changed files with 46 additions and 227 deletions.
diff --git a/.github/workflows/e2e-applitools.yml b/.github/workflows/e2e-applitools.yml
@@ -28,7 +28,7 @@ jobs:
       - if: ${{ ! env.USE_APPLI }}
         name: Warn if not using Applitools
         run: |
-          echo "::error,title=Not using Applitols::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
+          echo "::error,title=Not using Applitools::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
 
       - uses: actions/checkout@v4
 

diff --git a/.github/workflows/release-draft.yml b/.github/workflows/release-draft.yml
@@ -3,7 +3,7 @@ name: Draft Release
 on:
   push:
     branches:
-      - develop
+      - master
 
 permissions:
   contents: read

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -886,93 +886,4 @@ end
       });
     });
   });
-  describe('Subgraph title margins', () => {
-    it('Should render subgraphs with title margins set (LR)', () => {
-      imgSnapshotTest(
-        `flowchart LR
-
-          subgraph TOP
-              direction TB
-              subgraph B1
-                  direction RL
-                  i1 -->f1
-              end
-              subgraph B2
-                  direction BT
-                  i2 -->f2
-              end
-          end
-          A --> TOP --> B
-          B1 --> B2
-        `,
-        { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
-      );
-    });
-    it('Should render subgraphs with title margins set (TD)', () => {
-      imgSnapshotTest(
-        `flowchart TD
-
-          subgraph TOP
-              direction LR
-              subgraph B1
-                  direction RL
-                  i1 -->f1
-              end
-              subgraph B2
-                  direction BT
-                  i2 -->f2
-              end
-          end
-          A --> TOP --> B
-          B1 --> B2
-        `,
-        { flowchart: { subGraphTitleMargin: { top: 8, bottom: 16 } } }
-      );
-    });
-    it('Should render subgraphs with title margins set (LR) and htmlLabels set to false', () => {
-      imgSnapshotTest(
-        `flowchart LR
-
-          subgraph TOP
-              direction TB
-              subgraph B1
-                  direction RL
-                  i1 -->f1
-              end
-              subgraph B2
-                  direction BT
-                  i2 -->f2
-              end
-          end
-          A --> TOP --> B
-          B1 --> B2
-        `,
-        {
-          htmlLabels: false,
-          flowchart: { htmlLabels: false, subGraphTitleMargin: { top: 10, bottom: 5 } },
-        }
-      );
-    });
-    it('Should render subgraphs with title margins and edge labels', () => {
-      imgSnapshotTest(
-        `flowchart LR
-
-          subgraph TOP
-              direction TB
-              subgraph B1
-                  direction RL
-                  i1 --lb1-->f1
-              end
-              subgraph B2
-                  direction BT
-                  i2 --lb2-->f2
-              end
-          end
-          A --lb3--> TOP --lb4--> B
-          B1 --lb5--> B2
-        `,
-        { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
-      );
-    });
-  });
 });
diff --git a/demos/sequence.html b/demos/sequence.html
@@ -164,13 +164,6 @@ <h1>Sequence diagram demos</h1>
       end
     </pre>
 
-    <pre class="mermaid">
-    sequenceDiagram
-      actor Alice
-      actor John
-      Alice-xJohn: Hello John, how are you?
-      John--xAlice: Great!
-    </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({

diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
@@ -459,9 +459,9 @@ The different cardinality options are :
 - `0..1` Zero or One
 - `1..*` One or more
 - `*` Many
-- `n` n {where n>1}
-- `0..n` zero to n {where n>1}
-- `1..n` one to n {where n>1}
+- `n` n (where n>1)
+- `0..n` zero to n (where n>1)
+- `1..n` one to n (where n>1)
 
 Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:
 
@@ -766,7 +766,7 @@ Beginner's tip—a full example using interactive links in an HTML page:
 
 ## Styling
 
-### Styling a node (v\<MERMAID_RELEASE_VERSION>+)
+### Styling a node (v10.7.0+)
 
 It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.
 

diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md
@@ -137,7 +137,7 @@ If an error of the following type occurs when creating or deleting an actor/part
 
 > The destroyed participant **participant-name** does not have an associated destroying message after its declaration. Please check the sequence diagram.
 
-And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v\<MERMAID_RELEASE_VERSION>+).
+And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v10.7.0+).
 
 ### Grouping / Box
 

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.6.1",
+  "version": "10.7.0",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
@@ -1416,14 +1416,6 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
    * Margin top for the text over the diagram
    */
   titleTopMargin?: number;
-  /**
-   * Defines a top/bottom margin for subgraph titles
-   *
-   */
-  subGraphTitleMargin?: {
-    top?: number;
-    bottom?: number;
-  };
   arrowMarkerAbsolute?: boolean;
   /**
    * The amount of padding around the diagram as a whole so that embedded

diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js
@@ -5,11 +5,9 @@ import { createText } from '../rendering-util/createText.js';
 import { select } from 'd3';
 import { getConfig } from '../diagram-api/diagramAPI.js';
 import { evaluate } from '../diagrams/common/common.js';
-import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
 
 const rect = (parent, node) => {
   log.info('Creating subgraph rect for ', node.id, node);
-  const siteConfig = getConfig();
 
   // Add outer g element
   const shapeSvg = parent
@@ -20,7 +18,7 @@ const rect = (parent, node) => {
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
-  const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);
+  const useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
 
   // Create the label and insert it after the rect
   const label = shapeSvg.insert('g').attr('class', 'cluster-label');
@@ -36,7 +34,7 @@ const rect = (parent, node) => {
   // Get the size of the label
   let bbox = text.getBBox();
 
-  if (evaluate(siteConfig.flowchart.htmlLabels)) {
+  if (evaluate(getConfig().flowchart.htmlLabels)) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();
@@ -65,18 +63,17 @@ const rect = (parent, node) => {
     .attr('width', width)
     .attr('height', node.height + padding);
 
-  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
   if (useHtmlLabels) {
     label.attr(
       'transform',
       // This puts the labal on top of the box instead of inside it
-      `translate(${node.x - bbox.width / 2}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
+      'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')'
     );
   } else {
     label.attr(
       'transform',
       // This puts the labal on top of the box instead of inside it
-      `translate(${node.x}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
+      'translate(' + node.x + ', ' + (node.y - node.height / 2) + ')'
     );
   }
   // Center the label
@@ -130,8 +127,6 @@ const noteGroup = (parent, node) => {
   return shapeSvg;
 };
 const roundedWithTitle = (parent, node) => {
-  const siteConfig = getConfig();
-
   // Add outer g element
   const shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id);
 
@@ -148,7 +143,7 @@ const roundedWithTitle = (parent, node) => {
 
   // Get the size of the label
   let bbox = text.getBBox();
-  if (evaluate(siteConfig.flowchart.htmlLabels)) {
+  if (evaluate(getConfig().flowchart.htmlLabels)) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();
@@ -180,7 +175,6 @@ const roundedWithTitle = (parent, node) => {
     .attr('width', width + padding)
     .attr('height', node.height + padding - bbox.height - 3);
 
-  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
   // Center the label
   label.attr(
     'transform',
@@ -190,8 +184,7 @@ const roundedWithTitle = (parent, node) => {
       (node.y -
         node.height / 2 -
         node.padding / 3 +
-        (evaluate(siteConfig.flowchart.htmlLabels) ? 5 : 3)) +
-      subGraphTitleTopMargin +
+        (evaluate(getConfig().flowchart.htmlLabels) ? 5 : 3)) +
       ')'
   );
 

diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -6,7 +6,6 @@ import { getConfig } from '../diagram-api/diagramAPI.js';
 import utils from '../utils.js';
 import { evaluate } from '../diagrams/common/common.js';
 import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
-import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
 import { addEdgeMarkers } from './edgeMarker.js';
 
 let edgeLabels = {};
@@ -137,8 +136,6 @@ function setTerminalWidth(fo, value) {
 export const positionEdgeLabel = (edge, paths) => {
   log.info('Moving label abc78 ', edge.id, edge.label, edgeLabels[edge.id]);
   let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
-  const siteConfig = getConfig();
-  const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
   if (edge.label) {
     const el = edgeLabels[edge.id];
     let x = edge.x;
@@ -162,7 +159,7 @@ export const positionEdgeLabel = (edge, paths) => {
         y = pos.y;
       }
     }
-    el.attr('transform', `translate(${x}, ${y + subGraphTitleTotalMargin / 2})`);
+    el.attr('transform', 'translate(' + x + ', ' + y + ')');
   }
 
   //let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
@@ -176,7 +173,7 @@ export const positionEdgeLabel = (edge, paths) => {
       x = pos.x;
       y = pos.y;
     }
-    el.attr('transform', `translate(${x}, ${y})`);
+    el.attr('transform', 'translate(' + x + ', ' + y + ')');
   }
   if (edge.startLabelRight) {
     const el = terminalLabels[edge.id].startRight;
@@ -192,7 +189,7 @@ export const positionEdgeLabel = (edge, paths) => {
       x = pos.x;
       y = pos.y;
     }
-    el.attr('transform', `translate(${x}, ${y})`);
+    el.attr('transform', 'translate(' + x + ', ' + y + ')');
   }
   if (edge.endLabelLeft) {
     const el = terminalLabels[edge.id].endLeft;
@@ -204,7 +201,7 @@ export const positionEdgeLabel = (edge, paths) => {
       x = pos.x;
       y = pos.y;
     }
-    el.attr('transform', `translate(${x}, ${y})`);
+    el.attr('transform', 'translate(' + x + ', ' + y + ')');
   }
   if (edge.endLabelRight) {
     const el = terminalLabels[edge.id].endRight;
@@ -216,7 +213,7 @@ export const positionEdgeLabel = (edge, paths) => {
       x = pos.x;
       y = pos.y;
     }
-    el.attr('transform', `translate(${x}, ${y})`);
+    el.attr('transform', 'translate(' + x + ', ' + y + ')');
   }
 };