MermaidJS Default Curves
In this article I will share a list of curves that you can interpolate to the MermaidJS flowchart link style and a screenshot and description for each one.
What is MermaidJS?
What is interpolation in flowcharts?
Interpolation is a feature added in 6.0.0 that allows you to specify how curves should be made inside flowcharts. The syntax is like:
linkStyle default|[...num] interpolate curveStyle [styles]
The num represents all numbers or indexes of arrows to style. The interpolate represents that their curve style has to be changed. After that, comes the curve style and following that comes CSS styles.
The following would add the d3 curveMonotoneX on all arrows that are curving.
graph TD B["peace"] B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner); B-->E(A fa:fa-camera-retro perhaps?); linkStyle default interpolate monotoneX
It would look something like:
MonotoneX would both be valid because internally, MermaidJS
updates the curve interpolation type to its capatilized version and precedes it
"curve" and finds the d3 curve type for that.
What are the possible interpolations?
This curve is the default curve used by MermaidJS. It has some sort of line then it curves near the end. Here is an example:
This is the fallback curve used by MermaidJS that runs when the given interpolation is invalid. It doesn't involve any curves, it just combines one or more lines to reach the end node. Here is an example:
- Basis Closed
This is a pretty rarely used curve. It just draws an ellipse or loop with a triangle arrowhead at some point on it. Here is an example:
- Linear Closed
The linear closed curve draws a triangle pointing towards the node. Here is how it looks:
- Monotone X
This curve is just a curve then another straighter curve. It looks like this:
- Monotone Y
The Monotone Y curve is a line, a curve at the turning point, then a line. It looks something like this:
The natural curve is a pure curve and it sort of slides out and then comes back in. Here is an example of how it looks:
The step curve is formed of linear lines that make their way to the end node. The lines are either vertical or horizontal and aren't diagonal. It sort of forms a stairsteps. Here is how it looks:
- Step Before
The step before curve starts with a line going straight down (straight out in horizontal charts) instead of outwards.
- Step After
The step after curve goes out first and tries to do a minimal amount of steps. Also, the arrowhead is facing the right direction in it.