エディタ毎のmermaid記法まとめ

はじめに

Mermaid記法とは？

テキストのみで手軽にきれいなダイアグラムを書くことができるツールです。

【Mermaidの紹介】Qiitaでダイアグラム・チャートが簡単に書けるようになりました！
に紹介されているように、Qiitaでも使えるようになったそうです。

この記事では

自分か使っているマークダウンエディタやメモアプリでのmermaidの使い方についてメモです。個人的によく使うツール、

• VSCode
• PyCharm
• Joplin
  について記載しています。

VSCode

プラグインで「Markdown Preview Mermaid Support」をインストールすれば使えます。

ガントチャートも表示されます。(そもそも背景色が黒くて見えづらいですが。)

参考：使ってみよう！VSCode+mermaid
ほかにもMarkdownをよく使う人は入れておいたほうがいいプラグインなど紹介されていました。

Pycharm

ダイアグラムのサポートを有効にする

1. Ctrl+Alt+S を押して IDE 設定を開き、言語 & フレームワーク | Markdown を選択します。
2. Markdown 拡張機能で Mermaid または PlantUML のいずれかを有効にします。
3. IntelliJ IDEA が関連する拡張機能をダウンロードしたら、OK をクリックして変更を適用します。

sequenceDiagramが表示されませんでした。mermaidのバージョン違いに起因するようです。

ガントチャートはこのように見えます。

参考：Markdown | IntelliJ IDEA
Mermaidに限らずPyCharmのマークダウンについての説明はこのページに網羅されてます。

Joplin

普段メモアプリとして使っているJoplinですが、こちらは特にプラグインのインストールなくMermaid記法が使えました。

スタイルのテーマを「暗い」にしていますが、図の背景が白くなってくれて見やすいです。

ガントチャートはこんな感じです。

個人的にマークダウンだけであればJoplinが一番使いやすいです。タグ付け、クラウド同期、GUIがほかのツールに比べて使いやすいです。Evernoteユーザーだったので、ノートやタグのつけ方が似ているのも好きな理由の一つです。

最後に

探り探りなので、他のツールに移行したら追記します。