Diagram Rich Text Content
The Kendo UI for Angular Diagram supports rich text content for both shapes and connections. Rich text allows you to display multiple paragraphs with mixed formatting, inline images, and line breaks within a single shape or connection label.
The following example demonstrates an organizational Diagram that uses rich text content in both shapes and connection labels.
Rich Text in Shapes
Use the ShapeRichTextContent interface to define rich text content for shapes. Instead of a single text string, provide a blocks array of Paragraph objects. Each Paragraph contains a children array of inline items—TextRun, LineBreak, and InlineImage—each with individual formatting.
The following example demonstrates shapes with rich text content that includes multiple paragraphs, mixed formatting, and colored text.
To configure rich text content for a shape, set the content property to an object with a blocks array of Paragraph items:
content: {
align: 'top left',
padding: 12,
blocks: [
{
children: [
{ text: 'Title', fontSize: 16, bold: true },
{ type: 'break' },
{ text: 'Subtitle', italic: true, color: '#666' },
]
}
]
} as ShapeRichTextContentThe blocks, margin, align, padding, color, fontFamily, and fontSize options are available on ShapeRichTextContent. Individual text runs can override the default font settings.
Rich Text in Connections
Use the ConnectionRichTextContent interface to define rich text labels for connections. Connection labels with rich text support the same inline formatting as shape content, along with position, background, border, padding, and offset options for label placement and styling.
The following example demonstrates connection labels with rich text in a logistics workflow.
Inline Content Types
The rich text content model is based on a hierarchical structure of paragraphs and inline items. Each Paragraph in the blocks array contains a children array of inline items. The Diagram supports three inline content types:
| Type | Description | Required Properties |
|---|---|---|
TextRun | A text segment with its own formatting. Supports bold, italic, underline, color, fontSize, and fontFamily. | text |
LineBreak | A line break within a paragraph without starting a new block. | type: "break" |
InlineImage | An image rendered inline with the surrounding text. | type: "image", src |
The
typeproperty can be omitted for text runs. For images, set optionalwidthandheightto control dimensions.
The following example demonstrates team member cards that combine inline images with formatted text.
Paragraphs and Margins
Each entry in the blocks array is a Paragraph. Use the margin property on ShapeRichTextContent or ConnectionRichTextContent to control the spacing between paragraphs. When margin is set to a single number, it applies as both top and bottom margin. For asymmetric spacing, pass an object with top and bottom properties. If not specified, the margin defaults to the value of fontSize.
The following example demonstrates three shapes with different margin configurations—default (equal to fontSize), compact (4px), and asymmetric (2px top, 16px bottom).