インターネット上を検索すると論理回路図やフローチャートなどの各種図版を作成できるツールは幾つか見つかるが，ソフトウェアのインストールが不要でブラウザだけあれば無料で使えるdraw.ioと呼ばれるWebサービスの使い勝手が良さそうである．本ページでは，このサービスを実験テーマ「ハードウェア基礎」の受講生に紹介しておく．尚，このツールはコンピュータネットワーク図なども作図出来るので，必要に応じて有り難く利用させて頂くと良いだろう．
注意：インターネット上のWebサービスである都合上，運営側の事情により予告無く，draw.ioサイトが閉鎖されたり，有料化されたり，或いは，システムのアップデートにより使い勝手や機能が大幅に変更となって，学生実験のための図版作成には使えなくなったりといった事態は何時でも起こり得る事を十分理解しておくこと．
draw.ioへはブラウザにて以下のURIを開いてアクセスする．
初めてアクセスした場合，以下のような表示となる．
デフォルトでは画面表示が「英語表示」となっているが，draw.ioは日本語表示にも対応しているので，まず日本語表示に切り替えてから使い始めよう．（尚，使っているパソコン機種・ブラウザによっては，最初から自動的に日本語表示となる場合もある．）
ダイアログ右下の地球儀アイコンをクリックすると，希望する表示言語一覧メニューが表示されるので，
ここで日本語（或いは中国語でもハングルでも希望する言語）を選択しよう．
OKボタンをクリックしてから，「ページを再読み込み」操作を行なえば（又は，アドレスと検索欄の再読み込みアイコンをクリック），
それ以後，画面が日本語表示となる．
図版作成を始める前に，まず，作成した図版の保存先を設定する必要がある．Google DriveやDropboxなどのオンラインストレージに既にアカウントを持っている者はそこを保存先にすることが出来るが，ここでは一般的な保存先である自分が使っているパソコン上に保存することにする．「デバイス」アイコンをクリックしよう．
保存先の指定が出来ているとdraw.ioにアクセスした時点で以下の表示になるはずだ．
新しく図版を描き始める場合は，「新規ダイアグラムを作成」をクリックする．
次に，作成する図版をファイル保存する際のファイル名を指定する．指定する際には拡張子 .xml を削らないようにしよう．ここでは 論理回路.xml というファイル名で保存することにする．ファイル名を指定したら「作成」ボタンをクリックすると図版作成が開始される．
draw.ioはシェイプ (shape)と呼ばれる図形部品を配置してゆくことで様々な用途に適した図版を描くことが出来る．シェイプは用途別にライブラリとして纏まっているが標準状態では表示されていないものがある．ハードウェア基礎では論理回路図とフローチャート図を描く事が重要なので，まず，それらを描くために適した状態にライブラリを調整しよう．
画面左下の「その他の図形」をクリックすれば，使用したいライブラリを取捨選択できる．
ここでは論理回路図とフローチャート図の作図だけを考えて，以下だけがチェックされて（選択されて）いて，それ以外のチェックは外しておこう．
必要なライブラリをチェックしたら OK ボタンをクリックする．
この状態で作図出来る状態となった．ここでは試しにMIL論理記号を用いた論理回路図を作成してみよう．
画面左側に使用可能なライブラリ一覧が表示されている．ライブラリ名をクリックすると畳んだり展開したりできる．論理回路図に必要なシェイプは Electorical / Logic Gatesライブラリに纏まっている．また，標準ではA4縦サイズの図版を作成する状態となっているのでA4横やA3縦などに変更したければ画面右側の選択肢を調整すること．
所望のシェイプをクリックするとそれが画面上に現れるので程良い位置に配置し，端子から端子へドラッグ操作すれば接続線（配線）を描くことが出来る．
各シェイプは一般的な作図ツールと同様にコピー＆ペースト操作して複製・配置も可能だ．また，配線だけを描きたければ「一般」カテゴリの Connection を使えば良いだろう．
画面に配置したシェイプや接続線は大きさや位置が変更できるだけでなく，色や向き，或いは，矢印や注釈など様々な属性（プロパティ）を調整して見やすく美しい状態に調整できる．また，大きさを変更する際に縦横比（アスペクト比）を固定にセットすることも可能だ．
例えば，単純な論理回路の場合，接続線には矢印はついて欲しくないかも知れない．その場合，まず接続線を選択しておいてから画面右側のメニューから「なし」を選択すれば良いだろう．尚，標準状態では一旦プロパティを選択調整すると再度調整するまで，その状態が維持されるようである．
テキストによる注釈ラベルを入れることも出来る．注釈を入れたい箇所をダブルクリックすると文字入力が可能となるので，挿入したいラベル文字をキーボードからタイプする．
また，draw.ioは海外で開発されているにも関わらず良くできており，日本語入力も可能なのだが，日本語に用いられるフォントが低品質なのでお勧めは出来ない．日本語ラベルをどうしても入れたい場合は図版をPNGやPDF形式へエクスポートしたものにMacのプレビュー.appなどを使って日本語ラベルだけを追加挿入するような工夫をした方が良いだろう．
また，修正したいラベルをダブルクリックすれば再編集も可能だ．さらに図形自身にラベルを付与することも可能なようだ．
このように論理回路を作図してゆけば，例えば，以下のような図版ができ上がる．
作成した図版のデータは，ファイルに保存しておき後日に編集作業を再開できるようにしておこう．
図版をファイルへ保存するには「ファイル」メニューから「保存」を選択するか，或いは，画面上の「保存されていません。ここをクリックして保存してください。」箇所をクリックする．
ここで，draw.ioのパソコン上へのファイル保存は少し癖があるので注意しておこう．draw.ioはインターネット上のWebサーバが提供するサービスなので，その作業結果の保存とは「Webサーバからのダウンロード」という意味になる．つまり，Macの場合，「ダウンロード」フォルダに図版ファイルがダウンロードされて保存される．このため，ファイル保存操作を繰り返すと，論理回路-1.xml，論理回路-2.xml，論理回路-3.xml,....という具合に少しだけファイル名が異なるファイルが大量に作成されてしまい，どれが何やら？状態となる危険性があるので注意して欲しい．最新版ファイルがどれかを間違えて誤って削除してしまうと，折角の作図作業が台無しになる可能性があるということだ．
作成した図版ファイルはXML形式ファイルであり，そのままではワープロ文書などに貼り付けられる「図版」として使えない．ワープロ文書で使える標準的な図版ファイルが必要であればエクスポート操作が必要となる．
ファイルメニューからエクスポートを選択すると，保存に用いるファイル形式が選べる．いわゆるPNG画像が必要であれば，イメージを選択する．
表示されるダイアログ上のエクスポートボタンをクリックする．
エクスポートされる画像ファイルにつける名前を確認するダイアログが表示されるので，
適切なファイル名になっているかどうか確認して必要なら訂正した上でダウンロードボタンをクリックすれば，これまたダウンロードフォルダへPNG画像ファイルがダウンロードされて保存されるだろう．念のため，そのファイルを開いてみて自分が必要な画像になっているかどうか確認しておこう．
尚，このエクスポート操作では図版全体ではなく，図版の一部分だけを選んで部分的にエクスポートすることも出来る．そうしたい場合は，先にエクスポートしたい対象のシェイプだけをマウス選択しておいてから同様に操作して，
表示されたダイアログ上のSelection Onlyがチェックされている事を確認してから操作を進めれば良い．
一般的に作成した論理回路図などの図版をワープロ文書内に貼り付けて利用する場合，貼り付けサイズを調整する場合は多いだろう．また，大きさを調整しなくてもPNG画像のようなラスターグラフィックスをワープロ文書に貼り付けるとジャギーと呼ばれるギザギザが出てしまって美しくない．そのため，用紙への印刷を前提とした図版の場合は拡大・縮小に強いベクターグラフィックス形式へエクスポートした方が望ましいだろう．
draw.ioでは，PDF形式へエクスポートすればラスターグラフィックスとして保存されるようだ．但し，用いるワープロソフトがPDFファイルの図版取り込みに対応している事を確認しておくこと．対応していなければワープロ文書中へ貼り付けることが出来ないぞ．PDF形式へエクスポートするには，上記と同様にエクスポートメニューからPDFを選択すれば良いが，これには注意が必要だ．PDF形式へエクスポートしようとすると，以下のダイアログが表示されるが，
殆どの場合，このダイアログにあるCropチェックボックスはチェックしたほうが良いだろう．もしこれをチェックせずにエクスポートボタンをクリックし，次に表示される「名前を付けて保存」ダイアログからダウンロードすると以下のようにA4サイズの巨大な図版が生成されてしまう．
これではワープロ文書へ貼り付けるときに余白が多すぎて往生してしまうだろう．このような事態を避けるためには，エクスポート操作した時のCropチェックボックスにチェックを入れておくようにしよう．
そうすると，余分な余白がカットされたジャストフィットなPDFファイルが生成されるはずだ．
こうして作成したPDFファイルはベクターグラフィックスとなっているので拡大縮小しても美しく印刷される．
また，PNG画像へのエクスポート同様，作成した図版の一部分を選択しておいてからエクスポート操作することで，図版の一部分だけをエクスポートすることも可能だ．必要に応じてエクスポートの仕方を選ぶと良いだろう．
図版を新規作成するのではなく，過去に作業して保存しておいた図版を読み込んだ上で再編集や編集作業の続行も可能だ．既にパソコン上に図版XMLファイル（エクスポートしたPNG画像やPDFファイルではないぞ）を読み込んで作業したい場合，draw.ioへアクセス開始した時に表示されるダイアログから
既存のダイアログを開くをクリックする．或いは，既に図版編集画面が開かれている時には,
ファイルメニュー -> 開く -> デバイス と選択する．
パソコンのファイル選択ダイアログが表示されるので，読み込みたいファイルを選んでから選択ボタンをクリックする．
図版データが読み込まれて編集作業が再開できるだろう．
draw.ioの利用を終える場合，特に終了操作は必要ない．作成した図版を確実に手元パソコンへ保存操作した後，ブラウザを閉じるか終了させるだけで良い．但し，Safariを用いている場合，閉じる際に次のような警告が表示される場合があるようだ．
本当に終了したければ「ページから移動」をクリックし，終了を取り消したい場合は「ページから移動しない」をクリックする．
図版を新規作成開始する際，draw.ioサイトに用意されている雛形テンプレートを読み込んだ上で始めることも出来る．そのためには，ファイル名を指定するダイアログ上のテンプレートメニューから各種カテゴリを選択すれば色々なテンプレートがサムネイル表示されるので，そこから所望のテンプレートを選択してから作成ボタンをクリックする．
例えば論理回路向けテンプレートはエンジニアリングに分類されている．使い方や図版作成要領を知るための参考にしたい場合は適宜利用しよう．
図版作成例を以下に掲載しておく．尚，各ファイルはZIP圧縮されているのでダウンロード時に自動伸張されなかった場合はダブルクリックして手動操作にて伸張すること．
論理回路図のサンプル （このサンプルには，NANDゲートなどの否定出力○を若干大きめに変更したり，標準図形には無い入力を付け加えた４入力NANDなど，幾つかのCSE特製図形が含まれている．）
Let's Enjoy!
Eitetsu Oomoto