以下の記事でギターアンプの回路を設計しました。回路図はdraw.ioを使って描き、描いた図をWordPressで表示しました。その時の手順を紹介します。

LM386でギターアンプを作った

回路図をdraw.ioで描く

draw.ioを開いたら「Create New Diagram」を選び、図のテンプレートを選びます。ここで「Engineering → Electrical 1」を選ぶと、抵抗やコンデンサ、オペアンプやトランジスタの図が左サイドバーに表示されるので、すぐに回路図を描き始められます。

図の描き方はここでは説明しません。わりと直感的に描けるので、そんなに困らないと思います。

回路図をWordPressで表示する

以下の手順で、draw.ioで作成した図をWordPressで表示できます。手順はdraw.io公式の記事にある通りです。

1. 右クリックして「Select All」を選び、右サイドバーの「Text → Formatted Text」のチェックを外す。
2. 右クリックして「Select Vertices」を選び、右サイドバーの「Text → Word Wrap」のチェックを外す。
3. 「File → Embed → SVG…」を選ぶ。
4. 「Lightbox」のチェックを外して、「Embed」を押し、「Copy」を押してSVGのコードをコピーする。
5. コピーしたSVGをWordPressにカスタムHTMLとして貼る。

以下のように回路図が表示できます。