메뉴
Always use when user asks to create, generate, draw, or design a diagram, flowchart, architecture diagram, ER diagram, sequence diagram, class diagram, network diagram, or mentions draw.io, drawio, .drawio files. Use for complex diagrams where Mermaid is insufficient.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
ClaudeDesign（claude.ai/design）とClaude Codeの連携。DesignSyncツールで デザインプロジェクトからプロトタイプHTML等を取得（インポート）、または ローカルのコンポーネントをデザインシステムプロジェクトへ同期（プッシュ）する。 「ClaudeDesignからデザインを取得して」「claude.ai/design のURLを取り込んで」 「デザインプロジェクトに同期して」「デザインシステムをプッシュして」 などのリクエスト、または claude.ai/design のURLが渡されたときに使用する。 取得したデザインのコード実装への適用は apply-design を使う。
詳細設計書の一括生成。2つのモードを自動判定する: (A) コード分析モード: 既存コードから詳細設計書を逆生成する（init-spec + spec-all 完了後） (B) 設計書ファーストモード: 要件定義書から詳細設計書を新規作成する（コードなし） 「詳細設計を作って」「設計書を完成させて」「実装に必要な設計書を全部作って」 「他のエンジニアに渡せる設計書にして」などのリクエストで使用する。
既存プロジェクトの初期セットアップ（初回のみ）。コードリポジトリを分析してCLAUDE.md、要件概要、 基本設計書（アーキテクチャ、DB設計、API設計）、OpenAPI仕様、MkDocs設定を自動生成する。 「このプロジェクトをセットアップして」「既存コードを分析して」「設計書を初期化して」 「プロジェクトの構造を把握して」などのリクエストで使用する。 既にドキュメントがある場合は移行モードで差分だけ補完する。 ※ 既存Specの全更新・再生成には spec-all を使う。
全機能の一括Spec化・一括更新。PM として並列サブエージェントにコード分析を委任し、 結果を統合して全機能の要件定義書を一括生成・更新する。 「全部のSpecを作って」「設計書を全部作って」「全機能をドキュメント化して」 「要件定義を全て更新して」「Specを全部更新して」などのリクエストで使用する。 個別のSpec化には spec-feature を使う。init-specは初期セットアップ専用。
既存機能のSpec化。実装済みコードを分析して要件定義書を逆生成する。 spec-map.yml にコードとSpecの対応関係を記録する（コード変更なし）。 「ツイート機能のSpecを作って」「認証周りをドキュメント化して」「既存の○○機能を設計書にして」 「この機能の要件を整理して」「○○の仕様を分析して」などのリクエストで使用する。 既に動いているコードからドキュメントを起こすときに使う。新規機能にはdraft-specを使う。 コード変更後のドキュメント追従にはupdate-docsを使う。
コード変更からドキュメントを追従更新する。設計書ファースト原則の例外措置。 やむを得ず先にコードを変更した場合にのみ使用する。 「さっきの変更をドキュメントに反映して」「設計書を最新にして」 「コードと設計書がズレてるから直して」「ドキュメントを最新化して」 「ドキュメント更新して」「設計書を現状に合わせて」などのリクエストで使用する。 通常はドキュメントを先に更新してからコードを修正すること（revise-specを使う）。
| name | drawio |
| description | Always use when user asks to create, generate, draw, or design a diagram, flowchart, architecture diagram, ER diagram, sequence diagram, class diagram, network diagram, or mentions draw.io, drawio, .drawio files. Use for complex diagrams where Mermaid is insufficient. |
draw.io の .drawio ファイルを生成し、MkDocs ドキュメントに埋め込む。
Mermaid では表現しにくい複雑なアーキテクチャ図・詳細ダイアグラムに使用する。
| 用途 | ツール | 理由 |
|---|---|---|
| シンプルなフロー・シーケンス図 | Mermaid | テキストベースで差分追跡しやすい |
| 複雑なアーキテクチャ図 | draw.io | レイアウト自由度・アイコン豊富 |
| ER図（テーブル少数） | Mermaid | 簡潔に書ける |
| ER図（テーブル多数・リレーション複雑） | draw.io | 配置の自由度が必要 |
| ネットワーク構成図・インフラ図 | draw.io | AWS/GCP等のアイコンが使える |
| 画面遷移図（多数ページ） | draw.io | 配置の自由度が必要 |
drawio ファイルを MkDocs で描画するには mkdocs-drawio プラグインが必要。
mkdocs.yml の plugins: セクションに - drawio が含まれていることを確認し、
なければ追加してから図を作成する。
plugins:
- search
- drawio # ← これが必要
plugins: に - drawio があるか確認（なければ追加）.drawio ファイルを書き出す （mkdocs-drawio プラグインが描画）docs/images/ 配下[内容]-[種別].drawio（例: aws-architecture.drawio, order-flow-detail.drawio）
 <!-- ページ名指定 -->
{ page="Page-2" } <!-- attr_list でページ指定 -->
<mxGraphModel adaptiveColors="auto">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<!-- ここに図の要素を配置。parent="1" -->
</root>
</mxGraphModel>
<!-- -->) は絶対に含めない&, <, >, "mxCell に一意の id を付与id="0"（ルート）と id="1"（デフォルトレイヤー、parent="0"）は必須<mxGeometry relative="1" as="geometry" /> を含める（自己閉じタグの edge は描画されない）html=1; をスタイルに必ず含める（ないと <font> タグが生テキストで表示される）XML の記述順で前面/背面が決まる（後に書いたものが前面）。以下の順序を厳守:
アイコンが矢印の裏に隠れると接続関係が見えなくなるため、アイコンは必ずエッジの後に定義する。
グループの子にするとグループと同じ z-order 層になり、エッジより背面に描画される。 アイコンをエッジより前面に出すには、parent="1"（ルート直下）に配置し絶対座標を使う:
<!-- 1. グループ（背面） -->
<mxCell id="vpc" value="VPC" style="swimlane;..." vertex="1" parent="1">
<mxGeometry x="50" y="100" width="600" height="400" as="geometry"/>
</mxCell>
<!-- 2. エッジ（中間） -->
<mxCell id="e1" edge="1" parent="1" source="ec2" target="rds" style="...">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<!-- 3. アイコン（前面、絶対座標で配置） -->
<mxCell id="ec2" value="EC2" style="shape=mxgraph.aws4.fargate;..." vertex="1" parent="1">
<mxGeometry x="70" y="160" width="40" height="40" as="geometry"/>
</mxCell>
詳細なレイアウト設計原則・グリッドベース配置・重なり禁止ルールは references/layout-rules.md を参照。
詳細なAWSアイコン・カラー定義は references/aws-icons.md を参照。
詳細なコンテナ・エッジ・ダークモード・エクスポートは references/style-reference.md を参照。
詳細なスタイル・レイアウトリファレンス: https://github.com/jgraph/drawio-mcp/blob/main/shared/xml-reference.md