diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md index 31bac5e29..cdaf0c2ac 100644 --- a/docs/syntax/gantt.md +++ b/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\+) +#### 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`. diff --git a/docs/syntax/gitgraph.md b/docs/syntax/gitgraph.md index 9403f2a33..340a31695 100644 --- a/docs/syntax/gitgraph.md +++ b/docs/syntax/gitgraph.md @@ -918,7 +918,7 @@ Usage example: commit ``` -### Bottom to Top (`BT:`) (v\+) +### 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. diff --git a/docs/syntax/packet.md b/docs/syntax/packet.md index 3fe7b119e..5eab81910 100644 --- a/docs/syntax/packet.md +++ b/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\+) +# Packet Diagram (v11.0.0+) ## Introduction diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md index 0f0d63213..435ac7583 100644 --- a/docs/syntax/sequenceDiagram.md +++ b/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\+) | -| `<<-->>` | Dotted line with bidirectional arrowheads (v\+) | -| `-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 diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index c302e94d7..c18190982 100644 --- a/packages/mermaid/package.json +++ b/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", diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts index 6289952ea..6cc15258d 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts +++ b/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', diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md index 8497b96a1..01a9f041d 100644 --- a/packages/mermaid/src/docs/syntax/gantt.md +++ b/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\+) +#### 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`. diff --git a/packages/mermaid/src/docs/syntax/gitgraph.md b/packages/mermaid/src/docs/syntax/gitgraph.md index d0791718b..2b3f1a88b 100644 --- a/packages/mermaid/src/docs/syntax/gitgraph.md +++ b/packages/mermaid/src/docs/syntax/gitgraph.md @@ -571,7 +571,7 @@ Usage example: commit ``` -### Bottom to Top (`BT:`) (v+) +### 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. diff --git a/packages/mermaid/src/docs/syntax/packet.md b/packages/mermaid/src/docs/syntax/packet.md index 52a0de887..c7b6cb71b 100644 --- a/packages/mermaid/src/docs/syntax/packet.md +++ b/packages/mermaid/src/docs/syntax/packet.md @@ -1,4 +1,4 @@ -# Packet Diagram (v+) +# Packet Diagram (v11.0.0+) ## Introduction diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md index 249f7bde0..8826f6275 100644 --- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md +++ b/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+) | -| `<<-->>` | Dotted line with bidirectional arrowheads (v+) | -| `-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 diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts index c6ce204ba..a6ad7fa1c 100644 --- a/packages/mermaid/src/rendering-util/createText.ts +++ b/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'); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index 9546dfad4..ba87f78f5 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js +++ b/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'); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts index 9d7e5445b..f85db0f05 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts +++ b/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; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts index 11773f543..a5c963e7c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts +++ b/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 diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts index f6f3f3049..ba770ab4e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts @@ -63,7 +63,14 @@ export const question = async (parent: SVGAElement, node: Node): Promise { ) ); - 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( diff --git a/packages/mermaid/src/rendering-util/setupViewPortForSVG.ts b/packages/mermaid/src/rendering-util/setupViewPortForSVG.ts index 1fa2de1fd..e21f3304b 100644 --- a/packages/mermaid/src/rendering-util/setupViewPortForSVG.ts +++ b/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) => {