Drawio XML Beautifier

draw.io Appearance Beautification and Style Design Guide

This document focuses on the appearance beautification of draw.io graphics, including style definitions, color schemes, visual effects, and best practices, helping you create professional and beautiful charts.

I. Style Basics

1.1 Style Syntax Rules

Basic Format

Style attributes are semicolon-separated key-value pair strings:

key1=value1;key2=value2;key3=value3;

Rule Description:

1. Each key-value pair ends with a semicolon ;
2. Key names and values are connected with an equals sign =
3. Key names are case-sensitive
4. Values can be strings, numbers, or booleans (0/1)
5. The semicolon after the last key-value pair can be omitted, but it's recommended to keep it

Style Inheritance and Overriding

• Child elements inherit parent element styles
• Later-defined styles override earlier-defined identical styles
• Use ; to separate multiple style definitions

II. Complete Style Property Reference

2.1 Shape Styles

Special Shapes

2.2 Fill Styles

Fill Effect Examples

<!-- Solid fill -->
style="fillColor=#dae8fc;"

<!-- Gradient fill -->
style="fillColor=#dae8fc;gradientColor=#ffffff;gradientDirection=south;"

<!-- Transparent fill -->
style="fillOpacity=50;fillColor=#dae8fc;"

<!-- No fill -->
style="fillColor=none;"

<!-- Glass effect -->
style="fillColor=#dae8fc;glass=1;"

<!-- Shadow effect -->
style="fillColor=#dae8fc;shadow=1;"

<!-- Hand-drawn style -->
style="fillColor=#dae8fc;sketch=1;roughness=2;hachureGap=5;"

2.3 Stroke Styles

Border Effect Examples

<!-- Solid border -->
style="strokeColor=#6c8ebf;strokeWidth=2;"

<!-- Dashed border -->
style="strokeColor=#6c8ebf;dashed=1;"

<!-- Dotted border -->
style="strokeColor=#6c8ebf;dashed=1;dashPattern=1 3;"

<!-- No border -->
style="strokeColor=none;"

<!-- Double border effect -->
style="strokeColor=#6c8ebf;strokeWidth=3;rounded=1;"

2.4 Text Styles

Font Style Combinations

Text Effect Examples

<!-- Basic text -->
style="fontColor=#333333;fontSize=14;fontFamily=Arial;"

<!-- Bold centered -->
style="fontColor=#333333;fontSize=16;fontStyle=1;align=center;verticalAlign=middle;"

<!-- Background label -->
style="fontColor=#333333;fontSize=12;labelBackgroundColor=#ffffff;labelBorderColor=#cccccc;"

<!-- Top label -->
style="fontColor=#333333;fontSize=12;labelPosition=center;verticalLabelPosition=top;"

2.5 Edge/Arrow Styles

Arrow Type Illustration

Edge Effect Examples

<!-- Simple arrow -->
style="endArrow=classic;html=1;strokeColor=#666666;"

<!-- Bidirectional arrow -->
style="startArrow=classic;startFill=1;endArrow=classic;endFill=1;strokeColor=#666666;"

<!-- Dashed connection -->
style="dashed=1;endArrow=none;strokeColor=#999999;"

<!-- Orthogonal polyline -->
style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;endArrow=classic;"

<!-- Curved connection -->
style="curved=1;endArrow=classic;strokeColor=#666666;"

<!-- Connection with jumps -->
style="jumpStyle=arc;jumpSize=8;endArrow=classic;strokeColor=#666666;"

2.6 Container/Grouping Styles

2.7 Image Styles

III. Color Schemes

3.1 Standard Color Schemes

Basic Color Series

Extended Color Series

3.2 Semantic Color Schemes

Flowchart Color Scheme

System Architecture Color Scheme

Network Topology Color Scheme

UML Color Scheme

3.3 Theme Color Schemes

Dark Theme

Light Theme

Business Theme

IV. Visual Effects

4.1 Shadow Effects

Basic Shadow

<mxCell id="shadow1" value="Shadow Effect" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;shadow=1;">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
</mxCell>

Multi-layer Shadow Effect

Achieved by stacking multiple elements:

<!-- Shadow layer -->
<mxCell id="shadow-bg" value="" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#999999;strokeColor=none;opacity=30;">
  <mxGeometry x="105" y="105" width="120" height="60" as="geometry"/>
</mxCell>

<!-- Main layer -->
<mxCell id="shadow-main" value="Multi-layer Shadow" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
</mxCell>

4.2 Gradient Effects

