---
name: drawio-xml-beautifier
description: draw.io XML chart beautification and style design guide, including complete style property reference, color schemes, visual effects, and best practices

---

# 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

| Style Key | Values | Description | Example |
|--------|------|------|------|
| shape | rectangle, ellipse, rhombus, cloud, cylinder3, note, parallelogram, hexagon, triangle, callout, card, tape, arrow, etc. | Basic shape | `shape=ellipse` |
| rounded | 0, 1 | Whether to have rounded corners | `rounded=1` |
| arcSize | 0-100 | Rounded corner arc percentage | `arcSize=20` |
| aspect | fixed, variable | Fixed or variable aspect ratio | `aspect=fixed` |
| direction | north, south, east, west | Direction (for arrow shapes) | `direction=north` |
| rotation | 0-360 | Rotation angle | `rotation=45` |
| flipH | 0, 1 | Horizontal flip | `flipH=1` |
| flipV | 0, 1 | Vertical flip | `flipV=1` |

### Special Shapes

| Shape | Style Value | Description |
|------|--------|------|
| Rectangle | `shape=rectangle` or not set | Default shape |
| Rounded Rectangle | `rounded=1` | Used with arcSize |
| Ellipse | `shape=ellipse` | Circle set aspect=fixed |
| Rhombus | `shape=rhombus` | Flowchart decision node |
| Cylinder | `shape=cylinder3` | Database icon |
| Cloud | `shape=cloud` | Cloud/Network icon |
| Document | `shape=note` | Document/Note |
| Parallelogram | `shape=parallelogram` | Input/Output node |
| Hexagon | `shape=hexagon` | Network topology |
| Triangle | `shape=triangle` | Direction indicator |
| Callout | `shape=callout` | Dialog bubble |
| Card | `shape=card` | Index card style |
| Tape | `shape=tape` | Tape/Label style |
| Arrow | `shape=arrow` | Direction arrow |

## 2.2 Fill Styles

| Style Key | Values | Description | Example |
|--------|------|------|------|
| fillColor | #RRGGBB, none | Fill color | `fillColor=#dae8fc` |
| fillOpacity | 0-100 | Fill opacity | `fillOpacity=50` |
| gradientColor | #RRGGBB | Gradient end color | `gradientColor=#ffffff` |
| gradientDirection | north, south, east, west | Gradient direction | `gradientDirection=south` |
| glass | 0, 1 | Glass effect | `glass=1` |
| shadow | 0, 1 | Shadow effect | `shadow=1` |
| sketch | 0, 1 | Hand-drawn style | `sketch=1` |
| comic | 0, 1 | Comic style | `comic=1` |
| hachureGap | number | Hand-drawn line spacing | `hachureGap=4` |
| hachureAngle | number | Hand-drawn line angle | `hachureAngle=45` |
| fillWeight | number | Hand-drawn fill thickness | `fillWeight=2` |
| roughness | number | Hand-drawn roughness | `roughness=1` |
| bowing | number | Hand-drawn curvature | `bowing=1` |

### Fill Effect Examples

```xml
<!-- 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

| Style Key | Values | Description | Example |
|--------|------|------|------|
| strokeColor | #RRGGBB, none | Border color | `strokeColor=#6c8ebf` |
| strokeWidth | number | Border width (pixels) | `strokeWidth=2` |
| dashed | 0, 1 | Whether dashed | `dashed=1` |
| dashPattern | pattern | Dash pattern | `dashPattern=1 1` |
| rounded | 0, 1 | Rounded connection | `rounded=1` |
| linecap | flat, square, round | Line end style | `linecap=round` |
| linejoin | miter, round, bevel | Connection style | `linejoin=round` |
| strokeOpacity | 0-100 | Border opacity | `strokeOpacity=80` |
| perimeter | style name | Perimeter style | `perimeter=ellipsePerimeter` |

### Border Effect Examples

