When relying on manual copy-pasting, there is a risk of losing the original source code (if you just paste in the SVG).

Fortunately, https://mermaid.live has an action section that allows you to copy and paste the markdown URL for SVG or PNG. For example, the SVG markdown looks like this:

[![](https://mermaid.ink/img/pako:eNpVjstqw0AMRX9FaNVC_ANeFBq7zSbQQrPzZCFsOTMk80CWCcH2v3ccb1qtxD3nCk3Yxo6xxP4W760lUTjVJkCe96ay4gb1NJyhKN7mAyv4GPgxw_7lEGGwMSUXLq-bv18lqKbjqjGodeG6bKh69r8Cz1A3R0oa0_kvOd3jDB-N-7b5_H9ihXPrs-mp7KloSaAieSq4Q8_iyXX5_WlNDKplzwbLvHYkV4MmLNmjUePPI7RYqoy8wzF1pFw7ugj5LVx-AfLqVWg?type=png)](https://mermaid.live/edit#pako:eNpVjstqw0AMRX9FaNVC_ANeFBq7zSbQQrPzZCFsOTMk80CWCcH2v3ccb1qtxD3nCk3Yxo6xxP4W760lUTjVJkCe96ay4gb1NJyhKN7mAyv4GPgxw_7lEGGwMSUXLq-bv18lqKbjqjGodeG6bKh69r8Cz1A3R0oa0_kvOd3jDB-N-7b5_H9ihXPrs-mp7KloSaAieSq4Q8_iyXX5_WlNDKplzwbLvHYkV4MmLNmjUePPI7RYqoy8wzF1pFw7ugj5LVx-AfLqVWg)

The image also has an edit link attached, so you can click it and make changes if needed. After editing, you can copy and paste the markdown again.

If you lose the https://mermaid.live edit link, don't worry - you can simply change mermaid.ink/img/ to mermaid.live/edit to edit it.

I'm providing this solution because I know how difficult it can be to find a library and struggle to integrate it when the framework doesn't support something natively. Additionally, you risk migrating the document to other frameworks and losing the rendering again. So, this "external support" solution is the best option for me. It makes my life easier.

However, it's important to keep in mind that the website could potentially go down someday. To avoid the risk of losing your work, you might consider self-hosting the solution (it's open-source), or, yes, finding a library to render it.

mermaid in nextra #1373

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions