インターネット上を検索すると論理回路図やフローチャートなどの各種図版を作成できるツールは幾つか見つかるが，ソフトウェアのインストールが容易で，また，ブラウザだけでも無料で使えるdraw.ioと呼ばれるWebサービスの使い勝手が良さそうである．本ページでは，このサービスを実験テーマ「ハードウェア基礎」の受講生向けに紹介する．尚，このツールはコンピュータネットワーク図なども作図出来るので，必要に応じて有り難く利用させて頂くと良いだろう．
注意：インターネット上のWebサービスである都合上，運営側の事情により予告無く，draw.ioサイトが閉鎖されたり，有料化されたり，或いは，システムのアップデートにより使い勝手や機能が大幅に変更となって，学生実験のための図版作成には使えなくなったりといった事態は何時でも起こり得る事を十分理解しておくこと．
尚，以下の解説に用いている各スクリーンショットは，クリックするとブラウザウィンドウ全面に拡大表示される．
draw.ioは技術系文書に良く現れる解説図（ダイアグラム）を描くのに特に優れたドローイング・ツールであり，以前はブラウザ経由でのみ利用可能なWebアプリケーションだったが，現在ではパソコンへインストール可能な単独アプリケーションも合わせて提供されており，こちらの方が使い勝手が若干良さそうであるので．その単独アプリケーションを用いる前提にて説明する．
まず，以下の開発元サイトへアクセスし，
Downloadボタンをクリックすると配布元のGitHubレポジトリが開かれるので，
そのページ上の macOS - Universal リンクをクリックして，最新版macOS向けインストーラ（ディスクイメージ）をダウンロードする．
ダウンロードしたディスクイメージを開くと以下のようなウィンドウが開かれるので，
draw.io.appアイコン 
をドラッグ＆ドロップしてアプリケーションフォルダへ配置する．
GitHubにてホスティングされている他のオープンソースプロジェクト同様，draw.ioの頻繁に（概ね1~2回/月）新しいアップデート版がリリースされている．すなわち，細かな不具合があったとしても暫くすると修正される可能性が高いので，draw.ioを常用するなら，こまめに上記Webサイトを確認して最新版がリリースされていないかどうか確認した方が良いだろう．また，draw.ioアプリケーションの「ヘルプ」メニューから「アップデートを確認」を選ぶと，新しいアップデート版がリリースされていれば教えてくれる．
アプリケーションが配置できたら，draw.io.appアイコンを開けばdraw.ioデスクトップアプリケーションが起動するが，インストール後に初めて起動した場合，以下の表示が出るだろう．
この表示は，インターネットからダウンロードして利用する他のアプリケーションと同様，macOSのGateKeeperから発せられた警告であるので「開く」ボタンを開いて起動を継続する．尚，この警告は二度目以降は表示されない．
draw.ioが起動すると以下のようなウィンドウが開かれる．新たに図版作成する場合には「新規ファイルを作成する」をクリックする．尚，既に作成済み図版ファイルを開いて作業する場合には「既存のファイルを開く」をクリックするとmacOSのファイルダイアログが表示されるので，そこから作成済み図版ファイルを選択して作業を再開する．
「新規ファイルを作成する」を選択すると以下の画面が表示される．
この画面では新たに作成するファイルのファイル名とdraw.ioに用意されているテンプレート（見本）を指定する．ここではファイル名として例えば「論理回路.drawio」と入力しておく．また，テンプレートには何も描かれていない「白紙ファイル」を選択しておこう．尚，draw.ioにて作成される図版ファイルの拡張子は原則として .drawio が用いられるので，これを誤ってファイル名から削除しないようにすること．
テンプレートとファイル名を選択・指示した後，「作成する」ボタンをクリックすると図版作成が開始される．
draw.ioはシェイプ (shape)と呼ばれる図形部品を配置してゆくことで様々な用途に適した図版を手早く描ける．シェイプは用途分野別にライブラリとして纏められているが標準状態では表示されないものもある．ハードウェア基礎実験では論理回路図とフローチャート図を描く事が重要なので，まず，それらを描くのに適した状態へライブラリを調整しよう．
画面左の「+ その他の図形」ボタンをクリックすれば，使用したいライブラリを取捨選択できる．
ここでは論理回路図とフローチャート図の作図だけを考慮して，以下項目だけがチェックされて（選択されて）おり，それ以外のチェックは外れた状態としておこう．
必要なライブラリをチェックしたら「適用」ボタンをクリックする．各ライブラリは左端の▲マークをクリックすると展開・折畳み出来るので作業に必要なライブラリのみ展開した状態とする事をお勧めする．例えば論理回路図向け Electrical / Logic Gates ライブラリを展開表示すると以下のように表示されるだろう．
少し残念なことにdraw.ioが標準で用意している論理回路向けシェイプには学生実験で用いる論理回路実習装置に備わる論理ゲートの全種類が提供されていない（特に3入力NANDや4入力NANDなど）．これらは「カスタム図形」として自ら定義して描けるが学生諸氏には少々ハードルが高いので，事前に細々と作図・調整が施された論理回路実験向け各種シェイプを準備しており，これを「スクラッチパッド」へインポートして配置しておこう．スクラッチパッドとは事前に各種調整を加えた「My図形」をドラッグ＆ドロップで登録できる場所であり，そこから配置することで様々な図版作成の調整作業を省くことが出来る．
以下のリンク先にその調整済みシェイプが含まれたスクラッチパッド・ライブラリをZIP圧縮して置いてあり，これをダウンロードして展開すると KSU_Logic_gates.xml というライブラリ・ファイルが作られる．
このライブラリを自分のスクラッチパッドへインポートするには画面左上の「スクラッチパッド」パネルの鉛筆アイコンをクリックする．
スクラッチパッドへのインポートダイアログが表示されるので，
「インポート」ボタンをクリックするとファイル選択ダイアログが開かれるので，そこで上記でダウンロード・展開しておいた KSU_Logic_gates.xml ファイルを選べば（注：ダウンロードしたZIPアーカイブは必ず展開しておくこと．）自分自身のスクラッチパッドに各種シェイプが追加登録され，
「保存」ボタンをクリックすると作図ウィンドウ表示に反映される．（尚，スクラッチパッド上の登録シェイプが要らなくなった場合は，上記ダイアログを改めて表示させて各シェイプの右肩×マークをクリックすれば登録解除出来る．）
これで論理回路図を作図する準備ができた．
ここではMIL記号に従った論理回路図を作成してみよう．
画面左側に使用可能なライブラリ一覧が表示されており，ライブラリ名をクリックすると展開/格納できる．論理回路図に必要なシェイプは Electorical / Logic Gatesライブラリに用意されているものの，ハードウェア基礎実験で作図する論理回路図に用いるシェイプには上記操作でスクラッチパッドへインポートしたシェイプを用いる事をお勧めする．これらには予め細かな調整を施してありレポート執筆に求められる論理回路図を最短時間で作図できるように意図されている．また，作図中の図版を拡大・縮小した状態で表示して作業したい場合は，ウィンドウ左上のxx%などと表示されたメニュー，或いは，虫眼鏡アイコンを操作する．尚，標準ではA4縦サイズの図版を作成する状態となっているのでA4横やA3縦などにサイズ変更したければ画面右側の「ダイアグラム」タブの選択肢を調整すること．
所望のシェイプをスクラッチパッドでクリック，又は，ドラッグ＆ドロップして画面上の程良い位置に配置してみよう．例えば以下の例では2入力ANDゲートを配置している．
各シェイプはドラッグ操作で配置位置を調整できる．位置を微調整したい場合はシェイプを選択してからキーボードの矢印キー（↑ ↓ ← →）をタイプすれば上下左右に細かく移動出来る．また，他の一般的なソフトウェアと同様にコピー＆ペースト操作して既存シェイプの複製も可能だ．また，操作を失敗してやり直したい場合は「編集」メニューから「元へ戻す」を選択するか，キーボードよりCmd-Zをタイプする．
画面に配置したシェイプは大きさや位置が変更できるだけでなく，描画線の描き方，塗りつぶし色，シェイプの方向，書き込まれたラベルのフォント（書体）など，様々な属性（プロパティ）を調整して見やすく美しい状態に調整できる．プロパティを調整するにはシェイプをクリックして選択してからウィンドウ右側の「スタイル」パネルより操作する．
さらにシェイプに書き込むラベルを編集するには当該シェイプをダブルクリックすると文字入力出来る状態となるので，そこで必要な編集操作を施せば良い．尚，大きさを変更する際に縦横比（アスペクト比）を変更することも本来は可能だが，本ページより提供しているスクラッチパッド登録シェイプでは縦横比をあえて固定としてある．
尚，縦横比を勝手に変えてしまうと各論理ゲートの形が歪んでMIL記号の規定に適合した作図にならないので注意のこと．MIL記号における論理ゲート図のデザインは以下URLを参照されたし．
MIL論理記号 (Wikipedia)
以下の例では３つの論理ゲートのラベルをそれぞれ，A, B, Cと変更している．
配置した全てのシェイプ間には上下の重なり関係がある．例えば以下の例ではゲートCがゲートA及びゲートBの上に重なった状態となっている．
これを調整してCがAの下側へ重なるようにするには，当該シェイプ上で右クリック（又は，Ctrlキーを押しながらクリック）して表示されるメニューより「背面へ移動」を選択，或いは，画面右側プロパティパネルの「配置」タブ上の「背面へ移動」ボタンをクリックすると直ぐ後に配置されたシェイプと前後が入れ替わる．以下の例ではゲートCがゲートBの後側へ配置されて重なるようになった．
尚，重なり関係は作成中の全シェイプ間に存在するので，多数のシェイプが描いてある状況だと重なりが簡単には意図通りにならないかも知れない．（例えば，上記の例ではゲートA, ゲートB, ゲートC，３つの論理ゲートの間に重なり関係がある．）その場合は，上記操作にて「最前面へ移動」或いは「最背面へ移動」を選択すれば，一気に最前面，或いは，最背面へシェイプを配置出来る．
論理回路図（やフローチャート）ではシェイプを横（或いは縦）に配置して，その間を繋ぐ接続線を描画する場合が良くある．この場合に有用なシェイプに「水平コネクタ」がある．（ちなみに，フローチャート図ではシェイプを縦配置した上で接続線を描く場合が多いが，その場合には「垂直コネクタ」が有用である．）スクラッチパッドから「水平コネクタ」を選んで配置してみよう．
draw.ioの有用な機能としてシェイプとコネクタの接続関係を維持してくれる点がある．ここではゲートAの出力とゲートCの入力を接続してみよう．コネクタ片方の端点をドラッグして接続したいゲートAの出力端子へ近づけると接続されるポイントが緑色表示されるので，そこへドロップする．さらに，コネクタの他方端点をゲートCの上側入力端子へ同様にドラッグ＆ドロップすればゲートA出力端子とゲートC入力端子がコネクタ線でを接続された状態となるだろう．尚，一旦接続された端点を外したい場合はコネクタ線をクリックして緑色表示された端点をドラッグすれば接続状態が解除されるのも知っておこう．
コネクタの便利なところは，シェイプ間の接続状態が常に維持されるので，例えばシェイプの位置を移動させるとコネクタ線が自動追随する．また，水平コネクタの場合，接続点同士の高さ位置ズレの補正を途中のクランク状箇所で行うが，このクランク箇所の中央マークをドラッグすればクランク箇所の左右位置を必要に応じて調整できる．
上記の例ではゲートAからC，及びゲートBからCを接続する各コネクタのクランク位置（線が折れる左右位置）がぴったり揃うように調整してある旨に注意して欲しい．
コネクタもシェイプの一種なので，各種プロパティを調整して点線や太さ，或いは，端点に矢印を付けるなど様々に見掛けを変更できる．論理回路図では配線分岐箇所に黒丸(●)を付けるのが通例であるので，これを水平コネクタに施してみよう．水平コネクタを一つ配置し，それを選択した状態でウィンドウ右側のプロパティパネルより端点の表示方法をメニュー選択する．スクラッチパッドに登録されている水平コネクタは端点「なし」となっているが，それに対して「線の始点」メニューから黒丸(●)を選択する．
このような操作でコネクタの始点・終点を装飾出来るだろう．以下の例では始点に黒丸を施している．
多数の同じようなシェイプが必要な場合，シェイプを配置してしまった後から各シェイプのプロパティを１つ々々個別に調整するのは面倒極まりない．コピー＆ペーストで複製したシェイプには元シェイプに設定済みのプロパティが引き継がれるので，効率良く作図作業するには，見本となるシェイプやコネクタを予め十分に調整しておいて，その調整済みシェイプ・コネクタを次々にコピー＆ペーストして使うのがお勧めである．（どうすれば能率良く作業が進められるのか常に意識しよう．）
上記の水平コネクタは基本的に２ヶ所で90度に折れるクランク状の接続線を描くのに適しているが，論理回路図では場合により複数個所で折れる形の接続線が必要となる．そのような接続線には「折れ線」コネクタが適している．スクラッチパッド「折れ線」が登録されているから，これを配置してみよう．
コネクタ線の中央に薄く青色ポイントが示されている筈だが，ここをドラッグするとコネクタを「折る」ことが出来る．この折れている箇所を「途中点」と呼ぶ．
途中点は必要に応じて追加したり移動したり出来るので，例えばゲートCの出力端子からゲートBの下側入力端子へ回り込むような配線も容易に描画できる．
また，途中点（折れ点）を削除して，その箇所を「折れずに真っすぐにしたい」場合，削除したい途中点を右クリック（又はCtrlキーを押しながらクリック）して表示されるメニューより「途中点を削除」を選択すれば良い．
尚，水平コネクタや折れ線コネクタは必ずしもシェイプへ接続しなくても構わないので，レポート執筆に必要な図版が適切に描けるよう，各自，適度に工夫しながら作業されたい．
文字による見出しラベル（注釈）を入れることも出来る．スクラッチパッドより「見出しラベル」を配置し，それをダブルクリックすると文字編集出来る状態となるので必要な編集操作を施せる．
また，画面右側プロパティパネルの「テキスト」タブから操作すれば上付き・下付き文字も調整出来るので例えば ラベルA といった表記も可能である．スクラッチパッドから配置されたラベルはその見本にもなっているので参考にされたい．ここでは，各ゲートの入力端子・出力端子に「入力A」や「出力X」などとラベルを付与してみよう．
作成した図版データはファイルとして保存して，後日，編集作業を再開できるようにしておこう．
図版をファイルへ保存するには「ファイル」メニューから「保存」を選択するか，或いは，画面上の「保存されていません。ここをクリックして保存してください。」箇所をクリックする．
図版作成開始して初めて保存する場合にはmacOSのファイルダイアログが表示されるので，そこでファイル名や保存フォルダを適宜指示して保存操作する．また，過去に作成した図版ファイルを開いて作業再開した場合，或いは，一度ファイル保存操作しておいた場合には特に何も表示されずに元ファイルに対して上書き保存されるのは，他の一般的アプリケーションの保存操作時の挙動と同様である．
過去に作業して作成した図版ファイルを開きたい場合は「ファイル」メニューより「開く」を選択して，表示されるダイアログから当該ファイルを選択する．
或いは，Finder画面より当該ファイルのアイコンを開いても同様に開くことが出来るだろう．
draw.ioにて作成した図版ファイルはXML形式ファイルであり，そのままではワープロ文書などで利用可能な「図版」として使えない．ワープロ文書で利用出来る標準的図版ファイルが必要ならばエクスポート操作が必要となる．
一般的に，論理回路図など作成した図版をワープロ文書内に貼り付けて利用する場合，貼り付け後にサイズ調整する場合は多いだろう．また，大きさを調整せずともPNG形式画像のようなラスター・グラフィックスをワープロ文書に貼り付けるとジャギーと呼ばれるギザギザが出てしまって美しくない場合が良くある．そのため，特に用紙への印刷を前提とした図版の場合は拡大・縮小に強いベクター・グラフィックス形式へエクスポートした方が望ましいだろう．もちろん印刷を前提としない電子レポートであっても，パソコン画面表示を拡大・縮小して閲覧されるのが通常であるから，やはり拡大・縮小に強い画像形式が適しているのは言うまでもない．
draw.ioではSVG形式など幾つかのベクター・グラフィックス形式画像への保存をサポートしているが，MS-Wordなどワープロソフトでの活用を想定するならPDF形式へエクスポート出力すれば十分だろう．但し，用いるワープロソフトがPDF形式図版の取り込みに対応している事を確認しておくこと．対応していなければワープロ文書中へ貼り付けることが出来ないぞ．尚，draw.ioを用いて作成した図版をPDF形式など他のソフトウェアで使用可能なファイル形式へエクスポートする際には，少しコツがあるので注意しよう．
PDF形式へエクスポートするには，ファイル」メニュー → 形式を指定してエクスポート → PDF... と選択すると，PDF形式ファイルへの保存条件を指定するダイアログが表示される．
尚，このPDFダイアログにて「切り落とす」ラジオボタンをクリックして選択しておくのを忘れないこと．続いて「エクスポート」ボタンをクリックするとmacOS標準のファイル保存ダイアログが表示される．
ちなみに，上記PDFダイアログで「ダイアログのコピーを含める」チェックボックスが気になるかも知れないが，このチェックの有無はエクスポートされたファイルを単にワープロ文書へ貼り付けるPDF画像として用いるなら特に影響はない．チェックを入れておくとシェイプの描画情報（形，座標，等々）がエクスポート生成されるファイルに含まれた状態となり，チェックを外しておくと含まれない．描画情報の有無でファイルサイズに若干の違いが生じるが，最も大きな違いは生成したPDF形式図版を改めてdraw.ioへ取り込んで活用する場合に現れる．つまり，シェイプ描画情報が含まれたPDF図版をdraw.ioへ取り込んで活用した場合，PDF図版に含まれている描画情報を利用して取り込んだシェイプをさらに変更・編集を加えることが可能となるようだ．このチェックの必要性は各自が判断して欲しい．
このダイアログにてエクスポート出力生成されるPDF形式ファイルの名前や保存先を指示して「保存」ボタンをクリックすると図版がPDF形式で保存される．そのPDF形式ファイルを開いてみて以下のように自分の欲しい図版となっている旨を確認しておこう．
尚，上記のエクスポート操作でのPDFダイアログにおいて「切り落とす」ラジオボタンをチェックせずにエクスポートしてしまうと，以下のようにA4サイズの巨大な図版が生成されてしまうの注意しよう．殆どの場合，そんな余白が有り過ぎる図版は必要ない筈だ．
作図した図版の一部のみ部分的にエクスポート出力出来る．その場合，まず，出力したい図版部分を囲むようにドラッグ操作して選択しておく（以下の例ではゲートA, B, Cとそれらを繋ぐコネクタ線のみが選択された状態となっている）．
同様にエクスポート操作を「ファイル」メニューより選択する．
PDF形式への保存条件ダイアログが表示されるが，このダイアログにて「選択範囲のみ」チェックボックスにチェックが入っており，かつ，「切り落とす」ラジオボタンが選択されていることを確認しておくこと．
この「選択範囲のみ」がチェックされていると，上記で予め選択しておいたシェイプのみが出力され，また，「切り落とす」が選択されていることでA4サイズの巨大な図版でない必要最小限サイズの図版に調整して出力される．最後に「エクスポート」ボタンをクリックすると，上記のエクスポート操作同様にmacOSのファイル保存ダイアログが表示されるので同じく同様に操作してファイル保存すればよい．
作成した図版をWebページへ掲載したいなどの必要がある場合は，エクスポート形式としてPNG, JPEG, WebP，或いは，SVGなど所望の形式を選択する．ここではPNG形式へのエクスポートを行ってみよう．
表示されるダイアログにて，「サイズ」メニューが「ダイアグラム」を選択されている旨を確認しておく．ここで「ページ」が選択されていると，これまたA4サイズの巨大な余白有りまくりの画像が生成されてしまうので注意すること．サイズを確認したら「エクスポート」ボタンをクリックする．
ファイル保存ダイアログが表示されるので，保存場所とファイルの名前を確認した上で「保存」ボタンをクリックすれば所望の画像形式で図版が保存される．
尚，PDF形式の場合と同様，図版の一部のみエクスポートすることも可能なのでPDFの場合と同様に操作すること．
draw.ioの使用を終える場合，まず作成しておいた図版を忘れずに保存しておく．次にmacOS通常のアプリケーション終了操作，すなわち， draw.io メニューより Quit draw.io を選択すればdraw.ioアプリが終了する．
尚，保存操作を忘れてdraw.ioを終了しようとしたり，或いは，作業中の図版ウィンドウを閉じようとすると以下の警告が表示される．
Discard Changesをクリックすると保存せず直ちに終了し，Cancelをクリックすると終了操作をキャンセルして元へ戻る．
図版作成例を以下に掲載しておく．尚，各ファイルはZIP圧縮されているのでダウンロード時に自動伸張されなかった場合はダブルクリックして手動操作にて伸張すること．
論理回路図のサンプル （このサンプルには，NANDゲートなどの否定出力○を若干大きめに変更したり，標準シェイプには無い入力を付け加えた４入力NANDなど，幾つかの情報理工学実験論理回路基礎向けカスタムシェイプが含まれている．）
Let's Enjoy!
Eitetsu Oomoto
.PNG){kind=link}