2025-03-13

Astro 5.5 の Mermaid 設定を試す

Astro 5.5 のブログ記事を参考に、syntaxHighlight.excludeLangs を設定した上でクライアントサイドで Mermaid を読み込み、Markdown の Mermaid 記法が描画されることを確認します。

シンプルなフロー

graph TD
    A[Markdown で記述] --> B[Mermaid をクライアントで読み込み]
    B --> C[SVG としてレンダリング]
    C --> D[ページに表示]

別のサンプル

sequenceDiagram
    participant U as User
    participant A as Astro
    participant M as Mermaid
    U->>A: 記事を書く
    A->>M: Mermaid ブロックを変換
    M-->>A: SVG を返す
    A-->>U: 表示された図を確認

もし図が表示されていれば、Mermaid 設定が正しく動作しています。