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

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

0  はじめに

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

mermaidは、シーケンス図、ガントチャート、フローチャートなどを、Markdown形式のテキストで書くことができるライブラリ。@RoamResearch にも「mermaid」機能が新登場🎊。

使い方はとても簡単。{{mermaid}}と書いて、下にチャートの形式を指定し、必要なステップを書くと図を作ってくれる。#Roam部 https://t.co/eG6582M1as

— Sangmin @ChoimiraiSchool (@gijigae) July 10, 2020

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

1  mermaid とは？

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

mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.

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

Mermaid live editor

2  Roamでの使い方

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

▼ シーケンス図

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

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

▼ フローチャート

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

フローチャートはこんな感じ↓。

{{mermaid}} の下に、「graph TD」と書くことでフローチャートが指定できる。他にどんなチャートが描けるかはこちらのページ（👉https://t.co/Z7N58ByJH9）を参考にしてください。言葉を使って作業の流れを整理する時も大変便利です。#Roam部 pic.twitter.com/WsResLlxa0

— Sangmin @ChoimiraiSchool (@gijigae) July 10, 2020

▼ Journey

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

3  まとめ

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

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

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