Mermaid

Appearance

Usecase Diagram Config Schema ​

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

The object containing configurations specific for usecase diagrams.

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

UsecaseDiagramConfig Type ​

object (Usecase Diagram Config)

all of

UsecaseDiagramConfig Properties ​

PropertyTypeRequiredNullableDefined by
themestringOptionalcannot be nullMermaid Config
lookstringOptionalcannot be nullMermaid Config
wrappingWidthnumberRequiredcannot be nullMermaid Config
minNodeWidthnumberRequiredcannot be nullMermaid Config
actorFontSizenumberOptionalcannot be nullMermaid Config
actorFontFamilystringOptionalcannot be nullMermaid Config
actorFontWeightstringOptionalcannot be nullMermaid Config
usecaseFontSizenumberOptionalcannot be nullMermaid Config
usecaseFontFamilystringOptionalcannot be nullMermaid Config
usecaseFontWeightstringOptionalcannot be nullMermaid Config
nodeSpacingnumberOptionalcannot be nullMermaid Config
rankSpacingnumberOptionalcannot be nullMermaid Config
diagramPaddingnumberOptionalcannot be nullMermaid Config
colorSchemestringOptionalcannot be nullMermaid Config

theme ​

Theme, the CSS style sheet. You may also use themeCSS to override this value.

theme

theme Type ​

string

theme Constraints ​

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

ValueExplanation
"default"
"base"
"dark"
"forest"
"neutral"
"neo"
"neo-dark"
"redux"
"redux-dark"
"redux-color"
"redux-dark-color"
"null"Can be set to disable any pre-defined mermaid theme

theme Default Value ​

The default value is:

json
"redux-color"

look ​

Defines which main look to use for the diagram.

look

look Type ​

string

look Constraints ​

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

ValueExplanation
"classic"
"handDrawn"
"neo"

look Default Value ​

The default value is:

json
"neo"

wrappingWidth ​

Width of nodes where text is wrapped.

When using markdown strings the text is 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
120

minNodeWidth ​

Minimum width of the label area of a node.

Labels narrower than this are widened to it, so nodes with short text get a uniform width; the node's own padding is added on top, the same way it is for wrappingWidth. Nodes with an explicit width are not affected.

minNodeWidth

minNodeWidth Type ​

number

minNodeWidth Default Value ​

The default value is:

json
120

actorFontSize ​

Font size for actor labels

actorFontSize

actorFontSize Type ​

number

actorFontSize Constraints ​

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

actorFontSize Default Value ​

The default value is:

json
14

actorFontFamily ​

Font family for actor labels.

Written verbatim into an inline CSS custom property, so the characters that could terminate a declaration or open a new one are excluded: ;, <, >, (, ), {, }, and \. Quotes, commas, and spaces stay allowed for font stacks such as "Open Sans", sans-serif.

actorFontFamily

actorFontFamily Type ​

string

actorFontFamily Constraints ​

pattern: the string must match the following regular expression:

javascript
/^[^;<>(){}\\]*$/

try pattern

actorFontFamily Default Value ​

The default value is:

json
"\"Open Sans\", sans-serif"

actorFontWeight ​

Font weight for actor labels.

Restricted to the CSS font-weight keywords and numeric weights, since this value is written verbatim into an inline CSS custom property.

actorFontWeight

actorFontWeight Type ​

string

actorFontWeight Constraints ​

pattern: the string must match the following regular expression:

javascript
/^(normal|bold|bolder|lighter|inherit|initial|revert|unset|[1-9][0-9]{0,3})$/

try pattern

actorFontWeight Default Value ​

The default value is:

json
"normal"

usecaseFontSize ​

Font size for usecase labels

usecaseFontSize

usecaseFontSize Type ​

number

usecaseFontSize Constraints ​

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

usecaseFontSize Default Value ​

The default value is:

json
12

usecaseFontFamily ​

Font family for usecase labels.

Constrained the same way as actorFontFamily.

usecaseFontFamily

usecaseFontFamily Type ​

string

usecaseFontFamily Constraints ​

pattern: the string must match the following regular expression:

javascript
/^[^;<>(){}\\]*$/

try pattern

usecaseFontFamily Default Value ​

The default value is:

json
"\"Open Sans\", sans-serif"

usecaseFontWeight ​

Font weight for usecase labels.

Constrained the same way as actorFontWeight.

usecaseFontWeight

usecaseFontWeight Type ​

string

usecaseFontWeight Constraints ​

pattern: the string must match the following regular expression:

javascript
/^(normal|bold|bolder|lighter|inherit|initial|revert|unset|[1-9][0-9]{0,3})$/

try pattern

usecaseFontWeight Default Value ​

The default value is:

json
"normal"

nodeSpacing ​

Spacing between nodes on the same level

nodeSpacing

nodeSpacing Type ​

number

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 ​

Spacing between nodes on different levels

rankSpacing

rankSpacing Type ​

number

rankSpacing Constraints ​

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

rankSpacing Default Value ​

The default value is:

json
50

diagramPadding ​

Padding around the entire diagram

diagramPadding

diagramPadding Type ​

number

diagramPadding Constraints ​

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

diagramPadding Default Value ​

The default value is:

json
20

colorScheme ​

How a use case diagram takes its colours from the active theme.

role (the default) gives every element of a kind one colour, read from the usecaseActorBkg / usecaseActorBorder, usecaseBkg / usecaseBorder, and usecaseBoundaryBkg / usecaseBoundaryBorder theme variables. Colour then says what an element is, and it is invariant under insertion, reordering, and renaming -- adding one use case in the middle does not recolour the ones after it, so diffs, documentation screenshots, and visual baselines stay stable.

rotate instead gives each actor, use case, and system boundary its own slot from the theme's categorical palette (borderColorArray / bkgColorArray), the way ER entities and class boxes are coloured. Actors and use cases share one cycle, and system boundaries run a second one from zero, so a boundary is never forced to match an element inside it. Within the shared cycle the actors are numbered first and the use cases after them, each in declaration order -- an interleaved actor A, usecase U, actor B is therefore numbered A, B, U rather than A, U, B. This buys per-instance variety at the cost of the stability role has: inserting an element shifts the colour of every later element of its own kind, and inserting an actor shifts the use cases too. Only the colour themes (redux-color, redux-dark-color) carry a palette, so on every other theme the two settings render identically.

classDef and style keep overriding both, whichever is set.

colorScheme

colorScheme Type ​

string

colorScheme Constraints ​

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

ValueExplanation
"role"
"rotate"

colorScheme Default Value ​

The default value is:

json
"role"
Opens in mermaid.ai