Styling & Customization

Estimated reading: 2 minutes 16 views

ArchFlow provides granular control over the look and feel of your diagrams, from node appearance to animated line routing.

1. Node Styling

When you select a node, the Properties Panel slides out on the left. The following customization options are available for nodes:

Label / Text: Edit the display name of the node.
Colors: Choose from standard color swatches (e.g. transparent, soft blue, green, red, gray, yellow, purple) to fill the component.
Typography: Scale the label size between Small, Medium, Large, and Extra Large.
Border Style: Define borders as solid, dashed, or dotted.
Opacity: Adjust transparency for background backing containers.

When you select a connection line (edge), the Properties Panel changes to show Line Style controls:

Customize how connections navigate across the canvas:

Curve (Bezier): A flowing, organic curve between source and destination ports.
Straight: A direct, linear, shortest-path connection.
Elbow (Smoothstep): An orthogonal path with rounded elbows, perfect for clean system architectures.

Colors: Stroke colors matching system categories.
Line Width: Stroke widths ranging from Thin, Medium, Thick, X-Thick, and XX-Thick.
Style: Solid, Dashed, or Dotted strokes.

Turn static diagrams into dynamic workflows:

Toggle Flow Animation from Static to Flowing.
Flowing connections display an animated dash offset that moves in the direction of data flow (ideal for pipelines, API responses, and streaming routes).

ArchFlow includes full theme sync support:

The workspace theme (Dark or Light) is automatically synchronized in real-time with the DevScribe host container theme.
The background canvas, grid dots, top bar, sidebar library, and element fills swap colors seamlessly (e.g. canvas turns slate dark in Dark Mode to protect eyes, and bright slate in Light Mode).
Exported PNG images and GIFs automatically respect your active editor theme.