Merge branch 'master' into develop

docs/syntax/gantt.md

@@ -172,7 +172,7 @@ The `title` is an _optional_ string to be displayed at the top of the Gantt char
 The `excludes` is an _optional_ attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".
 These date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of 'skipped' days will be added to the end of the task to ensure the duration is as specified in the code.
 
-#### Weekend (v\<MERMAID_RELEASE_VERSION>+)
+#### Weekend (v\11.0.0+)
 
 When excluding weekends, it is possible to configure the weekends to be either Friday and Saturday or Saturday and Sunday. By default weekends are Saturday and Sunday.
 To define the weekend start day, there is an _optional_ attribute `weekend` that can be added in a new line followed by either `friday` or `saturday`.

docs/syntax/gitgraph.md

@@ -918,7 +918,7 @@ Usage example:
        commit
 ```
 
-### Bottom to Top (`BT:`) (v\<MERMAID_RELEASE_VERSION>+)
+### Bottom to Top (`BT:`) (v11.0.0+)
 
 In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side.
 

docs/syntax/packet.md

@@ -4,7 +4,7 @@
 >
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/packet.md](../../packages/mermaid/src/docs/syntax/packet.md).
 
-# Packet Diagram (v\<MERMAID_RELEASE_VERSION>+)
+# Packet Diagram (v11.0.0+)
 
 ## Introduction
 

docs/syntax/sequenceDiagram.md

@@ -208,18 +208,18 @@ Messages can be of two displayed either solid or with a dotted line.
 
 There are ten types of arrows currently supported:
 
-| Type     | Description                                                              |
-| -------- | ------------------------------------------------------------------------ |
-| `->`     | Solid line without arrow                                                 |
-| `-->`    | Dotted line without arrow                                                |
-| `->>`    | Solid line with arrowhead                                                |
-| `-->>`   | Dotted line with arrowhead                                               |
-| `<<->>`  | Solid line with bidirectional arrowheads (v\<MERMAID_RELEASE_VERSION>+)  |
-| `<<-->>` | Dotted line with bidirectional arrowheads (v\<MERMAID_RELEASE_VERSION>+) |
-| `-x`     | Solid line with a cross at the end                                       |
-| `--x`    | Dotted line with a cross at the end.                                     |
-| `-)`     | Solid line with an open arrow at the end (async)                         |
-| `--)`    | Dotted line with a open arrow at the end (async)                         |
+| Type     | Description                                          |
+| -------- | ---------------------------------------------------- |
+| `->`     | Solid line without arrow                             |
+| `-->`    | Dotted line without arrow                            |
+| `->>`    | Solid line with arrowhead                            |
+| `-->>`   | Dotted line with arrowhead                           |
+| `<<->>`  | Solid line with bidirectional arrowheads (v11.0.0+)  |
+| `<<-->>` | Dotted line with bidirectional arrowheads (v11.0.0+) |
+| `-x`     | Solid line with a cross at the end                   |
+| `--x`    | Dotted line with a cross at the end.                 |
+| `-)`     | Solid line with an open arrow at the end (async)     |
+| `--)`    | Dotted line with a open arrow at the end (async)     |
 
 ## Activations
 

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "11.0.0-alpha.7",
+  "version": "11.0.0",
   "description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",

packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts

@@ -54,7 +54,7 @@ export const draw = async function (text: string, id: string, _version: string,
   data4Layout.diagramId = id;
   log.debug('REF1:', data4Layout);
   await render(data4Layout, svg);
-  const padding = data4Layout.config.flowchart?.padding ?? 8;
+  const padding = data4Layout.config.flowchart?.diagramPadding ?? 8;
   utils.insertTitle(
     svg,
     'flowchartTitleText',

packages/mermaid/src/docs/syntax/gantt.md

@@ -114,7 +114,7 @@ The `title` is an _optional_ string to be displayed at the top of the Gantt char
 The `excludes` is an _optional_ attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".
 These date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of 'skipped' days will be added to the end of the task to ensure the duration is as specified in the code.
 
-#### Weekend (v\<MERMAID_RELEASE_VERSION>+)
+#### Weekend (v\11.0.0+)
 
 When excluding weekends, it is possible to configure the weekends to be either Friday and Saturday or Saturday and Sunday. By default weekends are Saturday and Sunday.
 To define the weekend start day, there is an _optional_ attribute `weekend` that can be added in a new line followed by either `friday` or `saturday`.

packages/mermaid/src/docs/syntax/gitgraph.md

@@ -571,7 +571,7 @@ Usage example:
        commit
 ```
 
-### Bottom to Top (`BT:`) (v<MERMAID_RELEASE_VERSION>+)
+### Bottom to Top (`BT:`) (v11.0.0+)
 
 In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side.
 

packages/mermaid/src/docs/syntax/packet.md

@@ -1,4 +1,4 @@
-# Packet Diagram (v<MERMAID_RELEASE_VERSION>+)
+# Packet Diagram (v11.0.0+)
 
 ## Introduction
 

packages/mermaid/src/docs/syntax/sequenceDiagram.md

@@ -143,18 +143,18 @@ Messages can be of two displayed either solid or with a dotted line.
 
 There are ten types of arrows currently supported:
 