```xml
<!-- 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

| Style Key | Values | Description | Example |
|--------|------|------|------|
| fontColor | #RRGGBB | Font color | `fontColor=#333333` |
| fontSize | number | Font size (pixels) | `fontSize=14` |
| fontFamily | font name | Font family | `fontFamily=Arial` |
| fontStyle | 0-7 | Font style | `fontStyle=1` |
| align | left, center, right | Horizontal alignment | `align=center` |
| verticalAlign | top, middle, bottom | Vertical alignment | `verticalAlign=middle` |
| whiteSpace | wrap, nowrap | Text wrapping | `whiteSpace=wrap` |
| html | 0, 1 | Support HTML tags | `html=1` |
| labelBackgroundColor | #RRGGBB | Label background color | `labelBackgroundColor=#ffffff` |
| labelBorderColor | #RRGGBB | Label border color | `labelBorderColor=#cccccc` |
| labelPosition | left, center, right | Label position | `labelPosition=center` |
| verticalLabelPosition | top, middle, bottom | Vertical label position | `verticalLabelPosition=middle` |
| spacing | number | Text spacing | `spacing=2` |
| spacingTop | number | Top spacing | `spacingTop=5` |
| spacingLeft | number | Left spacing | `spacingLeft=10` |
| spacingBottom | number | Bottom spacing | `spacingBottom=5` |
| spacingRight | number | Right spacing | `spacingRight=10` |
| textOpacity | 0-100 | Text opacity | `textOpacity=90` |

### Font Style Combinations

| fontStyle Value | Effect |
|-------------|------|
| 0 | Normal |
| 1 | Bold |
| 2 | Italic |
| 3 | Bold + Italic |
| 4 | Underline |
| 5 | Bold + Underline |
| 6 | Italic + Underline |
| 7 | Bold + Italic + Underline |

### Text Effect Examples

```xml
<!-- 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

| Style Key | Values | Description | Example |
|--------|------|------|------|
| endArrow | none, classic, block, open, oval, diamond, arrow, circle, async, box | End arrow style | `endArrow=classic` |
| endFill | 0, 1 | Whether end arrow is filled | `endFill=1` |
| endSize | number | End arrow size | `endSize=12` |
| startArrow | none, classic, block, open, oval, diamond, arrow, circle, async, box | Start arrow style | `startArrow=classic` |
| startFill | 0, 1 | Whether start arrow is filled | `startFill=0` |
| startSize | number | Start arrow size | `startSize=12` |
| edgeStyle | orthogonalEdgeStyle, entityRelationEdgeStyle, elbowEdgeStyle, sideToSideEdgeStyle, topToBottomEdgeStyle, segmentEdgeStyle | Edge routing style | `edgeStyle=orthogonalEdgeStyle` |
| curved | 0, 1 | Whether curved | `curved=1` |
| jumpStyle | none, arc, gap, sharp | Cross jump style | `jumpStyle=arc` |
| jumpSize | number | Cross jump size | `jumpSize=8` |
| rounded | 0, 1 | Rounded polyline | `rounded=1` |
| orthogonalLoop | 0, 1 | Orthogonal loop | `orthogonalLoop=1` |
| jettySize | number, auto | Connection point offset | `jettySize=auto` |
| sourcePerimeterSpacing | number | Source perimeter spacing | `sourcePerimeterSpacing=5` |
| targetPerimeterSpacing | number | Target perimeter spacing | `targetPerimeterSpacing=5` |
| entryX | 0-1 | Entry X position (relative) | `entryX=0.5` |
| entryY | 0-1 | Entry Y position (relative) | `entryY=0` |
| exitX | 0-1 | Exit X position (relative) | `exitX=1` |
| exitY | 0-1 | Exit Y position (relative) | `exitY=0.5` |

### Arrow Type Illustration

| Arrow Type | Style Value | Description |
|----------|--------|------|
| No arrow | `endArrow=none` | Straight line |
| Classic arrow | `endArrow=classic` | Standard arrow |
| Block arrow | `endArrow=block` | Solid block |
| Open arrow | `endArrow=open` | Hollow arrow |
| Oval arrow | `endArrow=oval` | Circular endpoint |
| Diamond arrow | `endArrow=diamond` | Diamond endpoint |
| Arrow shape | `endArrow=arrow` | Simple arrow |
| Circle arrow | `endArrow=circle` | Circular endpoint |
| Async arrow | `endArrow=async` | Open arrow (UML async) |
| Box arrow | `endArrow=box` | Box endpoint |

### Edge Effect Examples

```xml
<!-- 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

