Mermaid

Pass Mermaid syntax as children to draw a diagram, with a toolbar to zoom, download it as an image, or switch to the source.

A sequence diagram of one chat request, from the message the user sends to the reply the app streams back.

Set enableZoom or enableDownload to false in actions to drop those buttons, or add your own with customActions.

Set header to null to show the diagram alone, with no toolbar and no way to switch to the source.

Pass header a node to replace the toolbar with your own title and buttons.

An assistant reply that explains how an upload service works with a flowchart of its parts between two lines of text.

A project plan card with a Gantt chart of design, build and release phases, plus buttons to share it or add it to a calendar.

A two-pane card that lists the steps of an order on one side and draws every state it can move between on the other.