Styling & Design
Learn how to customize the appearance of your diagrams globally using the Design Block, and inline overrides.
The Global Design Block
The `design` block allows you to set canvas-wide defaults for typography, colors, and element styling. It is usually declared at the top of your document:
12345678910111213design { font: "Space Grotesk" palette: ["#1e1b4b", "#6c6ff7", "#22c55e", "#f59e0b"] shapeDefaults: { fill: "#1e1b4b" stroke: "#6c6ff7" strokeWidth: 2 } connectorDefaults: { stroke: "#a5a6fb" routing: bezier }}Design Block Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
| font | string | "Geist Sans" | Global default font family. Applied to all text, shapes, and labels. |
| palette | string[] | [] | List of hex color strings to populate the design palette. |
| shapeDefaults | object | {} | Default style settings for all shapes (e.g. default fill, stroke, strokeWidth). |
| connectorDefaults | object | {} | Default style settings for all connection lines (e.g. routing, stroke, strokeWidth). |
| canvas | object | {} | Default settings for the canvas, such as background color and grid snap settings. |
Inline Style Overrides
While the global `design` block sets the baseline, you can override any style on an individual element by defining the style attributes directly inside its brace block:
12345// Inherits global defaults"Default Node" [process] // Overrides the fill and stroke locally"Accent Node" [process, color: pink]Tip
Explicit Positioning & Sizing
By default, top-level nodes are arranged in a clean, left-to-right flow layout automatically. However, you can explicitly position and size any element using layout shorthand attributes:
Explicit Positioning
Place an element at exact coordinates on the canvas using x and y attributes. This locks the element in place and excludes it from the auto-layout flow.
1"Main Server" [icon: server, color: blue]Explicit Sizing
Define the exact width and height of an element:
1"Nav Menu" [icon: menu, color: green]