draw.io ページ番号を自動で表示する

こんにちは。draw.ioで作成した資料を印刷して使用する場合、ページ番号が欲しいと思ったことはありませんか?一見するとメニューのどこにもページ番号の挿入機能が見当たらないので、自力で番号を振っていくしかないと思うかもしれません。しかし、調べると自動で番号を振ることができることがわかりました。今回はExcelやWordのように自動でページ番号を表示する方法を解説します。

完成イメージ

ページの下部に現在のページと、総ページ数を表示します。例えば総ページ=2, 現在のページ=1の場合、「1/2」と表示します。

ちなみにここでのページの定義ですが、画面下部で追加するページのことを指します。Excelでいうところのシートのようなイメージですね。

画面下部のページ切り替え、追加の部分

作成手順

ページ番号の管理

ページ番号を表示するにはplaceholder機能を使用します。あらかじめ用意した値(変数みたいなもの)を図形の中の文字列に差し込む機能と考えてもらえればよいです。ページ番号の値は変数としてdraw.ioがあらかじめ用意していますので、その変数の内容を表示するイメージです。ちなみにページ番号、総ページ数は以下の名前で値を持っています。

ページ番号pagenumber
総ページ数pagecount

この値をラベル等に表示するには%で括ります。例えば%pagenumber%といった感じです。

ページ番号をラベルに表示する

早速ページ番号をラベルに表示してみましょう。まずはラベルをキャンバスに配置します。(テキストを書き込めるオブジェクトであればなんでも構いません。)

追加したラベルを選択した状態で右のフォーマットパネルから[配置] > [データを編集]の順でクリックします。

所有者にチェックをつけて[適用]をクリックします。この操作を行わないとページ番号は正しく表示されませんのでご注意ください。

次にラベルに文字を入力します。入力する文字は[%pagenumber% / %pagecount]です。

入力を確定させるとページ番号と総ページ数が表示されます。

ページを追加したり、ページの順番を入れ替えたりすることで、値が自動で変わります。色々と試してみましょう。

まとめ

今回はページ番号を自動で振る方法を解説しました。印刷用の資料を作るときなど、予め作成しておくと作業が捗りますのでお勧めです。

参考

https://www.diagrams.net/doc/faq/predefined-placeholders

システム開発

Posted by kobainmac