Mermaid Diagram をサポートした

Mermaid をサポートしました。

実装

Mermaid のドキュメントに remark の Integrations が紹介されていたので、これを使用。
Integrations | Mermaid

インストール

これを参考にインストール。Playwright は、Mermaid のレンダリングに使用される。
remcohaszing/remark-mermaidjs | GitHub

yarn add remark-mermaidjs playwright
npx playwright install --with-deps chromium

あとはプラグインを挿すだけ。

+ import remarkMermaid from 'remark-mermaidjs'
...
    remarkPlugins: [
      remarkExtractFrontmatter,
      remarkGfm,
      remarkCodeTitles,
      remarkMath,
      remarkImgToJsx,
      remarkAlert,
      remarkBreaks,
+     remarkMermaid,
    ],

シンプルでいいですね。

出来なかったこと

アーキテクチャ図で、AWS のアイコンを使いたかったけど、うまくロード出来なかった。
必要になったときにまた試してみます。（Figmaでいい気がするけど）

参考：Registering icon pack in mermaid | Mermaid

サンプル

こんな感じで図が書けるようになった。（サンプルは公式ドキュメントより）

フローチャート

シーケンス図

ER図

ガントチャート

マインドマップ

アーキテクチャ