Linear Gradient

<!-- Gradient from top to bottom -->
<mxCell id="gradient1" value="Vertical Gradient" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;gradientColor=#ffffff;gradientDirection=south;">
  <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
</mxCell>

<!-- Gradient from left to right -->
<mxCell id="gradient2" value="Horizontal Gradient" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;gradientColor=#ffffff;gradientDirection=east;">
  <mxGeometry x="250" y="100" width="120" height="60" as="geometry"/>
</mxCell>

Multi-color Gradient Simulation

<!-- Use multiple elements to simulate multi-color gradient -->
<mxCell id="multi-gradient" value="Multi-color Gradient" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ff6b6b;gradientColor=#4ecdc4;gradientDirection=south;">
  <mxGeometry x="400" y="100" width="120" height="60" as="geometry"/>
</mxCell>

4.3 Glass/Gloss Effect

<mxCell id="glass1" value="Glass Effect" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;glass=1;">
  <mxGeometry x="100" y="200" width="120" height="60" as="geometry"/>
</mxCell>

4.4 Hand-drawn Style

<mxCell id="sketch1" value="Hand-drawn Style" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;sketch=1;roughness=2;hachureGap=5;">
  <mxGeometry x="250" y="200" width="120" height="60" as="geometry"/>
</mxCell>

Hand-drawn Style Parameters

4.5 3D Effects

3D Button Effect

<!-- Bottom shadow layer -->
<mxCell id="btn-shadow" value="" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#4a5568;strokeColor=none;">
  <mxGeometry x="102" y="302" width="120" height="60" as="geometry"/>
</mxCell>

<!-- Main layer -->
<mxCell id="btn-main" value="3D Button" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#63b3ed;strokeColor=#4299e1;gradientColor=#3182ce;gradientDirection=south;">
  <mxGeometry x="100" y="300" width="120" height="60" as="geometry"/>
</mxCell>

3D Card Effect

<!-- Shadow layer -->
<mxCell id="card-shadow" value="" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#000000;strokeColor=none;opacity=20;">
  <mxGeometry x="252" y="302" width="120" height="80" as="geometry"/>
</mxCell>

<!-- Main layer -->
<mxCell id="card-main" value="3D Card" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#e2e8f0;shadow=1;">
  <mxGeometry x="250" y="300" width="120" height="80" as="geometry"/>
</mxCell>

4.6 Glow Effect

<!-- Glow layer -->
<mxCell id="glow-bg" value="" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#00ff00;strokeColor=none;opacity=30;strokeWidth=10;">
  <mxGeometry x="95" y="395" width="130" height="70" as="geometry"/>
</mxCell>

<!-- Main layer -->
<mxCell id="glow-main" value="Glow Effect" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#48bb78;strokeColor=#38a169;">
  <mxGeometry x="100" y="400" width="120" height="60" as="geometry"/>
</mxCell>

4.7 Rounded Corner Effects

Different Rounded Corner Degrees

<!-- Small rounded corners -->
<mxCell id="rounded-small" value="Small Rounded" vertex="1" parent="1"
  style="rounded=1;arcSize=10;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;">
  <mxGeometry x="100" y="500" width="100" height="50" as="geometry"/>
</mxCell>

<!-- Medium rounded corners -->
<mxCell id="rounded-medium" value="Medium Rounded" vertex="1" parent="1"
  style="rounded=1;arcSize=30;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;">
  <mxGeometry x="220" y="500" width="100" height="50" as="geometry"/>
</mxCell>

<!-- Large rounded corners (capsule) -->
<mxCell id="rounded-large" value="Capsule" vertex="1" parent="1"
  style="rounded=1;arcSize=50;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;">
  <mxGeometry x="340" y="500" width="120" height="50" as="geometry"/>
</mxCell>

V. Style Combination Templates

5.1 Button Styles

Primary Button

rounded=1;whiteSpace=wrap;html=1;fillColor=#3b82f6;strokeColor=#2563eb;fontColor=#ffffff;fontSize=14;fontStyle=1;shadow=1;

Secondary Button

rounded=1;whiteSpace=wrap;html=1;fillColor=#e5e7eb;strokeColor=#d1d5db;fontColor=#374151;fontSize=14;

Success Button

rounded=1;whiteSpace=wrap;html=1;fillColor=#10b981;strokeColor=#059669;fontColor=#ffffff;fontSize=14;fontStyle=1;

Danger Button

rounded=1;whiteSpace=wrap;html=1;fillColor=#ef4444;strokeColor=#dc2626;fontColor=#ffffff;fontSize=14;fontStyle=1;

