【Qiitaでも使える】テキストから図が生成できるMermaidについてのザックリ解説

# はじめに
以前から情報共有に使用している[esa.io](https://esa.io/)でPlantUMLを使用したUMLをちまちま書いていましたが、去年Zenn[^1]やNotion[^2]、今年に入ってからGithub[^3]やQiita[^4]など続々とMermaidに対応しはじめ、esa.ioでも実はひっそりMermaidに対応[^5]していた事が判明し、PlantUMLからMermaidに完全移行することにしました。

ここではMermaidに完全移行する際に説明した内容や、Mermaidでどのような事ができるのかを初心者向けにザックリ解説していきます。

また、項目が多くなってきたので使用事例については下記に移動しました。

https://qiita.com/b-mente/items/b17275090176d63d1d69

https://qiita.com/b-mente/items/b15011ab3b6c3830e732


# Mermaidとは
MermaidはAdobe製品のようにマウスを使って図を描くリッチなペイントツールやドローツールの一種...ではありません。Mermaid用の記法で記載したテキストから図を生成してくれるツールです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/8e494fe6-4c12-b21b-db96-7de23af0be32.png" width="400">
Mermaidの[[公式ドキュメント]](https://mermaid-js.github.io/mermaid/#/)はGitHub Pagesで公開されており、[[公式Github]](https://github.com/mermaid-js/)のmermaidリポジトリの[readme](https://github.com/mermaid-js/mermaid#readme)でもドキュメントを参照する事ができます。

また、Mermaidのように特定の記法で記載したテキストから図を作成するツールはたくさんありますが、ザックリ分けると下記の2つに分類できます。
(D3.jsのようにどちらの図も生成可能なライブラリもありますが、今回は便宜上2つに分類しています)

- 数式や数値データを元にグラフを生成するツール。棒グラフ・折れ線グラフ・散布図などはこちら

| 名称 | 説明 | 備考|
| --- | --- | --- |
| gnuplot | いにしえから存在する科学技術系のグラフ生成ツール | 使われすぎていて特定不能。研究界隈では現役 |
| matplotlib | Python製のグラフ生成ライブラリ | JupyterやVSCode、IntelliJなどに対応。Pythonでは根強い人気 |
| Chart.js | JavaScript製のグラフ生成ライブラリ | 対応状況は不明。Webシステムに組み込んで使用 |

- 関係性を元にダイアグラムを生成するツール。クラス図やシーケンス図などのUML・ツリー構造などはこちら

| 名称 | 説明 | 備考 |
| --- | --- | --- |
| Graphviz | いにしえから存在する科学技術系の図形生成ツール | 使われすぎていて特定不能。 ほぼ皆これの派生|
| PlantUML | Java製のUML生成ツール | QiitaやJupyter、VSCodeやIntelliJなどに対応 |
| <font color="Red">Mermaid</font> | <font color="Red">JavaScript製のダイアグラム生成ツール</font> | <font color="Red">QiitaやGithub、VSCodeやIntelliJなどに対応</font> |

※~~MermaidはUMLなどのダイアグラムを生成するツールになるので、棒グラフや折れ線グラフを生成することはできません。~~
→ 2023/10/25リリースの[v10.6.0](https://github.com/mermaid-js/mermaid/releases/tag/v10.6.0)から実験的に`xychart`が追加され、棒グラフや折れ線グラフを生成する事ができるようになりました。

:::note info
チャート・グラフ・ダイアグラムの定義の論争がなかなか終結しませんが、本稿では[UX BEAR](https://uxbear.me/chart-graph/)さんの記事を参考に下記の定義で使用します。
- チャート：図全般(量的と質的の両方の関係を含む)
  - グラフ：XYなどの軸を用いて量的な関係を図示したもの(いわゆる統計グラフ)
  - ダイアグラム：質的な関係を幾何学的に図示したもの
:::

## ・表記や位置付け
Qiitaのタグもそうですが、表記が`Mermaid`と`mermaid.js`で分かれていたり、記法や仕様であるという紹介や、JavaScriptのライブラリであるという説明など、表記や位置付けが分かれていたりするのでMermaidの表記や位置付けについて整理しておきます。

なお、Mermaidの[[公式ドキュメント]](https://mermaid-js.github.io/mermaid/#/)によると`Mermaid`はMarkdown風の記法のテキストから動的にダイアグラムやチャートを生成するJavaScriptをベースとしたツールである、と説明されていますが混乱に拍車をかけるので公式の主張は無視します。

結論から言うと、`Mermaid`は記法や生成する図のルール(仕様)の事で、`Mermaid`のルール(仕様)に従って記法から図を生成するモノ(実装)がたくさんあり、そのうち(実装)の一つであるJavaScriptのライブラリが`mermaid.js`である、という認識でよいと思います。
(はじめはツールだったモノが、いろんなところで活用されて仕様に昇格されるいつものやつです)

```mermaid
graph RL
  subgraph "仕様"
    A-1[Mermaid]
  end
  subgraph "実装"
    A-1 --> B-1["JavaScriptライブラリ(mermaid.js)"]
    A-1 --> B-2[CLI]
    A-1 --> B-3[プラグイン]
    A-1 --> B-4[Webサービス]
  end
  A-1[Mermaid] --> A-2[公式ドキュメント]
```

なので、GithubやQiitaなどのWebサービスが`Mermaid`に対応したというのは、`Mermaid`の記法や生成する図のルール(仕様)に従ってMermaid記法から図を生成するようにした(実装した)という事で、`mermaid.js`を組み込んだというわけではありません。

ちなみに[[公式Github]](https://github.com/mermaid-js/)では`mermaid.js`以外にCLI(`mermaid-cli`)も提供しています。使い方については[コマンドでmermaidが使える](#コマンドでmermaidが使える)を参照してください。


## ・生成できる図
現在Mermaid(ver 10.6.1)では16種類の図が生成でき、バージョンがあがる度に生成できる図の種類が増えています。
また、上記で記載したようにMermaidに近いダイアグラムを生成するツールとしてPlantUMLがありますので、Mermaidで生成できる16種類の図をベースにPlantUMLと比較していきます。

| 種類 | Mermaid | PlantUML | サンプル - Mermaid | サンプル - PlantUML |
| --- | :-: | :-: | :-: | :-: |
| フローチャート(アクティビティ) | ○ | ○ | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/2c585289-5824-ab0b-9ded-d624ba029a5c.png" width="50">| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/ea3e52a1-237b-901b-6bdd-1d189b5ba7a3.png" width="100"> |
| シーケンス図 | ○ | ○ | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/ba7152d6-4172-86ba-2f60-9fa824202201.png" width="200">| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/71192cf4-3aa6-9828-a404-188239f158f9.png" width="100"> |
| クラス図 | ○ | ○ | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/c5ae1e70-6b7f-50fe-8c44-16573f33c691.png" width="100">| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/d487176a-3e54-dd85-6a93-66e9b563e959.png" width="100"> |
| 状態遷移図 | ○ | ○ | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/5478285d-ce42-108c-3213-27a0a3be2304.png" width="60">| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/c8f8a601-bb11-9358-4513-33df62b5474d.png" width="60"> |
| ER図 | ○ | ○ | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/df47e3da-407e-8fbe-62db-046680f8262f.png" width="200">| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/a4e62155-1b19-c18f-32a1-41fa5a8b961c.png" width="150"> |
| ジャーニーマップ | ○ | ✖️ | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/e2b5d3ec-aaf2-25c6-7619-fbd6f932f3a8.png" width="200">| - |
| ガントチャート | ○ | ○ | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/54736287-e02d-b3e1-5d19-a22b781cc036.png" width="250">| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/56a1190d-c110-7a41-5272-67b8dfc47204.png" width="250"> |
| 円グラフ | ○ | ✖️ | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/107018c3-ce3e-74e6-0e29-88713058622f.png" width="150">| - |
| 4象限マトリクス<br>(クアドラントチャート) | ○ | ✖️ | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/dee6fcd6-9e93-cf36-31d2-4adf88300231.png" width="150">| - |
| 要件図 | ○ | ✖️ | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/cf096960-da77-8415-a8f4-d91e97961bb0.png" width="100">| - |
| Gitgraph | ○ | ✖️ | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/84f1443c-fd9f-edf5-579d-ebcf248b8c4e.png" width="200">| - |
| C4図 | △ | ○ | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/349ffad3-9ad5-bbbf-6490-6da21fbffa24.png" width="200">| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/94f04bc4-9740-3355-110d-21dea3737565.png" width="100"> |
| マインドマップ | △ | ○ | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/3e9094e5-ce48-7314-b142-2885e820c78b.png" width="200">| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/6fe1a5b2-3e8d-a8ba-ffcc-0507ad9b0ca7.png" width="200"> |
| タイムライン | △ | ✖️ | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/3d9998d5-01c9-db32-7532-6b55bc70ebff.png" width="200">| - |
| サンキーダイアグラム | △ | ✖️ | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/95a6616a-08c9-65eb-3cb9-ab8b554d8c87.png" width="200">| - |
| XYチャート | △ | ✖️ | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/c4eac53a-114d-f401-4e5e-df0a93785023.png" width="200">| - |

※実験的にZenUMLが組み込まれていますが、Mermaidとは独立して存在しているため除外しています

MermaidはPlantUMLと比較してシンプルに記載できる分、PlantUMLの方が柔軟にカスタマイズができ、どちらかというとMermaidはSysMLより、PlantUMLは名前の通りUMLよりのダイアグラムが生成できます。

ちなみに、PlantUMLはMermaidでは生成できない図がたくさんありますので、興味のある方は[[PlantUML公式ドキュメント]](https://plantuml.com/ja/)を参照してください。

# どこで使えるのか
Mermaidでどんな図が生成できるのか紹介してきましたが、次はどういうところで使えるのかサンプルを交えながら説明していきます。

## ・WebサービスでMermaidが使える
冒頭でも少し紹介しましたが、GithubやQiitaなどのMermaidに対応したWebサービスでは編集画面でMermaid記法のテキストを記載するとプレイビュー画面でダイアグラムが表示されます。

| Github | Qiita |
| :-: | :-: | 
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/3d763050-0a47-969a-9777-4d6f0ae6ee21.png" width="600">| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/65b6cacf-b7e8-2fb9-3136-b39cf0828195.png" width="600">

:::note warn
chromeの拡張機能としてMermaidのプラグインが用意されていますが、WebサービスがMermaidに対応している場合は特別なプラグインやツールのインストールは必要ありません。
むしろ、ブラウザ側でMermaidのダイアグラムをレンダリングするようなプラグインを入れている場合は正常に表示されなくなる場合がありますので注意してください。
:::

上記以外にもMarkdownに対応しているWebサービスであればMermaidに対応している場合があるので、使いたいWebサービスがあれば対応しているか調べてみてください。

## ・ツールでMermaidが使える
VSCodeなどのエディタやIntelliJなどのIDEではMermaidのプラグインが用意されている場合があり、適用している場合はmdファイルなどMarkdown内でMermaid記法のテキストを記載するとプレイビュー画面でダイアグラムが表示されます。

| VSCode | IntelliJ |
| :-: | :-: | 
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/75a02c7b-8c09-8d0b-ddec-0bbf7e67a3ea.png" width="600">| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/0e0abb8f-1c99-2a0c-c71a-d00cb50298a0.png" width="600">

- VSCodeでMermaidを使う手順
VSCodeのプラグイン検索画面からMarkdownを使えるようにするために[[Markdown All in One]](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)をインストールし、Markdown内でMermaidが使えるように[[Markdown Preview Mermaid Support]](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)をインストールをすると準備完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/45029b10-1e0c-c222-61f2-898d6d1a5e4d.png)
あとはmdファイルを作成してMermaid記法のテキストを記載するとプレイビュー画面でMarkdownとMermaidのダイアグラムが表示されるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/b0759cd9-8519-0220-88de-f15b58639e78.png)

- IntelliJでMermaidを使う手順
IntelliJのメニューからPreferences > Languages & Frameworks > Markdown を選択し、Markdown extensionsからMermaidのプラグインをインストールするとMermaidのチェックボックスが有効になるのでチェックをつけます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/44eb85fd-afde-9c7e-49f0-6901c75684cc.png)
あとはmdファイルを作成してMermaid記法のテキストを記載するとプレイビュー画面でMarkdownとMermaidのダイアグラムが表示されるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/2e5da7e5-62c0-a646-8246-71335fca654a.png)
IntelliJの場合は残念ながら日本語が文字化けしてしまうので、Mermaid記法のテキストの中では日本語の使用は控えた方がよさそうです。

また、上記以外にもMarkdownに対応しているツールであればMermaid用のプラグインが用意されている場合があるので探してみてください。なお、一部は[[公式ドキュメント - integrations]](https://mermaid-js.github.io/mermaid/#/./integrations?id=integrations)でも紹介されていますので参考にしてください。

## ・オンラインエディタでMermaidが使える
Mermaidでは公式でオンラインエディタ [[Mermaid Live Editor](https://mermaid.live/)] を公開しています。Mermaid記法のサンプルや生成した画像のファイル出力、現在編集・表示しているMermaid Live Editorの共有用URLや、Markdown画像用のURLを提供したりと豊富な機能がありますので、ぜひ遊んでみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/c31977aa-eca8-7062-728b-3ce0b719e99b.png)
↓はMarkdown画像用のURLをQiitaにそのまま貼り付けた状態。画像がリンクになっておりクリックするとコード付きのMermaid Live Editorに遷移するスグレモノ。
[![](https://mermaid.ink/img/pako:eNqrVkrOT0lVslJKL0osyFAI8onJU1AoLk2CcGOUnuye-mz5jBglkLCCgqOuYbRvalFuYmZKLEgkNS8FTf3TdfNfLG5FUq-gq2un4ATUF6PklViWGJxclFlQ8rh55eOmJY-bp4EYzas0ciFm6mUVa8YoxaLrNYp29vHEEDWOftw8HWzQBrBZmzFUmESHpyY9btr6uHnP4-bJj5t2IrsZ2Stg9Y5Ae562rnm6p_9xc-fjprWPm5c-bl4INPdxc0esko4S1I3AoKoG6Y9RKslIzU2NUbICMlNS0xJLc0pA3q4FKi0tSEksSXVNySzJL1KySkvMKU7VUUosLckPrsxLVrIqKSpNhSlyyUwEBl0uVFUtAEgMlt0)](https://mermaid.live/edit#pako:eNqrVkrOT0lVslJKL0osyFAI8onJU1AoLk2CcGOUnuye-mz5jBglkLCCgqOuYbRvalFuYmZKLEgkNS8FTf3TdfNfLG5FUq-gq2un4ATUF6PklViWGJxclFlQ8rh55eOmJY-bp4EYzas0ciFm6mUVa8YoxaLrNYp29vHEEDWOftw8HWzQBrBZmzFUmESHpyY9btr6uHnP4-bJj5t2IrsZ2Stg9Y5Ae562rnm6p_9xc-fjprWPm5c-bl4INPdxc0esko4S1I3AoKoG6Y9RKslIzU2NUbICMlNS0xJLc0pA3q4FKi0tSEksSXVNySzJL1KySkvMKU7VUUosLckPrsxLVrIqKSpNhSlyyUwEBl0uVFUtAEgMlt0)
```:クリップボードにコピーされたMarkdown画像用のURL
[![](https://mermaid.ink/img/pako:eNqrVkrOT0lVslJKL0osyFAI8onJU1AoLk2CcGOUnuye-mz5jBglkLCCgqOuYbRvalFuYmZKLEgkNS8FTf3TdfNfLG5FUq-gq2un4ATUF6PklViWGJxclFlQ8rh55eOmJY-bp4EYzas0ciFm6mUVa8YoxaLrNYp29vHEEDWOftw8HWzQBrBZmzFUmESHpyY9btr6uHnP4-bJj5t2IrsZ2Stg9Y5Ae562rnm6p_9xc-fjprWPm5c-bl4INPdxc0esko4S1I3AoKoG6Y9RKslIzU2NUbICMlNS0xJLc0pA3q4FKi0tSEksSXVNySzJL1KySkvMKU7VUUosLckPrsxLVrIqKSpNhSlyyUwEBl0uVFUtAEgMlt0)](https://mermaid.live/edit#pako:eNqrVkrOT0lVslJKL0osyFAI8onJU1AoLk2CcGOUnuye-mz5jBglkLCCgqOuYbRvalFuYmZKLEgkNS8FTf3TdfNfLG5FUq-gq2un4ATUF6PklViWGJxclFlQ8rh55eOmJY-bp4EYzas0ciFm6mUVa8YoxaLrNYp29vHEEDWOftw8HWzQBrBZmzFUmESHpyY9btr6uHnP4-bJj5t2IrsZ2Stg9Y5Ae562rnm6p_9xc-fjprWPm5c-bl4INPdxc0esko4S1I3AoKoG6Y9RKslIzU2NUbICMlNS0xJLc0pA3q4FKi0tSEksSXVNySzJL1KySkvMKU7VUUosLckPrsxLVrIqKSpNhSlyyUwEBl0uVFUtAEgMlt0)
```
また、ローカルでdockerを使用して動かすこともできますので、詳細を知りたい方は[[mermaid-live-editorのreadme]](https://github.com/mermaid-js/mermaid-live-editor#readme)を参照してください。

:::note warn
[[公式ドキュメント]](https://mermaid-js.github.io/mermaid/#/)が公開されているGitHub Pagesのドメイン内に上記とは別の[[Mermaid Live Editor]](https://mermaid-js.github.io/docs/mermaid-live-editor-beta/#/edit/eyJjb2RlIjoiZ3JhcGggUkxcbiAgc3ViZ3JhcGggXCLku5Xmp5hcIlxuICAgIEEtMVtNZXJtYWlkXVxuICBlbmRcbiAgc3ViZ3JhcGggXCLlrp_oo4VcIlxuICAgIEEtMSAtLT4gQi0xW1wiSmF2YVNjcmlwdOODqeOCpOODluODqeODqihtZXJtYWlkLmpzKVwiXVxuICAgIEEtMSAtLT4gQi0yW0NMSV1cbiAgICBBLTEgLS0-IEItM1vjg5fjg6njgrDjgqTjg7NdXG4gICAgQS0xIC0tPiBCLTRbV2Vi44K144O844OT44K5XVxuICBlbmRcbiAgQS0xW01lcm1haWRdIC0tPiBBLTJb5YWs5byP44OJ44Kt44Ol44Oh44Oz44OIXSIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0In0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9)が存在しますが、URLがbetaとなっており、対応しているバージョンも古いためこちらよりも上記で紹介したオンラインエディタの使用をお勧めします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/31a99330-3c0f-ff6b-642c-3c1bcca44f25.png)
:::

## ・コマンドでMermaidが使える
こちらも公式でMermaidのCLI(mermaid-cli)が提供されています。

MacやWindowsなどのPCやLinuxサーバーなどでMermaidのCLIをインストールし、コンソール上からコマンドを実行する事でMermaid記法のテキストからダイアグラムの画像ファイルを生成することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/0041b354-0701-6300-78dc-a7f2498b3090.png)

- MacでMermaidのコマンドを使う手順
MermaidのCLIは様々なパッケージ管理ツールに登録されていますが、今回はHomebrewでインストールを行います。
```bash: HomebrewでMermaidのCLIをインストール
$ brew install mermaid-cli
Running `brew update --preinstall`...
==> Homebrew is run entirely by unpaid volunteers. Please consider donating:
・・・中略・・・
$ 
```
あとはMermaid記法のテキストを記載したmmdファイルを作成し、Mermaidのコマンド(mmdc)を使用してpngファイルを生成します。
```bash:作成したmmdファイル
$ cat input.mmd 
graph RL
  subgraph "仕様"
    A-1[Mermaid]
  end
  subgraph "実装"
    A-1 --> B-1["JavaScriptライブラリ(mermaid.js)"]
    A-1 --> B-2[CLI]
    A-1 --> B-3[プラグイン]
    A-1 --> B-4[Webサービス]
  end
  A-1[Mermaid] --> A-2[公式ドキュメント]
$ 
```
```bash:Mermaidのコマンド(mmdc)を実行してpngファイルを生成
$ mmdc -i input.mmd -o output.png
$ 
```

コマンドの使い方は[[mermaid-cliのreadme]](https://github.com/mermaid-js/mermaid-cli#readme)かコマンドのヘルプ(`mmd -h`)に記載されているので、そちらをご覧ください。

また、Homebrew以外にもMermaidのCLIが登録されているパッケージ管理ツールとしてnpmやyarnがありますので、Mac以外の方はそちらからインストールしてください。
- npm :  https://www.npmjs.com/package/mermaid
- yarn : https://yarnpkg.com/package/mermaid

:::note warn
MermaidのCLIには公式以外にも個人開発が複数あり、個人開発のCLIのインストール方法を紹介している方もいます。しかし、開発が中止していたり参照元のGithubでは公式を使うようアナウンスしていたりするので、できるだけ公式のCLIを使用することをお勧めします。
(公式のCLIかどうかはパッケージ管理ツールの参照元Githubが公式になっているかどうかで判断できます)

また、使用頻度が多そうなnpmの一覧を記載しておきますので参考にしてください。

- 公式のCLI
  - npmインストールコマンド：`npm install -g mermaid`
  - npm公開場所：https://www.npmjs.com/package/mermaid
  - npm参照元Github：https://github.com/knsv/mermaid
  (公式のGithubにリダイレクトされる)

- 名前は公式っぽいけど個人開発のCLI(開発中止、公式を使うようアナウンスされている)
  - npmインストールコマンド：`npm install -g mermaid.cli`
  - npm公開場所：https://www.npmjs.com/package/mermaid.cli
  - npm参照元Github：https://github.com/mermaidjs/mermaid.cli

- 名前は公式っぽいけど個人開発のCLI(開発中止、非推奨になっている)
  - npmインストールコマンド：`npm install -g mermaid-cli`
  - npm公開場所：https://www.npmjs.com/package/mermaid-cli
  - npm参照元Github：https://github.com/fardog/mermaid-cli

:::

## ・WebシステムでMermaidが使える
Mermaidの真骨頂になりますが、WebシステムやWebサイトにMermaidのJavaScriptライブラリ(mermaid.js)を組み込んで、ブラウザ上でMermaid記法のテキストからダイアグラムの図を生成して表示する事ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/f2a05c96-c6c0-c057-663d-e951f6cabff4.png)
```html:サンプルのHTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body>
  <h2>Webシステム / Webサイト</h2>
  <div class="mermaid">
  graph RL
    subgraph "仕様"
      A-1[Mermaid]
    end
    subgraph "実装"
      A-1 --> B-1["JavaScriptライブラリ(mermaid.js)"]
      A-1 --> B-2[CLI]
      A-1 --> B-3[プラグイン]
      A-1 --> B-4[Webサービス]
    end
    A-1[Mermaid] --> A-2[公式ドキュメント]
  </div>
  <script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
  <script>
    mermaid.initialize({startOnLoad:true});
  </script>
</body>
</html>
```
特別に何かをインストールしなくとも、上記のサンプルのHTMLをローカルで`sample.html`と名前をつけてブラウザで表示すると、画像のようにMermaid記法のテキストで記載した内容が図として表示されます。

また、WebシステムやWebサイトにmermaid.jsが組み込まれてブラウザに到達するまでの流れは以下のようになります。
```mermaid
graph RL
  subgraph "Github(mermaid-js)"
    A-1[JavaScript : mermaid.js]
    A-2[CLI : mermaid-cli]
  end

  A-1 --> B[CDN]
  A-1 --> C[Webシステム]
  A-1 --> E
  B -->|mermaid.js| D[ブラウザ]
  C -->|mermaid.js| D
  A-2 -.-> E[パッケージ管理]
  A-2 -.-> C
  E --> C
  E -.-> C
  C -.画像ファイル.-> D
```
上記の例では公式からもアナウンスされているCDN(unpkg)を経由してmermaid.jsをブラウザに読み込ませてMermaid記法のテキストから図を生成していますが、CLIをWebシステムに組み込んでサーバーサイドでMermaid記法のテキストから画像の生成をさせることもできます。
(Qiitaも当初はCLIを使用してサーバーサイドで処理させようと考えていたようです[^6])

また、使い方については[[公式ドキュメント - API-Usage]](https://mermaid-js.github.io/mermaid/#/usage?id=usage)に記載されていますので、詳細はそちらをご覧ください。

# どう書くのか

Mermaid記法の書き方については[[公式ドキュメント]](https://mermaid-js.github.io/mermaid/#/)のDiagram Syntaxや
[[公式ドキュメント - Tutorials]](https://mermaid-js.github.io/mermaid/#/Tutorials?id=tutorials)を参照してください...では味気ないので、Mermaid記法の書き方についてザックリ解説していきます。

:::note warn
Mermaid記法に対応しているサービスやツールであっても、Mermaidの最新バージョンに対応しているとは限りません。バージョンによってはできることが変わってきますので、紹介したサービスやツールの2023年11月12日時点のバージョンを記載しておきます。
- Webサービス
  - Github：10.0.2
  - Qiita：[10.2.4](https://qiita.com/release-notes/2023-07-26)
- ツール
  - VSCode(Markdown Preview Mermaid Support v1.20.0)：10.4.0
  - IntelliJ : 8.13.3

また、間違ったMermaid記法や`info`を記載したプレイビュー画面にバージョン情報が出てくるケースが多いので、バージョンを確認したい場合は使用しているサービスやツールで試してみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/6cd23743-2328-4570-3385-b942318336ec.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/63c910c2-5ae6-ee5c-aefe-fd7fbf11ee1c.png)


なお、バージョンによる違いなどは[[公式Github - Release Notes]](https://github.com/mermaid-js/mermaid/releases)に記載がありますので参考にしてください。

:::

## ・記述範囲を指定する

Mermaid記法を記述する際は、どこからどこまでがMermaid記法の記述なのかを領域を指定する必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/e4e335f8-8c72-7d97-be8d-76dd674bba92.png)
通常はバッククオート(`)を3つ並べた形式をとりますが、使用しているWebサービスやツールによっては別な形式を取っている場合がありますので注意してください。

```mermaid
%%{init:{'themeVariables':{'fontFamily':'inherit','fontSize':'15px'}}}%%
graph RL
  subgraph T[" "]
    subgraph A[通常]
      A-1["#9;<br>```mermaid<br>(Mermaid記法の記述)　<br>```<br>#9;"]
    end
    subgraph B[VSCode]
      B-1["#9;<br>:::mermaid<br>(Mermaid記法の記述)　<br>:::<br>#9;"]
    end
    subgraph C[HTML]
      C-1["#9;<br><div class=mermaid><br>(Mermaid記法の記述)　<br></div><br>#9;"]
    end
  end

  style T fill:none,stroke:#000;

  classDef S1 fill:none,stroke-width:0px;
  class A,B,C S1

  classDef S2 fill:#364548,stroke-width:0px,color:#ddd;
  class A-1,B-1,C-1 S2
```

## ・ダイアグラムの種類を指定する

Mermaid記法を記述範囲を指定したら、次はダイアグラムの種類を指定する必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/8559b3e1-b559-37cb-9deb-9c02eafe2651.png)
ダイアグラムの種類は下記の16(+1)種類から選択できますが、それぞれ表現できる図形や記述方法が変わりますので、自分のイメージにあうダイアグラムの種類の文字列を記載してください。

| 種類 | 文字列 |
| --- | --- |
| フローチャート(1) | graph |
| フローチャート(2) | flowchart |
| シーケンス図 | sequenceDiagram |
| クラス図 | classDiagram |
| 状態遷移図 | stateDiagram-v2 |
| ER図 | erDiagram |
| ジャーニーマップ | journey |
| ガントチャート | gantt |
| 円グラフ | pie |
| 4象限マトリクス<br>(クアドラントチャート) | quadrantChart |
| 要件図 | requirementDiagram |
| Gitgraph | gitGraph |
| C4図 | C4Context |
| マインドマップ | mindmap |
| タイムライン | timeline |
| サンキーダイアグラム | sankey-beta |
| XYチャート | xychart-beta |

## ・向きを指定する

Mermaidのダイアグラムは通常、上から下に向かって図形が描かれますが、向きを変更することもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/be7a31bd-a520-b2f2-61cf-d266a562fd7c.png)
向きは下記5つから選択できますが、記載を省略すれば上から下に描かれます。
ちなみに記載を省略した場合と下記の`上から下へ(1)`、`上から下へ(2)`は全て同じ意味になります。

| 種類 | 上から下へ(1) | 上から下へ(2) | 下から上へ | 右から左へ | 左から右へ |
| :-: | :-: | :-: | :-: | :-: | :-: |
| 文字列 | TB | TD | BT | RL | LR |
| イメージ | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/7919bede-816e-0a14-f217-b5c74978e282.png" width="100"> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/7919bede-816e-0a14-f217-b5c74978e282.png" width="100"> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/08d03e7d-2e5c-65c7-3da3-9b0b063f34f4.png" width="100"> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/6f5238e3-8b89-9948-9dc3-60e921e8f2ba.png" width="300"> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/4f3476eb-b04d-4600-848d-4ee37aabe1fd.png" width="300"> |

## ・ノードを記述する

Mermaidでは要素のことをノードと呼び、Mermaid記法と図として表示する名称を分けられたり、形を変えられたりします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/81045861-1390-a29c-fc8c-7bfd923a1005.png)
上記の例のNode1のように特に記載がなければMermaid記法と図は同じ名称で表示されますが、Node3のようにMermaid記法では`Node3`図では`ノード3`というように名称を分けることができます。

また、通常はNode1のようにノードは四角形をしていますが、Node4のようにノードの形を変更することもできます。

なお、指定できるノードの形は、指定しているダイアグラムの種類によって変わりますので、詳細は[[公式ドキュメント]](https://mermaid-js.github.io/mermaid/#/) > Diagram Syntax > ダイアログの種類 > Node shapesを参照してください。
```mermaid
graph TD
  subgraph S1[" "]
    Node1["[ square ]"]
    Node2("( round )")
    Node3{"{ diamond }"}
    %%Node4-1(-"(- ellipse -)"-)
    Node4(["([ stadium ])"])
    Node5>"> odd ]"]
    Node6[("[( cylinder )]")]
    Node7((("((( doublecircle )))")))
  end
  subgraph S2[" "]
    Node8[/"[/ trapezoid \]"\]
    Node9[\"[\ inv_trapezoid /]"/]
    Node10[/"[/ lean_right /]"/]
    Node11[\"[\ lean_left \]"\]
    Node12[["[[ subroutine ]]"]]
    Node13{{"{{ hexagon }}"}}
  end
  S1 --- S2

  linkStyle 0 stroke-width:0px
  class S1,S2 SGV
  classDef SGV fill:none,stroke:none
```

また、flowchartのノードの形状や画像 / アイコンの指定方法については下記を参照してください。

https://qiita.com/b-mente/items/89e900dab7319ef502be

:::note info
ノードの図の名称に記号や特殊文字、改行を入れることができます
- 記号を使用したい場合はダブルクォート(`"`)で囲むと正常に表示できる場合があります
- ~~特殊文字はエスケープ文字や`#数字;`(数字はASCIIコードの10進数)、もしくはで表示できます~~ → Qiita上では特殊文字が表現できないよう修正されています
- `<br>`タグを使用すると改行できます
```mermaid
graph LR
  Node1["ダブルクォートで<br>囲うと()も使える"] --> Node2["brタグを使うと<br>改行もできる"]
```
```:Mermaid記法の記述
graph LR
  Node1["ダブルクォートで<br>囲うと()も使える"] --> Node2["brタグを使うと<br>改行もできる"]
```
:::

## ・リンクを記述する

Mermaidではノードとノードを繋ぐ関係(接続)をリンクと呼び、リンクを描画する線の種類を指定する事ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/26b48c58-a6f4-2f38-3b1f-f13fbd8db145.png)
リンクを描画する線は`実線`、`点線`、`太線`から、また、`矢印なし`、`片方向矢印`、`両方向矢印`を選択することができます。
```mermaid
flowchart LR
  subgraph M[" "]
    subgraph L1[実線]
      N1 --- N2
      N1 --> N2
      N1 <--> N2
    end
    subgraph L2[点線]
      N3 -.- N4
      N3 -.-> N4
      N3 <-.-> N4
    end
    subgraph L3[太線]
      N5 ==== N6
      N5 ===> N6
      N5 <===> N6
    end
  end

  classDef SS fill:none,stroke:#aaa;
  class M,L1,L2,L3 SS

  classDef SL fill:none,stroke-width:0;
  class L1,L2,L3 SL
```
```:Mermaid記法
flowchart LR
  subgraph M["Mermaid記法"]
    subgraph L1[実線]
      N1 --- N2
      N1 --> N2
      N1 <--> N2
    end
    subgraph L2[点線]
      N3 -.- N4
      N3 -.-> N4
      N3 <-.-> N4
    end
    subgraph L3[太線]
      N5 ==== N6
      N5 ===> N6
      N5 <===> N6
    end
  end
```

:::note warn

`片方向矢印`をMermaid記法で記述する場合は右のノードから左のノードに対して矢印の向きを向ける事ができません。

```:Mermaid記法
flowchart LR
  subgraph M["Mermaid記法"]
    subgraph L1[実線]
      N1 <-- N2
    end
    subgraph L2[点線]
      N3 <-.- N4
    end
    subgraph L3[太線]
      N5 <=== N6
    end
  end
```

そういう場合はノードを入れ替えて左のノードから右のノードに矢印を向けるようにしてください。

```:Mermaid記法
flowchart LR
  subgraph M["Mermaid記法"]
    subgraph L1[実線]
      N2 --> N1
    end
    subgraph L2[点線]
      N4 -.-> N3
    end
    subgraph L3[太線]
      N6 ===> N5
    end
  end
```
:::

また、リンクの線にはテキストを付与することができます。
```mermaid
flowchart LR
  subgraph M[" "]
    subgraph L1[" "]
      N1 -- 実線 --- N2
      N1 ---|実線| N2
      N1 -- 実線片矢印 --> N2
      N1 ---->|実線片矢印| N2
      N1 <-- 実線両矢印 --> N2
      N1 <---->|実線両矢印| N2
    end
    subgraph L2[" "]
      N3 -. 点線 .- N4
      N3 -.-|点線| N4
      N3 -. 点線片矢印 .-> N4
      N3 -.->|点線片矢印| N4
      N3 <-. 点線両矢印 .-> N4
      N3 <-.->|点線両矢印| N4
    end
    subgraph L3[" "]
      N5 == 太線 === N6
      N5 ===|太線| N6
      N5 == 太線片矢印 ==> N6
      N5 ===>|太線片矢印| N6
      N5 <== 太線両矢印 ==> N6
      N5 <===>|太線両矢印| N6
    end
  end

  classDef SS fill:none,stroke:#aaa;
  class M SS

  classDef SL fill:none,stroke-width:0;
  class L1,L2,L3 SL

```
```:Mermaid記法(テキストあり)
flowchart LR
  subgraph M["Mermaid記法(テキストあり)"]
    subgraph L1[" "]
      N1 -- 実線 --- N2
      N1 ---|実線| N2
      N1 -- 実線片矢印 --> N2
      N1 ---->|実線片矢印| N2
      N1 <-- 実線両矢印 --> N2
      N1 <---->|実線両矢印| N2
    end
    subgraph L2[" "]
      N3 -. 点線 .- N4
      N3 -.-|点線| N4
      N3 -. 点線片矢印 .-> N4
      N3 -.->|点線片矢印| N4
      N3 <-. 点線両矢印 .-> N4
      N3 <-.->|点線両矢印| N4
    end
    subgraph L3[" "]
      N5 == 太線 === N6
      N5 ===|太線| N6
      N5 == 太線片矢印 ==> N6
      N5 ===>|太線片矢印| N6
      N5 <== 太線両矢印 ==> N6
      N5 <===>|太線両矢印| N6
    end
  end
```

## ・グループを記述する

今まで紹介したノードやリンクをグループにまとめることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/ac91e451-1f19-d2ea-c9de-98ca174340cc.png)
記載方法ですが、`subgraph (グループ名称)`を起点とし、`end`が記載されるところまでがグループとしてまとめられます。

また、グループ名称はノードと同様にMermaid記法と図として表示する名称を分けることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/b67027ce-49ed-acfd-0192-b33d5e268063.png)

:::note warn
ノードとは異なり`Group1((グループ1))`等の名称の記載でグループの形を変えることはできないので注意してください。
:::

## ・テーマを指定する

Mermaidではダイアグラムの全体的な見た目を決めるテーマを設定することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/ab835ed9-f4c7-bf2a-cff4-d09cb4c07eda.png)
テーマは下記4つから選択でき、変更したいテーマの文字列を下記フォーマット(initディレクティブ)で記述することでテーマを変更できます。また、記述はダイアグラムの種類を指定する記述の上に、一行で記載してください。
```
%%{init:{"theme":"(テーマの文字列)"}}%%
```

| 文字列 | default | dark | forest | neutral |
| :-: | :-: | :-: | :-: | :-: |
| イメージ | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/29b5efb9-fd1b-8dec-44f6-499a4822c792.png" width="200"> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/1248d090-9040-44aa-f163-315dbdcf24b5.png" width="200"> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/5f19b66b-7c01-ff1d-bbcb-c3d76f1cf66c.png" width="200"> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/699b1045-1679-b700-8864-b2a9be53035f.png" width="200"> |

また、initディレクティブにはテーマの他にもフォントやログレベルなどさまざまな指定が行えるので、興味のある方は[[公式ドキュメント - directives]](https://mermaid-js.github.io/mermaid/#/directives?id=directives)、パラメータについては[[公式ドキュメント - Theme Configuration]](https://github.com/mermaid-js/mermaid/blob/develop/docs/theming.md)や[[公式ドキュメント - Setup]](https://github.com/mermaid-js/mermaid/blob/develop/docs/Setup.md)を参照してください。

なお、公式ドキュメントには記載はありませんが、SVGで指定できる属性は大抵使用できるのではないかと思われます。

## ・スタイルを指定する

上記で説明したテーマとは別に、Mermaidでは個別のノードに対してスタイルを指定することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/e443c933-d8e0-13e3-2aa6-8635573693b0.png)
下記フォーマットでノードとスタイルを指定すると、指定したノードにスタイルが適用されます。
```
style (ノード) (スタイル)
```
また、同じスタイルを複数のノードに適用する場合は、下記フォーマットでclassを定義して複数のノードに一括で適用することができます。
```
classDef (class名) (スタイル)
class (ノード) (class名)
```
また、矢印の先端が変更できなかったり、リンクの指定方法が登場順番だったりと少し癖が強いですが、リンクにもスタイルを指定することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/576b0678-6988-501e-fa1c-87e99728aa28.png)
```
linkStyle (登場順番) (スタイル)
```
なお、スタイルの指定方法についてはSVGを参考に記載してください。

## ・URLのリンクを指定する

Mermaidではノードをクリックした時に動作するWebサイトへのリンクを指定することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699056/1f5cda7a-db27-93c9-66a5-dc1057191c1a.png)
例えば下記はA-2をクリックすると新しいウィンドウで`https://www.github.com`に遷移するようリンクを指定していますので、クリックして動作を確認することができます。

```mermaid
graph LR
  subgraph A
    A-1 --> A-2
  end
  subgraph B
    B-1 --> B-2
  end
  A-2 --> B-1

  style A-2 fill:#fee,stroke:#f00,stroke-width:2px;
  classDef p fill:#fff,stroke:#000;
  class A,B p
  classDef e fill:#eee,stroke:#555;
  class A-1,B-1 e

  click A-2 "https://www.github.com" _blank

```
下記フォーマットでノードと遷移先URL、ウィンドウの動作パターンを記述するとノードにリンクを指定することができます。
```
click (ノード) (遷移先URL) (ウィンドウの動作パターン)
```
また、下記の4種類からクリックした際に開くウィンドウのパターンを選択することができます。

| 種類 | 文字列 |
| --- | --- |
| 自身のウィンドウ | _self |
| 新規のウィンドウ | _blank |
| 自身の親のウィンドウ | _parent |
| トップのウィンドウ | _top |

WebシステムやWebサイトなどのHTMLを記載する場合は対応できる範囲が広がりますので、興味のある方は[[公式ドキュメント - Interaction]](https://mermaid-js.github.io/mermaid/#/flowchart?id=interaction)を参照してください。

# 使用事例

項目が多く追加が難しくなってきたので、AWS構成図については[[【Qiitaでも使える】テキストから図が生成できるMermaidでAWS構成図をつくる]](https://qiita.com/b-mente/items/b17275090176d63d1d69)に移動しました。

また、AWSの画像やアイコンの指定方法については下記を参照してください。

https://qiita.com/b-mente/items/89e900dab7319ef502be

## ・Qiitaでコードブロックを横に並べる

例えば[[記述範囲を記述する]](#記述範囲を指定する)で記載した以下の図ですが、こちらは3種類のMermaid記法をコードブロックっぽくテキストがコピーできる形で横に並べて比較したい、と考えて作成したものです。

```mermaid
%%{init:{'themeVariables':{'fontFamily':'inherit','fontSize':'15px'}}}%%
graph RL
  subgraph T[" "]
    subgraph A[通常]
      A-1["#9;<br>```mermaid<br>(Mermaid記法の記述)　<br>```<br>#9;"]
    end
    subgraph B[VSCode]
      B-1["#9;<br>:::mermaid<br>(Mermaid記法の記述)　<br>:::<br>#9;"]
    end
    subgraph C[HTML]
      C-1["#9;<br><div class=mermaid><br>(Mermaid記法の記述)　<br></div><br>#9;"]
    end
  end

  style T fill:none,stroke:#000;

  classDef S1 fill:none,stroke-width:0px;
  class A,B,C S1

  classDef S2 fill:#364548,stroke-width:0px,color:#ddd;
  class A-1,B-1,C-1 S2
```
```:Marmaid記法
%%{init:{'themeVariables':{'fontFamily':'inherit','fontSize':'15px'}}}%%
graph RL
  subgraph T[" "]
    subgraph A[通常]
      A-1["#9;<br>```mermaid<br>(Mermaid記法の記述)　<br>```<br>#9;"]
    end
    subgraph B[VSCode]
      B-1["#9;<br>:::mermaid<br>(Mermaid記法の記述)　<br>:::<br>#9;"]
    end
    subgraph C[HTML]
      C-1["#9;<br><div class=mermaid><br>(Mermaid記法の記述)　<br></div><br>#9;"]
    end
  end

  style T fill:none,stroke:#000;

  classDef S1 fill:none,stroke-width:0px;
  class A,B,C S1

  classDef S2 fill:#364548,stroke-width:0px,color:#ddd;
  class A-1,B-1,C-1 S2
```
通常であれば表形式で`<br>`タグを使うか、テキストがコピーできない前提で横に並べた画像を作成して貼り付ける、縦に長くなること前提にコードブロックで書く...となりますが、Marmaid記法であれば比較的見やすい形で書くことが出来ます。

| 通常 | VSCode | HTML |
| --- | --- | --- |
| \```mermaid<br>(Mermaid記法の記述)<br>``` | :::mermaid<br>(Mermaid記法の記述)<br>::: | \<div class="mermaid"><br>(Mermaid記法の記述)<br>\</div> |

```:表形式でもbrタグを使えば並べることができる
| 通常 | VSCode | HTML |
| --- | --- | --- |
| \```mermaid<br>(Mermaid記法の記述)<br>``` | :::mermaid<br>(Mermaid記法の記述)<br>::: | \<div class="mermaid"><br>(Mermaid記法の記述)<br>\</div> |
```

本来コードブロックで表現すべきですが、縦に長くなってしまうので横並びに表現したい、といった場合に便利です。

## ・Qiitaでテキストと図を横に並べる

少し複雑になりますが、上記と同様にMermaid記法と実現するダイアグラムを横並びに表現したい場合のサンプルを下記に載せておきます。

:::note warn
[Qiitaの2023-07-26のアップデート](https://qiita.com/release-notes/2023-07-26)により表現方法に変更が入ったため、以前のようなスペースを入れた微調整するレイアウトが行えなくなりました。
:::

```mermaid
graph LR

  subgraph M[Mermaid記法]
    M1[" ```mermaid<br><br>graph LR<br>A-1---A-2<br>```"]
    %%M1の色と枠線を消す
    style M1 fill:#364548,stroke-width:0px,color:#ddd;
  end

  subgraph D[ダイアグラム]
    DS1[" "]
    D1[A-1]---D2[A-2]
    DS2[" "]
    %%DS1,2の余白用ノードの色と枠線、高さを消す
    classDef DS fill:none,stroke-width:0px,height:0;
    class DS1,DS2 DS
  end

  %%MとDを横並びにするために線で繋ぐ
  M1 --- D1
  %%繋いだ線を非表示にする
  linkStyle 1 stroke-width:0px;

  %%subgraph用スタイル
  classDef SS fill:none,stroke:#aaa;
  class M,D SS
```

```:Mermaid記法
graph LR

  subgraph M[Mermaid記法]
    M1[" ```mermaid<br><br>graph LR<br>A-1---A-2<br>```"]
    %%M1の色と枠線を消す
    style M1 fill:#364548,stroke-width:0px,color:#ddd;
  end

  subgraph D[ダイアグラム]
    DS1[" "]
    D1[A-1]---D2[A-2]
    DS2[" "]
    %%DS1,2の余白用ノードの色と枠線、高さを消す
    classDef DS fill:none,stroke-width:0px,height:0;
    class DS1,DS2 DS
  end

  %%MとDを横並びにするために線で繋ぐ
  M1 --- D1
  %%繋いだ線を非表示にする
  linkStyle 1 stroke-width:0px;

  %%subgraph用スタイル
  classDef SS fill:none,stroke:#aaa;
  class M,D SS
```

# おわりに
Mermaidでどのような事ができるのかを初心者向けにザックリ解説してきましたが
- GithubやQiitaなどのWebサービスで表現できる幅が広がる
- VSCodeやIntelliJなどのツールで構成図やフローチャート、シーケンス図を作成できてコード管理ができる
- mermaid.jsが簡単にWebシステムやWebサイトに組み込めてダイアグラムの図が生成できる
- mermaid-cliを使ってAWSなどの構造を動的にダイアグラムの図に生成できる

など、活用できる場所は多岐に渡るので、少しでも興味を持てたり、使ってみようと思っていただけると幸いです。


[^1]:https://zenn.dev/zenn/articles/markdown-guide#%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0
[^2]:https://www.notion.so/Notion-Diagrams-6d8bd0a3a0e442e2bd092fa77e8199aa#3c28c8e9f6f04d8fb88ddb2adc9519fc
[^3]:https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/
[^4]:https://qiita.com/release-notes#2022-04-12
[^5]:https://docs.esa.io/posts/308
[^6]:https://qiita.com/ohakutsu/items/5d3326781e2afe8c062c
[^7]:https://plantuml.com/ja/stdlib#a464d2f6236a5c23
[^8]:https://github.com/mermaid-js/mermaid/issues/1435