The styling system also lets you define item appearance through external CSS files. You can style different item types using custom element selectors such as mfd-shapenode, mfd-diagramlink, or mfd-tablenode. The system maps CSS Custom Properties to the internal Style properties. For example, use --brush for backgrounds, --stroke for outlines, and --font-size for text. The new cssClass property on DiagramItem allows for more granular styling using standard class selectors in your CSS. To ensure high performance, computed styles are cached globally, and the system automatically resolves style inheritance across class hierarchies (e.g., a ShapeNode will resolve styles from mfd-shapenode, mfd-diagramnode, and mfd-diagramitem selectors in that order).
CSS
 Copy Code
|
|---|
/* Style all shape nodes */
mfd-shapenode {
--brush: #f9f9f9;
--stroke: #333;
--stroke-thickness: 1px;
--font-name: 'Verdana';
}
/* Specific styling via the new cssClass property */
mfd-shapenode.urgent {
--brush: #ffcccc;
--stroke: #ff0000;
--stroke-thickness: 2px;
}
/* Style table captions using custom properties */
mfd-tablenode {
--caption-brush: #e0e0e0;
--text-color: #000066;
} |
Here is the complete list of mfd- prefixed CSS element selectors available for styling items:
Base Elements
- mfd-diagramitem: The base selector for all diagram items. Styles applied here will be inherited by all other items unless overridden.
- mfd-diagramnode: The base selector for all node types. Inherits from mfd-diagramitem.
Specific Node Types
(all inherit from
mfd-diagramnode)
Container & Complex Nodes
- mfd-containernode: Styles ContainerNode instances (inherits from mfd-captionednode).
- mfd-captionednode: The base selector for nodes with captions like Tables and TreeViews. Inherits from mfd-diagramnode.
- mfd-tablenode: Styles TableNode instances (inherits from mfd-captionednode).
- mfd-treeviewnode: Styles TreeViewNode instances (inherits from mfd-captionednode).
Links
- mfd-diagramlink: Styles DiagramLink instances. Inherits from mfd-diagramitem.
Sample Inheritance Chains
- mfd-shapenode ? mfd-diagramnode ? mfd-diagramitem
- mfd-tablenode ? mfd-captionednode ? mfd-diagramnode ? mfd-diagramitem
- mfd-diagramlink ? mfd-diagramitem
Properties
Here is the list of custom CSS properties (variables) available for diagram items. These properties should be defined within the mfd- element selectors, and possibly assigned to specific items via the cssClass property.
Primary Appearance
- --brush: Specifies the background / fill color. Supports CSS color strings (e.g., `#FF0000`, `rgba(...)`, `lightblue`).
- --stroke: Specifies the outline / border color.
- --stroke-thickness: Specifies the width of the outline. Supports units like px, mm, pt, or in (values are converted to diagram's measureUnit).
- --shadow-color: Specifies the color of the item's shadow.
Typography & Text
- --text-color: Specifies the color of the text label.
- --font-name: Specifies the font family (e.g., 'Verdana', 'Arial').
- --font-size: Specifies the size of the font. Supports CSS units (values are converted to diagram's measureUnit).
- --font-weight: Use 'bold' to apply bold styling.
- --font-style: Use 'italic' to apply italic styling.
- --text-decoration: Use 'underline' to apply underline styling.
Selection States
- --selected-brush: Specifies the fill brush used when the item is selected.
- --selected-stroke: Specifies the outline color used when the item is selected.
Specialized Properties
- --caption-brush: Specifies the background color of captions (used by mfd-tablenode, mfd-containernode, and mfd-treeviewnode).
- --vertical-border-stroke: Specifies the color of vertical grid lines/borders (primarily for TableNode).
- --horizontal-border-stroke: Specifies the color of horizontal grid lines/borders (primarily for TableNode).
