Mastodawn

Jack Linke 🦄Aug 17, 2024

I ❤️❤️❤️ #drawio.

I use it for all my diagrams. It's also free and available for web or desktop, so you can access it from anywhere. There's even an #Obsidian plugin for creating diagrams with it.

But, as with so many tools, my technical diagrams were looking a bit stale 😦

I wanted to give them a fresh look, and what better than an 80's neon beach aesthetic to make them pop? ✨🕶️✨

Well, whichever developer added the ability to style drop shadows earlier this year made my dream come true.

1/4

Show thread

Jack Linke 🦄Aug 17, 2024

I present: the Beach Dreams style for #drawio. It comes in two neon flavors: Bold Beach and Creamy Beach. Bold Beach is a bit more vibrant, while Creamy Beach is a bit more pastel.

As always with neons, some colors will be less ideal for things like text or small details, so keep that in mind.

Enjoy :)

2/4

#drawio #BeachDreams #Neon #Aesthetic #Diagram #Diagrams #80s #TechnicalDiagrams #Vibe #Art

Show thread

Jack Linke 🦄Aug 17, 2024

Here are the #Colors to replicate. Open the Properties pane & set shadow x & y offsets to 0, shadow opacity to 100, and shadow blur to 5 to achieve the same look.

# Bold Beach

## Blue
- 00AAFF (border/text)
- 54CCFF (shadow)

## Purple
- AA00FF
- CF70FF

## Pink
- FF00AA
- FF5EBF

## Orange
- FFBB00
- FFD45E

## Green
- 77FF00
- ABFF61

# Creamy Beach

## Blue
- 54CCFF
- 82D5FF

## Purple
- D278FF
- DC96FF

## Pink
- FF66D6
- FF66D6

## Orange
- FFBC70
- FFC68C

## Green
- A8FF5C
- C3FF8F

3/4

Show thread

Jack Linke 🦄

And the full style for Bold Beach Blue, from which you can easily adapt the other colors.

rounded=1;whiteSpace=wrap;html=1;shadow=1;comic=0;strokeColor=#00aaff;strokeWidth=3.1496;align=center;verticalAlign=middle;shadowOffsetX=0;shadowOffsetY=0;shadowBlur=5;shadowColor=#54CCFF;shadowOpacity=100;fontFamily=Helvetica;fontSize=13;fontColor=#00AAFF;labelBackgroundColor=none;fillColor=#FFFFFF;glass=0;textShadow=1;fontStyle=1

4/4

#drawio #BeachDreams #Neon #Aesthetic #Diagram #Diagrams #80s