state

This is an object containing the following configurations specific to state diagrams:

• htmlLabels (Boolean)

  This option lets you decide if the labels in a state diagram will consist of text and tspan SVG elements or if a span element should be used instead. If you are using Mermaid on the web, HTML labels might give more styling options, but if you want to import your rendered diagrams into a tool using SVG files, you should probably not use htmlLabels.

  Default value: true

  Here is an example of an init directive setting the htmlLabels option:

  %%{init: {"state": {"htmlLabels": true}}}%%

• nodeSpacing (integer)

  With this low-level option, you direct the dagre layout algorithm to use this configuration value for separation between adjacent nodes in the same rank when positioning the nodes.

  Default value: 50

  Here is an example of an init directive setting the nodeSpacing option:

  %%{init: {"state": {"nodeSpacing": 50}}}%%

• rankSpacing (integer...