Warning Button

rounded=1;whiteSpace=wrap;html=1;fillColor=#f59e0b;strokeColor=#d97706;fontColor=#ffffff;fontSize=14;fontStyle=1;

5.2 Card Styles

Standard Card

rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#e5e7eb;shadow=1;

Hover Effect Card

rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#3b82f6;strokeWidth=2;shadow=1;

Selected State Card

rounded=1;whiteSpace=wrap;html=1;fillColor=#eff6ff;strokeColor=#3b82f6;strokeWidth=2;

5.3 Label Styles

Info Label

rounded=1;whiteSpace=wrap;html=1;fillColor=#dbeafe;strokeColor=#3b82f6;fontColor=#1e40af;fontSize=12;

Success Label

rounded=1;whiteSpace=wrap;html=1;fillColor=#d1fae5;strokeColor=#10b981;fontColor=#065f46;fontSize=12;

Warning Label

rounded=1;whiteSpace=wrap;html=1;fillColor=#fef3c7;strokeColor=#f59e0b;fontColor=#92400e;fontSize=12;

Error Label

rounded=1;whiteSpace=wrap;html=1;fillColor=#fee2e2;strokeColor=#ef4444;fontColor=#991b1b;fontSize=12;

Neutral Label

rounded=1;whiteSpace=wrap;html=1;fillColor=#f3f4f6;strokeColor=#9ca3af;fontColor=#4b5563;fontSize=12;

5.4 Input Box Styles

Standard Input Box

rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#d1d5db;fontColor=#374151;

Focused Input Box

rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#3b82f6;strokeWidth=2;fontColor=#374151;

Disabled Input Box

rounded=1;whiteSpace=wrap;html=1;fillColor=#f3f4f6;strokeColor=#e5e7eb;fontColor=#9ca3af;

5.5 Connection Line Styles

Standard Connection

endArrow=classic;html=1;strokeColor=#6b7280;strokeWidth=1;

Emphasized Connection

endArrow=classic;html=1;strokeColor=#3b82f6;strokeWidth=2;

Dashed Connection

dashed=1;endArrow=classic;html=1;strokeColor=#9ca3af;strokeWidth=1;

Data Flow Connection

endArrow=block;endFill=1;html=1;strokeColor=#10b981;strokeWidth=2;

Control Flow Connection

endArrow=open;html=1;strokeColor=#f59e0b;strokeWidth=2;

VI. Advanced Beautification Techniques

6.1 Icon Integration

Using Built-in Icons

<mxCell id="icon1" value="" vertex="1" parent="1"
  style="shape=mxgraph.azure.user;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;">
  <mxGeometry x="100" y="100" width="50" height="50" as="geometry"/>
</mxCell>

Using Image Icons

<mxCell id="icon2" value="" vertex="1" parent="1"
  style="shape=image;image=https://cdn-icons-png.flaticon.com/512/25/25231.png;whiteSpace=wrap;html=1;">
  <mxGeometry x="200" y="100" width="50" height="50" as="geometry"/>
</mxCell>

Icon Library Reference

6.2 Text Typography

Multi-line Text

<mxCell id="multiline" value="First Line&#xa;Second Line&#xa;Third Line" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;align=left;verticalAlign=top;spacingLeft=10;spacingTop=10;">
  <mxGeometry x="100" y="200" width="150" height="100" as="geometry"/>
</mxCell>

HTML Rich Text

<mxCell id="richtext" value="&lt;b&gt;Bold Title&lt;/b&gt;&lt;br&gt;&lt;i&gt;Italic Description&lt;/i&gt;&lt;br&gt;&lt;font color=&apos;#ff0000&apos;&gt;Red Text&lt;/font&gt;" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#cccccc;">
  <mxGeometry x="300" y="200" width="150" height="100" as="geometry"/>
</mxCell>

Text Alignment Combinations

6.3 Combination Effects

Button with Icon

<!-- Icon -->
<mxCell id="btn-icon" value="" vertex="1" parent="1"
  style="shape=image;image=data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E;whiteSpace=wrap;html=1;">
  <mxGeometry x="110" y="310" width="20" height="20" as="geometry"/>
</mxCell>

<!-- Button background -->
<mxCell id="btn-bg" value="Confirm Submit" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#10b981;strokeColor=#059669;fontColor=#ffffff;fontSize=14;fontStyle=1;align=center;spacingLeft=25;">
  <mxGeometry x="100" y="300" width="120" height="40" as="geometry"/>
