State Configuration

State Configuration allow you to override default state appearance set in Global Configuration AND Workflow Configuration for a given state. To set state configuration, simply add your configuration in state description using simplified Simplified JSON Syntax.

Warning

After you have made changes to state, you’ll need to update metadata cache (see Update Workflows).

State Appearence

In this table you’ll find all possible options that you can set for your state:

Option	Values	Description
shape	<shapeName>	The default shape for current state, for full list of possible options, see JSON State Shape values
color	hex color	The color for current state, this will override the default color set in Workflow Configuration and in Global State Colors
forceColor	true or false	When you set the color value, it twill overrides all the values set for default, previous, current, next and selectable set in in Workflow Configuration and in Global State Colors, if you want to override only the default state color, then set this option to false
fill	true or false	Whether to use colors to fill the shape or for stroke color
light	true or false	When fill option is set to false, whether to use light color to fill the shape or for text
style	b i bi	The font style for current workflow’s states text, you can use b for bold, i for italic or bi for bold italic
size	number	The size in pixels for current state text
stroke	number	The width in pixels for shape stroke, 0 for no stroke
hidden	true or false	Hides the state from the graph, all possible transitions which goes to and from the hidden state will be merged and drawn in the graph, see Example of a hidden state.

Tip

To hide the no state of a given workflow, set the value of noState color to #h in the workflow configuration, see States options in workflow configuration section.

Example

This configuration set in state description will force this state shape to document and overrides all default values for color, stroke, size and text style:

{shape:document, color:#37aad4, stroke:5, size:14, style:bi}

And this is the resulting graph, note that the state color overrides the Selectable color, to avoide this behavior and override only default color, add the option forceColor:false in the state configuration.

Example of a hidden state

In the image below, the left graph is the same as the right one where the State C has been hidden using the configuration {hidden:true}

Change State Label

In some situations, you may need to use another label for your state than the default Name, for example, long names will generate long shapes and it’s better to use a shorter label or use new lines. In your label you can use some special characters (like comma or double quotes), for this reason, the JSON syntax may not work, or can be tedious to set. If you want to change your default state label, simply define you new label in state description outside your JSON configuration and enclose it with double percent symbol, for example:

%%My label%%

In the example below, the title was too long and we used another label with new line to make short rectabgle, we also added comma and percent symbole intentionally

And the result is