drawio のインダクタが使いにくいので使いやすいのを作った

はじめに

drawio ではインダクタだけ抵抗やキャパシタとは異なるスタイルの図形であるため，絶妙に使いにくいです．そこで，抵抗やキャパシタと同じ形式に合わせることで使いやすいインダクタの図形を作りました．

デフォルトのインダクタが使いにくい理由

まず，drawioではグリッドが 10 pt ずつ表示されます．そのため，各図形は 10 pt を基準に高さと横幅が決まると見やすく扱いやすいです．デフォルトの抵抗・キャパシタは 10 pt の定数倍で高さと横幅が決まります．しかし，インダクタはなぜか 8 pt という中途半端な値を高さを用いています．

加えて，抵抗・キャパシタは上図の高さ方向のちょうど真ん中に導線が生えていますが，インダクタは下側に生えています．以上2つの問題点を解消した図形を作成します．

新たに作ったインダクタの図形

drawio のインダクタの図形をベースに，高さと導線位置を調整したものがこちらです．

ソースコードは以下の通り．

<shape aspect="variable" h="14.07" name="Inductor 5" strokewidth="inherit" w="100">
  <connections>
    <constraint name="in" perimeter="0" x="0" y="0.5" />
    <constraint name="out" perimeter="0" x="1" y="0.5" />
  </connections>
  <foreground>
    <linejoin join="round" />
    <path>
      <move x="0" y="7" />
      <line x="18" y="7" />
      <arc large-arc-flag="0" rx="9" ry="9" sweep-flag="1" x="34" x-axis-rotation="0" y="4" />
      <arc large-arc-flag="0" rx="10" ry="10" sweep-flag="1" x="36" x-axis-rotation="0" y="12" />
      <arc large-arc-flag="0" rx="2" ry="2" sweep-flag="1" x="32" x-axis-rotation="0" y="12" />
      <arc large-arc-flag="0" rx="10" ry="10" sweep-flag="1" x="34" x-axis-rotation="0" y="4" />
      <arc large-arc-flag="0" rx="11" ry="12" sweep-flag="1" x="50" x-axis-rotation="0" y="4" />
      <arc large-arc-flag="0" rx="10" ry="10" sweep-flag="1" x="52" x-axis-rotation="0" y="12" />
      <arc large-arc-flag="0" rx="2" ry="2" sweep-flag="1" x="48" x-axis-rotation="0" y="12" />
      <arc large-arc-flag="0" rx="10" ry="10" sweep-flag="1" x="50" x-axis-rotation="0" y="4" />
      <arc large-arc-flag="0" rx="11" ry="12" sweep-flag="1" x="66" x-axis-rotation="0" y="4" />
      <arc large-arc-flag="0" rx="10" ry="10" sweep-flag="1" x="68" x-axis-rotation="0" y="12" />
      <arc large-arc-flag="0" rx="2" ry="2" sweep-flag="1" x="64" x-axis-rotation="0" y="12" />
      <arc large-arc-flag="0" rx="10" ry="10" sweep-flag="1" x="66" x-axis-rotation="0" y="4" />
      <arc large-arc-flag="0" rx="9" ry="9" sweep-flag="1" x="82" x-axis-rotation="0" y="7" />
      <line x="100" y="7" />
    </path>
    <stroke />
  </foreground>
</shape>

GitHubからダウンロードできます．

参考文献

• Create and edit complex custom shapes https://www.drawio.com/doc/faq/shape-complex-create-edit