From a9d317f997a160cd5bff872549647a20b104c1f2 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 22 Aug 2024 16:52:02 +0530 Subject: [PATCH 01/11] docs: Update release version --- docs/syntax/gantt.md | 2 +- docs/syntax/gitgraph.md | 2 +- docs/syntax/packet.md | 2 +- docs/syntax/sequenceDiagram.md | 2 +- packages/mermaid/src/docs/syntax/gantt.md | 2 +- packages/mermaid/src/docs/syntax/gitgraph.md | 2 +- packages/mermaid/src/docs/syntax/packet.md | 2 +- packages/mermaid/src/docs/syntax/sequenceDiagram.md | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md index 31bac5e29a..cdaf0c2acd 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 9403f2a334..340a316952 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 3fe7b119e8..5eab819105 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 0f0d632138..63c5e9393a 100644 --- a/docs/syntax/sequenceDiagram.md +++ b/docs/syntax/sequenceDiagram.md @@ -214,7 +214,7 @@ There are ten types of arrows currently supported: | `-->` | Dotted line without arrow | | `->>` | Solid line with arrowhead | | `-->>` | Dotted line with arrowhead | -| `<<->>` | Solid line with bidirectional arrowheads (v\+) | +| `<<->>` | Solid line with bidirectional arrowheads (v11.0.0+) | | `<<-->>` | Dotted line with bidirectional arrowheads (v\+) | | `-x` | Solid line with a cross at the end | | `--x` | Dotted line with a cross at the end. | diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md index 8497b96a13..01a9f041dd 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 d0791718b8..2b3f1a88b0 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 52a0de8873..c7b6cb71b4 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 249f7bde03..050b6991cd 100644 --- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md +++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md @@ -149,7 +149,7 @@ There are ten types of arrows currently supported: | `-->` | Dotted line without arrow | | `->>` | Solid line with arrowhead | | `-->>` | Dotted line with arrowhead | -| `<<->>` | Solid line with bidirectional arrowheads (v+) | +| `<<->>` | Solid line with bidirectional arrowheads (v11.0.0+) | | `<<-->>` | Dotted line with bidirectional arrowheads (v+) | | `-x` | Solid line with a cross at the end | | `--x` | Dotted line with a cross at the end. | From 4665b6bf154c69ca670356c9c9da0f1d8b007879 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 22 Aug 2024 16:54:40 +0530 Subject: [PATCH 02/11] docs: Update release version --- docs/syntax/sequenceDiagram.md | 24 +++++++++---------- .../src/docs/syntax/sequenceDiagram.md | 24 +++++++++---------- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md index 63c5e9393a..435ac75834 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 (v11.0.0+) | -| `<<-->>` | 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/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md index 050b6991cd..8826f62756 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 (v11.0.0+) | -| `<<-->>` | 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 From 19d46fc823915d2b672868ea127cbd29031468a6 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 22 Aug 2024 16:29:23 +0200 Subject: [PATCH 03/11] #5237 Fix for weird line intersection --- .../rendering-elements/edges.js | 29 ++++++++++--------- .../rendering-elements/shapes/question.ts | 9 +++++- 2 files changed, 24 insertions(+), 14 deletions(-) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index 087fcf0bec..0502da0979 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -429,19 +429,22 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod const tail = startNode; var head = endNode; - if (head.intersect && tail.intersect) { - points = points.slice(1, edge.points.length - 1); - points.unshift(tail.intersect(points[0])); - log.debug( - 'Last point APA12', - edge.start, - '-->', - edge.end, - points[points.length - 1], - head, - head.intersect(points[points.length - 1]) - ); - points.push(head.intersect(points[points.length - 1])); + if (head.intersect && tail.intersect && points.length > 2) { + const initialStartPoint = Object.assign({}, points[0]); + const newEnd = head.intersect(points[points.length - 2]); + + const newStart = tail.intersect(points[1]); + if (newStart.x && newStart.y) { + points.unshift(newStart); + } else { + points.unshift(initialStartPoint); + } + if (newEnd.x && newEnd.y) { + const lastPoint = points[points.length - 1]; + if (lastPoint.x !== newEnd.x && lastPoint.y !== newEnd.y) { + points.push(newEnd); + } + } } if (edge.toCluster) { log.info('to cluster abc88', clusterDb.get(edge.toCluster)); 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 f6f3f30498..ba770ab4e0 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 Date: Thu, 22 Aug 2024 17:52:48 +0200 Subject: [PATCH 04/11] Fix for text alignment issue --- packages/mermaid/src/rendering-util/createText.ts | 1 + .../rendering-elements/shapes/rectWithTitle.ts | 14 +++++++------- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts index c6ce204ba2..a6ad7fa1c0 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/shapes/rectWithTitle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts index 43ce708d84..857e60b8b0 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts +++ b/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( From 09afb077f05f7b57a5639d8826e527d998a2bed5 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 23 Aug 2024 08:24:36 +0200 Subject: [PATCH 05/11] Basic fix for handdrawn subgraph styling --- .../rendering-elements/clusters.js | 5 ++++- .../shapes/handDrawnShapeStyles.ts | 16 +++++++++++++++- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index 9546dfad47..ba87f78f53 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/handDrawnShapeStyles.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts index 11773f5434..3840244e95 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 === 'stroke' || key === 'stroke-width') { + 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 From 46b7ee87dd2d681fc830237376845cb14ca9a53a Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 23 Aug 2024 09:42:02 +0200 Subject: [PATCH 06/11] Fix for turned arrow heads and missing edge sections --- .../rendering-elements/edges.js | 29 +++++++++---------- .../rendering-elements/shapes/cylinder.ts | 2 +- .../shapes/handDrawnShapeStyles.ts | 2 +- 3 files changed, 15 insertions(+), 18 deletions(-) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index 0502da0979..087fcf0bec 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -429,22 +429,19 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod const tail = startNode; var head = endNode; - if (head.intersect && tail.intersect && points.length > 2) { - const initialStartPoint = Object.assign({}, points[0]); - const newEnd = head.intersect(points[points.length - 2]); - - const newStart = tail.intersect(points[1]); - if (newStart.x && newStart.y) { - points.unshift(newStart); - } else { - points.unshift(initialStartPoint); - } - if (newEnd.x && newEnd.y) { - const lastPoint = points[points.length - 1]; - if (lastPoint.x !== newEnd.x && lastPoint.y !== newEnd.y) { - points.push(newEnd); - } - } + if (head.intersect && tail.intersect) { + points = points.slice(1, edge.points.length - 1); + points.unshift(tail.intersect(points[0])); + log.debug( + 'Last point APA12', + edge.start, + '-->', + edge.end, + points[points.length - 1], + head, + head.intersect(points[points.length - 1]) + ); + points.push(head.intersect(points[points.length - 1])); } if (edge.toCluster) { log.info('to cluster abc88', clusterDb.get(edge.toCluster)); 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 9d7e5445b9..f85db0f05e 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 3840244e95..a5c963e7cc 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts @@ -65,7 +65,7 @@ export const styles2String = (node: Node) => { labelStyles.push(style.join(':') + ' !important'); } else { nodeStyles.push(style.join(':') + ' !important'); - if (key === 'stroke' || key === 'stroke-width') { + if (key.includes('stroke')) { borderStyles.push(style.join(':') + ' !important'); } if (key === 'fill') { From 48fd76e076603dc6b96acde33f7e6c61c3a68d08 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 23 Aug 2024 10:35:14 +0200 Subject: [PATCH 07/11] Fix for selecting the correct diagramPadding for flowcharts --- .../mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts | 2 +- packages/mermaid/src/rendering-util/setupViewPortForSVG.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts index 6289952ea0..6cc15258d4 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/rendering-util/setupViewPortForSVG.ts b/packages/mermaid/src/rendering-util/setupViewPortForSVG.ts index 1fa2de1fd4..e21f3304b3 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) => { From efba4c18d1c1874a6d72a3e3981f32636db931c2 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 23 Aug 2024 12:08:09 +0200 Subject: [PATCH 08/11] Updating syntax reference with code showing how to select layout and look. --- docs/intro/syntax-reference.md | 100 +++++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) diff --git a/docs/intro/syntax-reference.md b/docs/intro/syntax-reference.md index 00330f21d0..3c7104d7f7 100644 --- a/docs/intro/syntax-reference.md +++ b/docs/intro/syntax-reference.md @@ -83,3 +83,103 @@ Allows for the limited reconfiguration of a diagram just before it is rendered. ### [Theme Manipulation](../config/theming.md) An application of using Directives to change [Themes](../config/theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams. + +### Layout and look + +We've restructured how Mermaid renders diagrams, enabling new features like selecting layout and look. **Currently, this is supported for flowcharts and state diagrams**, with plans to extend support to all diagram types. + +### Selecting Diagram Looks + +Mermaid offers a variety of styles or “looks” for your diagrams, allowing you to tailor the visual appearance to match your specific needs or preferences. Whether you prefer a hand-drawn or classic style, you can easily customize your diagrams. + +**Available Looks:** + + • Hand-Drawn Look: For a more personal, creative touch, the hand-drawn look brings a sketch-like quality to your diagrams. This style is perfect for informal settings or when you want to add a bit of personality to your diagrams. + • Classic Look: If you prefer the traditional Mermaid style, the classic look maintains the original appearance that many users are familiar with. It’s great for consistency across projects or when you want to keep the familiar aesthetic. + +**How to Select a Look:** + +You can select a look by adding the look parameter in the metadata section of your Mermaid diagram code. Here’s an example: +```mermaid +--- +config: + look: handDrawn + theme: neutral +--- +flowchart LR + A[Start] --> B{Decision} + B -->|Yes| C[Continue] + B -->|No| D[Stop] +``` + +#### Selecting Layout Algorithms + +In addition to customizing the look of your diagrams, Mermaid Chart now allows you to choose different layout algorithms to better organize and present your diagrams, especially when dealing with more complex structures. The layout algorithm dictates how nodes and edges are arranged on the page. + +#### Supported Layout Algorithms: + + • Dagre (default): This is the classic layout algorithm that has been used in Mermaid for a long time. It provides a good balance of simplicity and visual clarity, making it ideal for most diagrams. + • ELK: For those who need more sophisticated layout capabilities, especially when working with large or intricate diagrams, the ELK (Eclipse Layout Kernel) layout offers advanced options. It provides a more optimized arrangement, potentially reducing overlapping and improving readability. This is not included out the box but needs to be added when integrating mermaid for sites/appliocations that want to have elk support. + +#### How to Select a Layout Algorithm: + +You can specify the layout algorithm directly in the metadata section of your Mermaid diagram code. Here’s an example: +```mermaid +--- +config: + layout: elk + look: handdrawn + theme: forest +--- +flowchart TB + A[Start] --> B{Decision} + B -->|Yes| C[Continue] + B -->|No| D[Stop] +``` +In this example, the `layout: elk` line configures the diagram to use the ELK layout algorithm, along with the handdrawn look and forest theme. + +#### Customizing ELK Layout: + +When using the ELK layout, you can further refine the diagram’s configuration, such as how nodes are placed and whether parallel edges should be combined: + +- To combine parallel edges, use mergeEdges: true | false. +- To configure node placement, use nodePlacementStrategy with the following options: + o SIMPLE + o NETWORK_SIMPLEX + o LINEAR_SEGMENTS + o BRANDES_KOEPF (default) + + +**Example configuration:** + +```mermaid +--- +config: + layout: elk + elk: + mergeEdges: true + nodePlacementStrategy: LINEAR_SEGMENTS +--- +flowchart LR + A[Start] --> B{Choose Path} + B -->|Option 1| C[Path 1] + B -->|Option 2| D[Path 2] + +#### Using Dagre Layout with Classic Look: +``` +--- +config: + layout: dagre + look: classic + theme: default +--- +flowchart LR + A[Start] --> B{Choose Path} + B -->|Option 1| C[Path 1] + B -->|Option 2| D[Path 2] +``` + +These options give you the flexibility to create diagrams that not only look great but are also arranged to best suit your data’s structure and flow. + +When integrating Mermaid, you can include look and layout configuration with the initialize call. This is also where you add the loading of elk. + From dd570307320fdf9c20686a0f45100c6cd67401c8 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 23 Aug 2024 10:13:11 +0000 Subject: [PATCH 09/11] [autofix.ci] apply automated fixes --- docs/intro/syntax-reference.md | 100 --------------------------------- 1 file changed, 100 deletions(-) diff --git a/docs/intro/syntax-reference.md b/docs/intro/syntax-reference.md index 3c7104d7f7..00330f21d0 100644 --- a/docs/intro/syntax-reference.md +++ b/docs/intro/syntax-reference.md @@ -83,103 +83,3 @@ Allows for the limited reconfiguration of a diagram just before it is rendered. ### [Theme Manipulation](../config/theming.md) An application of using Directives to change [Themes](../config/theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams. - -### Layout and look - -We've restructured how Mermaid renders diagrams, enabling new features like selecting layout and look. **Currently, this is supported for flowcharts and state diagrams**, with plans to extend support to all diagram types. - -### Selecting Diagram Looks - -Mermaid offers a variety of styles or “looks” for your diagrams, allowing you to tailor the visual appearance to match your specific needs or preferences. Whether you prefer a hand-drawn or classic style, you can easily customize your diagrams. - -**Available Looks:** - - • Hand-Drawn Look: For a more personal, creative touch, the hand-drawn look brings a sketch-like quality to your diagrams. This style is perfect for informal settings or when you want to add a bit of personality to your diagrams. - • Classic Look: If you prefer the traditional Mermaid style, the classic look maintains the original appearance that many users are familiar with. It’s great for consistency across projects or when you want to keep the familiar aesthetic. - -**How to Select a Look:** - -You can select a look by adding the look parameter in the metadata section of your Mermaid diagram code. Here’s an example: -```mermaid ---- -config: - look: handDrawn - theme: neutral ---- -flowchart LR - A[Start] --> B{Decision} - B -->|Yes| C[Continue] - B -->|No| D[Stop] -``` - -#### Selecting Layout Algorithms - -In addition to customizing the look of your diagrams, Mermaid Chart now allows you to choose different layout algorithms to better organize and present your diagrams, especially when dealing with more complex structures. The layout algorithm dictates how nodes and edges are arranged on the page. - -#### Supported Layout Algorithms: - - • Dagre (default): This is the classic layout algorithm that has been used in Mermaid for a long time. It provides a good balance of simplicity and visual clarity, making it ideal for most diagrams. - • ELK: For those who need more sophisticated layout capabilities, especially when working with large or intricate diagrams, the ELK (Eclipse Layout Kernel) layout offers advanced options. It provides a more optimized arrangement, potentially reducing overlapping and improving readability. This is not included out the box but needs to be added when integrating mermaid for sites/appliocations that want to have elk support. - -#### How to Select a Layout Algorithm: - -You can specify the layout algorithm directly in the metadata section of your Mermaid diagram code. Here’s an example: -```mermaid ---- -config: - layout: elk - look: handdrawn - theme: forest ---- -flowchart TB - A[Start] --> B{Decision} - B -->|Yes| C[Continue] - B -->|No| D[Stop] -``` -In this example, the `layout: elk` line configures the diagram to use the ELK layout algorithm, along with the handdrawn look and forest theme. - -#### Customizing ELK Layout: - -When using the ELK layout, you can further refine the diagram’s configuration, such as how nodes are placed and whether parallel edges should be combined: - -- To combine parallel edges, use mergeEdges: true | false. -- To configure node placement, use nodePlacementStrategy with the following options: - o SIMPLE - o NETWORK_SIMPLEX - o LINEAR_SEGMENTS - o BRANDES_KOEPF (default) - - -**Example configuration:** - -```mermaid ---- -config: - layout: elk - elk: - mergeEdges: true - nodePlacementStrategy: LINEAR_SEGMENTS ---- -flowchart LR - A[Start] --> B{Choose Path} - B -->|Option 1| C[Path 1] - B -->|Option 2| D[Path 2] - -#### Using Dagre Layout with Classic Look: -``` ---- -config: - layout: dagre - look: classic - theme: default ---- -flowchart LR - A[Start] --> B{Choose Path} - B -->|Option 1| C[Path 1] - B -->|Option 2| D[Path 2] -``` - -These options give you the flexibility to create diagrams that not only look great but are also arranged to best suit your data’s structure and flow. - -When integrating Mermaid, you can include look and layout configuration with the initialize call. This is also where you add the loading of elk. - From 21c636c4c61003a22db80dfd63caa4c8b5d02f48 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 23 Aug 2024 16:23:45 +0530 Subject: [PATCH 10/11] Run release drafter in release branch --- .github/workflows/release-draft.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/release-draft.yml b/.github/workflows/release-draft.yml index 657bc767a3..849e69b52d 100644 --- a/.github/workflows/release-draft.yml +++ b/.github/workflows/release-draft.yml @@ -4,6 +4,7 @@ on: push: branches: - master + - release/** permissions: contents: read From 2cfdd1620a8ceef37c0b738569dfb8bcc0005547 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 23 Aug 2024 14:07:47 +0200 Subject: [PATCH 11/11] Mermaid version v11.0.0 --- packages/mermaid/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index f3a2d82995..ae555a6827 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",