# Diagram Rich Text Content

The [Kendo UI for Angular Diagram](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams) 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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/diagrams/shapes/rich-text-overview/source.txt)

## Rich Text in Shapes

Use the [`ShapeRichTextContent`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/shaperichtextcontent) interface to define rich text content for shapes. Instead of a single `text` string, provide a [`blocks`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/shaperichtextcontent#blocks) array of [`Paragraph`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/paragraph) objects. Each [`Paragraph`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/paragraph) contains a `children` array of [inline items](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/rich-text#inline-content-types)—[`TextRun`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/textrun), [`LineBreak`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/linebreak), and [`InlineImage`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/inlineimage)—each with individual formatting.

The following example demonstrates shapes with rich text content that includes multiple paragraphs, mixed formatting, and colored text.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/diagrams/shapes/rich-text/source.txt)

To configure rich text content for a shape, set the `content` property to an object with a `blocks` array of [`Paragraph`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/paragraph) items:

```typescript
content: {
    align: 'top left',
    padding: 12,
    blocks: [
        {
            children: [
                { text: 'Title', fontSize: 16, bold: true },
                { type: 'break' },
                { text: 'Subtitle', italic: true, color: '#666' },
            ]
        }
    ]
} as ShapeRichTextContent
```

The [`blocks`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/shaperichtextcontent#blocks), [`margin`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/shaperichtextcontent#margin), [`align`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/shaperichtextcontent#align), [`padding`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/shaperichtextcontent#padding), [`color`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/shaperichtextcontent#color), [`fontFamily`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/shaperichtextcontent#fontfamily), and [`fontSize`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/shaperichtextcontent#fontsize) options are available on [`ShapeRichTextContent`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/shaperichtextcontent). Individual text runs can override the default font settings.

To let users edit this content after render, add the [Diagram Editor](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/diagram-editor). Users can double-click a shape or connection to edit its rich text in place.

## Rich Text in Connections

Use the [`ConnectionRichTextContent`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/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`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/connectionrichtextcontent#position), [`background`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/connectionrichtextcontent#background), [`border`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/connectionrichtextcontent#border), [`padding`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/connectionrichtextcontent#padding), and [`offset`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/connectionrichtextcontent#offset) options for label placement and styling.

The following example demonstrates connection labels with rich text in a logistics workflow.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/diagrams/connections/rich-text-labels/source.txt)

## Inline Content Types

The rich text content model is based on a hierarchical structure of paragraphs and inline items. Each [`Paragraph`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/paragraph) in the [`blocks`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/shaperichtextcontent#blocks) array contains a `children` array of inline items. The Diagram supports three inline content types:

<table>
  <colgroup>
    <col style="width: 15%">
    <col style="width: 60%">
    <col style="width: 25%">
  </colgroup>
  <thead>
    <tr>
      <th>Type</th>
      <th>Description</th>
      <th>Required Properties</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="/diagrams/api/textrun"><code>TextRun</code></a></td>
      <td>A text segment with its own formatting. Supports <a href="/diagrams/api/textrun#bold"><code>bold</code></a>, <a href="/diagrams/api/textrun#italic"><code>italic</code></a>, <a href="/diagrams/api/textrun#underline"><code>underline</code></a>, <a href="/diagrams/api/textrun#color"><code>color</code></a>, <a href="/diagrams/api/textrun#fontsize"><code>fontSize</code></a>, and <a href="/diagrams/api/textrun#fontfamily"><code>fontFamily</code></a>.</td>
      <td><code>text</code></td>
    </tr>
    <tr>
      <td><a href="/diagrams/api/linebreak"><code>LineBreak</code></a></td>
      <td>A line break within a paragraph without starting a new block.</td>
      <td><code>type: "break"</code></td>
    </tr>
    <tr>
      <td><a href="/diagrams/api/inlineimage"><code>InlineImage</code></a></td>
      <td>An image rendered inline with the surrounding text.</td>
      <td><code>type: "image"</code>, <a href="/diagrams/api/inlineimage#src"><code>src</code></a></td>
    </tr>
  </tbody>
</table>

> note The `type` property can be omitted for text runs. For images, set optional [`width`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/inlineimage#width) and [`height`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/inlineimage#height) to control dimensions.

The following example demonstrates team member cards that combine inline images with formatted text.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/diagrams/shapes/rich-text-images/source.txt)

## Paragraphs and Margins

Each entry in the `blocks` array is a [`Paragraph`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/paragraph). Use the [`margin`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/shaperichtextcontent#margin) property on [`ShapeRichTextContent`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/shaperichtextcontent) or [`ConnectionRichTextContent`](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/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).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/diagrams/shapes/rich-text-margins/source.txt)

## See Also

* [Diagram Shapes](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/shapes)
* [Diagram Connections](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/connections)
* [Diagram Layouts](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/layouts)
* [Diagram Data Binding](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/data-binding)
* [Diagram Editor](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/diagram-editor)
* [Diagram API Reference](https://www.telerik.com/kendo-angular-ui-develop/components/diagrams/api/diagramcomponent)