Customizing

Coloring and styles

When using ZenUML website and the Chrome extension, you can put in CSS to give your diagrams colors and styles.

Here is a few classic styles that you can start with:

Traditional UML

This is a built-in style. When you click “New”, if you choose “StarUML” you get this style pre-populated for you in the CSS tab.

The built-in style was coded as LESS. Below I have converted it into CSS.

#diagram .sequence-diagram .lifeline .participant {
  font-weight: 400;
  border: 2px solid #b94065;
  background: #fffec8;
}
#diagram .sequence-diagram .lifeline .participant label {
  text-decoration: underline;
}
#diagram .sequence-diagram .lifeline .line {
  border-left-color: #b94065;
}
#diagram .sequence-diagram .message {
  border-bottom-color: #b94065;
}
#diagram .sequence-diagram .message svg polyline {
  fill: #b94065;
  stroke: #b94065;
}
#diagram .sequence-diagram .message.self svg > polyline:not(.head) {
  fill: none;
}
#diagram .sequence-diagram .occurrence {
  background-color: white;
  border: 2px solid #b94065;
}

Light modern

This style is achieved with only 4 lines of CSS.

#diagram .participant {
  border: 1px solid;
  border-color: hsla(0, 0%, 0%, 0.4);
}

Green-Orange

This style picked the main colors from Chrome’s icon.

#diagram .participant {
  border-radius: 5px;
  font-weight: 300;
  color: white;
  background: #27a768;
}

#diagram .lifeline .line {
  border-color: #f5bc1a;
}

#diagram .message {
  border-color: #27a768;
}

#diagram .message .fill svg.arrow polyline{
  fill: #27a768;
  stroke: #27a768;
}

#diagram .message svg.arrow polyline{
  fill: #27a768;
  stroke: #27a768;
}

#diagram .message.self svg.arrow polyline{
  fill: none;
}

#diagram .message.self svg.arrow polyline.head{
  fill: #27a768;
}

#diagram .occurrence {
  background: #f5bc1a;
}