Skip to content

Commit

Permalink
Document line curve options
Browse files Browse the repository at this point in the history
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:

- mermaid-js#580 (comment) 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
  • Loading branch information
amyq committed Aug 25, 2022
1 parent cde3a7c commit 86b3a4f
Showing 1 changed file with 16 additions and 0 deletions.
16 changes: 16 additions & 0 deletions docs/flowchart.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down

0 comments on commit 86b3a4f

Please sign in to comment.