vyuhDiagram

Paragraphs, lists and checklists ​

Loading interactive example…Open in new tab ↗
Opening the live canvas…

Double-click the text to edit. Enter continues the current list; Tab nests it and Shift+Tab outdents it. Start a paragraph with [] to create a checklist.

Use Save snapshot, make an edit, then Restore snapshot. The snapshot is local to this example and uses the versioned JSON codec. Restore uses the session's revision-checked import and is undoable. Reset clears the snapshot and returns to the original document with an empty history.

The fixture is a canonical TextElement containing paragraph, ordered-list, nested bullet, and checked/unchecked checklist blocks. It uses the same text editing pipeline as text inside shapes and cards.

See Text API and Persistence.

Source ​

dart
DiagramDocument paragraphExampleDocument() => DiagramDocument(
  id: 'paragraph-example',
  revision: 0,
  elements: [
    TextElement(
      id: 'picnic-list',
      frame: const DiagramRect.fromLTWH(0, 0, 440, 340),
      textStory: TextStory(
        id: 'picnic-story',
        blocks: [
          TextParagraph(
            id: 'intro',
            kind: ParagraphKind.paragraph,
            runs: [
              TextRun(
                'A tiny adventure: plan a picnic, pack something delicious, and leave room for a good story.',
                fontSize: 20,
              ),
            ],
          ),
          TextParagraph(
            id: 'step',
            kind: ParagraphKind.orderedListItem,
            runs: [TextRun('Pick a sunny spot', fontSize: 20)],
          ),
          TextParagraph(
            id: 'nested',
            kind: ParagraphKind.unorderedListItem,
            nestingLevel: 1,
            runs: [TextRun('Somewhere under a tree', fontSize: 20)],
          ),
          TextParagraph(
            id: 'blanket',
            kind: ParagraphKind.checklistItem,
            checked: true,
            runs: [TextRun('Bring a blanket', fontSize: 20)],
          ),
          TextParagraph(
            id: 'sandwiches',
            kind: ParagraphKind.checklistItem,
            runs: [TextRun('Pack sandwiches', fontSize: 20)],
          ),
        ],
      ),
    ),
  ],
);