drawioとは
無料でブラウザ上で使える以下の描画ツール。本来は純粋なシステムエンジニアリングのシステムの設計段階において、主にER図やフローチャートを作るために(?)作られたものであるが、どうも結構drawioでも (線分の長さと角度の代数計算さえすれば)テクニカルイラストを結構描けることに気がついたので以下、その際の注意点やイラスト例などをまとめていきます
※drawioをちょっとさわってみて良いと思った点
・Illustrator同様、数値でかなり微調整できる(※Illustratorよりは多分機能は少ないが、個人的には線画を描くには十分な気がする・・・)
・SVG、XML、HTML形式でもエクスポートできる
・Google Driveで保存できる
・曲線を描いた際にIllustratorで言うところのアンカーポイントを後決めできる
・レイヤー分けもできる
・無料
起動の仕方
上記リンクにアクセスして「start」の部分を押すだけ
以下の画面に遷移するので後はGoogleスライドやスプレッドシートみたいな感覚でファイル操作できます
注意(1):フリーハンドはあるが、Illustratorでいうところの「ペンツール」は現状ない(と思う)
GPT先生はいるとおっしゃっていたが、ずっと探してみた感じ2026年1月5日時点ではいない
※フリーハンドは以下の場所
注意(2):注意(1)の結果として、曲線ないし直線に対して、Illustratorで言うところのオープンパス・クローズパスという概念は(たぶん)ない
注意(3):「その他」 ⇒ 「Horizonatl Line」で描ける直線は数値で厳密に回転できる
線を選択すると右側の配置タブに角度がある
※小数点第1位以下でも微調整できた
「一般」⇒「Line」で描ける直線も(一旦)グループ化すると、
以下のように選択時に回転のガイド(↶)がつくが、
上図でいう角度のところの数値をいじっても上手く動作しなかった。
注意(4):レイヤーという概念はIllustrator同様にある
「表示」⇒「レイヤー」にチェック入れると、Illustrator完全に盗んだじゃ(^^;)と思うようなレイヤーのUIが出てくる。使い方も同じ
実際に描いてみた
作成中
主な参考資料





