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スキルのほうが図として美しい。
原本はHTML+SVGに残っているので今後、機器構成が変更になった際は、それをインプットにして修正を依頼してみる。




