show-me-diagram

ユーザーがブラウザーで開く、トピックを示す図を1つ作成してください。この図はユーザー自身の理解のためのものです。そのため、ほかのエージェントに説明するだけなら、プレーンテキストを使ってください。

1. **diagram-design スキルを読み込み、**作成時にはその指示に従ってください。上流で変更されるため、そのルールを言い換えたり、置き換えたりしないでください。
2. ユーザーが指定したプロファイルを使用し、指定がなければデフォルトを使用してください。 このファイルの隣にある profiles/ からそのプロファイルを読み込み、この図では diagram-design のスタイルガイドに加えて、そのプロファイルの選択内容を適用してください。ほかのプロジェクトと共有されるため、diagram-design のインストール先やプロファイルライブラリには保存しないでください。
3. 要点に合った図の種類を選んでください。 diagram-design に記載されている種類から選びます。プロセスにはフローチャートまたはシーケンス図、ステータスにはステートマシン、構造にはツリーまたはレイヤースタック、進捗にはタイムラインが適しています。要点ごとに図を1つ作成してください。ノードが約9個を超える場合は、分割してください。
4. 表示する前に、境界線を確認してください。 塗りつぶしのたびに、その隣にある各アウトラインを描画してください。後から描かれた塗りつぶしが先に描かれた境界線の半分を覆ってしまうため、焦点となるアウトラインはSVGの最後に配置してください。1pxの線は1倍で表示すると2ピクセルにまたがってぼやけるため、2倍でエクスポートするか、スクリーンショットを撮ってください。拡大して、すべての境界線が全辺で同じ太さになっていることを確認してください。
5. **ファイルをユーザーが開けるようにし、**図が示す内容を1～2行で説明してください。要点は図で伝わるため、ほかの返信は簡潔にしてください。

参考資料

• profiles/index.md：各プロファイル、デフォルトのプロファイル、すべてのプロファイルで塗りつぶすレイヤー、プロファイルの確認方法。