はんなりと、ゆるやかに

アジャイル、スクラムが好きなITエンジニアが日々から学んだことをアウトプット

notion と GitHub と VS Code で Mermaid の使い勝手を確認してみた


2021年12月にNotion で Mermaid が使えるようになったことが発表されて盛り上がっていました。
dev.classmethod.jp

また、2022年2月にはGitHub で Mermaid が使えるようになったことが発表されて盛り上がっていました。
www.publickey1.jp

さらに、VS Code(Visual Studio Code)も2017年8月頃から使えるようになっていたようです。
marketplace.visualstudio.com

この3つでどのツールが使いやすいのか確認してみました。

Mermaidとは作図ツール

JavascriptベースのMarkdown構文で書ける作図ツールです。
mermaid-js.github.io

各ツールでMermaidを使う方法

notion

こちらを参照
iucstscui.hatenablog.com

GitHub

issue にMermaid構文で記述し、プレビュータブを開けば図が確認できます。

VS Code

拡張機能Markdown Preview Mermaid Support」をインストールし、MarkdownファイルにMermaid構文で記述し、プレビュー表示すれば図が確認できます。(プレビュー表示はWindowsなら 「Ctrl+K」 のあとに 「V」 )

3つのツールを確認

Mermaid公式ページのサンプルをお借りして確認しました。

先に結論

表現できる図
図に崩れがなかったのは notionでした。GitHubはER図、VS Codeガントチャート、パイチャートで見にくくなったり、表記が足りなかったりしました。
図の見やすさ
図の色合いはGitHubが見やすかったです。notion と VS Codeは単色でシンプルですが、比較するとGitHubの方が好みでした。今回は確認してませんが、VS CodeCSSの拡張が出来るようなので活用すれば見やすくなりそうです。
書きやすさ
notion と VS Codeはどちらもリアルタイムにプレビューが更新されるため、書きやすかったです。さらにVS Codeはオフラインでも使えるのがさらに良いところかも知れません。ネットワークが弱い、繋がらない場所でも使えます。GitHubはリアルタイムにプレビューは見れず、プレビュータブを押す必要があり面倒に感じました。

シーケンス図

notion


ER図

notion


GitHub

表示が崩れましたね。

ガントチャート

notion


VS Code

重なって見にくいですね。プレビューエリアを広げれば良くはなるのですが、なぜかガントチャートはエリアを広げてから更新ボタンを押さないと見た目が反映されません(VS Codeの他の図はリアルタイムに反映されます。)ガントチャートは苦手なのかもしれませんね。

パイチャート

notion


VS Code

項目名が出ませんね。

その他

クラス図、状態遷移図、ユーザージャーニー、要求図はそれぞれのツールで問題なく表示されていました。