| Style Key | Values | Description | Example |
|--------|------|------|------|
| container | 0, 1 | Whether it's a container | `container=1` |
| collapsible | 0, 1 | Whether collapsible | `collapsible=1` |
| foldable | 0, 1 | Whether foldable | `foldable=1` |
| startSize | number | Title bar size | `startSize=30` |
| horizontal | 0, 1 | Horizontal/Vertical layout | `horizontal=1` |
| swimlaneFillColor | #RRGGBB | Swimlane fill color | `swimlaneFillColor=#f5f5f5` |
| swimlaneLine | 0, 1 | Show swimlane separator | `swimlaneLine=1` |
| collapsible | 0, 1 | Whether collapsible | `collapsible=1` |
| resizeWidth | 0, 1 | Allow width adjustment | `resizeWidth=1` |
| resizeHeight | 0, 1 | Allow height adjustment | `resizeHeight=1` |
| moveCells | 0, 1 | Include child elements when moving | `moveCells=1` |
| recursiveResize | 0, 1 | Recursive resize | `recursiveResize=1` |
| dropTarget | 0, 1 | Allow drag and drop | `dropTarget=1` |
| pointerEvents | 0, 1 | Respond to mouse events | `pointerEvents=1` |

## 2.7 Image Styles

| Style Key | Values | Description | Example |
|--------|------|------|------|
| shape | image | Image shape | `shape=image` |
| image | URL | Image address | `image=https://example.com/icon.png` |
| imageAspect | 0, 1 | Preserve image ratio | `imageAspect=1` |
| imageBackground | #RRGGBB | Image background color | `imageBackground=#ffffff` |
| imageBorder | #RRGGBB | Image border color | `imageBorder=#cccccc` |
| flipH | 0, 1 | Horizontal flip | `flipH=1` |
| flipV | 0, 1 | Vertical flip | `flipV=1` |
| clip | 0, 1 | Clip image | `clip=1` |

---

# III. Color Schemes

## 3.1 Standard Color Schemes

### Basic Color Series

| Color Name | Hexadecimal | Suggested Use | Preview |
|----------|----------|----------|------|
| Light Blue | #dae8fc | General nodes, services | ![#dae8fc](https://via.placeholder.com/20/dae8fc/000000?text=+) |
| Dark Blue | #6c8ebf | Borders, emphasis | ![#6c8ebf](https://via.placeholder.com/20/6c8ebf/000000?text=+) |
| Light Green | #d5e8d4 | Success, normal state | ![#d5e8d4](https://via.placeholder.com/20/d5e8d4/000000?text=+) |
| Dark Green | #82b366 | Borders, confirmation | ![#82b366](https://via.placeholder.com/20/82b366/000000?text=+) |
| Light Yellow | #fff2cc | Warning, attention | ![#fff2cc](https://via.placeholder.com/20/fff2cc/000000?text=+) |
| Dark Yellow | #d6b656 | Borders, warning | ![#d6b656](https://via.placeholder.com/20/d6b656/000000?text=+) |
| Light Red | #f8cecc | Error, danger | ![#f8cecc](https://via.placeholder.com/20/f8cecc/000000?text=+) |
| Dark Red | #b85450 | Borders, error | ![#b85450](https://via.placeholder.com/20/b85450/000000?text=+) |
| Light Purple | #e1d5e7 | Data, storage | ![#e1d5e7](https://via.placeholder.com/20/e1d5e7/000000?text=+) |
| Dark Purple | #9673a6 | Borders, data | ![#9673a6](https://via.placeholder.com/20/9673a6/000000?text=+) |
| Gray | #f5f5f5 | Background, grouping | ![#f5f5f5](https://via.placeholder.com/20/f5f5f5/000000?text=+) |
| Dark Gray | #666666 | Borders, text | ![#666666](https://via.placeholder.com/20/666666/000000?text=+) |

### Extended Color Series

