Skip to content
D
Documentation

ArrowStyle

reference
1 min readUpdated

Import it from @grafloria/engine.

ts
interface ArrowStyle

Properties

NameTypeDefaultDescription
type'none' | 'arrow' | 'circle' | 'square' | 'diamond' // Phase 4: ERD-specific arrows | 'crow-foot' // ERD many relationship (⋈) | 'one' // ERD one relationship (|) | 'zero-or-one' // ERD optional relationship (O|) | 'zero-or-many' // ERD optional many (O⋈) | 'one-or-many' // ERD mandatory many (|⋈) // Phase 4: UML-specific arrows | 'hollow-diamond' // UML aggregation (◇) | 'filled-diamond' // UML composition (◆) | 'generalization' // UML inheritance (△) | 'open-arrow' // UML dependency/realization (⊳) | 'double-arrow' // Bidirectional (⇄) // Phase 4: Additional arrows | 'cross' // X mark | 'bar' // Perpendicular line (⊥) | 'dot' // Simple dot | 'oval' // Oval shape // Wave 4 (Edges & links) — Card 5: half-arrowheads (Mermaid 11.13) | 'half-arrow-left' // Only the left barb (relative to direction of travel) | 'half-arrow-right' // Only the right barb // Wave 4 — Card 5: author-defined marker. Either path(raw SVG path data, // drawn in the marker's local frame with the tip toward +x) ormarker// (the name of a marker registered withregisterMarkerin @grafloria/renderer). | 'custom' // …and any other registered marker name. Keeps literal autocompletion for // the built-ins while lettingregisterMarker('my-thing', …) be used by // name, so the catalogue is no longer a closed enum. | (string & {})
sizenumber
filledboolean
width?number
offset?number
color?string
path?stringRaw SVG path data for a type: 'custom' marker. Drawn in the marker's LOCAL frame: the origin is the anchor the renderer pulls back from the endpoint, +x is the direction of travel. Scale it yourself (or read size when you build the string).
marker?stringName of a marker registered via registerMarker. Set it with type: 'custom' (or simply put the registered name in type).
tipOffset?numberDistance from the custom marker's local origin to its visual TIP, in the +x direction. The renderer pulls the marker back from the path endpoint by exactly this much so the tip lands on the port. Registered markers supply their own default; this overrides it. Default 0 for an unregistered path marker (i.e. the tip is at the origin).

Was this page helpful?

ArrowStyle — Grafloria