drawio-architecture-skill は何をしますか？
🖋️ Claude Code で draw.io を使用して、カスタマイズ可能なスタイルとマルチフォーマットエクスポートでプロフェッショナルなアーキテクチャ図、システム図、UML 図を作成します。
概要
このスキルは、Claude Code エージェント環境で draw.io とのシームレスな連携を提供し、高品質な図の生成、編集、エクスポートを可能にします。
主な機能
- 図の作成: 自然言語の指示からアーキテクチャ図、システム図、UML 図を生成
- スタイルカスタマイズ: 色、フォント、レイアウトなどのスタイルを柔軟に設定可能
- マルチフォーマットエクスポート: PNG、SVG、PDF、HTML など複数形式に対応
- 既存図の編集: 既存の draw.io ファイル (.drawio/.dio) を読み込み、更新
- テンプレート管理: 一般的なアーキテクチャパターンのテンプレートをサポート
使用方法
- 新しい図を作成する
@drawio create diagram "マイクロサービスアーキテクチャ"
- 既存の図を編集する
@drawio edit diagram path/to/diagram.drawio
- 図をエクスポートする
@drawio export diagram path/to/diagram.drawio --format svg
設定
環境変数:
DRAWIO_BINARY_PATH: draw.io 実行ファイルのパス（省略時はシステム PATH から検索）DRAWIO_OUTPUT_DIR: 出力ディレクトリ（デフォルト: ./output）
サポートされる要素
| 要素タイプ | 説明 |
|---|---|
| コンテナ | サービスバウンダリ、レイヤー、ゾーン |
| コンポーネント | 個々のサービス、データベース、キャッシュ |
| コネクタ | 矢印、関係線、データフロー |
| 注釈 | テキスト注釈、吹き出し |
例
マイクロサービス図の作成:
@drawio create diagram "注文処理システム" \
--style microservices \
--include "API Gateway, Order Service, Payment Service, Inventory Service, Database"
UML クラス図の作成:
@drawio create diagram "ユーザーモデル" \
--type class \
--classes "User, Account, Profile"
注意事項
- draw.io デスクトップアプリケーションまたは CLI 版（drawio-desktop に同梱）が必要です
- 大量の要素を含む図ではパフォーマンスに影響が出る場合があります
- エクスポート形式によって一部のスタイルが異なる場合があります
ライセンス
MIT