Render Mermaid diagrams in Markdown

A Mermaid diagram is text inside a fenced code block. Keep that source with the explanation so the diagram can be reviewed and changed later.

Open a working example

Save both files in the same folder. Open the first file in Telescopo; reading personal files, diagrams, and equations is free. Keep the supporting filename unchanged so the relative link resolves.

Write the fence

```mermaid
flowchart LR
  A[Receive reading] --> B{Valid?}
  B -->|Yes| C[Archive]
  B -->|No| D[Calibrate]
  D --> A
```

The opening mermaid label and closing fence matter. Paste in Markdown editing, then choose Read or Split to render it.

Change one thing and review it

Rename “Archive” to “Research archive”. Then add a second validation step. Check that each branch still has a clear destination. Short labels make the diagram easier to read on a phone and in a PDF.

Export the right form

Use the diagram’s export controls for PNG or SVG. SVG stays sharp when resized; PNG is widely accepted by tools expecting an image. Keep the Mermaid fence if the recipient must edit the diagram. For a report containing prose and several visuals, use the document PDF flow.

Fix a rendering error

Check the language label, closing fence, quoted punctuation and valid diagram syntax. Reduce the example to two nodes before restoring complexity. A Mermaid example from another renderer may depend on an unsupported extension. Troubleshooting checklist.