Diagrams in chat

When a reply carries a mermaid block, DataMind Oda draws it as a live diagram in place of the source text; use it when a picture explains better than words. See Charts and KPIs in chat for the other visual blocks, and Company data, documents and reports for replies that use your company's data or documents.

Ask for a diagram

1. Describe the diagram you want, for example Draw a flowchart of how an order moves from the sale to delivery.
2. Oda writes a mermaid block in its reply, and the diagram is drawn in the chat as the reply arrives. While the block is getting ready, it shows Drawing diagram….
3. To change the result, ask again in the same chat. Oda redraws the diagram from the updated block.

A mermaid block is plain text:

flowchart TD
    A[Order received] --> B[Payment checked]
    B --> C[Delivered]

A chart block can use a diagram type as well: gantt, flowchart, graph, erDiagram and er are drawn as diagrams.

Diagram and Code views

Every diagram frame switches between two views:

• Diagram: the drawing itself.
• Code: the mermaid source the drawing came from. Copy takes the source, and the button shows Copied for a moment.

How a diagram is drawn

• The diagram is drawn while the reply arrives. Each completed line of the block is rendered as soon as it can be, so the picture takes shape in front of you.
• A line that does not parse yet does not clear the drawing; the last version that worked stays on screen.
• When the reply settles, the block is drawn once more, in full.
• The drawing follows your theme: light or dark, plus a company colour theme. Changing the theme redraws the diagram in the new colours.

How diagrams are kept safe

Diagram source is never trusted as it is. Before a diagram is shown, the drawing goes through a safety step with fixed rules:

• Scripts, embedded HTML, frames, images and animations are removed.
• Event handlers are removed, and nothing loads from outside the diagram.
• An address inside a diagram resolves only to a place inside the same diagram, and a click link keeps its text but loses its target.
• An image node is refused before the drawing starts.
• Renders run one at a time, and a block cannot change these rules from inside.

When a diagram cannot be drawn

A diagram can fail in three ways: an image node, a syntax error in its source, or a render that was stopped before it started. A stopped render is skipped; when a block settles and cannot be read, it shows a short explanation, with its source available under Show source.

The messages you may see:

• This diagram could not be drawn: {message}: a syntax error. The short reason takes the place of {message}; it is shortened to its first line, and anything over 160 characters is cut with an ellipsis.
• This diagram uses an image node, which is not shown.: the source asks for an image in the diagram.
• Mermaid returned malformed SVG: the drawing came back in a form that cannot be shown.
• The chart engine could not be loaded. Reload the window to retry.: the drawing engine did not load, so no diagram can be drawn until the window is reloaded.

One rule of the source format: text inside a node cannot contain parentheses, brackets, braces, quotation marks or ampersands.

Questions, answered

Which kinds of diagram can I ask for?

Flowcharts, graphs, Gantt charts and ER diagrams are the recommended kinds. Sequence diagrams, class diagrams, state diagrams, timelines, quadrant charts, mindmaps, journey maps, kanban boards, xy charts and block diagrams also render.

What does Drawing diagram… mean?

The block is getting ready to draw, and nothing has been drawn yet. The line disappears as soon as a drawing is ready.

What does This diagram could not be drawn mean?

The source has a syntax error, and the message continues with the short reason. Read the source under Show source, or ask Oda to fix the diagram.

Why can't a diagram show an image?

A diagram never loads images, so an image node is refused and is not shown. Ask Oda to redraw the diagram without the image.

Do links inside a diagram work?

No. A diagram cannot open anything from outside itself: an address resolves only to a place inside the same diagram, and a click link keeps its text but does not lead anywhere.

How do I get the source of a diagram?

Open the Code view on the frame. Copy takes the whole source, ready to paste elsewhere, and the button confirms with Copied.

Do diagrams follow my theme?

Yes: light, dark and your company's colour theme; a theme change redraws the diagram in the new colours.

What does The chart engine could not be loaded mean?

The part of the app that draws visuals did not load, so diagrams cannot be drawn. Reload the window to retry.