| Color Name | Hexadecimal | Suggested Use |
|----------|----------|----------|
| Sky Blue | #b0e0e6 | Fresh, tech |
| Mint Green | #98fb98 | Eco, health |
| Coral Red | #f08080 | Vitality, eye-catching |
| Gold | #ffd700 | Premium, reward |
| Orange | #ffa500 | Creativity, vitality |
| Pink | #ffc0cb | Soft, feminine |
| Cyan | #00ffff | Modern, cool |
| Brown | #d2691e | Natural, traditional |
| Black | #000000 | Formal, emphasis |
| White | #ffffff | Clean, pure |

## 3.2 Semantic Color Schemes

### Flowchart Color Scheme

| Semantic | Fill Color | Border Color | Text Color | Description |
|------|--------|--------|--------|------|
| Start/End | #d5e8d4 | #82b366 | #333333 | Ellipse shape |
| Process Step | #dae8fc | #6c8ebf | #333333 | Rectangle |
| Decision | #fff2cc | #d6b656 | #333333 | Rhombus |
| Input/Output | #e1d5e7 | #9673a6 | #333333 | Parallelogram |
| Exception Handling | #f8cecc | #b85450 | #333333 | Rectangle |
| Sub-process | #f5f5f5 | #666666 | #333333 | Double rectangle |

### System Architecture Color Scheme

| Component Type | Fill Color | Border Color | Description |
|----------|--------|--------|------|
| User/Client | #dae8fc | #6c8ebf | Blue series |
| Gateway/Load Balancer | #d5e8d4 | #82b366 | Green series |
| Microservice | #fff2cc | #d6b656 | Yellow series |
| Database | #e1d5e7 | #9673a6 | Purple series |
| Cache | #ffe6cc | #d79b00 | Orange series |
| Message Queue | #f8cecc | #b85450 | Red series |
| External Service | #f5f5f5 | #666666 | Gray series |
| Monitoring/Logging | #e6f3ff | #0075e9 | Sky blue series |

### Network Topology Color Scheme

| Device Type | Fill Color | Border Color | Description |
|----------|--------|--------|------|
| Internet/Cloud | #f5f5f5 | #666666 | Gray |
| Firewall/Security | #f8cecc | #b85450 | Red |
| Router | #fff2cc | #d6b656 | Yellow |
| Switch | #e1d5e7 | #9673a6 | Purple |
| Server | #dae8fc | #6c8ebf | Blue |
| Workstation | #d5e8d4 | #82b366 | Green |
| Wireless Device | #ffe6cc | #d79b00 | Orange |

### UML Color Scheme

| UML Element | Fill Color | Border Color | Description |
|---------|--------|--------|------|
| Class | #dae8fc | #6c8ebf | Blue |
| Interface | #fff2cc | #d6b656 | Yellow |
| Abstract Class | #e1d5e7 | #9673a6 | Purple |
| Enum | #d5e8d4 | #82b366 | Green |
| Package | #f5f5f5 | #666666 | Gray |
| Comment | #ffff88 | #36393d | Yellow |

## 3.3 Theme Color Schemes

### Dark Theme

| Element | Fill Color | Border Color | Text Color |
|------|--------|--------|--------|
| Background | #2d2d2d | - | - |
| Primary Node | #3d5a80 | #98c1d9 | #ffffff |
| Secondary Node | #457b9d | #a8dadc | #ffffff |
| Emphasized Node | #e63946 | #f1faee | #ffffff |
| Success Node | #2a9d8f | #e9c46a | #ffffff |
| Warning Node | #f4a261 | #e76f51 | #ffffff |
| Connection Line | #a8dadc | - | #ffffff |

### Light Theme

| Element | Fill Color | Border Color | Text Color |
|------|--------|--------|--------|
| Background | #ffffff | - | - |
| Primary Node | #e3f2fd | #1976d2 | #333333 |
| Secondary Node | #f3e5f5 | #7b1fa2 | #333333 |
| Emphasized Node | #ffebee | #c62828 | #333333 |
| Success Node | #e8f5e9 | #2e7d32 | #333333 |
| Warning Node | #fff3e0 | #ef6c00 | #333333 |
| Connection Line | #90a4ae | - | #333333 |

