Diagram Designスキルで機器構成図を作成

hitoshi@namaraii.com (竹内仁 (TAKEUCHI Hitoshi)) — Fri, 11 Sep 2026 08:07:14 +0900

Macと周辺機器の接続を整理しMermaidで覚え書きでMacと周辺機器の接続を図にしたが、そこから構成も変わっており、またDiagram Designスキルを試してみたかったので、新しく機器構成図を作ってみることにした。

Diagram Designスキルは、Claude CodeやCodexなどのAIエージェント向けの図解生成スキル。汎用的な「角丸ボックス＋派手なグラデーション」ではなく、情報を削ぎ落とした編集デザイン品質の図を、自己完結型の HTML + インラインSVG として生成する。

ということなので、以下のシンプルなプロンプトで図を描いてもらった。使用したモデルはGPT-5.6(sol)です。

機器の構成図を作ってください

EV3895のUSBハブに以下の機器を接続
MOTU M4
Stream Deck+
ドングル(Logi Bolt)
ドングル(Keychron)

EV3895のアップストリームに以下の機器を接続
Mac mini
PC (Omarchy)

MOTU M4へ以下を接続
AT2020

ドングル(Logi Bolt)へ以下を接続
MX MASTER3s Advanced

ドングル(Keychron)へ以下を接続
Keychron K2 Max

出力形式を指定しなかったため、デフォルトのHTML+SVGで出力されてしまったので「MOTU M4だけがUSBハブ接続しているように見えるので修正し、図のみをPNGで出力してください」で、出てきたのが以下の図です。

以前、CodexにMermaidで描いてもらった機器構成図がこちら。

graph LR

 subgraph EV3895["EIZO EV3895"]
 HUB["内蔵KVM"]
 end

 WIN["Windows PC"] -->|アップストリーム| EV3895
 MAC["Mac mini"] -->|アップストリーム| EV3895

 HUB --> SCAN["HHKB Studio"]
 HUB --> Slimblade["SlimBlade Pro "]
 HUB --> CAM["Webカム"]
 HUB --> MOTU["MOTU M4"]

 MAC --> ANKER["Anker 675"]
 ANKER --> IRIG["iRig Mic Cast HD"]
 ANKER --> BENQ["BENQ ScreenBar"]

 MAC --> HDD["HDD (Time Machine)"]
 MAC --> CO2["CO₂センサー"]
 MAC --> SSD["SSD (X10 Pro)"]

関係性を把握する上ではMermaidの方でも問題ないが、Diagram Designスキルのほうが図として美しい。

Diagram Design on namaraii.com

Diagram Designスキルで機器構成図を作成