</mxCell>

Card with Avatar

<!-- Avatar -->
<mxCell id="avatar" value="" vertex="1" parent="1"
  style="shape=ellipse;whiteSpace=wrap;html=1;fillColor=#e2e8f0;strokeColor=#cbd5e0;aspect=fixed;">
  <mxGeometry x="110" y="410" width="40" height="40" as="geometry"/>
</mxCell>

<!-- Card -->
<mxCell id="profile-card" value="&lt;b&gt;Username&lt;/b&gt;&lt;br&gt;&lt;font size=&apos;11&apos; color=&apos;%23666666&apos;&gt;user@example.com&lt;/font&gt;" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#e2e8f0;shadow=1;align=left;spacingLeft=60;verticalAlign=middle;">
  <mxGeometry x="100" y="400" width="200" height="60" as="geometry"/>
</mxCell>

6.4 Dynamic Effect Simulation

Hover Effect (Static Representation)

<!-- Normal state -->
<mxCell id="hover-normal" value="Before Hover" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#d1d5db;">
  <mxGeometry x="100" y="500" width="100" height="40" as="geometry"/>
</mxCell>

<!-- Hover state -->
<mxCell id="hover-active" value="After Hover" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#eff6ff;strokeColor=#3b82f6;strokeWidth=2;shadow=1;">
  <mxGeometry x="220" y="500" width="100" height="40" as="geometry"/>
</mxCell>

Selected Effect

<mxCell id="selected" value="Selected State" vertex="1" parent="1"
  style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dbeafe;strokeColor=#3b82f6;strokeWidth=3;">
  <mxGeometry x="340" y="500" width="100" height="40" as="geometry"/>
</mxCell>

VII. Best Practices

7.1 Consistency Principle

1. Unified Color Scheme: Use no more than 5 main colors throughout the chart
2. Unified Shapes: Use the same shape for similar elements
3. Unified Fonts: Use 1-2 fonts throughout the chart
4. Unified Spacing: Maintain consistent element spacing

7.2 Hierarchy Principle

1. Color Depth: Use dark colors for important elements, light colors for secondary elements
2. Size Contrast: Important elements have larger sizes
3. Position Emphasis: Place important elements in the visual center

7.3 Readability Principle

1. Contrast: Text and background contrast must be sufficient
2. Font Size: Body text no less than 12px, headings no less than 14px
3. Whitespace: Maintain appropriate whitespace around elements

7.4 Style Naming Convention

It's recommended to create naming conventions for common styles:

/* Basic styles */
style-base: rounded=1;whiteSpace=wrap;html=1;

/* Color variants */
style-primary: fillColor=#3b82f6;strokeColor=#2563eb;fontColor=#ffffff;
style-success: fillColor=#10b981;strokeColor=#059669;fontColor=#ffffff;
style-warning: fillColor=#f59e0b;strokeColor=#d97706;fontColor=#ffffff;
style-danger: fillColor=#ef4444;strokeColor=#dc2626;fontColor=#ffffff;

/* Size variants */
size-small: fontSize=12;spacing=2;
size-normal: fontSize=14;spacing=4;
size-large: fontSize=16;spacing=6;

/* Effect variants */
effect-shadow: shadow=1;
effect-gradient: gradientColor=#ffffff;gradientDirection=south;

7.5 Performance Optimization

1. Avoid Too Many Effects: Don't use multiple effects like shadow, gradient, and glass simultaneously on a single element
2. Simplify Styles: Remove unused style attributes
3. Reuse Styles: Use the same style string for elements with the same style

VIII. Style Quick Reference Card

8.1 Common Style Quick Reference

8.2 Color Quick Reference

8.3 Size Quick Reference

X. Summary

This document provides a comprehensive guide to draw.io appearance beautification, including:

1. Style Basics: Syntax rules and inheritance mechanisms
2. Complete Property Reference: Detailed descriptions of 8 major style attribute categories
3. Color Schemes: Standard color series, semantic color schemes, and theme color schemes
4. Visual Effects: Shadow, gradient, glass, hand-drawn, 3D, and other effects
5. Style Templates: Common templates for buttons, cards, labels, input boxes, and connection lines
6. Advanced Techniques: Icon integration, text typography, combination effects, and dynamic effect simulation
7. Best Practices: Consistency, hierarchy, readability principles, and performance optimization
8. Quick Reference: Quick reference tables for common styles, colors, and sizes

By properly applying these beautification techniques, you can create professional, beautiful, and readable charts.