メニュー
Create and edit draw.io diagrams in XML format. Use when the user wants to create flowcharts, architecture diagrams, sequence diagrams, or any visual diagrams. Handles XML structure, styling, fonts (Noto Sans JP), arrows, connectors, and PNG export.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Backward-compatible wrapper skill. The current workflow is `gh-fix-pr`.
Inspect GitHub PR for CI failures, merge conflicts, update-branch requirements, reviewer comments, change requests, and unresolved review threads. Create fix plans and implement after user approval. Reply to ALL reviewer comments with action taken or reason for not addressing, then resolve threads. Notify reviewers after fixes.
Create or update GitHub Pull Requests with the gh CLI, including deciding whether to create a new PR or only push based on existing PR merge status. Use when the user asks to open/create/edit a PR, generate a PR body/template, or says 'PRを出して/PR作成/gh pr'. Defaults: base=develop, head=current branch (same-branch only; never create/switch branches).
Comprehensive toolkit for designing and implementing CLI applications with OpenTUI and SolidJS. Use when building CLI screens/components, debugging input handling, implementing screen navigation, handling mouse events, or optimizing CLI performance.
GitHub Spec Kit (https://github.com/github/spec-kit) を使って要件定義や仕様作成（仕様策定・仕様書作成・仕様設計を含む）を新規作成または既存仕様へ追記し、spec.md/plan.md/tasks.mdまで生成・更新する。要件定義、要件追加/変更、TDD前提の要件整理、仕様の明文化、Spec Kitのspecify/clarify/plan/tasksフロー実行が求められるときに使用。
GitHub Spec Kit (https://github.com/github/spec-kit) のベースバージョン更新やテンプレート/スクリプト同期を行うための手順。Spec Kitの更新、上流リリースとの差分適用、templates/commands/scriptsの取り込み、ローカル運用（日本語化・ブランチ非操作・SPEC-[UUID8桁]）の維持が必要なときに使用する。
| name | drawio |
| description | Create and edit draw.io diagrams in XML format. Use when the user wants to create flowcharts, architecture diagrams, sequence diagrams, or any visual diagrams. Handles XML structure, styling, fonts (Noto Sans JP), arrows, connectors, and PNG export. |
draw.ioファイル（.drawio）をXML形式で直接作成・編集するためのスキル。
<mxfile host="app.diagrams.net" modified="2024-01-01T00:00:00.000Z" agent="Claude" version="21.0.0">
<diagram name="Page-1" id="page-1">
<mxGraphModel dx="1000" dy="600" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0" defaultFontFamily="Noto Sans JP">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<!-- 図形要素をここに追加 -->
</root>
</mxGraphModel>
</diagram>
</mxfile>
<mxCell id="rect-1" value="ラベル" style="rounded=0;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="rounded-1" value="ラベル" style="rounded=1;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;arcSize=20;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="120" height="60" as="geometry" />
</mxCell>
<mxCell id="ellipse-1" value="ラベル" style="ellipse;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="120" height="80" as="geometry" />
</mxCell>
<mxCell id="diamond-1" value="条件" style="rhombus;whiteSpace=wrap;html=1;fontFamily=Noto Sans JP;fontSize=18;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="100" height="100" as="geometry" />
</mxCell>
<mxCell id="text-1" value="テキスト" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontFamily=Noto Sans JP;fontSize=18;" vertex="1" parent="1">
<mxGeometry x="100" y="100" width="120" height="30" as="geometry" />
</mxCell>
<mxCell id="arrow-1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Noto Sans JP;fontSize=14;" edge="1" parent="1" source="rect-1" target="rect-2">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="arrow-2" value="ラベル" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Noto Sans JP;fontSize=14;" edge="1" parent="1" source="rect-1" target="rect-2">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="arrow-3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;fontFamily=Noto Sans JP;fontSize=14;" edge="1" parent="1" source="rect-1" target="rect-2">
<mxGeometry relative="1" as="geometry" />
</mxCell>
mxGraphModelにdefaultFontFamily="Noto Sans JP"を設定fontFamily=Noto Sans JP;を明示的に追加| 項目 | 推奨値 | 説明 |
|---|---|---|
| fontSize | 18 | 標準の1.5倍、視認性向上 |
| 日本語テキスト幅 | 30-40px/文字 | レイアウト計算用 |
| 矢印とラベル間隔 | 20px以上 | 重なり防止 |
fillColor=#ffffff; # 塗りつぶし色
strokeColor=#000000; # 枠線色
fontColor=#333333; # 文字色
| 用途 | 色コード |
|---|---|
| 白背景 | #ffffff |
| 薄い青 | #dae8fc |
| 薄い緑 | #d5e8d4 |
| 薄い黄 | #fff2cc |
| 薄い赤 | #f8cecc |
| 薄いグレー | #f5f5f5 |
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<!-- 1. 矢印・コネクタ（最背面） -->
<mxCell id="arrow-1" ... edge="1" ... />
<mxCell id="arrow-2" ... edge="1" ... />
<!-- 2. 図形（中間） -->
<mxCell id="rect-1" ... vertex="1" ... />
<mxCell id="rect-2" ... vertex="1" ... />
<!-- 3. テキストラベル（最前面） -->
<mxCell id="text-1" ... vertex="1" ... />
</root>
Dockerコンテナ環境では、xvfb経由でヘッドレス実行するdrawio-exportコマンドを使用：
drawio-export -x -f png -s 2 -t -o output.png input.drawio
ディスプレイ環境がある場合：
drawio -x -f png -s 2 -t -o output.png input.drawio
| オプション | 説明 |
|---|---|
| -x | エクスポートモード |
| -f png | PNG形式（svg, pdf, vsdx等も可） |
| -s 2 | 2倍スケール（高解像度） |
| -t | 透明背景 |
| -o | 出力ファイル指定 |
| -p | ページ番号（0から開始） |
| -b | ボーダーサイズ |
# 基本的なPNG出力
drawio-export -x -f png -o diagram.png diagram.drawio
# 高解像度（2倍スケール）+ 透明背景
drawio-export -x -f png -s 2 -t -o diagram@2x.png diagram.drawio
# SVG出力
drawio-export -x -f svg -o diagram.svg diagram.drawio
# 全ページをまとめてPDF出力
drawio-export -x -f pdf -o diagram.pdf diagram.drawio
作成後、以下を確認：
基本テンプレートは references/templates/basic.drawio を参照。