Zenn
🔰

VS Code Drawio - 小ネタその3

に公開

私が良く使用している[ VS Code ] の 拡張機能[ drawio ]の小ネタをご紹介いたします

前回(小ネタ2)の記事については、以下を参照ください。

※ 前回から見ていただければ理解も深まります。
https://zenn.dev/yatuba_m/articles/3cd0fb7a5dd16a

今回は、以下をご紹介いたします

1.Drawioのテキスト挿入
2.Drawioの矢印種類変更
3.Drawioの線種類変更
4.Drawioのエクスポート(画像ファイル)

1.Drawioのテキスト挿入

テキストを挿入するには、主に2つ方法が存在します。

1-1.図形内にテキストを挿入する場合

手順.挿入した図形に対して、ダブルクリックをすることで文字列を挿入することが可

1-2.テキスト(図形)自体を挿入する場合

手順.サイドバー「図形」からテキストを挿入。ダブルクリックで文字を変更することが可


2.Drawioの矢印種類変更

手順1.変更したい矢印の図形を選択

※ サイドバー「フォーマット」の表示状態にしておくこと

手順2.タブ「スタイル」から始点もしくは終点のドロップダウンリストから変更したい矢印の種類を選択

※ ① : 始点  ② : 終点


3.Drawioの線種類変更

手順1.変更したい図形を選択

※ サイドバー「フォーマット」を表示状態にしておくこと

手順2.タブ「スタイル」から線のドロップダウンリストから変更したい線の種類を選択

または


4.Drawioのエクスポート(画像ファイル)

手順1.ツールバー「ファイル」から「Export...」を選択

手順2.エクスポート(出力)したいファイルの拡張子を選択し、保存先を入力することでエクスポート(出力)

※ 今回は画像ファイル(png)でエクスポートします。

注意事項

エクスポート(出力)した際、図形以外の箇所は透明化されており(デフォルト)、見えにくい場合はあります。

【 透明化 ⇒ 背景色(白)に変更する場合 】
何も選択していない状態でサイドバー「フォーマット」の表示し、タブ「ダイヤグラム」から背景色のチェックボックスをONにしてください。


まとめ

今回は[ VS Code ] の拡張機能 [ drawio ] の基本的な使い方として、テキストの挿入方法、矢印や線の種類変更、画像ファイルへのエクスポート手順についてご紹介しました。
Drawioはシンプルかつ柔軟に図を作成できるツールであり、今回ご紹介した機能を使いこなすことで、より効果的に図を作成できるようになるでしょう。


Discussion

ログインするとコメントできます