### Business Theme

| Element | Fill Color | Border Color | Text Color |
|------|--------|--------|--------|
| Background | #fafafa | - | - |
| Strategic Layer | #1e3a5f | #2c5282 | #ffffff |
| Tactical Layer | #2d5a87 | #3d7ab8 | #ffffff |
| Execution Layer | #4a7fb5 | #6ba3d8 | #ffffff |
| Support Layer | #7da8c8 | #a0c4e0 | #333333 |
| External | #c5d5e5 | #e0eaf5 | #333333 |

---

# IV. Visual Effects

## 4.1 Shadow Effects

### Basic Shadow

```xml
<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:

```xml
<!-- 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

```xml
<!-- 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

```xml
<!-- 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

```xml
<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

```xml
<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

| Parameter | Values | Description |
|------|------|------|
| sketch | 0, 1 | Enable hand-drawn style |
| roughness | 0-10 | Roughness, higher value means rougher |
| hachureGap | number | Fill line spacing |
| hachureAngle | 0-360 | Fill line angle |
| fillWeight | number | Fill line thickness |
| bowing | number | Line curvature |

## 4.5 3D Effects

### 3D Button Effect

```xml
<!-- 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

```xml
<!-- 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

```xml
<!-- 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

```xml
<!-- 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

```xml
<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

```xml
<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

| Library Name | Prefix | Examples |
|------|------|------|
| Azure | mxgraph.azure | user, server, database |
| AWS | mxgraph.aws | compute, storage, network |
| Cisco | mxgraph.cisco | router, switch, firewall |
| GCP | mxgraph.gcp | compute_engine, cloud_storage |
| Kubernetes | mxgraph.k8s | pod, service, deployment |

## 6.2 Text Typography

### Multi-line Text

```xml
<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

```xml
<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

| Horizontal Alignment | Vertical Alignment | Effect |
|----------|----------|------|
| align=left | verticalAlign=top | Top-left |
| align=center | verticalAlign=top | Top-center |
| align=right | verticalAlign=top | Top-right |
| align=left | verticalAlign=middle | Left-center |
| align=center | verticalAlign=middle | Center |
| align=right | verticalAlign=middle | Right-center |
| align=left | verticalAlign=bottom | Bottom-left |
| align=center | verticalAlign=bottom | Bottom-center |
| align=right | verticalAlign=bottom | Bottom-right |

## 6.3 Combination Effects

### Button with Icon

```xml
<!-- 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

```xml
<!-- 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)

```xml
<!-- 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

```xml
<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

| Effect | Style Code |
|------|----------|
| Rounded Rectangle | `rounded=1;` |
| Circle | `ellipse;aspect=fixed;` |
| Shadow | `shadow=1;` |
| Gradient | `gradientColor=#ffffff;gradientDirection=south;` |
| Glass | `glass=1;` |
| Hand-drawn | `sketch=1;roughness=2;` |
| Bold | `fontStyle=1;` |
| Center | `align=center;verticalAlign=middle;` |
| Arrow | `endArrow=classic;` |
| Dashed | `dashed=1;` |

## 8.2 Color Quick Reference

| Purpose | Fill Color | Border Color |
|------|--------|--------|
| Primary | #3b82f6 | #2563eb |
| Success | #10b981 | #059669 |
| Warning | #f59e0b | #d97706 |
| Danger | #ef4444 | #dc2626 |
| Info | #3b82f6 | #2563eb |
| Neutral | #6b7280 | #4b5563 |
| Light | #f3f4f6 | #d1d5db |

## 8.3 Size Quick Reference

| Element Type | Recommended Width | Recommended Height | Font Size |
|----------|----------|----------|----------|
| Small Button | 80px | 32px | 12px |
| Standard Button | 120px | 40px | 14px |
| Large Button | 160px | 48px | 16px |
| Small Card | 150px | 80px | 12px |
| Standard Card | 200px | 120px | 14px |
| Large Card | 280px | 160px | 14px |
| Icon | 32-64px | 32-64px | - |
| Avatar | 40-80px | 40-80px | - |

---

# 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.