Notion上で簡単に図を書く方法【mermaid】

はじめに

Notionを使っていると、「簡単な図を使って説明したいけど、パワポで作るほどじゃないんだよな～。」ってことがたびたび起きるかと思います。

そんな時はコードブロックでmermaid記法を使うことで解決できるかもしれません。

mermaid記法の使い方

使い方の流れ

• 「```」でコードブロックを呼び出す
• 左上のプルダウンから、言語を”mermaid”に選択
  
• コードを打ち込む
• コードに応じた図が表示される

サンプルコード

graph LR
  Mermaid -- hoge --> Diagram

上記のサンプルコードを打ち込むと、以下のような簡単な状態遷移図が表示されたと思います。また、左上のプルダウンから表示方法を変更すると、図のみの表示なども行えます。

基本的な記法

基本的には状態遷移の式を一つずつ連ねていくような構文になっています。

graph LR

「LR」としている部分を「TD」にすると縦長の図になったり、「graph」としている部分を変更すると状態遷移図以外のグラフがかけたりします。

B -- arrow --> C

矢印の補足説明なども行えます。

hoge{D} --> B
hoge --> C

ノードに対して変数のように名前を与えることもできます。
このコードだと、Dという表示をしているノードに対してhogeという命名をすることで、
次の行でもhogeという名前で呼び出すことが可能になっています。

また、囲む記号を()や[]にすることでノードの形を変更することも可能です。

mermaidチートシート

ダイアグラム

• graph or flowchart：フローチャート
  • TB or TD：上から下
  • BT：下から上
  • LR：左から右
  • RL：右から左
• sequenceDiagram：シーケンス図
• classDiagram ：クラス図
• gantt ：ガントチャート
• stateDiagram ：状態図
• pie ：パイチャート

ノードの形

• A[ ]：長方形
• A{ }：ひし形
• A( )：角丸長方形
• A([ ])：楕円
• A(( ))：円

矢印の種類

• --> 矢印
• ==> 太矢印
• -.-> 点線矢印
• <--> 両矢印
• --o 丸矢印
• --x バツ矢印

使い方の提案

• データ構造の図示
• 組織図の図示

まとめ

今回説明した文法で基本的な図は書けて、自動でそこそこキレイな図を出してくれるので、課内や部内で使う分には問題がないかと思われます。
ここのチートシートで書いた以外にもいろんな文法があるので、mermaidについて勉強するとより整った図が描けるようになるかと思います。

参考サイト