AstroにMarkdown記法でダイアグラムやチャート描画できるようにした

Contents

• What is a Mermaid?
• Astro&MDXへの導入手順

What is a Mermaid?

ふとした瞬間、不意にフローチャートやシーケンス図、クラス図が書きたくなるときってあるよね？(…え、ない？)

ということで、思い立ってダイアグラムやチャートの作成ができるツール=JSライブラリのMermaidを、このブログ記事を書いているMDXファイル内にMarkdown記法で書けるようにしたので、導入手順を振り返ってみたい。

フローチャート図の例

Markdown: チャート図の書き方

```mermaid
flowchart TB
    A([start]) --> B{true?}
    B --Yes--> C[process]
    B --No--> D[exception]
    C & D --> E([end])
```　

Astro&MDXへの導入手順

以下のURLの「Quick start」を参考にmdx-mermaidをAstroに導入した。一部ドキュメント通りだとうまく動かなかった部分があったので、その詳細については追記する。

https://github.com/sjwall/mdx-mermaid

後日更新。