Visual Studio Code で Mermaid をプレビューする方法

Mermaid Markdown はフローチャートやガントチャート、円グラフなどをMarkdownに描けるオープンソースのライブラリです。

これを使うと、Markdownドキュメントに簡単に図形を書くことができます。。

この記事では、Visual Studio Code で Mermaid をプレビューする方法を紹介します。

1. 拡張機能をインストール
2. Mermaid Markdown の書き方
3. シーケンス図のサンプル
4. 円グラフ
5. Mermaid Markdown で描けるもの
Visual Studio Codeは機能ありすぎ！

1. 拡張機能をインストール

Visual Studio Code で Markdown Preview Mermaid Support をインストールします。

検索すると以下のような画面で見つけることができます。

ちなみに、github.dev の Visual Studio Code にもこの拡張機能をインストールできます。

2. Mermaid Markdown の書き方

まず、Visual Studio Code で .md ファイルを作成します。

その後、以下のようにmermaidをキーワードにしてコードを記述します。


```mermaid
flowchart TD
    Start --> Stop
    subgraph on
    Start --> |text|PointA
    end
    PointA --- Stop
```

このコードは上から下へ記述するフローチャートで、この拡張機能でプレビューすると以下のようになります。

画面全体を出すと、こんな感じですね。

Mermaid Markdown は以下にあります。

Mermaid | Diagramming and charting tool

Create diagrams and visualizations using text and code.

3. シーケンス図のサンプル

シーケンス図も書けます。


```mermaid
sequenceDiagram
    部下->>上司: 明日、休みをください
    %% this is a comment
    上司-->>部下: 仕事は終わってるのか？
```

4. 円グラフ

円グラフだって描けます。。


```mermaid
pie
    title 一日の時間の使いかた
    "睡眠" : 8
    "仕事" : 8
    "通勤時間" : 1
    "朝食" : 0.5
    "昼食" : 0.5
    "夕食" : 0.5
    "お風呂" :  0.5
    "休憩" :  2
    "勉強" :  3
```

5. Mermaid Markdown で描けるもの

公式ドキュメントによると、以下のものを描けるようです。

Flowchart
Sequence diagram
Class Diagram
State Diagram
Entity Relationship Diagram
User Journey
Gantt
Pie Chart
Requirement Diagram

Visual Studio Codeは機能ありすぎ！

Visual Studio Codeはオープンソースのコードエディタです。

コードエディタと言いつつも、デバッグもできますし簡易Webサーバも立てられますし、ソースコード中のTODOを検索してツリー表示することもできます。

インストール可能な拡張機能の数は30,000以上と言われており、とても便利な機能が数多くあります。

そのため、Visual Studio Codeを使いこなすには、それなりの情報収集が必要です。

「Visual Studio Code実践ガイド」は、

Visual Studio Codeの基本的な使い方
TypeScriptやPythonなど、実際の開発を通した Visual Studio Code機能の紹介
Visual Studio Code拡張機能の開発方法の紹介

などが収録されており、Visual Studio Codeの機能を体系的に理解するのに最適な書籍です。

電子書籍化されていますので、まずは kindleなどで試し読みしてみてはいかがでしょうか。

リンク