RAWGraphs（ロウグラフス）は、表形式のデータを貼り付けるだけでサンキー図やアルビアル図、ビースウォームのようなExcelでは作りにくいグラフをSVGで書き出せる、無料のオープンソースWebツールです。インストールもアカウント登録も要らず、app.rawgraphs.ioをブラウザで開けばすぐに使えます。
この記事では、2026年9月時点の公式アプリ（rawgraphs-app v2.0.1）のソースコードで確認した仕様をもとに、使い方の手順、読み込めるデータ形式、対応チャート32種類、書き出し形式を整理します。日本語データで引っかかりやすい点と、ローカル起動・コードからの描画方法も扱います。
まとめ：RAWGraphsの用途と制約
- 用途：表データからデザイン編集向けの静的グラフ（SVG・PNG・JPG）を作るツールです。ダッシュボードやインタラクティブなグラフは作れません。
- チャート数：公式アプリに登録されているのは32種類です。サンキー図・アルビアル図・ツリーマップ・サンバースト・バイオリンプロットなどを含みます。
- 入力：貼り付け、ファイルアップロード（CSV・TSV・DSV・JSON）、URL、SPARQL、サンプルデータ、保存済みプロジェクトの6経路です。Excelの.xlsxファイルは直接読めないので、セル範囲をコピーして貼り付けます。
- 出力：SVG・PNG・JPGと、作業を再開するための.rawgraphsプロジェクトの4形式です。加工後のデータをCSVで書き出す機能はありません。
- データの扱い：データはブラウザ内だけで処理され、サーバーには送信・保存されません。
- 日本語：操作画面は英語のみです。日本語の列名や値はそのまま使えますが、書き出したSVGのフォント指定はArialなので、資料に載せる前にフォントを差し替えます。
- ライセンス：Apache License 2.0です。GitHubからクローンしてローカルや社内サーバーで動かせます。
RAWGraphsの概要と開発元
RAWGraphsは、ミラノ工科大学のDensityDesign Research Labが主導し、Calibro、INMAGIK（2019年に参加）と共同で開発・保守しているツールです。公式サイトのAboutによると一般公開は2013年で、GitHub上の最新リリースは2024年1月26日のv2.0.1です。描画にはJavaScriptの可視化ライブラリD3.jsを使っています。
公式READMEは、RAWGraphsの役割を「スプレッドシート（Excel、LibreOffice Calc、Googleスプレッドシートなど）とベクターグラフィック編集ソフト（Adobe Illustrator、Inkscapeなど）をつなぐもの」と説明しています。主な利用者として想定しているのはデザイナーです。分析そのものより、分析済みのデータを印刷物や記事用の図版に仕上げる工程で使うと力を発揮します。
RAWGraphs 2.0と1.xの違い
現在app.rawgraphs.ioで動いているのはバージョン2系です。2.0は2021年2月23日にベータ版（v2.0.0-beta.6）として一般公開され、構成が刷新され、UIはReactベースになりました。コアライブラリはReactに依存しないJavaScriptライブラリです。データ型の指定、区切り文字・小数点・桁区切りの設定、日付ロケール、集計方法の選択、プロジェクト保存は2.0で加わった機能です。チャートの描画部分は@rawgraphs/rawgraphs-core（ワークフローと描画の共通部分）と@rawgraphs/rawgraphs-charts（各チャートの実装）というnpmパッケージに分かれ、アプリの外からも同じチャートを描けるようになっています。1.x系（GitHub上のリリースv1.3.0は2018年6月）はAngularJS 1.6ベースの旧アプリです。
RAWGraphsの使い方：データ読み込みから書き出しまでの5ステップ
公式アプリは1ページの縦長画面で、上から順に操作すると1枚のグラフができあがります。
ステップ1：表データの読み込みと列型の確認
「Paste your data」「Upload your data」などのタブから入力経路を選びます。Excelやスプレッドシートの場合は、見出し行を含むセル範囲をコピーして貼り付けるのが最短です。読み込むと表のプレビューが出て、各列の型（数値・日付・文字列）が自動判定されます。判定が違う列は、列見出しのアイコンから型を変更できます。
ステップ2：表現したい関係に応じたチャート選択
32種類のチャートがサムネイル付きで並びます。各チャートには必要なデータの形が決まっているので、先に「何を見せたいか」でチャートを選び、足りない列があればデータ側を整えます。
ステップ3：列と視覚要素のマッピング
左に列の一覧、右にチャートが要求する項目（「Source node」「Size」など）が並ぶので、列をドラッグして割り当てます。数値の項目には集計方法を指定でき、選べるのはCount、Average、Median、Max、Min、Count unique、Sum、CSV、CSV (unique)の9種類です。必須項目がすべて埋まると、下にプレビューが表示されます。
ステップ4：グラフの寸法・配色・ラベル調整
プレビュー左側のオプションで、幅・高さ・余白・背景色・カラースケール・ラベルの表示などを変更します。変更はプレビューに即時反映されます。ラベルの個別配置や装飾を調整したい場合は、大枠を決めてSVGで書き出し、Adobe IllustratorやInkscapeで仕上げます。
ステップ5：画像とプロジェクトの書き出し
ファイル名を入れ、形式（svg・png・jpg・rawgraphs）を選んでダウンロードします。後で修正する可能性があるなら、画像と一緒に.rawgraphs形式でも保存しておきます。
RAWGraphsで読み込めるデータ形式と入力方法
公式アプリのデータ読み込み画面には、次の6つの入力経路があります。
| 入力経路（画面表記） | 読み込めるもの | 注意点 |
|---|---|---|
| Paste your data | TSV・CSV・DSV・JSON | Excelからのコピーはタブ区切りになる |
| Upload your data | TSV・CSV・DSV・JSON | 1ファイルのみ。xlsxは不可 |
| Try our data samples | 公式サンプル | 各チャートの練習用 |
| SPARQL query | SPARQLエンドポイントの結果 | Wikidataなどのオープンデータ向け |
| From URL | 公開URL上のデータ | 配信元がCORSを許可している必要あり |
| Open your project | .rawgraphsファイル | 保存した作業の再開用 |
Excelファイルを直接読み込めない理由と対処
アップロード処理はファイルをテキストとして読み込む実装なので、バイナリ形式の.xlsxをドロップしても正しい表になりません。Excelのデータは、セル範囲をコピーして「Paste your data」に貼り付けるか、ExcelでCSV（UTF-8）として保存してからアップロードします。CSV（UTF-8）以外のCSV形式で保存すると、日本語が文字化けすることがあります。
区切り文字・小数点・日付形式の設定
表形式のデータを読み込むと、パース設定が表示されます。区切り文字はカンマ（既定）・セミコロン・タブ・パイプから選べ、桁区切りと小数点の記号も変更できます。日付列の書式を解釈するときのロケールは、D3.jsのd3-time-formatが提供する30ロケールから選べ、日本語（ja-JP）も含まれます。ロケールが効くのは月名・曜日名などの表記部分です。
RAWGraphsの対応チャート32種類の一覧
公式アプリのソースコード（src/charts.js）に登録されているチャートは次の32種類です。分類はこの記事で付けたもので、アプリ上の表記とは異なります。
| 分類 | チャート |
|---|---|
| 比較・構成 | 棒グラフ、複数棒グラフ、積み上げ棒グラフ、円グラフ、バブルチャート |
| 時系列 | 折れ線グラフ、ストリームグラフ、バンプチャート、ホライズングラフ、ガントチャート、カレンダーヒートマップ |
| 流れ・関係 | サンキー図、アルビアル図、アークダイアグラム、コードダイアグラム、平行座標、スロープチャート |
| 階層 | ツリーマップ、サンバースト、サークルパッキング、デンドログラム、円形デンドログラム、ボロノイツリーマップ |
| 分布 | ビースウォーム、箱ひげ図、バイオリンプロット、ヘキサゴナルビニング、等高線プロット |
| その他 | マトリックスプロット、レーダーチャート、ボロノイ図、凸包 |
散布図に近い表現はバブルチャートで作れます。バブルチャートの読み方やD3.jsでの実装はバブルチャートとは？読み方とD3.jsでの作り方で解説しています。
サンキー図とアルビアル図に必要なデータの形
RAWGraphsで作られることが多いのが、流れの量を帯の太さで表すサンキー図です。サンキー図は「Source node（流入元）」「Target node（流入先）」が必須で、「Size（量）」は任意です。Sizeを割り当てない場合は行数が量になります。
たとえば、次の4行を貼り付けて流入元をSource node、ページをTarget node、訪問数をSize（集計はSum）に割り当てると、「料金」ノードは120＋60＝180の太さで描かれます。
流入元,ページ,訪問数
検索,料金,120
検索,事例,80
広告,料金,60
SNS,事例,40アルビアル図は「Steps」に複数の列を順番に割り当てる形式です。「流入元→ページ→成約有無」のように3列以上を並べると、3段階以上の流れを1枚に描けます。サンキー図が1行につき「流入元と流入先」の1組しか持てないのに対し、アルビアル図は1行の中の複数の列をつないで描く点が違います。
RAWGraphsの書き出し形式とプロジェクト保存
| 形式 | 中身 | 向いている用途 |
|---|---|---|
| .svg | ベクター画像 | Illustrator・Figma・Inkscapeでの仕上げ、Web掲載 |
| .png | ラスター画像 | スライド・チャットへの貼り付け |
| .jpg | ラスター画像 | 容量を抑えたい共有 |
| .rawgraphs | データ・マッピング・オプション | 後日の再編集 |
作業内容はサーバーに保存されないため、後日作業を再開するには.rawgraphs形式での保存が必要です。修正の可能性があるグラフは、画像と一緒に必ず保存してください。.rawgraphsファイルには元データが含まれるので、機密データを扱った場合はファイルの共有先に注意が必要です。
集計や並べ替えを施したあとのデータを表として書き出す機能はありません。集計済みの数値も資料に載せたいときは、Excel側で同じ集計をしておきます。
RAWGraphsを日本語データで使うときの注意点
操作画面は英語のみで、日本語への言語切替はありません（アプリのソースコードでも多言語化は未実装のTODOとして残っています）。一方、データ中の日本語はそのまま扱えます。列名・カテゴリ名が日本語でもマッピングや集計に支障はなく、前述のサンキー図の例も日本語の列名で描画できます。
注意したいのはフォントです。書き出したSVGのラベルにはfont-family: Arial, sans-serifが指定されています。Arialには日本語の字形がないため、表示は閲覧環境の代替フォントに任され、パソコンによって見た目が変わります。Illustratorなどで開くと、フォントの置換を求められることもあります。資料や記事に載せる前に、ラベルのフォントを游ゴシックやNoto Sans JPなどに差し替えてください。
日付列が文字列として判定される場合は、元データを「2026-09-16」のようなISO形式に揃えてから読み込むのが確実です。
RAWGraphsのデータの扱いとプライバシー
公式READMEと公式Learningのデータ読み込み解説には「RAWGraphsに入力されたデータはWebブラウザだけで処理され、サーバー側での処理や保存は一切行われない」と明記されています。標準のデータ処理はブラウザ内で行われます。ただし、追加したカスタムチャートは第三者のJavaScriptを実行するため、機密データを扱う場合はそのコードも確認してください。
ただし、公開ソースにはGoogleアナリティクスのタグとイベント送信処理が含まれています。コードの存在だけでは、現在の公式アプリでイベントが収集・保存されているかまでは判断できません。ソースコード上で送信されるのは、描画したチャートの種類（chart-render）と、書き出したチャートの種類・形式（chart-export）です。データの中身は含まれませんが、社内規程で外部サービスへのアクセス自体が制限されている場合は、ローカル起動に加え、Googleアナリティクスの外部スクリプト読み込みを除去し、URL・SPARQL・外部カスタムチャートなどの通信経路も確認します。
RAWGraphsのローカル起動とコードからの描画
公式アプリをローカルで起動する手順
公式READMEの手順では、GitとNode.js、Yarn（動作確認済みは1.22）を用意して次のコマンドを実行します。READMEに記載された動作確認済みのNode.jsは23.6.1です。
git clone https://github.com/rawgraphs/rawgraphs-app.git
cd rawgraphs-app
yarn install
export NODE_OPTIONS=--openssl-legacy-provider
yarn startビルドツールが古いOpenSSLの方式に依存しているため、NODE_OPTIONSの指定が必要です。社内サーバーに置く場合はyarn buildで静的ファイルを生成し、Webサーバーで配信します。
rawgraphs-coreとNode.jsによるSVG生成
同じチャートを大量に作る場合や、定期レポートに組み込む場合は、npmパッケージを使ってコードから描画できます。ただし、公式に完全サポートされるのはブラウザ環境です。以下のNode.jsとjsdomによるサンキー図の検証結果は、他のチャートの動作まで保証するものではありません。次のコードは前述のサンキー図をSVGファイルに書き出す例です。Node.js 26.5.0、rawgraphs-core 1.0.0-beta.17、rawgraphs-charts 1.0.1、jsdom 30.0.1で動作を確認しました。
npm install @rawgraphs/[email protected] @rawgraphs/[email protected] [email protected]// render-sankey.js
const fs = require('fs')
const { JSDOM } = require('jsdom')
const { chart, parseDataset } = require('@rawgraphs/rawgraphs-core')
const { sankeydiagram } = require('@rawgraphs/rawgraphs-charts')
const rows = [
{ 流入元: '検索', ページ: '料金', 訪問数: 120 },
{ 流入元: '検索', ページ: '事例', 訪問数: 80 },
{ 流入元: '広告', ページ: '料金', 訪問数: 60 },
{ 流入元: 'SNS', ページ: '事例', 訪問数: 40 },
]
const { dataset, dataTypes } = parseDataset(rows)
const viz = chart(sankeydiagram, {
data: dataset,
dataTypes,
mapping: {
source: { value: ['流入元'] },
target: { value: ['ページ'] },
size: { value: ['訪問数'], config: { aggregation: ['sum'] } },
},
visualOptions: { width: 600, height: 300 },
})
const { document } = new JSDOM('').window
const svg = viz.renderToString(document)
fs.writeFileSync('sankey.svg', svg)
console.log(dataTypes)
console.log(svg.match(/<title>[^<]+<\/title>/g).join('\n'))node render-sankey.jsを実行すると、sankey.svgが作られ、次の内容が出力されます。各ノードとリンクの値が集計どおりになっていることを確認できます。
{ '流入元': 'string', 'ページ': 'string', '訪問数': 'number' }
<title>検索: 200</title>
<title>料金: 180</title>
<title>事例: 120</title>
<title>広告: 60</title>
<title>SNS: 40</title>
<title>検索 → 料金: 120</title>
<title>検索 → 事例: 80</title>
<title>広告 → 料金: 60</title>
<title>SNS → 事例: 40</title>rawgraphs-coreのnpm上の最新版は2022年公開のベータ版で、更新は止まっています。業務システムに長期間組み込む用途では、この点を踏まえて採用を判断してください。
カスタムチャートの読み込み
公式アプリには、32種類以外のチャートを追加する機能があります。自作する場合は公式のcustom-rawcharts-templateを使い、チャートの定義（dimensions・mapping・visualOptions・render）を書いてnpm run buildを実行すると、読み込み用のlib/index.umd.jsが生成されます。このファイルはファイル・URL・npmパッケージのいずれからでも読み込めますが、読み込み時には「第三者のJavaScriptを実行しようとしている」という警告が表示されます。出所の分からないチャートは読み込まないでください。
RAWGraphsを選ぶべき場面と別ツールを選ぶべき場面
RAWGraphsが向いているのは、一度きりの図版を、Excelにないチャートで、デザインソフトで仕上げる前提で作る場面です。報告書のサンキー図、記事用の階層図、学会発表のバイオリンプロットなどが該当します。
次の条件に当てはまる場合は、RAWGraphsを使わない方が作業が早く終わります。
- 毎週・毎月更新するグラフ：.rawgraphsプロジェクトを開けば同じ列構成の新しいデータに差し替えられますが、更新のたびに手作業で読み込み・書き出しが必要です。Looker StudioやTableauのようにデータソースと接続したままのBIツールを使います。
- ホバーや絞り込みなど、読者が操作するグラフ：RAWGraphsの出力は静的な画像です。PythonならPlotly（Plotlyとは？Pythonでインタラクティブなグラフを作る基本と使い方）、WebならD3.jsで実装します。
- 棒グラフや折れ線グラフだけで足りる場合：ExcelやGoogleスプレッドシートのグラフ機能で十分です。わざわざデータを移す手間に見合いません。
- 大きなデータ：処理はすべてブラウザ上で行われるため、行数が多いとプレビューの更新が遅くなります。先に集計して行数を減らしてから読み込みます。
よくある質問
RAWGraphsは無料で使えますか？
はい、無料です。公式アプリはアカウント登録なしで使え、ソースコードはApache License 2.0で公開されています。
RAWGraphsは日本語に対応していますか？
操作画面は英語のみです。データ中の日本語はそのまま使えますが、書き出したSVGのフォント指定はArialなので、日本語ラベルのフォントは書き出し後に差し替えてください。
RAWGraphsでExcelファイルを読み込めますか？
.xlsxファイルを直接アップロードすることはできません。Excelのセル範囲をコピーして貼り付けるか、CSV（UTF-8）で保存してからアップロードします。
RAWGraphsでサンキー図を作るにはどうすればよいですか？
流入元・流入先・量の3列を持つ表を読み込み、チャート一覧から「Sankey diagram」を選んで、流入元をSource node、流入先をTarget node、量をSizeに割り当てます。
RAWGraphsのソースコードはどこで入手できますか？
GitHubのrawgraphs/rawgraphs-appリポジトリで公開されています。チャートの実装はrawgraphs/rawgraphs-charts、描画の共通部分はrawgraphs/rawgraphs-coreにあります。
