From 86b3a4f09e7ec590d0880343a83c302259c36ade Mon Sep 17 00:00:00 2001
From: Amy Qualls <1157888+amyq@users.noreply.github.com>
Date: Thu, 25 Aug 2022 12:01:55 -0700
Subject: [PATCH] Document line curve options

An extremely basic MVC explaining that it is possible to adjust how lines in a flowchart are curved, while listing (some of?) the available options.

I doubt I've captured all of the curve options, but capturing the existence of curve options is a start.

Sources:

- https://github.com/mermaid-js/mermaid/issues/580#issuecomment-373929046 where a user references adding the feature to Mermaid
- Which references https://github.com/d3/d3-shape/blob/master/README.md#curves and I think is worth including here
---
 docs/flowchart.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/docs/flowchart.md b/docs/flowchart.md
index 7631a7f46..433bd8fa0 100644
--- a/docs/flowchart.md
+++ b/docs/flowchart.md
@@ -522,6 +522,22 @@ In the example below the style defined in the linkStyle statement will belong to
 linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
 ```
 
+### Styling line curves
+
+It is possible to style the type of curve used for lines between items, if the default method does not meet your needs.
+Available curve styles include `basis`, `bump`, `linear`, `monotoneX`, `monotoneY`, `natural`, `step`, `stepAfter`,
+and `stepBefore`.
+
+In this example, a left-to-right graph uses the `stepBefore` curve style:
+
+```
+%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
+graph LR
+```
+
+For a full list of available curves, including an explanation of custom curves, refer to
+the [Shapes](https://github.com/d3/d3-shape/blob/main/README.md#curves) documentation in the
+[d3-shape](https://github.com/d3/d3-shape/) project.
 
 ### Styling a node