This page documents the CellStyle and CellStateStyle TypeScript types: their definitions, the properties they expose, and the special fields (baseStyleNames, ignoreDefaultStyle) that control style inheritance. These types live at the input and resolved ends of the style pipeline.
For how the Stylesheet class resolves a CellStyle into a CellStateStyle (the merging algorithm), see Stylesheet and Style Resolution. For an overview of how style flows from cells through to rendering, see Style System Overview.
CellStyle and CellStateStyle represent two stages in the style pipeline:
CellStateStyle — the complete set of visual properties that can be applied to a cell. Every field is optional and directly describes rendering behavior (color, shape, font, routing, etc.).CellStyle — a superset of CellStateStyle, adding two control fields: baseStyleNames and ignoreDefaultStyle. This is the type stored on Cell objects and passed when creating cells.Type relationship diagram:
Sources: packages/core/src/types.ts49-75
Where each type is used:
| Type | Stored on | Created by |
|---|---|---|
CellStyle | Cell.style | User code, insertVertex, insertEdge |
CellStateStyle | CellState.style | Stylesheet.getCellStyle (resolution) |
Sources: packages/core/src/types.ts49-99
CellStateStyle is the fully-resolved style type. It contains every visual property understood by the renderer. All properties are optional; unset properties fall back to defaults defined in StyleDefaultsConfig or hard-coded constants.
Type definition location: packages/core/src/types.ts78-899
Properties are logically grouped below. All are undefined unless set.
| Property | Type | Default | Description |
|---|---|---|---|
shape | StyleShapeValue | edge/vertex default | Shape to render; looked up in ShapeRegistry or StencilShapeRegistry |
aspect | string | 'empty' | 'fixed' preserves aspect ratio on resize |
direction | DirectionValue | 'east' | Orientation of certain shapes (e.g. swimlane, triangle) |
horizontal | boolean | true | For swimlane: true = horizontal layout |
rotation | number | 0 | Shape rotation in degrees (0–360) |
flipH | boolean | false | Horizontal flip |
flipV | boolean | false | Vertical flip |
| Property | Type | Default | Description |
|---|---|---|---|
fillColor | SpecialStyleColorValue | — | Background fill color |
fillOpacity | number | — | Opacity 0–100 |
strokeColor | SpecialStyleColorValue | — | Outline/border color |
strokeWidth | number | — | Stroke width in pixels (≥ 1) |
strokeOpacity | number | — | Opacity 0–100 |
gradientColor | SpecialStyleColorValue | — | Secondary gradient color |
gradientDirection | DirectionValue | 'south' | Direction of fill→gradient |
opacity | number | — | Overall shape opacity 0–100 |
shadow | boolean | false | Render drop shadow |
glass | boolean | false | Glass gradient effect |
| Property | Type | Default | Description |
|---|---|---|---|
fontFamily | string | — | Font name(s) |
fontSize | number | — | Font size in pixels |
fontStyle | number | — | Bitmask of FONT_STYLE_FLAG values (bold, italic, etc.) |
fontColor | SpecialStyleColorValue | — | Label text color |
align | AlignValue | 'center' | Horizontal alignment of text lines within label bounds |
verticalAlign | VAlignValue | 'middle' | Vertical alignment of text within label bounds |
labelPosition | AlignValue | 'ignore' | 'center' | Position of label bounds relative to cell |
verticalLabelPosition | VAlignValue | 'middle' | Vertical position of label bounds relative to cell |
noLabel | boolean | false | Hides label entirely |
labelBackgroundColor | ColorValue | — | Background color behind label text |
labelBorderColor | ColorValue | — | Border color around label text |
labelPadding | number | — | Space between label border and text |
spacing | number | 0 | Added to all sides of label in vertex |
spacingTop/Bottom/Left/Right | number | 0 | Per-side label padding |
overflow | OverflowValue | 'visible' | How to handle label overflow |
whiteSpace | WhiteSpaceValue | 'nowrap' | HTML label white-space handling |
textOpacity | number | — | Text opacity 0–100 |
textDirection | TextDirectionValue | — | 'ltr', 'rtl', 'auto', or '' |
| Property | Type | Description |
|---|---|---|
edgeStyle | StyleEdgeStyleValue | Name of routing function in EdgeStyleRegistry |
noEdgeStyle | boolean | Disable edge routing style |
loopStyle | EdgeStyleFunction | Style for self-loop edges |
elbow | ElbowValue | Orientation of three-segment orthogonal style |
orthogonal | boolean | null | Force orthogonal connection points |
orthogonalLoop | boolean | Use orthogonal router for loops |
curved | boolean | Smooth connector curves |
rounded | boolean | Rounded corners (vertex) or joins (edge) |
segment | number | Entity relation horizontal segment size |
jettySize | number | 'auto' | Default jetty size for OrthConnector |
sourceJettySize / targetJettySize | number | 'auto' | Per-terminal jetty size overrides |
routingCenterX / routingCenterY | number | Relative offset from center for edge connections |
| Property | Type | Description |
|---|---|---|
startArrow / endArrow | StyleArrowValue | Arrow marker name from EdgeMarkerRegistry |
startFill / endFill | boolean | Fill the arrow marker |
startSize / endSize | number | Arrow marker size in pixels |
startFillColor / endFillColor | ColorValue | Fill color for arrow marker |
startStrokeColor / endStrokeColor | ColorValue | Stroke color for arrow marker |
exitX/Y/Dx/Dy | number | Source connection point coordinates/offsets |
entryX/Y/Dx/Dy | number | Target connection point coordinates/offsets |
exitPerimeter / entryPerimeter | boolean | Use perimeter for exact connection point |
sourcePort / targetPort | string | Cell ID to use for perimeter computation |
sourcePerimeterSpacing / targetPerimeterSpacing | number | Distance from connection point to perimeter |
| Property | Type | Description |
|---|---|---|
perimeter | PerimeterFunction | PerimeterValue | null | Perimeter function or registry name; null = no perimeter |
perimeterSpacing | number | Gap between perimeter and floating connection point |
| Property | Type | Default | Description |
|---|---|---|---|
movable | boolean | true | Cell can be dragged |
resizable | boolean | true | Cell can be resized |
rotatable | boolean | true | Cell can be rotated |
bendable | boolean | true | Edge control points can be moved |
editable | boolean | true | Label can be edited in-place |
cloneable | boolean | true | Cell can be cloned |
deletable | boolean | true | Cell can be deleted |
foldable | boolean | true | Cell can be folded (collapsed) |
autoSize | boolean | false | Resize cell automatically when value changes |
resizeWidth / resizeHeight | boolean | false | Resize with parent |
pointerEvents | boolean | true | Fire pointer events on transparent backgrounds |
| Property | Type | Description |
|---|---|---|
portConstraint | StylePortConstraint | Allowed connection directions on vertex |
portConstraintRotation | boolean | Rotate port constraints with vertex |
sourcePortConstraint / targetPortConstraint | StylePortConstraint | Per-edge terminal direction constraints |
| Property | Type | Description |
|---|---|---|
image | string | Image URL for vertex label |
imageWidth / imageHeight | number | Image size in pixels |
imageAlign | AlignValue | Horizontal alignment of image in LabelShape |
imageAspect | boolean | Preserve image aspect in ImageShape |
imageBackground / imageBorder | ColorValue | ImageShape background and border |
indicatorShape | StyleShapeValue | Shape shown as indicator in LabelShape |
indicatorImage | string | Image used as indicator (lower priority than indicatorShape) |
indicatorColor / indicatorStrokeColor | ColorValue | Indicator colors |
indicatorDirection | DirectionValue | Direction of indicator shape |
indicatorWidth / indicatorHeight | number | Indicator size in pixels |
| Property | Type | Description |
|---|---|---|
swimlaneLine | boolean | Show line between title and body |
swimlaneFillColor | ColorValue | Background of swimlane body |
separatorColor | ColorValue | Color of swimlane separator line |
startSize | number | Title region size in pixels |
| Property | Type | Description |
|---|---|---|
arcSize | number | Rounded corner size. Relative (%) if absoluteArcSize is false, else pixels |
absoluteArcSize | boolean | Make arcSize absolute (pixels) for rectangle/swimlane |
margin | number | Margin between ellipses in DoubleEllipseShape |
| Property | Type | Description |
|---|---|---|
dashed | boolean | Dashed stroke |
dashPattern | string | Custom dash pattern (space-separated numbers) |
fixDash | boolean | Dash pattern independent of line width |
backgroundOutline | boolean | Paint only background when highlighted |
anchorPointDirection | boolean | Use direction style for fixed connection points |
labelWidth | number | Label width when labelPosition is not 'center' |
Sources: packages/core/src/types.ts78-899
CellStyle is a superset of CellStateStyle with two additional fields that control how the Stylesheet resolution merges styles:
Sources: packages/core/src/types.ts49-75
baseStyleNamesAn ordered list of style names registered in Stylesheet. Before applying the cell's own properties, the Stylesheet resolver:
baseStyleNames in order.Stylesheet. Unknown names are silently skipped.CellStateStyle properties on top.Order matters: if the same property appears in multiple named styles, the last one in the array wins, and the cell's own properties always take final precedence.
This replaces mxGraph's semicolon-delimited style string syntax. The equivalent of 'style1;style2;fillColor=#ff0000' in maxGraph is:
Sources: packages/core/src/types.ts50-75 packages/website/docs/usage/migrate-from-mxgraph.md677-685
ignoreDefaultStyleWhen true, the default vertex or edge style registered in Stylesheet is not included in the merge. Only baseStyleNames and the cell's own properties are used.
This replicates the mxGraph behavior of prefixing a style string with a leading semicolon (;style1;prop=value) to opt out of the default style.
Note:
baseStyleNamesare still applied even whenignoreDefaultStyleistrue. Only theStylesheet'sdefaultVertexStyleordefaultEdgeStyleis excluded.
Sources: packages/core/src/types.ts67-74 packages/website/docs/usage/migrate-from-mxgraph.md688-693
NONEThe string constant 'none' (exported as NONE from packages/core/src/util/Constants.ts) is used as a sentinel value for color properties to mean "no color / transparent". It is accepted wherever a ColorValue or SpecialStyleColorValue is valid.
SpecialStyleColorValueColor properties typed as SpecialStyleColorValue accept these keywords in addition to HTML color names and hex codes:
| Keyword | Meaning |
|---|---|
'none' | No color (transparent) |
'inherit' | Use the color of the direct parent cell |
'swimlane' | Use the color of the nearest parent swimlane |
'indicated' | Use the color of the related indicator shape |
These are resolved at render time by CellRenderer.resolveColor() in packages/core/src/view/cell/CellRenderer.ts227-281
Sources: packages/core/src/types.ts909-919 packages/core/src/view/cell/CellRenderer.ts44-51
| Type | Definition | Purpose |
|---|---|---|
StyleValue | string | number | Union type for raw style values |
ColorValue | string | Plain HTML color or hex code |
SpecialStyleColorValue | 'indicated' | 'inherit' | 'none' | 'swimlane' | string | Color with special keywords |
DirectionValue | 'north' | 'south' | 'east' | 'west' | Compass direction |
AlignValue | 'left' | 'center' | 'right' | Horizontal alignment |
VAlignValue | 'top' | 'middle' | 'bottom' | Vertical alignment |
OverflowValue | 'fill' | 'width' | 'auto' | 'hidden' | 'scroll' | 'visible' | Label overflow mode |
WhiteSpaceValue | 'normal' | 'wrap' | 'nowrap' | 'pre' | HTML white-space mode |
ArrowValue | union of built-in arrow names | Built-in EdgeMarkerRegistry names |
StyleArrowValue | ArrowValue | string | Arrow name with extension support |
ShapeValue | union of built-in shape names | Built-in ShapeRegistry names |
StyleShapeValue | ShapeValue | string | Shape name with extension support |
StylePortConstraint | DirectionValue | DirectionValue[] | Single or multiple port directions |
NumericCellStateStyleKeys | derived from CellStateStyle | Keys whose values are number |
TextDirectionValue | '' | 'auto' | 'ltr' | 'rtl' | Text direction hint |
Sources: packages/core/src/types.ts44-970
Data flow from CellStyle to rendered output:
Sources: packages/core/src/types.ts49-75 packages/core/src/view/cell/CellRenderer.ts130-139
Code entity map for style types:
Sources: packages/core/src/types.ts49-99 packages/core/src/view/cell/CellRenderer.ts177-208
| Concept | Key Detail |
|---|---|
CellStateStyle | All visual properties; every field optional; used as resolved style in CellState |
CellStyle | CellStateStyle + baseStyleNames + ignoreDefaultStyle; stored on Cell |
baseStyleNames | Ordered list of Stylesheet style names merged before cell properties |
ignoreDefaultStyle | Skip default vertex/edge style from Stylesheet during resolution |
NONE / 'none' | Special color sentinel meaning "no color" |
SpecialStyleColorValue | Color type supporting inherit, swimlane, indicated, none keywords |
Refresh this wiki