Skip to main content

Diagram captions and alt text

Diagram options are written at the top of the block, one per line, after a %%| marker — %% is Mermaid’s comment syntax, so each language uses its own.

A fig-cap gives the diagram a caption:

flowchart LR
  commit --> build
  build --> test
  test --> deploy
The path a change takes from commit to production.

Add a label beginning with fig- and the diagram becomes numbered and cross-referenceable. fig-alt supplies the description assistive technology reads:

flowchart LR
  accDescr: A draft moves to review; review either publishes it or sends it back to draft.
  Draft --> Review
  Review --> Published
  Review --> Draft
Figure 1: The review cycle, which repeats until a draft is approved.

Figure 1 shows the loop a draft goes through.