mermaid.js で記述された UML 図のレンダリング

[mjunya1030]

提案・要望

mermaid.js の記法で記載されたコードブロックを、UML図にレンダリングして表示したい。

<補足>markdown-it で mermaid コードブロック をHTMLに変換するライブラリが用意されています。
https://www.npmjs.com/package/markdown-it-mermaid

背景

画像のアップロードを行うことなく、記事に画像を掲載したい。
そこで、markdown で設計図や概念説明図を記載し、表現できるようにしてほしい。

<補足>
mermaid.js は JS のみで実行でき、作図できる形式も豊富であるため推薦しますが、
その他の記法に対応いただくでも構いません。

[cm-wada-yusuke]

@mjunya1030 私も欲しいので社内で相談してみます。PlantUMLなどいくつか選択肢がありますが、 mermaid.js が一番現実的かと思います。

[mjunya1030]

@cm-wada-yusuke
ありがとうございます。実装を楽しみにしております(お手伝いできることがあれば協力します)。

[cm-wada-yusuke]

@mjunya1030 機能の実装自体は目処が立ったのですが、一度対応すると長い間付き合うことになるので、 mermaid.js がセキュリティリスクに対してどう考えているかを調査し、それが Zenn とどのように関係するか、もしセキュリティインシデントが発生した場合にどのように対応するかをを洗い出していく必要があります。

いましばらく時間をください。GitHub が頑なに対応しないのも、逆に怖さがあるな…という感想です。穿った見方かもしれませんが。

[cm-wada-yusuke]

@mjunya1030 こちら対応しましたのでご確認いただけますと幸いです
https://zenn.dev/waddy/articles/zenn-mermaid-js

お手伝いできることがあれば協力します

ありがとうございます。mermaid.js を活用した記事を書いていただき、なにか気づいたことがあればフィードバックいただけますと嬉しいです！

[mjunya1030]

こちら、確認遅くなってしまい申し訳ありません。
まさかこんなに早く実装いただけるとは…。
早速書いてみようと思います。ありがとうございます！