インストール - draw.io

提供：MochiuWiki : SUSE, EC, PCB
ナビゲーションに移動 検索に移動

概要

draw.ioは、オープンソースの図表作成ソフトウェアであり、ビジネスや技術文書での図解作成に使用されている。
Webブラウザで直接利用できるオンラインバージョン、デスクトップにインストールして使用できるスタンドアロンバージョンが提供されている。

Microsoft Office製品との連携も可能であり、Visioの代替ツールとして人気がある。

インターフェースにおいて、左側のパネルには様々な図形やアイコンが用意されており、これらの要素をドラッグ&ドロップで配置して、必要に応じてサイズ変更や色の調整できる。
フローチャート、ネットワーク図、組織図、ERダイアグラム、UML等の多岐にわたる図表テンプレートが用意されている。

作成した図表は、PNG、JPEG、SVG、PDF等の様々な形式でエクスポートすることも可能である。
また、Google Drive、OneDrive、Github等のクラウドストレージと連携して作業することもできる。

セキュリティにおいて、ローカル環境で完結する作業が可能なため、機密性の高い図表作成にも適している。
また、複数人での共同編集機能もサポートしており、チームでの図表作成作業を効率化できる。

グリッド機能、自動配置機能等、効率的な作図をサポートする機能も充実しており、
例えば、[Ctrl] + [D]キーで要素の複製、[Alt] + [ドラッグ]で要素の整列といった操作が可能である。

システム設計の分野では、UMLダイアグラムやシーケンス図の作成に特に重宝されている。
また、AWS、Azure、GCP等のクラウドアーキテクチャ図の作成に必要なアイコンセットも標準で提供されている。


draw.ioのインストール

VSCode / VSCodiumの拡張機能

VSCodeまたはVSCodiumを起動して、以下に示す拡張機能をインストールする。

  • Draw.io Integration
  • Draw.io Integration: Mermaid plugin


draw.ioオンライン

draw.ioの公式Webサイトにアクセスする。
初回アクセス時には、ファイルの保存先としてGoogle Drive、OneDrive、ローカルデバイス等から選択するように促される。

Google Workspaceと連携する場合は、Google Driveから直接draw.ioを利用することも可能である。
Google Driveから、[新規] - [その他] - [draw.io図表]を選択することにより、Googleアカウントと連携した状態で利用を開始することができる。

ファイルの保存は自動的に行われ、作業内容は随時バックアップされる。
また、作成した図表は様々な形式 (PNG、PDF、SVG等) でエクスポートできる。

なお、特に登録やアカウント作成は必要ない。
ただし、クラウドストレージと連携する場合は、そのサービスのアカウントでのログインが必要となる。


数式の入力

上付き文字や下付き文字等の基本的な記号を使用して、通常のテキストとして入力することは可能である。
ただ、draw.ioは主にダイアグラムや図解の作成に特化したツールであり、複雑な数式の表現には制限がある。

複雑な数式を表示する場合は、以下に示すような代替手段がある。

  • LaTeXで数式を作成して、画像として保存してからdraw.ioにインポートする。
  • 外部の数式エディタ (例: CodeCogs Equation Editor) で数式を作成して、画像としてエクスポートしてdraw.ioに挿入する。


プラグインやカスタム拡張機能を使用する方法も存在するが、これはdraw.ioの基本機能ではない。

もし、数式を含む図が必要な場合は、以下に示すような代替ツールを使用する。

  • TikZ (LaTeX)
  • GeoGebra (数学図形と数式の組み合わせに特化)
  • Jupyter Notebookと数式プラグイン


CodeCogs Equation Editor

CodeCogs Equation Editorは、無料でオンラインで利用できる便利な数式エディタである。

  1. CodeCogs Equation EditorのWebサイトにアクセスする。
    https://editor.codecogs.com/
  2. 数式の入力
  3. エディタ上部のツールバーには、使用頻度の高い数式記号やギリシャ文字等がボタンとして用意されている。
    直接LaTeX形式で入力することもできる。
    例えば、2次方程式の解の公式を入力する場合は、
    x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}

  4. プレビューする。
    入力した数式は、リアルタイムでプレビュー表示される。
    また、表示サイズや色なども調整可能である。

  5. 画像として保存する。
    [Download]ボタン、または、[Export]ボタンを押下して画像として保存する。
    PNG形式でダウンロードすることを推奨する。

  6. draw.ioへ挿入する。
  7. draw.ioから、[File] - [Import]を選択する、あるいは、画像を直接ドラッグ&ドロップでdraw.ioキャンバスに配置する。


使用頻度の高い数式の例

  • 積分
    \int_{a}^{b} f(x) dx
  • 極限
    \lim_{x \to \infty}
  • 分数
    \frac{numerator}{denominator}
  • 冪乗
    x^2
  • 平方根
    \sqrt{x}



「http://mochiuwiki.e2.valueserver.jp/index.php?title=インストール_-_draw.io&oldid=13042」から取得