mcpField
D
drawio-architecture

drawio-architecture

github.com/full-stack-skills開発065 回インストール4 週間前に更新
リポジトリ

drawio-architecture について

drawio-architecture は Draw.io または diagrams.net で、アーキテクチャ図、デプロイ図、コンポーネント図を作成するスキルです。図の構成、テンプレート、出力形式に加え、共同編集やバージョン管理の方法も扱います。

主な機能

  1. 01アーキテクチャ図・デプロイ図の作成
  2. 02C4・UML・クラウド図形の利用
  3. 03レイヤーやコンテナーで図を整理
  4. 04PNG・SVG・PDF へのエクスポート
  5. 05図ファイルの保存と共同編集

活用シーン

  1. 01レビュー用にシステム構成を図示
  2. 02プロジェクト文書向けの図を出力
  3. 03リポジトリ上で .drawio 図を編集
  4. 04複雑なシステムを複数の図に整理

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/full-stack-skills/drawio-skills --skill drawio-architecture

インストール後、Claude Code で/drawio-architectureを入力して読み込まれたか確認します。

同梱ファイルagents/openai.yamlLICENSE.txt

詳細

このスキルを使用する場面

ユーザーが次のことを希望する場合は、このスキルを使用します。

  • Draw.io でシステムアーキテクチャ図、デプロイ図、コンポーネント図を作成する
  • ドキュメントやレビュー用に、エクスポート可能なベクター画像／PNG 画像を作成する
  • 共同編集やバージョン管理を行う（Confluence や、Git での .drawio ファイル管理など）

このスキルの使い方

  1. ツール：Draw.io デスクトップ版または diagrams.net を使用します。.drawio XML のほか、PNG／SVG／PDF へのエクスポートに対応しています。
  2. 内容：テンプレートや図形ライブラリ（C4、UML、クラウドコンポーネント）から選びます。スイムレーンやコンテナーを使って階層を表現します。
  3. 共同作業：Confluence、Google Drive、またはリポジトリに保存します。命名規則と凡例を統一します。

ベストプラクティス

  • 図ごとにテーマを一つに絞り、タイトルと凡例で記号の意味を説明します。
  • スタイル（色、フォント、矢印）を統一します。複雑なシステムは複数の図に分けて階層的に表現します。
  • エクスポート時は適切な解像度を選びます。ドキュメント内で参照する際は、「アーキテクチャ図」と更新日を明記します。

キーワード

draw.io, architecture diagram, C4, deployment diagram, アーキテクチャ図, デプロイ図, diagrams.net

コメント

Markdown 対応