draw.io で数式を入力する方法

投稿者: | 2017年7月25日

概要

  • Web上で使えるドローソフト draw.io の紹介
  • クリックとドラッグで直感的に矢印が引ける
  • 数式入力 (tex記法) もできて便利

draw.io とは

draw.io は Web 上で動作するサービスで、図の作成ができるソフトです。

 

仕事上で図を作成する時は、プレゼン等のために作ることが多く、

PowerPoint 等のプレゼンソフトで、スライド作成と同時にまとめて作りがちです。

 

そのため、”図の作成専用のソフト”はなくてもいいような気がしてしまうのですが、

draw.io は PowerPoint にはない便利さがあるので、自分は気に入って使ってます。

矢印を引くのが楽

個人的に draw.io で一番気に入っているのは、

直感的な操作で矢印を引けるところです。

 

PowerPoint で矢印を引きたい場合、

下の図のように、図形の挿入から矢印を選択しなければいけません。

矢印を一本引くだけなら、気になりませんが、少し複雑な手順を説明する時に、

何本も矢印を引くとなると、その度にクリックが必要になり、とても不便です。

 

draw.io の場合、矢印を引き始めたい箇所をクリックして、

矢印をつなげたいところまでドラッグして離すだけで矢印が引けます。

つまり、矢印ボタンをクリックする必要がないのです。

数式を入力する方法

 

draw.io で数式も入力できたら、確率変数のグラフィカルモデルを描くのにとても便利そうと思い、

数式の入力方法を調べたのですが、微妙に分かりづらかったので、ここで整理しておきたいと思います。

 

1. 数式入力を有効にする

数式を入力するには、まず、数式入力を有効にする必要があります。

これはメニューから設定するのですが、日本語訳が微妙におかしいおかげで、

少々分かりづらくなっています。

 

数式入力を有効にするには、

メニュー→「余分の」→「数式組版」

をクリックしてチェックを入れます。

2. 数式を入力する

数式入力を有効にした後は、数式を入力すれば、MathJax でレンダリングしてくれます。

そのため、入力する数式は Tex 形式で入力します。

 

ただし、数式はバッククォート(`) で囲む必要があります。

シングルクォート(‘) ではなく、バッククォート(`)なので注意しましょう。

 

PowerPointに図を移す方法

図を作成してできた万歳で終わることは珍しいと思います。

作成した図は、PowerPoint や Word 等に挿入して使われるでしょう。

そこで、図を挿入する方法についても簡単に説明しておきます。

 

1. 作成した図を画像ファイルとして保存する

まず、Web上で編集している図を、ローカルのファイルとして保存する必要があります。

このとき、メニューのファイルから選べる「保存」、「名前をつけて保存」というのは、

画像ファイルではなく、Web上での編集状況を保存するということなので区別して下さい。

 

画像ファイルとして保存する場合には、メニューから

「ファイル」→「として外部へ排出する」→好みのファイル形式を指定

という手順で行います。

 

PNG や JPEG で保存すれば、そのまま PowerPoint に貼り付けることができますが、

ラスター画像となってしまうので荒い画像となってしまいます。

せっかく、ドローソフトで画像を作成しているので、

きれいなベクター画像として挿入したいですよね。

 

なので、ファイル形式としては PDF を指定することをオススメします。

同じベクターのファイルであっても、SVG での保存は数式の入力に対応していないので、

数式を使いたい場合は避けましょう。

2. PDF を emf 形式に変換する

PDF ファイルはそのままでは PowerPoint に画像として挿入できないので、

PowerPoint で扱えるベクター形式 emf に変換しましょう。

 

変換にはオンラインでの変換サービス cloudconvert 等を使うと簡単に変換できて便利です。

 

cloudconvert の場合は、変換したいファイルをブラウザにドラッグ&ドロップして、

右下の「Start Conversion」をクリックすると変換が開始されます。

変換が完了したら、変換後の emfファイルをダウンロードできます。

3. emfファイルを PowerPoint に挿入する

後は変換後の emf ファイルをPowerPoint にそのまま貼り付ければOKです。

ただし、draw.io の用紙の大きさで画像が生成されているので、

下の図のように広い余白が現れる場合があります。

 

余白が気になる場合は、トリミングで余白を削るか、

グループ化の解除を何度か行い、余白の枠だけ削除しましょう。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です