draw.io」タグアーカイブ

回路図をdraw.ioで描いてWordPressで表示する方法

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

回路図を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として貼る。

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

4.7kΩ220μF100Ω10μF10μF9V0.047μF220μF1kΩB100ΩB8Ω0.5WLM386N-1Blue LED154236876.3mmStereo Jack