テキストで様々なダイアグラムが作成できる「mermaid」をRoam Researchで実装する方法と実例

こんにちは、Choimirai School のサンミンです。

0  はじめに

Roam Research（以下、Roam）ではテキストだけでなく、写真や動画、音源、ダイアグラムを埋め込むこともできます。

今回の note では、JavaScriptのチャート作成ライブラリ、mermaid、をRoam上で実装する方法といくつかの実例を紹介します。

1  mermaid とは？

他にもチャート作成アプリは色々ありますが、mermaid、は2019年に「」JS Open Source Awards」を受賞した履歴を持つとても優秀なライブラリ。これ一本でフローチャート、シーケンス、ガントなどに全て対応していますので守備範囲も広いです。

ウェブには mermaid の Live Editor もありますので、手軽に機能を試してみることもできます。

2  Roamでの使い方

{{diagram}} と同じく、mermaid も ①{{mermaid}} で始めます。{{mermaid}} と書いたら、行を下げ、②ダイアグラムの種別を指定。その後、テキストで必要なダイアグラムを描いていきます。

▼ シーケンス図

上記の例ではシーケンス図を描いていて、その結果が下記の図です。

mermaid の書き方については、上述した Mermaid Live Editor を使えば必要なチャートをRoam上で再現できると思います。

▼ フローチャート

他にもフローチャートなども簡単にかけますので、ぜひ試してみてください。

▼ Journey

「journey」という形式のチャートもあります。

3  まとめ

普段コードを書かない人ですと取っ付きづらいかもしれないですが、こうして自分の考えを簡単に可視化するメリットは大きいです。

また、オンライン授業で学んだ内容をわかりやすくまとめる時も大変役立ちますので簡単なダイアグラムからぜひ始めてみてください。

使い方について何か質問があれば、#Roam部 のタグをつけてTwitterで教えてください。