VisualStudioCode+Draw.io+FontAwesome
１．はじめに
お手軽に技術資料用のお絵かきがしたい！
というわけで、VisualStudioCode＋Draw.io＋FontAwesomeの環境を
作ってみました。
２．本日の食材
・VisualStudioCode
・Draw.io
・FontAwesome
３．VisualStudioCodeのインストール
MicrosoftStoreからのインストールがオススメです。
下記URLから、インストーラをダウンロードすることも可能です。
４．Draw.ioのインストール
拡張機能の検索にて、「draw.io」と入力。
Draw.io Integration のInstall。
下記URLからもインストール可能です。
５．FontAwesomeの導入
５．１．diagrams.net Libraries の導入
メリット
一覧がドラッグ＆ドロップで使用できる
デメリット
最近更新されていない模様で、数が少ない
目視で探す必要がある
libs → font-awesome.xml → Raw を選択。
URL（ https://raw.githubusercontent.com/jgraph/drawio-libs/review/libs/font-awesome.xml ）をコピー。
Visual Studio Codeの拡張機能画面から、Draw.io Integrationの歯車を押し、
Extension Settings を開く。
Hediet › Vscode-drawio: Custom Libraries の Edit in settings.json を押す。
下記項目を追記し、drawio-lib font-awesome raw のURLを入力して保存。
{
"entryId": "FontAwesome",
"libName": "FontAwesome",
"url": "https://raw.githubusercontent.com/jgraph/drawio-libs/review/libs/font-awesome.xml"
}
VisualStudioCodeにて、適当なフォルダに拡張子「.drawio」の
適当なファイルを作成、Draw.ioの画面を表示する。
（見づらいのでテーマ色を変更してあります。）
More Shapes を押下し、FontAwesomeにチェックをいれてApply。
FontAwesomeを開くと、アイコン一覧が表示される。
５．２．フォントインストール
メリット
多数のアイコンが使用できる
デメリット
フォントがインストールされていない環境では文字化けする
正しく表示されない場合がある
FontAwesomeのGitHubを開く。
webfontsを開き、fa-solid-900.ttf ファイルをダウンロード。
ダウンロードしたファイルを開き、インストール。
FontAwesomeのサイトから、アイコンを検索する。
詳細画面にてCopy Glyphを選択。
Visual Studio Codeにて貼付け。この時点では文字化けしている。
Text → Font → Custom を選択。
System Fonts の Font Name に、Font Awesome 6 Free Solid と入力しApply。
５．３．SVGファイル編集（おすすめ）
メリット
多数のアイコンが使用できる
どの環境でも正しく表示される
デメリット
編集の手間がかかる
参考サイト様
FontAwesomeのサイトから、アイコンを検索する。
SVGファイルをダウンロードする。
ダウンロードしたファイルをメモ帖で開く。
SVGタグの後に下記タグを追加し、保存。
<style>path {fill: black; stroke: none;}</style>
File → Import から、SVGファイルを選択。
画像を右クリックし、Edit Styleを選択。
末尾に下記コードを追記してApply。
editableCssRules=.*;
StyleにFill path・Line pathが追加され、色が変更できる。
５．おわりに
いかがでしたでしょうか。
いずれもかなり複雑な手順となっておりますが、
FontAwesomeが使えるのはかなり便利かと存じます。
ここでご紹介した方法以外にも、
GoogleDriveとDraw.ioを連携して使う方法などもございます。
用途に合わせてお試しください。