Skip to content

Flowchart Diagram Config Schema

txt
https://mermaid.js.org/schemas/config.schema.json#/$defs/FlowchartDiagramConfig

The object containing configurations specific for flowcharts

AbstractExtensibleStatusIdentifiableCustom PropertiesAdditional PropertiesAccess RestrictionsDefined In
Can be instantiatedNoUnknown statusNoForbiddenAllowednoneconfig.schema.json*

FlowchartDiagramConfig Type

object (Flowchart Diagram Config)

all of

FlowchartDiagramConfig Properties

PropertyTypeRequiredNullableDefined by
titleTopMarginintegerRequiredcannot be nullMermaid Config
subGraphTitleMarginobjectRequiredcannot be nullMermaid Config
arrowMarkerAbsolutebooleanOptionalcannot be nullMermaid Config
diagramPaddingintegerRequiredcannot be nullMermaid Config
htmlLabelsbooleanRequiredcannot be nullMermaid Config
nodeSpacingintegerRequiredcannot be nullMermaid Config
rankSpacingintegerRequiredcannot be nullMermaid Config
curvestringRequiredcannot be nullMermaid Config
paddingnumberOptionalcannot be nullMermaid Config
defaultRendererstringRequiredcannot be nullMermaid Config
wrappingWidthnumberRequiredcannot be nullMermaid Config

titleTopMargin

Margin top for the text over the diagram

titleTopMargin

titleTopMargin Type

integer

titleTopMargin Constraints

minimum: the value of this number must greater than or equal to: 0

titleTopMargin Default Value

The default value is:

json
25

subGraphTitleMargin

Defines a top/bottom margin for subgraph titles

subGraphTitleMargin

subGraphTitleMargin Type

object (Details)

subGraphTitleMargin Default Value

The default value is:

json
{
  "top": 0,
  "bottom": 0
}

arrowMarkerAbsolute

arrowMarkerAbsolute

arrowMarkerAbsolute Type

boolean

diagramPadding

The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels.

diagramPadding

diagramPadding Type

integer

diagramPadding Constraints

minimum: the value of this number must greater than or equal to: 0

diagramPadding Default Value

The default value is:

json
20

htmlLabels

Flag for setting whether or not a html tag should be used for rendering labels on the edges.

htmlLabels

htmlLabels Type

boolean

htmlLabels Default Value

The default value is:

json
true

nodeSpacing

Defines the spacing between nodes on the same level

Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the vertical spacing for LR as well as RL graphs.

nodeSpacing

nodeSpacing Type

integer

nodeSpacing Constraints

minimum: the value of this number must greater than or equal to: 0

nodeSpacing Default Value

The default value is:

json
50

rankSpacing

Defines the spacing between nodes on different levels

Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the vertical spacing for LR as well as RL graphs.

rankSpacing

rankSpacing Type

integer

rankSpacing Constraints

minimum: the value of this number must greater than or equal to: 0

rankSpacing Default Value

The default value is:

json
50

curve

Defines how mermaid renders curves for flowcharts.

curve

  • is required

  • Type: string

  • cannot be null

  • defined in: Mermaid Config

  • tsType: string | "basis" | "linear" | "cardinal"

curve Type

string

curve Constraints

enum: the value of this property must be equal to one of the following values:

ValueExplanation
"basis"
"linear"
"cardinal"

curve Default Value

The default value is:

json
"basis"

padding

Represents the padding between the labels and the shape

Only used in new experimental rendering.

padding

padding Type

number

padding Default Value

The default value is:

json
15

defaultRenderer

Decides which rendering engine that is to be used for the rendering.

defaultRenderer

  • is required

  • Type: string

  • cannot be null

  • defined in: Mermaid Config

  • tsType: string | "dagre-d3" | "dagre-wrapper" | "elk"

defaultRenderer Type

string

defaultRenderer Constraints

enum: the value of this property must be equal to one of the following values:

ValueExplanation
"dagre-d3"The [dagre-d3-es](https://www.npmjs.com/package/dagre-d3-es) library.
"dagre-wrapper"wrapper for dagre implemented in mermaid
"elk"Layout using [elkjs](https://github.com/kieler/elkjs)

defaultRenderer Default Value

The default value is:

json
"dagre-wrapper"

wrappingWidth

Width of nodes where text is wrapped.

When using markdown strings the text ius wrapped automatically, this value sets the max width of a text before it continues on a new line.

wrappingWidth

wrappingWidth Type

number

wrappingWidth Default Value

The default value is:

json
200