最新情報から便利な使い方まで。Notion 情報に特化した Web メディア。

Notionでグラフを作る方法3選 | 埋め込み可能な外部ツールやMermaid記法も紹介


2024年5月〜 Schoo さんでの Notion 講座が始まります → 詳しくはこちら



仕事で Notion を活用する場合、ダッシュボード作成やデータ分析など、データベースをグラフで可視化したいことってありますよね。Notion のデータベース には便利な機能がたくさん備わっていますが、グラフを作る機能は備わっていません。

しかし、標準機能ではグラフ化はできないものの、一工夫加えることで、Notion 上のデータをグラフ化することが可能です。作成したグラフは Notion 上でも表示が可能。今回の記事では、Notion 上のデータをグラフ化する方法を作る方法を3つ紹介していきたいと思います。

この記事でわかること

  • ChatBase(外部サービス)を使った方法
  • Mermaid 記法を使った方法
  • (おまけ)Notion の数式機能を使った方法

1. ChartBase でグラフ作成

まずは、Notion のデータベースからグラフを作成できる ChartBase というサービスを使った方法を解説します。

熊倉のアイコン

Notion 公式アンバサダー / いとなみ代表

熊倉

ChatBase は Notion のデータベースと連携し、グラフをサクッと作成できるツールです。グラフはリンク埋め込みで Notion ページに表示でき、Notion 上のデータを更新しても同期され続けます。用意された型に合わせてデータベースを作る必要はありますが、Grid.is や Rows など数あるツールの中でも学習コストが少ないツールなのでオススメです。

📝

ChartBase は、以前は notion2charts という名称でした。

STEP 1. ChartBase に Google アカウントでログイン

ChartBase にアクセスし「Get Started Free」ボタンをクリックしてください。Google アカウントでログインが可能です。(※ Notion で使用している Google アカウントと一致している必要はありません)

ChartBase は Google アカウントでログイン可能
ChartBase は Google アカウントでログイン可能

STEP 2. Notion ワークスペースと接続

「Connect to Notion」をクリックし、接続したいワークスペースを選択してください。選択が完了したら「ページを選択する」をクリックします。

Notion との接続画面
Notion との接続画面
接続したいワークスペースを選択する
接続したいワークスペースを選択する

STEP 3. グラフ化したいデータベースを選択

グラフの参照元としたいデータベースを選択し「アクセスを許可する」をクリックします。

グラフの参照元としたいページを選択
グラフの参照元としたいページを選択

STEP 4. グラフを作成する

「Create New Chart」をクリックします。

Create New Chart をクリック
Create New Chart をクリック

STEP 5. グラフの種類やデザインを設定

グラフの種類を決定します。

可視化したいデータに合わせてグラフの種類を選択
可視化したいデータに合わせてグラフの種類を選択

グラフの参照元としたいデータベースにチェックを入れます。

グラフの参照元としたいデータベースを選択
グラフの参照元としたいデータベースを選択

X軸とY軸の項目を選択し、右下の「Create Chart」をクリックします。

💡

サンプルではX軸に日付、Y軸に達成率を選択しています。

X軸とY軸にしたい項目を選択
X軸とY軸にしたい項目を選択

STEP 6. 完成したグラフの URL をコピーして Notion に埋め込む

右上の「Get Embed Link」をクリックして URL を取得します。

「Get Embed Link」から URL を取得
「Get Embed Link」から URL を取得

グラフを追加したい Notion ページに先ほど取得した URL を埋め込みます。

Notion ページにグラフを埋め込んだようす
Notion ページにグラフを埋め込んだようす

棒グラフ、折れ線グラフ、円グラフなど基本的なグラフ以外にも、ラインマーカーやエリアチャートなどの少し凝ったグラフも簡単に作ることができます。グラフの種類は可視化したいデータの目的に応じて選択してみてください。

💡

ChartBase は色変更などの基本的な機能であれば無料で利用可能です。ただし、無料プランではグラフを1つまでしか作成することができません。複数のグラフを作成したい場合は、月額4ドル、もしくは年間払いで36ドルの有料プランが必要となります。(※ 2024年5月記事執筆時点)

ChartBase を有料プランにした場合に可能な機能一覧
ChartBase を有料プランにした場合に可能な機能一覧
📎

ChartBase 公式ホームページはこちら

2. Mermaid 記法でコードからグラフ生成

