ユーザーが図表、フローチャート、アーキテクチャ図、ER図、UML/シーケンス/クラス図、ネットワークトポロジ、ML/DLモデル図（Transformer/CNN/LSTM）、マインドマップ、またはあらゆる可視化を要求した場合に使用します。また、3つ以上のコンポーネントや複雑なデータフロー、視覚的表現が有効な関係性を説明する際に積極的に使用します。カスタムスタイリング、豊富な図形ボキャブラリ、スイムレーン、エクスポート可能な画像（PNG/SVG/PDF/JPG）が必要な図に最適です。.drawio XMLを生成し、ネイティブのdraw.ioデスクトップCLIを介してローカルにエクスポートします。
このスキルは、AIエージェント（Claude Code、Coder、Cursorなど）がユーザーの要求に応じてプロフェッショナルな図表を生成・エクスポートできるようにします。フローチャート、アーキテクチャ図、ER図、UML図（シーケンス、クラス）、ネットワークトポロジ、機械学習/ディープラーニングモデルの図（Transformer、CNN、LSTM）、マインドマップなど、多様な図表タイプをサポートします。このスキルは、複雑なシステムやデータフローを説明する際に、カスタムスタイリングやスイムレーンを使用した豊富な図形表現が求められる場面で特に有効です。動作の仕組みとしては、エージェントがdraw.ioのネイティブXML形式で図の定義を生成し、ローカルにインストールされたdraw.ioデスクトップCLIを呼び出して、PNG、SVG、PDF、JPGなどの一般的な画像形式にエクスポートします。これにより、AIエージェントとユーザーのワークフローにシームレスに統合された、高品質でエクスポート可能な図表が実現します。
npx skills add https://github.com/agents365-ai/365-skills/tree/main/skills/drawio-skillInstalled? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
ユーザーが図表、フローチャート、アーキテクチャ図、ER図、UML / シーケンス / クラス図、ネットワークトポロジ、ML/DLモデル図（Transformer/CNN/LSTM）、マインドマップ、またはあらゆる可視化を要求した場合に使用します。また、3つ以上のコンポーネントや複雑なデータフロー、視覚的表現が有効な関係性を説明する際に積極的に使用します。カスタムスタイリング、豊富な図形ボキャブラリ、スイムレーン、エクスポート可能な画像（PNG/SVG/PDF/JPG）が必要な図に最適です。.drawio XMLを生成し、ネイティブのdraw.ioデスクトップCLIを介してローカルにエクスポートします。
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.