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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 #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.

1 2 3 4 #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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 #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; }