HTML Label Style Demo

This demo shows how HTML can be used for rendering labels with a custom label style.

The custom style uses the SVG <foreignObject> element to embed HTML elements in the default SVG rendering of the diagram.

Note that the <foreignObject> element is supported by all modern browsers but not Internet Explorer nor Edge Legacy.

HTML Label Editor

Creating and Editing Labels

  • Press the F2 key while an element or connection is selected.
  • Insert HTML text into the editor, i.e. <strong>Hello World</strong>

Styling Labels with CSS

The stylesheet for labels html-label.css shows how the label texts are styled.

Related Demos

  • Default Label Style
  • Markdown Label
  • Rich Text Label
  • Tutorial: Custom Label Style