> 1. You can use markdown shortcuts on the editor. It works.

Do fenced code blocks work as well?

draw.io is excellent; it stores source code as comments in the PNG/SVG

Perhaps equivalently, use Markdown and store directly in the rendered HTML?

I guess the best way will be to store the PNG/SVG in the storage driver with a reference to it in the editor. The same PNG/SVG will get updated/replaced whenever the code is updated. I need to do more study on this.

Storing the raw data in the editor will bloat the Prosemirror JSON and Yjs state (real-time collaboration) which I want to avoid.

Yep, I think you should store the source file (the .drawio file for drawio) as an attachment of the edited document and call the dedicated editor whenever someone wants to edit it with it, but also save the rendered file to be used to display the result when displaying the document or during regular document edition.