Mermaidに入門してみた

はじめに

この記事では、「Mermaidの入門（簡単な図を書いて表示させる）」について書いています。

Mermaidとは、フローチャートやシステム開発で使われるシーケンス図、ガントチャートなどをテキストで表現することができます。

最近QiitaやGitHubなどでMermaidがサポートされ、折角なので書き方やローカルで使える方法を試してみようとなったのが記事を書いたきっかけでした。

自分に向けた備忘録の意味もありますが、「Mermaidを使ってみたい」な人の一助になれば嬉しいです。

VSCodeでMermaidを使えるようにする

VSCodeでmermaidを使えるようにする方法ですが、 拡張機能の「Markdown Preview Enhanced」を使用するやり方を記載します。

これをインストールするだけで自動的にMermaidで書いた記述を図として描画してくれるみたいです。

  1. 拡張機能からMarkdown Preview Enhancedをインストールする
  2. 適当なmdファイルをVSCodeで開く
  3. mdファイルの画面で右クリックをするとMarkdown Preview Enhanced: Open Preview to the Sideという項があるのでクリックする

これでマークダウンの内容をプレビューしながら見る事ができ、またmermaidも表示させることができるようになります。

簡単なMermaidの図を書いてみる

下にMermaidで書いた簡単なフローチャートのサンプルを載せます。

```mermaid
flowchart TD
    Start --> Stop
    Start --> PointA
    PointA --- Stop
```

コードブロックの頭にmermaidと指定し、その下にMermaidの記法で書いていきます。

上のコードを図にすると以下のようになります。

flowchart TD Start --> Stop Start --> PointA PointA --- Stop

おわりに

「Mermaidの入門（簡単な図を書いて表示させる）」について解説しました。

似たようなツールにPlantUMLもありますが、どちらが使いやすいかなどはこれから色々試してみるなかで比較していけたら良いなと思います。

さいごに、記事を書く上で参考にしたサイトのリンクを以下に掲載します。合わせて読んでいただくと良いかと思います。

qiita.com

notepm.jp