DrawIt:様々なフローチャート・設計図の作図と保存ができる

2017年7月12日

Visio や OmniGraffle のように様々な図を作図したい。
そのような時に便利な WordPress 用プラグインがあります。
それは「DrawIt」です。
そのインストール手順から日本語化・使い方と設定などを解説していきます。

DrawIt

Screenshot of wordpress.org

DrawIt は、Microsoft Office Visio や OmniGraffle のように
様々な図・フローチャートおよび図面を簡単に作成・編集・保存することができます。
作成した各種図面は、PNG もしくは SVG 形式でメディアライブラリに保存できます。

また、PNG / JPEG / SVG / PDF / HTML / VSDX 形式でのエクスポートも可。
作成画面の各種メニュー等は、デフォルトでは英語ですが、日本語に切り替え可。
※フローチャートツールである draw.io Web サイトに直接接続しています。

記事を作成もしくは更新時点でのバージョン:v 1.1.3
マルチサイトでの利用:可

インストール手順

下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
DrawIt – WordPress.org

もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。

ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「DrawIt」と入力します。

WordPressプラグイン「DrawIt」のスクリーンショット

検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。

プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。

WordPressプラグインのインストール手順を解説 – WordPress活用術

日本語化

DrawIt を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。

WordPress と関連プロジェクト(テーマ・プラグイン)用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。

※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。

日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。

WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術

専用メニュー

WordPressプラグイン「DrawIt」のスクリーンショット

ダッシュボードの「設定」メニューの中に追加されています。

使い方

まずは、投稿編集画面を開きます。

WordPressプラグイン「DrawIt」のスクリーンショット

WordPressプラグイン「DrawIt」のスクリーンショット

ビジュアルエディタとテキストエディタの両方にツール起動ボタンが追加されています。

WordPressプラグイン「DrawIt」のスクリーンショット

左側メニューから図形を選択したり、
キャンパスにドラッグアンドドロップすると図形が追加されます。
※図形は追加後も移動可。

WordPressプラグイン「DrawIt」のスクリーンショット

画面右上の地球儀のようなアイコンをクリックすると日本語に切り替えられます。

WordPressプラグイン「DrawIt」のスクリーンショット

各種情報を表示するボックスです。
図形を選択時には、図形のスタイルなどを変更できるオプション項目が表示されます。

WordPressプラグイン「DrawIt」のスクリーンショット

ファイルメニューです。
印刷や各種ファイル形式へのエクスポートが可能です。

WordPressプラグイン「DrawIt」のスクリーンショット

WordPressプラグイン「DrawIt」のスクリーンショット

WordPressプラグイン「DrawIt」のスクリーンショット

WordPressプラグイン「DrawIt」のスクリーンショット

WordPressプラグイン「DrawIt」のスクリーンショット

WordPressプラグイン「DrawIt」のスクリーンショット

WordPressプラグイン「DrawIt」のスクリーンショット

WordPressプラグイン「DrawIt」のスクリーンショット

WordPressプラグイン「DrawIt」のスクリーンショット

WordPressプラグイン「DrawIt」のスクリーンショット

WordPressプラグイン「DrawIt」のスクリーンショット

標準で選択できる図形

WordPressプラグイン「DrawIt」のスクリーンショット

標準にないものは、「その他の図形」から追加できる場合もあります。

設定

Diagram Save-as Image Type

WordPressプラグイン「DrawIt」のスクリーンショット

  • Allow uploading SVG
    SVG イメージのアップロードを許可するかどうか。
  • Default image type
    デフォルトの画像形式を選択します。

Advanced Options

WordPressプラグイン「DrawIt」のスクリーンショット

  • Enable in frontend-based editors
    フロントエンドでのエディターの使用できるかどうか。
  • Override other plugins disabling the frontend buttons
    フロントエンドのボタン無効化を他のプラグインでもオーバーライドするかどうか。
  • Use insecure version for SVG images
    SVG イメージに安全でないバージョンを使用するかどうか。
  • Default temporary directory
    デフォルトの一時ディレクトリを指定します。

補足事項

このプラグインは draw.io の Web サイトを使用していますが、draw.io とは連携していません。

URL

DrawIt – WordPress.org

本ページはアフィリエイトプログラムによる収益を得ています

図形描画

Posted by 管理人