Style vocabulary

Styles in nifdi are named semantic properties, not CSS. A property says what a thing is — fill-colour, corner-radius, marker-end — and the renderer decides how to draw it. That is what lets the same diagram come out identically from the canvas and from an agent.

Two things follow from the names being nifdi’s own rather than CSS’s:

• British spelling throughout. It is fill-colour, border-colour, text-colour. colour with a u is the property name; there is no color alias to fall back on.
• No cascade, no inheritance. A property is set on an object or it is not. Nothing is inherited from a container by the blocks inside it.

Every table below is generated at build time from the style model. A property the model does not have cannot appear here, and a property the model gains but nobody has described fails the test suite.

Canvas

The surface the diagram sits on. There is one canvas style per diagram.

Property	Value	What it does
fill-colour	colour	Colour painted inside the shape, or none to leave it transparent.
pattern-type	one ofnonedotsgrid	Which repeating pattern the canvas draws behind the diagram.
pattern-size	number	Spacing in pixels between the canvas pattern marks.
pattern-colour	colour	Colour of the canvas pattern marks.

Containers

Shapes that hold other objects — the block type you get by dragging on empty canvas.

Property	Value	What it does
mode	one ofopengroup	Whether a container is open, so its children select individually, or sealed as a group.
corner-radius	number	Radius in pixels of a rounded corner, or of the bend where a path turns.
border-width	number	Thickness in pixels of the outline drawn around a shape.
border-colour	colour	Colour of the outline drawn around a shape.
border-style	line style	Whether the outline is solid or dashed, and how the dashes repeat.
background	background	What fills the shape behind its contents.
drop-shadow	drop shadow	The shadow cast by the shape, or none.
connector-factory	connector name	Which connector shape new paths leaving this object are drawn with.

Text

Text objects, including the labels that live inside containers and along paths.

Property	Value	What it does
text-colour	colour	Colour of the glyphs.
font-size	number	Height of the glyphs in pixels.
font-weight	number	Weight of the glyphs, on the usual 100–900 scale.
font-family	font name	Name of the font, taken from the Google Fonts catalogue.
letter-spacing	number	Extra space in pixels inserted between glyphs.
new-line-behaviour	one ofpeerparent	Whether a new line becomes a sibling of this text or a child of its parent.
connector-factory	connector name	Which connector shape new paths leaving this object are drawn with.

Icons

Icon blocks drawn from the AWS, Azure, GCP and generic libraries.

Property	Value	What it does
label-factory	label name	Which text object is created when an icon is labelled.
connector-factory	connector name	Which connector shape new paths leaving this object are drawn with.
colour	colour	Colour of the icon glyph, or of the shadow it casts.

Paths

The connectors between blocks. Both ends carry a marker of their own.

Property	Value	What it does
corner-radius	number	Radius in pixels of a rounded corner, or of the bend where a path turns.
path-colour	colour	Colour of the line.
path-width	number	Thickness in pixels of the line.
outline-colour	colour	Colour of the outline drawn behind the line, separating it from what it crosses.
outline-width	number	Thickness in pixels of the outline drawn behind the line, or 0 for no outline.
line-style	line style	Whether the line is solid or dashed, and how the dashes repeat.
marker-start	marker	The arrow head or line cap drawn where the path begins.
marker-end	marker	The arrow head or line cap drawn where the path ends.
clearance	number	Minimum gap in pixels a path keeps from the objects it routes past.

Margins

Margins are not stored on the style like the properties above; they are addressed by these names in the inspector and from code. Where two neighbours ask for different margins, the larger one wins.

Property	Value	What it does
margin	number	Minimum space this object keeps from its neighbours on every side.
margin-left	number	Minimum space this object keeps from its neighbours on the left.
margin-right	number	Minimum space this object keeps from its neighbours on the right.
margin-top	number	Minimum space this object keeps from its neighbours above.
margin-bottom	number	Minimum space this object keeps from its neighbours below.

Compound values

Four properties above do not take a scalar. Each takes a small record of its own properties, or the single word none.

Backgrounds

The value a container's background property takes, or none for a transparent shape.

Property	Value	What it does
fill-colour	colour	Colour painted inside the shape, or none to leave it transparent.

Drop shadows

The value a container's drop-shadow property takes, or none for no shadow.

Property	Value	What it does
offset-x	number	How far the shadow is displaced horizontally, in pixels.
offset-y	number	How far the shadow is displaced vertically, in pixels.
std-deviation	number	Standard deviation of the Gaussian blur applied to the shadow.
colour	colour	Colour of the shadow.
opacity	number	Opacity of the shadow, from 0 to 1.

Markers

The value a path's marker-start and marker-end properties take.

Property	Value	What it does
marker-width	number	Size of the arrow head measured across the line.
marker-length	number	Size of the arrow head measured along the line.
gap	number	Space between the end of the line and the object it is attached to.
marker-style	one oftriangledartsquare-chevronround-chevronclipped-chevronflat-chevronchamfersquare-capround-capcirclering	Which arrow head or line cap shape is drawn.

Dashes

The value a border-style or line-style property takes when it is not solid.

Property	Value	What it does
repeat-distance	number	Length in pixels of one dash plus one gap.

Intersections

Where one path crosses another, the hop drawn over the crossing carries its own style.

Property	Value	What it does
background	background	What fills the shape behind its contents.
connector-factory	connector name	Which connector shape new paths leaving this object are drawn with.

Selectors

Styles are addressed by selector when an agent applies them. Selector matching follows the diagram’s structure, including containment and attachment.