Drawio xml beautifier

Skill smith-source/everything-drawio-mind/sub-skills/drawio-xml-beautifier

** everything-drawio-mind ** is a powerful Draw.io graph processing pipeline that converts AI-generated content into professional, structured, and directly publishable Draw.io graph format.

Install

npx -y skills add smith-source/everything-drawio-mind --skill drawio-xml-beautifier

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

draw.io XML chart beautification and style design guide, including complete style property reference, color schemes, visual effects, and best practices

SKILL.md

33.0 KB, as published. Nobody here has run it

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:

Each key-value pair ends with a semicolon ;
Key names and values are connected with an equals sign =
Key names are case-sensitive
Values can be strings, numbers, or booleans (0/1)
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

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

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

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

<!-- 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
Light Blue	#dae8fc	General nodes, services
Dark Blue	#6c8ebf	Borders, emphasis
Light Green	#d5e8d4	Success, normal state
Dark Green	#82b366	Borders, confirmation
Light Yellow	#fff2cc	Warning, attention
Dark Yellow	#d6b656	Borders, warning
Light Red	#f8cecc	Error, danger
Dark Red	#b85450	Borders, error
Light Purple	#e1d5e7	Data, storage
Dark Purple	#9673a6	Borders, data
Gray	#f5f5f5	Background, grouping
Dark Gray	#666666	Borders, 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

<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

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

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

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

<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

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

<!-- 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;[email protected]&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

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

7.2 Hierarchy Principle

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

7.3 Readability Principle

Contrast: Text and background contrast must be sufficient
Font Size: Body text no less than 12px, headings no less than 14px
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

Avoid Too Many Effects: Don't use multiple effects like shadow, gradient, and glass simultaneously on a single element
Simplify Styles: Remove unused style attributes
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:

Style Basics: Syntax rules and inheritance mechanisms
Complete Property Reference: Detailed descriptions of 8 major style attribute categories
Color Schemes: Standard color series, semantic color schemes, and theme color schemes
Visual Effects: Shadow, gradient, glass, hand-drawn, 3D, and other effects
Style Templates: Common templates for buttons, cards, labels, input boxes, and connection lines
Advanced Techniques: Icon integration, text typography, combination effects, and dynamic effect simulation
Best Practices: Consistency, hierarchy, readability principles, and performance optimization
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.