Mermaid.jsを導入

ダイアグラム等をマークダウン形式で描画できるようになるライブラリ、Mermaid.jsを導入した。 以下のライブラリを使用しMDやMDX内で使えるようにした。

GitHub - sjwall/mdx-mermaid: Plug and play Mermaid in MDX

Plug and play Mermaid in MDX. Contribute to sjwall/mdx-mermaid development by creating an account on GitHub.

github.com

例

graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

フローチャート

flowchart TD
    A([開始]) --> B[ユーザー名・パスワード入力]
    B --> C{認証チェック}
    C -->|成功| D[セッション発行]
    C -->|失敗| E{リトライ回数 < 3?}
    E -->|Yes| B
    E -->|No| F[アカウントロック]
    D --> G([ダッシュボードへ])
    F --> H([エラー画面へ])

Gitグラフ

gitGraph
    commit id: "initial commit"
    commit id: "add README"
    branch feature/login
    checkout feature/login
    commit id: "add login form"
    commit id: "add auth logic"
    checkout main
    branch hotfix/typo
    checkout hotfix/typo
    commit id: "fix typo"
    checkout main
    merge hotfix/typo
    merge feature/login id: "Merge feature/login"
    commit id: "bump version"

VSCode内でも以下のMarkdown Preview Mermaid Supportライブラリを導入することでプレビューできるようにした。

Markdown Preview Mermaid Support - Visual Studio Marketplace

Extension for Visual Studio Code - Adds Mermaid diagram and flowchart support to VS Code's builtin markdown preview

marketplace.visualstudio.com