This is an old revision of the document!


Tutorial: Styling Your Models

What can be styled?

Model consists of nodes (state, branch, etc.), transitions, boxes and swimlanes, and each of which has components like container area, lines, and labels. All these can be styled to some degree, some supports more styling options while others less.

By styling, we are referring to the background, color, shape, position and other cosmetic look and feel, which do not affect the functioning of the model.


What are the styling options?

Styling options include:

  1. color HEX code

In general the color can be set. Many of the components also support styling by classes and css style which are referred to as advanced styling.

Styling with classes

This is the preferred option to style as it's more reliable and predictable, and it's a good way to maintain consistency.

On the components that supports advanced styling, just enter the names of the css classes using space as the delimiter for multiple classes.

All class names must be named with the prefix class_.

The definition of these css classes are set in config/ide.css. The download package comes with two classes: class_GREEN and class_ORANGE. Use these as examples to define your own classes.

Styling with css style

CSS style is the most flexible option to change the look and feel of the components. CSS style is just a set of key / value pairs.

 { "background": "ORANGE", "border": "2px solid RED" }

Notice the above css style uses double quotes to enclose both keys and values. This is very important. CSS style must be specified in valid json format.

To style the components that support css styling, just enter the css style json string.

Be aware that, due to how css style are set, if you do change css style, you may need to explicitly unset (remove) settings. For example, if you decided not to set the background color in the above example:

 { "border": "2px solid RED" }

By setting the above css style, you are leaving the background unchanged, which is desired.

To remedy the above situation, you have the options below:

  1. explicitly remove backgroud:

{ “background”: “”, “border”: “2px solid RED” }

  1. save and re-open the model

Styling nodes

Nodes are states, branches, switches, synchbars and initial / final states. The container area and label can be styled independently.