drawioで書いた図をwordpressで利用する3つの方法

drawioで書いた図をPNG画像に変換したとき、画像が粗くなり文字が読みづらいという問題が発生しました。

どうすれば、図が一番綺麗で、かつ、書いた通りに表現されるのか調査しました。その結果、SVG画像の利用でした。

この記事では、drawioで書いた図をwordpressで表示する3つの方法を紹介します。

＼IT未経験者からのサポートあり！転職サービス3選！！／

サービス名
未経験	未経験OK	未経験の転職専用	経験者向け
公開の求人数	ITエンジニア全体で1万件以上 ITエンジニア未経験で600件以上	未公開	5,000件以上
利用対象	全職種	IT特化	IT特化
特徴	✓誰もが知る転職サービス ✓経歴を登録しておくとオファーが来る	✓企業担当者と条件交渉 ✓スキルの身につく企業を紹介	✓IT専門のエージェントが対応 ✓転職成功すると年収200万円以上の大幅アップがある
転職サポート内容	求人検索	企業担当者と交渉 求人紹介 ライフプランのサポート	キャリア相談 求人紹介 提出書類の添削 面接対策
公式サイト	リクナビネクスト	テックゲート	レバテックキャリア

drawioで書いた図の出力方法の比較

drawioで書いた図を、以下の3つの方法で出力してみました。

それぞれ、メリット、デメリットがあったのでまとめます。

	HTMLコード埋め込み	PNG画像で出力	SVGデータで出力
メリット	画像が綺麗	図の位置ずれが発生しない	図の位置ずれが発生しない
	drawioで設定したリンククリックできる		拡大しても画像が綺麗
デメリット	図によっては位置ずれが起きる	画像が荒い	wordpressで利用する場合は、プラグインなど必要で手間がかかる
	図を拡大するとスクロールしずらくなることがある	文字が読みづらい

drawioで編集したあとの画面は以下のとおりです。

HTMLコード埋め込みで出力

■HTMLコードの出力方法

1. drawioを開く
2. 「File ->Embed -> HTML -> Create -> Copy」の順番で選択して、埋め込みコードの表示
3. 表示させた埋め込みコード(HTMLコード)をwordpressの任意の場所に貼り付ける

その結果、以下のような図になります。

■特徴

• 画像が綺麗
• drawioで設定したリンクをクリックできる
• ただし図によっては、文字の位置などずれることがある。

PNG画像を貼り付ける

■PNG画像に出力

1. drawioを開く
2. 「Export as -> PNG 」の順で選択してPNG画像を作成する
3. wordpressで画像ファイルとして貼り付ける

■特徴

• 図の位置ずれが発生しない
• 画像が若干荒い
• 画像が粗いため、文字が読みづらい。

SVG画像を貼り付ける(筆者オススメ！)

■SVG画像に出力

1. drawioを開く
2. 「Export as -> SVG 」の順で選択してSVG画像を作成する
3. wordpressで画像ファイルとして貼り付ける

その結果、以下のように表示されます。

■特徴

• 図の位置ずれが発生しない
• 拡大しても画像(文字)が綺麗
• wordpressで利用する場合は、プラグインなど必要で手間がかかる

関連記事

wordpressでSVGファイルを表示させる方法とは？プラグインを利用した方法で解説します

drawioやxmindで書いた図を綺麗なままwordpressで表示したい！ SVG画像(アニメーションも含む)をwordpressで表示したい。 どうしたら実現できるの？   こ[…]

まとめ

今回は、drawioで書いた図をwordpressの記事に反映させる、３つの方法を紹介しました。

どれも一長一短あります。

図が一番綺麗で、かつ、書いた通りに表現されるものは、SVG画像でした。

＼IT未経験者からのサポートあり！転職サービス3選！！／

サービス名
未経験	未経験OK	未経験の転職専用	経験者向け
公開の求人数	ITエンジニア全体で1万件以上 ITエンジニア未経験で600件以上	未公開	5,000件以上
利用対象	全職種	IT特化	IT特化
特徴	✓誰もが知る転職サービス ✓経歴を登録しておくとオファーが来る	✓企業担当者と条件交渉 ✓スキルの身につく企業を紹介	✓IT専門のエージェントが対応 ✓転職成功すると年収200万円以上の大幅アップがある
転職サポート内容	求人検索	企業担当者と交渉 求人紹介 ライフプランのサポート	キャリア相談 求人紹介 提出書類の添削 面接対策
公式サイト	リクナビネクスト	テックゲート	レバテックキャリア