Mermaid(マーメイド)は、コードを書くことでグラフやチャートなどを生成できる記法です。Notion 独自の記法というわけではなく、一般的な記法が Notion 上でも扱えるというイメージで、Notion 上でも Mermaid 記法を使うことでグラフを描くことが可能です。

Notion ではスラッシュコマンドから Mermaid 記法のブロックを挿入できます。このコードを編集することで、棒グラフや折れ線グラフ、ガントチャートなども作ることが可能です。

下記は Mermaid 記法で書かれたプロジェクトスケジュールを可視化するコードです。このようにコードを書くことで、

gantt
    title プロジェクトスケジュール
    dateFormat  YYYY-MM-DD
    section 企画フェーズ
    コンセプト作成    :a1, 2023-04-01, 10d
    機能要件定義      :after a1, 15d
    section 開発フェーズ
    機能設計         :a2, 2023-04-12, 10d
    機能実装         :a3, after a2, 40d
    品質検証         :after a3, 20d

以下のようなプロジェクトスケジュールが出力されます。

gantt
    title プロジェクトスケジュール
    dateFormat  YYYY-MM-DD
    section 企画フェーズ
    コンセプト作成    :a1, 2023-04-01, 10d
    機能要件定義      :after a1, 15d
    section 開発フェーズ
    機能設計         :a2, 2023-04-12, 10d
    機能実装         :a3, after a2, 40d
    品質検証         :after a3, 20d

Mermaid 公式ページのサンプルコードをコピーして内容を微調整するだけで棒グラフや折れ線グラフも簡単に作成できます。(ただし Notion のデータベースとは連携していないため、コードを編集していく必要がある点には注意が必要です)

Tsuburayaのアイコン

Notion 公式アンバサダー / 株式会社 TEMP 代表

Tsuburaya

今後、Notion AI との連携が強化されていくことで、Notion のデータベースの情報を Mermaid 形式で出力してくれるようになっていくと思います(2024/05/19 時点)

📎

Mermaid 記法について詳しく学びたい方は、公式ページの「Docs」も参考にしてみてください。

3. 数式機能でグラフ作成

これはだいぶマニアックな話ですが、Notion の数式機能を使うことでもグラフを作ることが可能です。2023年9月にリリースされた数式2.0からグラフの描画のような関数も組むことができるようになりました。

数式2.0とリレーション機能を組み合わせることで、以下のようなオリジナルの棒グラフを描画することが可能です。

Notion の数式機能を使ったグラフ描画のサンプル
Notion の数式機能を使ったグラフ描画のサンプル
Tsuburayaのアイコン

Notion 公式アンバサダー / 株式会社 TEMP 代表

Tsuburaya

上記のサンプルテンプレートは LINE 公式アカウントでも配布しています。友達追加後、「グラフ14」とメッセージをお送りください。

まとめ

今回は Notion のデータをグラフ化する方法を3つ紹介してみました。特に1つ目に紹介した ChartBase はとても便利なツールなので、データを可視化したい時にぜひ使ってみてください。

💡

今回紹介した Notion のデータをグラフ化する方法については YouTube 動画でも解説しています。興味ある方はこちらも合わせてご覧ください。

💡

初学者からでも安心して Notion を学べるオンラインコミュニティ「Notion 大学」運営中。Notion コミュニティとしては国内最大規模で、会員数は現在200名以上。

  • 分からないことは24時間チャットツールでいつでも質問できる
  • コミュニティ内の限定勉強会でタスク管理や知識管理術が学べる
  • 1から学べる Notion 学習ロードマップで初心者からでも学習可能
  • Notion 大学限定の学習動画が100本以上
  • 定期的に開催している有料セミナーへの無料参加券
  • 過去の有料記事・有料テンプレートが全て閲覧可能

コンテンツや特典盛りだくさんです。参加方法は下記の記事をご覧ください。

この記事の執筆者

umeのアイコン画像

ume

IT 企業勤務 OL。本業への Notion 導入による生産性向上で MVP を受賞歴あり。強みの Notion を活かし、ライターとしての活動も行う。

Twitter

この記事の監修者

Tsuburayaのアイコン画像

Tsuburaya

Notion 公式アンバサダー(2021年〜 / 日本で7人目)。アンバサダーとして YouTube や Twitter で発信活動をおこなっている。本業は Web エンジニア。個人で Notion API を使ったアプリケーションを開発中。代表作は Fast Notion。株式会社 TEMP 代表取締役。

Twitter / YouTube