markdownmermaid

How do I create figure captions and references in Markdown for Mermaid generated figures?


I've been working on a Markdown document that uses Mermaid figures. As the document has grown, the importance of having captions on the figures such as "Figure 3. SRA flowchart" such that I can later write, "As shown in Fig. 3,..."

Now, if I hardcode all the figure numbers, I can come up with a solution to this. Alternatively, I know I could make this work if I have a step where I export the Mermaid figures to a PNG file. However, what I want is for Markdown to track the Mermaid figures just as if I was using PNG files, without having to export them to PNG (or other figure type).

I'm using the Markdown Preview extension (v1.22.0) in VS Code.

Is that possible?


Solution

  • There is no specific support for "captions" in mermaid.

    An option you can try is using the title property:

    ---
    title: Figure 1 - a node
    ---
    flowchart LR
        id
    

    A sample diagram with title