Text & Typography

Add labels, titles, and descriptions to your diagrams with the text element. Full support for sizing, weight, alignment, and multi-line content.

Basic Text Element

The simplest text element just needs type, id, and text properties:

{
  "type": "text",
  "id": "label-1",
  "x": 100,
  "y": 100,
  "w": 200,
  "h": 30,
  "text": "Hello World"
}

Text Properties

Property	Type	Default	Description
`text`	string	""	The text content to display
`fontSize`	number	20	Font size in pixels
`fontWeight`	string	"normal"	"normal" or "bold"
`fontStyle`	string	"normal"	"normal" or "italic"
`align`	string	"left"	"left", "center", or "right"

Setting Text Color

For text elements, use options.stroke to set the text color (not options.fill):

{
  "type": "text",
  "id": "colored-text",
  "x": 100, "y": 100, "w": 200, "h": 30,
  "text": "Blue Text",
  "options": {
    "stroke": "#3b82f6"   // Text color
  }
}

Font Sizes

Recommended font sizes for different use cases:

Use Case	Size	Weight
Main title	32-48px	bold
Section heading	24-28px	bold
Card title	18-20px	bold
Body text	14-16px	normal
Caption/label	12-14px	normal
Small annotation	10-12px	normal

Text Alignment

Text aligns within its bounding box defined by w (width):

left - Text starts from the left edge (default)

center - Text is centered within the box

right - Text aligns to the right edge

// Centered title
{
  "type": "text",
  "x": 100, "y": 100, "w": 300, "h": 40,
  "text": "Centered Title",
  "fontSize": 28,
  "fontWeight": "bold",
  "align": "center"
}

Multi-line Text

Use \n (literal newline in JSON) to create multi-line text:

{
  "type": "text",
  "x": 100, "y": 100, "w": 200, "h": 60,
  "text": "Line 1\nLine 2\nLine 3",
  "fontSize": 16
}

Complete Example

{
  "elements": [
    {
      "type": "text",
      "id": "main-title",
      "x": 50, "y": 50, "w": 400, "h": 50,
      "text": "My Diagram Title",
      "fontSize": 36,
      "fontWeight": "bold",
      "align": "center",
      "options": { "stroke": "#1e293b" }
    },
    {
      "type": "text",
      "id": "subtitle",
      "x": 50, "y": 100, "w": 400, "h": 30,
      "text": "A hand-drawn visualization",
      "fontSize": 16,
      "fontStyle": "italic",
      "align": "center",
      "options": { "stroke": "#64748b" }
    }
  ]
}