はじめに

draw.ioは作図ツールです。
図と呼べるものであれば大抵のものが作成できますが、表のための様々な表現方法が用意されています。
お仕事で使い始めたのですが、表による表現は帳票等の設計に便利なため、これらを紹介します。

draw.io とは

Webサービスのドメインとしては diagrams.net という名称に置き換わったようですが、ブランドとしての名称として draw.io という名前が2023年9月現在も使われているようです。

ツールは、Linux、macOS、Windows向けのアプリケーションが公開されています。
クロスプラットフォーム(Electron)で開発されているためどの環境で使っても同じような操作感で利用することができます。

又、GitHub等の各種ウェブサービスにも統合されており、エコシステムの一翼を担っているともいえます。

新規作成

Windows デスクトップ版

新規ファイルを作成する をクリック

基本を選択(デフォルト状態)して 作成する をクリック

Web版

後で決める をクリック

保存

デスクトップ版では、拡張子.drawioのファイルとして保存します(中身はアスキーのXMLファイルです)。
Web版ではGoogle ドライブやOneDrive等のオンラインストレージに保存できる他、ダウンロードしてデスクトップ版同様のファイルとして保存することもできます。

表を作成

このような画面が表示されたら

ツールバー右端のグリッドのアイコンをクリック、格子が現れるので行数と列数を選択してクリックします。

表が作成されました。ドラッグして好きな場所に移動できます。

タイトル にチェックを入れた場合

Container にチェックを入れた場合

選択できる位置

表をカスタマイズするには、選択する位置が重要です。
マウスで上手く選択できない場合はTabキー(又はShift＋Tab)を押すか、表の外側からマウスをドラッグして選択したい範囲を囲んで離す、等の操作をしてみて下さい。
例えば行頭(左端)のセルを選択した状態でShift＋Tabキーを押すと、行が選択されます。

セルを選択する場合は、Ctrlキーを押しながら選択すると、2つ以上のセルを選択できます。
セルを選択した状態でShiftキーを押しながら選択すると、先にクリックを起点とする矩形範囲のセルを選択します。

フォーマット(書式)を変更するには、右側のスタイル/テキスト/配置のペインを主に操作します。
メニューバー表示 → フォーマット でこのペインを表示したり隠したりできます。

表全体を選択した状態

設定できるフォーマット: スタイル / テキスト / 配置
主な操作:
- タイトルのテキストの変更(タイトルがある場合のみ)
- 表全体(タイトルがない場合)又はタイトルのスタイルの変更
- 表全体のサイズ、位置の変更

行を選択した状態

設定できるフォーマット: スタイル / テキスト / 配置
主な操作:
- 行ヘッダーのテキストの変更(Containerの場合のみ)
- 行全体のスタイルの変更
- 行の高さの変更

セルを選択した状態

設定できるフォーマット: スタイル / テキスト / 配置

主な操作:
- セルのテキストの変更
- セルのスタイルの変更
- セルの幅又は高さの変更 (列又は行含む)

セル内の文字列を選択した状態

設定できるフォーマット: テキスト

主な操作:
- 選択されたテキストの変更

フォーマットの変更

フォーマットはセル＞行＞表の順でフォーマットが優先されます。

例えば スタイル → 塗りつぶし から表を緑色、行をオレンジ、セルを青に設定するとこのようになります。
行単位でスタイルを変更したことによりセルの枠線が消えてしまったので

4つのセルを選択して

スタイル → 線にチェックを入れ

プロパティ を展開し、Top Line、Bottom Line、Left Line、Right Line にチェックを入れます。

セル単位の線が現れました。

行/列の挿入/削除

表又は行又はセルを選択した状態でツールバーのグリッドのアイコンをクリックすると、行/列用のサブメニューが現れます。
上から順に、

左に列を挿入
右に列を挿入
列を削除
上の行を挿入
下に行を挿入
行を削除

です。
複数選択していても、削除されるのは1列/行ずつです。

表/行/列のサイズ変更

表の周辺のドットをドラッグすることで表全体のサイズが、行間の枠線をドラッグすることで行のサイズが、列間の枠線をドラッグすることで列のサイズが変更できますが、
配置を操作することでそれぞれのサイズを変更することもできます。

セルを選択し、サイズ 横幅を 60 から 90 に変更

縦幅を 40 から 60 に変更

該当セルの属する行と列のサイズがそれぞれ変わりました。

セルの結合

セルを選択して スタイル → プロパティ → ColSpan を変更すると、その個数分の列を結合

RowSpan を選択すると、その個数分の行を結合

注意

結合された列や行を含む列や行を選択して挿入や削除を行うと、表が崩れてしまう場合があります。

どこか適当なフォーマットを変更すると復旧するようです。

テキストのフォーマット

配置

位置

9つの各セルに設定した状態。
セルの外側に配置されるのに注意

間隔(パディング)

負値を設定すると外側にはみ出します。

ワードラップ

ワードラップ なしにしても、セル外にはみ出して表示されることはない。

表のスタイル(プロパティ)

Top Line、Bottom Line、Left Line、Right Line

Row Lines

Column Lines

おまけ

塗りつぶした状態でセルもしくは表を選択し スタイル → スケッチ にチェック
(塗りつぶしが鉛筆手書き調になる)

表を選択し プロパティ → Comic にチェック
(表の枠線が手書き調になる)

リファレンス等

公式のチュートリアルですが、英語です。動画コンテンツもあります。

Blogにも色々約に立ちそうな事が書いてありますが、読み切れません...

公式サンプルはかなりイケています。