-| Type     | Description                                                             |
-| -------- | ----------------------------------------------------------------------- |
-| `->`     | Solid line without arrow                                                |
-| `-->`    | Dotted line without arrow                                               |
-| `->>`    | Solid line with arrowhead                                               |
-| `-->>`   | Dotted line with arrowhead                                              |
-| `<<->>`  | Solid line with bidirectional arrowheads (v<MERMAID_RELEASE_VERSION>+)  |
-| `<<-->>` | Dotted line with bidirectional arrowheads (v<MERMAID_RELEASE_VERSION>+) |
-| `-x`     | Solid line with a cross at the end                                      |
-| `--x`    | Dotted line with a cross at the end.                                    |
-| `-)`     | Solid line with an open arrow at the end (async)                        |
-| `--)`    | Dotted line with a open arrow at the end (async)                        |
+| Type     | Description                                          |
+| -------- | ---------------------------------------------------- |
+| `->`     | Solid line without arrow                             |
+| `-->`    | Dotted line without arrow                            |
+| `->>`    | Solid line with arrowhead                            |
+| `-->>`   | Dotted line with arrowhead                           |
+| `<<->>`  | Solid line with bidirectional arrowheads (v11.0.0+)  |
+| `<<-->>` | Dotted line with bidirectional arrowheads (v11.0.0+) |
+| `-x`     | Solid line with a cross at the end                   |
+| `--x`    | Dotted line with a cross at the end.                 |
+| `-)`     | Solid line with an open arrow at the end (async)     |
+| `--)`    | Dotted line with a open arrow at the end (async)     |
 
 ## Activations
 

packages/mermaid/src/rendering-util/createText.ts

@@ -36,6 +36,7 @@ async function addHtmlSpan(element, node, width, classes, addBackground = false)
   div.style('white-space', 'nowrap');
   div.style('line-height', '1.5');
   div.style('max-width', width + 'px');
+  div.style('text-align', 'center');
   div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
   if (addBackground) {
     div.attr('class', 'labelBkg');

packages/mermaid/src/rendering-util/rendering-elements/clusters.js

@@ -19,7 +19,7 @@ const rect = async (parent, node) => {
   const { themeVariables, handDrawnSeed } = siteConfig;
   const { clusterBkg, clusterBorder } = themeVariables;
 
-  const { labelStyles, nodeStyles } = styles2String(node);
+  const { labelStyles, nodeStyles, borderStyles, backgroundStyles } = styles2String(node);
 
   // Add outer g element
   const shapeSvg = parent
@@ -79,6 +79,9 @@ const rect = async (parent, node) => {
       log.debug('Rough node insert CXC', roughNode);
       return roughNode;
     }, ':first-child');
+    // Should we affect the options instead of doing this?
+    rect.select('path:nth-child(2)').attr('style', borderStyles.join(';'));
+    rect.select('path').attr('style', backgroundStyles.join(';').replace('fill', 'stroke'));
   } else {
     // add the rect
     rect = shapeSvg.insert('rect', ':first-child');

packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts

@@ -103,7 +103,7 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
           Math.abs(pos.y - (node.y ?? 0)) > (node.height ?? 0) / 2 - ry))
     ) {
       let y = ry * ry * (1 - (x * x) / (rx * rx));
-      if (y != 0) {
+      if (y > 0) {
         y = Math.sqrt(y);
       }
       y = ry - y;

packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts

@@ -37,6 +37,8 @@ export const styles2String = (node: Node) => {
   const { stylesArray } = compileStyles(node);
   const labelStyles: string[] = [];
   const nodeStyles: string[] = [];
+  const borderStyles: string[] = [];
+  const backgroundStyles: string[] = [];
 
   stylesArray.forEach((style) => {
     const key = style[0];
@@ -63,10 +65,22 @@ export const styles2String = (node: Node) => {
       labelStyles.push(style.join(':') + ' !important');
     } else {
       nodeStyles.push(style.join(':') + ' !important');
+      if (key.includes('stroke')) {
+        borderStyles.push(style.join(':') + ' !important');
+      }
+      if (key === 'fill') {
+        backgroundStyles.push(style.join(':') + ' !important');
+      }
     }
   });
 
-  return { labelStyles: labelStyles.join(';'), nodeStyles: nodeStyles.join(';') };
+  return {
+    labelStyles: labelStyles.join(';'),
+    nodeStyles: nodeStyles.join(';'),
+    stylesArray,
+    borderStyles,
+    backgroundStyles,
+  };
 };
 
 // Striped fill like start or fork nodes in state diagrams

packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts

@@ -63,7 +63,14 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
   updateNodeBounds(node, polygon);
 
   node.intersect = function (point) {
-    log.info('Intersect called SPLIT');
+    log.debug(
+      'APA12 Intersect called SPLIT\npoint:',
+      point,
+      '\nnode:\n',
+      node,
+      '\nres:',
+      intersect.polygon(node, points, point)
+    );
     return intersect.polygon(node, points, point);
   };
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts

@@ -62,13 +62,13 @@ export const rectWithTitle = async (parent: SVGElement, node: Node) => {
       )
     );
 
-  if (evaluate(getConfig()?.flowchart?.htmlLabels)) {
-    const div = descr.children[0];
-    const dv = select(descr);
-    bbox = div.getBoundingClientRect();
-    dv.attr('width', bbox.width);
-    dv.attr('height', bbox.height);
-  }
+  //if (evaluate(getConfig()?.flowchart?.htmlLabels)) {
+  const div = descr.children[0];
+  const dv = select(descr);
+  bbox = div.getBoundingClientRect();
+  dv.attr('width', bbox.width);
+  dv.attr('height', bbox.height);
+  // }
 
   const halfPadding = (node.padding || 0) / 2;
   select(descr).attr(

packages/mermaid/src/rendering-util/setupViewPortForSVG.ts

@@ -22,7 +22,7 @@ export const setupViewPortForSVG = (
   svg.attr('viewBox', viewBox);
 
   // Log the viewBox configuration for debugging
-  log.debug(`viewBox configured: ${viewBox}`);
+  log.debug(`viewBox configured: ${viewBox} with padding: ${padding}`);
 };
 
 const calculateDimensionsWithPadding = (svg: SVG, padding: number) => {