Diagram Designスキルで機器構成図を作成
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スキルのほうが図として美しい。