diff --git a/docs/community/contributing.md b/docs/community/contributing.md index 596b26430..5f7290693 100644 --- a/docs/community/contributing.md +++ b/docs/community/contributing.md @@ -29,7 +29,8 @@ In GitHub, you first [**fork a mermaid repository**](https://github.com/mermaid- Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with. -> **💡 Tip** > [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo). +> **💡 Tip** +> [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo). ```bash git clone git@github.com/your-fork/mermaid diff --git a/docs/community/intro.md b/docs/community/intro.md index 6b1430572..a549d031e 100644 --- a/docs/community/intro.md +++ b/docs/community/intro.md @@ -33,7 +33,8 @@ mindmap ## Join the Development -> **💡 Tip** > **Check out our** [**detailed contribution guide**](./contributing.md). +> **💡 Tip** +> **Check out our** [**detailed contribution guide**](./contributing.md). Where to start: @@ -47,7 +48,8 @@ Where to start: ## A Question Or a Suggestion? -> **💡 Tip** > **Have a look at** [**how to open an issue**](./questions-and-suggestions.md). +> **💡 Tip** +> **Have a look at** [**how to open an issue**](./questions-and-suggestions.md). If you have faced a vulnerability [report it to us](./security.md). diff --git a/docs/config/directives.md b/docs/config/directives.md index 13a663133..40ebd81a4 100644 --- a/docs/config/directives.md +++ b/docs/config/directives.md @@ -22,7 +22,6 @@ While directives allow you to change most of the default configuration settings, Mermaid basically supports two types of configuration options to be overridden by directives. 1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are: - - theme - fontFamily - logLevel diff --git a/docs/config/setup/mermaid/classes/UnknownDiagramError.md b/docs/config/setup/mermaid/classes/UnknownDiagramError.md index d2956dd5e..5d8d47461 100644 --- a/docs/config/setup/mermaid/classes/UnknownDiagramError.md +++ b/docs/config/setup/mermaid/classes/UnknownDiagramError.md @@ -92,7 +92,7 @@ Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib > `static` **stackTraceLimit**: `number` -Defined in: node_modules/.pnpm/@types+node\@22.16.2/node_modules/@types/node/globals.d.ts:161 +Defined in: node_modules/.pnpm/@types+node\@22.16.4/node_modules/@types/node/globals.d.ts:161 The `Error.stackTraceLimit` property specifies the number of stack frames collected by a stack trace (whether generated by `new Error().stack` or @@ -114,7 +114,7 @@ not capture any frames. > `static` **captureStackTrace**(`targetObject`, `constructorOpt`?): `void` -Defined in: node_modules/.pnpm/@types+node\@22.16.2/node_modules/@types/node/globals.d.ts:145 +Defined in: node_modules/.pnpm/@types+node\@22.16.4/node_modules/@types/node/globals.d.ts:145 Creates a `.stack` property on `targetObject`, which when accessed returns a string representing the location in the code at which @@ -184,7 +184,7 @@ a(); > `static` **prepareStackTrace**(`err`, `stackTraces`): `any` -Defined in: node_modules/.pnpm/@types+node\@22.16.2/node_modules/@types/node/globals.d.ts:149 +Defined in: node_modules/.pnpm/@types+node\@22.16.4/node_modules/@types/node/globals.d.ts:149 #### Parameters diff --git a/docs/ecosystem/mermaid-chart.md b/docs/ecosystem/mermaid-chart.md index 8100a1846..fd1e70aca 100644 --- a/docs/ecosystem/mermaid-chart.md +++ b/docs/ecosystem/mermaid-chart.md @@ -29,7 +29,6 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun - **Plugins** - A plugin system for extending the functionality of Mermaid. Official Mermaid Chart plugins: - - [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts) - [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview) - [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud) diff --git a/docs/news/announcements.md b/docs/news/announcements.md index a8a67343d..e054d2da0 100644 --- a/docs/news/announcements.md +++ b/docs/news/announcements.md @@ -35,13 +35,11 @@ The Mermaid Chart team is excited to introduce a new Visual Editor for Flowchart Learn more: - Visual Editor For Flowcharts - - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts) - [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0) - Visual Editor For Sequence diagrams - - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams) - [Demo video](https://youtu.be/imc2u5_N6Dc) diff --git a/docs/syntax/c4.md b/docs/syntax/c4.md index c1d2e1597..ae610d152 100644 --- a/docs/syntax/c4.md +++ b/docs/syntax/c4.md @@ -139,7 +139,6 @@ The following unfinished features are not supported in the short term. - [ ] Legend - [x] System Context - - [x] Person(alias, label, ?descr, ?sprite, ?tags, $link) - [x] Person_Ext - [x] System(alias, label, ?descr, ?sprite, ?tags, $link) @@ -153,7 +152,6 @@ The following unfinished features are not supported in the short term. - [x] System_Boundary - [x] Container diagram - - [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) - [x] ContainerDb - [x] ContainerQueue @@ -163,7 +161,6 @@ The following unfinished features are not supported in the short term. - [x] Container_Boundary(alias, label, ?tags, $link) - [x] Component diagram - - [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link) - [x] ComponentDb - [x] ComponentQueue @@ -172,18 +169,15 @@ The following unfinished features are not supported in the short term. - [x] ComponentQueue_Ext - [x] Dynamic diagram - - [x] RelIndex(index, from, to, label, ?tags, $link) - [x] Deployment diagram - - [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link) - [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node() - [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node() - [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node() - [x] Relationship Types - - [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link) - [x] BiRel (bidirectional relationship) - [x] Rel_U, Rel_Up diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index ee6d2c639..5f827e52a 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -1795,6 +1795,16 @@ It is possible to style the type of curve used for lines between items, if the d Available curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRom`, `linear`, `monotoneX`, `monotoneY`, `natural`, `step`, `stepAfter`, and `stepBefore`. +For a full list of available curves, including an explanation of custom curves, refer to +the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project. + +Line styling can be achieved in two ways: + +1. Change the curve style of all the lines +2. Change the curve style of a particular line + +#### Diagram level curve style + In this example, a left-to-right graph uses the `stepBefore` curve style: ``` @@ -1806,8 +1816,33 @@ config: graph LR ``` -For a full list of available curves, including an explanation of custom curves, refer to -the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project. +#### Edge level curve style using Edge IDs (v\+) + +You can assign IDs to [edges](#attaching-an-id-to-edges). After assigning an ID you can modify the line style by modifying the edge's `curve` property using the following syntax: + +```mermaid-example +flowchart LR + A e1@==> B + A e2@--> C + e1@{ curve: linear } + e2@{ curve: natural } +``` + +```mermaid +flowchart LR + A e1@==> B + A e2@--> C + e1@{ curve: linear } + e2@{ curve: natural } +``` + +```info +Any edge curve style modified at the edge level overrides the diagram level style. +``` + +```info +If the same edge is modified multiple times the last modification will be rendered. +``` ### Styling a node diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md index 552c1658a..3a42f04e1 100644 --- a/docs/syntax/gantt.md +++ b/docs/syntax/gantt.md @@ -360,7 +360,8 @@ gantt weekday monday ``` -> **Warning** > `millisecond` and `second` support was added in v10.3.0 +> **Warning** +> `millisecond` and `second` support was added in v10.3.0 ## Output in compact mode diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 1737f83fb..31c2a949f 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -1135,6 +1135,16 @@ It is possible to style the type of curve used for lines between items, if the d Available curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRom`, `linear`, `monotoneX`, `monotoneY`, `natural`, `step`, `stepAfter`, and `stepBefore`. +For a full list of available curves, including an explanation of custom curves, refer to +the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project. + +Line styling can be achieved in two ways: + +1. Change the curve style of all the lines +2. Change the curve style of a particular line + +#### Diagram level curve style + In this example, a left-to-right graph uses the `stepBefore` curve style: ``` @@ -1146,8 +1156,25 @@ config: graph LR ``` -For a full list of available curves, including an explanation of custom curves, refer to -the [Shapes](https://d3js.org/d3-shape/curve) documentation in the [d3-shape](https://github.com/d3/d3-shape/) project. +#### Edge level curve style using Edge IDs (v+) + +You can assign IDs to [edges](#attaching-an-id-to-edges). After assigning an ID you can modify the line style by modifying the edge's `curve` property using the following syntax: + +```mermaid +flowchart LR + A e1@==> B + A e2@--> C + e1@{ curve: linear } + e2@{ curve: natural } +``` + +```info +Any edge curve style modified at the edge level overrides the diagram level style. +``` + +```info +If the same edge is modified multiple times the last modification will be rendered. +``` ### Styling a node