ダイアグラムメーカー

ダイアグラムメーカー は何をしますか？

図を散文ではなくアーティファクトとして作成します。次の出力モードのいずれかを選択してください：

• clean-svg: 教育的な概念、物理システム、プロセス、ライフサイクル、シンプルなデータフロー。
• architecture-svg: ソフトウェア/クラウド/インフラのトポロジー、サービス、データベース、キュー、トラストゾーン。
• excalidraw: 編集可能な手描きホワイトボード、フローチャート、シーケンス、アーキテクチャスケッチ。

選択基準

• ユーザーが編集可能/共同作業を希望する場合：Excalidraw を選択。
• ユーザーが洗練されたスタンドアロンブラウザ出力を希望する場合：SVG/HTML を選択。
• インフラコンポーネントを含むソフトウェアアーキテクチャの場合：アーキテクチャ SVG を選択。
• サイエンス、製品、プロセス、コンセプトマップ、物理オブジェクトの場合：クリーン SVG を選択。
• 不明な場合：出力形式が重要になる場合にのみ短い質問を1つ行い、それ以外はクリーン SVG を選択。

ワークフロー

1. ノード、グループ、ラベル、および有向関係を抽出します。
2. 最初にレイアウトを選択します：左から右、トップダウン、ハブアンドスポーク、スイムレーン、レイヤードスタック、シーケンス。
3. ラベルは短く保ちます。密集した図よりも5〜9個の主要要素を優先します。
4. 要求されたパス、または ./diagram.html / ./diagram.excalidraw にファイルを生成します。
5. 可能な場合は開く/解析して構文を検証します。

SVG/HTML ルール

• インラインCSSとインラインSVGを含む単一のスタンドアロン .html ファイル。
• 外部フォント、JS、画像、グラデーション、グロー、装飾的なブロブ、リモートアセットは使用禁止。
• 虹色の順序ではなく、意味論的な色を使用：ニュートラル、入力、プロセス、ストレージ、外部、リスク。
• コネクタをノードの前に描画し、矢印がボックスの後ろに来るようにします。
• すべてのコネクタパスは fill="none" を持ち、有向の場合はマーカー矢印を持ちます。
• ボックス内部に24pxのテキストパディングを確保し、テキストが境界線に接触しないようにします。
• 凡例は、記号や色が明らかでない場合にのみ追加します。

SVG テンプレート

ラッパーとして references/svg-template.md を使用し、<!-- SVG --> を置き換えます。

Excalidraw ルール

• .excalidraw JSON を type、version、source、elements、appState と共に保存します。
• シェイプラベルにはバウンドテキストを使用します。非標準の label プロパティは使用しないでください。
• バウンドテキストは、そのコンテナの直後に elements 配列内に配置します。
• ラベル付きシェイプの最小サイズ：120x60。本文テキストの最小サイズ：16px。
• ラフネス 1、fontFamily: 1、およびシンプルな塗りつぶしを使用します。

正確な Excalidraw 要素スニペットについては、references/excalidraw-patterns.md を参照してください。