Mermaid記法によるダイアグラム作成
Mermaidは、Markdownファイルに埋め込んだ独自のMermaid記法で、フローチャートやシーケンス図、そしてER図などのダイアグラムや表を作成できるツールです。Mermaid記法はGitHubやQiitaなどでもサポートされており、README.mdファイルや投稿にMermaid記法のブロックを埋め込んで、ドキュメント中にフローチャートを表示するなどさまざまな使い方が可能です。プレビューを確認しながらダイアグラムを編集できる「Mermaid Live Editor」も提供されており、機能が充実しています（図9）。
ここでは、Mermaid記法によるダイアグラム作成をサポートする幾つかの拡張機能を紹介します。
Mermaid記法のシンタックスハイライト機能をサポートする「Mermaid Markdown Syntax Highlighting」
Mermaid記法は、それほど複雑なものではありませんが、それでもシンタックスハイライト機能があればスムースに書き進めることができるでしょう。Brian Pruitt-Goddardによる拡張機能「Mermaid Markdown Syntax Highlighting」を使うと、他言語と同様にキーワードや識別子、カッコ類、コメントなどのカラーリング機能などがサポートされます（図10）。
Mermaid記法でダイアグラム作成するなら、基本としてインストールしておきたい拡張機能です。
Mermaid記法のプレビューをサポートする「Markdown Preview Mermaid Support」
組み込みのMarkdownプレビュー機能は、Mermaid記法に対応していません。Mermaid記法でダイアグラムを作成するには不便なので、まずはMermaid記法に対応するように強化しておきましょう。Matt Biernerによる拡張機能「Markdown Preview Mermaid Support」を使います。なお、プレビューの表示方法は前回を参照してください。
拡張機能がない状態だと、Mermaid記法の部分はテキストで表示されるだけですが、拡張機能によりMermaid記法のダイアグラムも表示されるようになります（図11）。
Mermaid記法を自身では使わずとも、入手したMarkdownファイルがMermaid記法を含むこともあるでしょうから、基本としてインストールしておくとよいでしょう。なお、MarkdownプレビューにおけるMermaid記法をサポートする拡張機能には、Vlad Stirbuによる「Mermaid Preview」などもあります。
ダイアグラムをグラフィカルに作成できる「Mermaid Graphical Editor」
Mermaid記法を知らなくても作図ができたら便利です。corschenziによる拡張機能「Mermaid Graphical Editor」を使うと、Mermaid記法によるダイアグラムの作成を、グラフィカルなプレビューを見ながらVSCode上で行うことができます。Mermaid記法を知らなくても、作図機能でダイアグラムを作成でき、結果はMermaid記法のファイルで取得できます。
まずは、適当なMarkdownファイルを開くか、作成して保存します。ダイアグラムを挿入したい場所で、以下のリストのようにMarkdown構文を記述します。
```mermaid ```
この時点で、Markdown構文の上に「MermaidEditor」と表示されるので、それをクリックすると図12のようにグラフィカルなエディターがサイドバーにオープンします。
サイドバーには、FLOWCHART（フローチャート）、SEQUENCE（シーケンス図）、CLASS（クラス図）、ER（ER図）の、4つのテンプレートが表示されています。クリックして、挿入したいダイアグラムを選択します。ここでは、FLOWCHARTをクリックしてみました。コード部分に、「flowchart TB」と挿入され、Mermaid Editorタブがツールバーに変化します（図13）。
なお、「TB」はTop to Bottomの略で、上から下（↓）に流れるフローチャートを意味します（Top Downの意のTDでも可）。ここをBT（↑）、LR（→）、RL（←）に書き換えれば、フローチャートの方向を変更できます。
ツールバーは、左から部品の操作（追加、更新）、フロー線（矢印）の操作（追加、更新）、ラベルの書き換え、部品や線の削除となっています。ツールバーは、最後に選択された部品や操作で表示が変わるので注意してください。ここでは、初期状態にあるとして説明しています。
端子を配置してみます。ツールバー左端にある「□に＋」のマークをクリックして、表示される部品の一覧から端子をクリックして選択します。すると、下に小さく「端子に＋」が表示されるので、そこをクリックします。ラベルを入力できるようになるので、例えば「Start」と入力します。挿入した内容は、随時エディタータブの方にも反映されます（図14）。
部品を追加するには、配置した部品の周囲にある「＋」の付いたアイコンをクリックします。あらかじめ、追加したい部品を選択しておくとよいでしょう。自動的に矢印線で接続され、新しい部品が追加されます（図15）。
このように、Mermaid記法を知らなくてもダイアグラムを作成していけるので、非常に便利です。生成されたMermaid記法のソースは、GitHubやQiitaのドキュメントに貼り付ければ、そのまま表示できるはずです。
今回登場のショートカットキー
| 機能 | macOS | Windows |
|---|---|---|
| 設定 | ［Command］＋［,］ | ［Ctrl］＋［,］ |
| コマンドパレット | ［Command］＋［Shift］＋［P］ | ［Ctrl］＋［Shift］＋［P］ |
まとめ
今回は、VSCodeをフローチャート、UML図などのダイアグラム作成ツールとして使う方法を紹介しました。役立ちそうなものがあったら、ぜひ導入してVSCodeの活用領域を拡げてください。
次回は、VSCodeのデバッグ機能を紹介します。
