【Visual Studio Code】拡張機能のMarkdown Preview Mermaid Supportを解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在5社経験している、12年目エンジニアです。

この記事ではVisual Studio Codeに拡張機能の1つのMarkdown Preview Mermaid Supportを解説します。

前提条件：実行環境について
Markdown Preview Mermaid Supportとは
まとめ：Markdown Preview Mermaid Supportをインストールしてみよう

前提条件：実行環境について

実行環境は以下の通りです。

OS	Windows11
Visual Studio Codeのバージョン	1.84.0

Markdown Preview Mermaid Supportとは

Markdown Preview Mermaid Supportとは、MarkdownファイルにMermaid記法で書いたものものもプレビュー表示できるようにする拡張機能です。

公式ページはこちらをご参考ください。

Markdown Preview Mermaid Support

Markdown Preview Mermaid Supportを入れない状態だと

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

```mermaid

graph TD;

A-->B;

A-->C;

B-->D;

C-->D;

```

をプレビュー表示すると
Visual Studio Codeの拡張機能Markdown Preview Mermaid Supportを解説
と、Mermaidで書いた箇所はただのコードとして認識されて表示されます。

Markdown Preview Mermaid Supportを入れて同じMarkdownファイルをプレビュー表示すると
Visual Studio Codeの拡張機能Markdown Preview Mermaid Supportを解説
のように図として表示されます。
Markdownを扱うときにおすすめの拡張機能です。

拡張機能をインストールするやり方は、こちらの記事をご参考ください。

【Visual Studio Code】拡張機能を入れるやり方を解説します

明るい緑で下方向に3つ矢印のアイコンが目印です。
Visual Studio Codeの拡張機能Markdown Preview Mermaid Supportを解説

まとめ：Markdown Preview Mermaid Supportをインストールしてみよう

以上がVisual Studio Codeの拡張機能の1つのMarkdown Preview Mermaid Supportの解説です。

あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