diagram-maker

図の作成

文章ではなく、成果物として図を作成します。出力モードを1つ選択してください。

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

出力先の選択

• ユーザーが編集可能な図や共同作業を希望する場合：Excalidrawを選択します。
• ユーザーが洗練された単体のブラウザー出力を希望する場合：SVG／HTMLを選択します。
• インフラコンポーネントを含むソフトウェアアーキテクチャの場合：architecture SVGを選択します。
• 科学、製品、プロセス、概念マップ、物理的なオブジェクトの場合：clean SVGを選択します。
• 判断に迷った場合：出力形式が重要なときに限り、短い質問を1つだけします。それ以外の場合はclean SVGを選択します。

ワークフロー

1. ノード、グループ、ラベル、方向付きの関係を抽出します。
2. まずレイアウトを選びます：左から右、上から下、ハブ＆スポーク、スイムレーン、階層型スタック、シーケンス。
3. ラベルは短くします。密度の高い図よりも、主要な要素を5～9個にまとめることを優先します。
4. 指定されたパスにファイルを生成します。指定がない場合は ./diagram.html または ./diagram.excalidraw に生成します。
5. 可能であれば、開く／解析することで構文を検証します。

SVG／HTML のルール

• CSSとSVGをインラインで含む、単独で動作する.htmlファイルを1つ作成します。
• 外部フォント、JS、画像、グラデーション、光彩、装飾的なブロブ、リモートアセットは使用しません。
• 虹色の配列ではなく、意味に基づく色を使用します：中立、入力、処理、ストレージ、外部、リスク。
• コネクタはノードより先に描画し、矢印がボックスの背後に表示されるようにします。
• すべてのコネクタパスに fill="none" を指定し、方向がある場合はマーカー矢印を付けます。
• ボックス内のテキストには24pxの余白を設け、枠線に接触させないでください。
• シンボルや色だけでは意味が明らかでない場合に限り、凡例を付けます。

SVGテンプレート

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

Excalidrawのルール

• type、version、source、elements、appState を含む .excalidraw JSONを保存します。
• 図形ラベルにはバインドされたテキストを使用します。標準外の label プロパティは使用しないでください。
• 要素配列では、バインドされたテキストをコンテナーの直後に置きます。
• ラベル付き図形の最小サイズは120x60です。本文テキストの最小サイズは16pxです。
• roughnessには 1、fontFamilyには 1 を使用し、塗りつぶしはシンプルにします。

Excalidrawの要素スニペットを正確に確認するには、references/excalidraw-patterns.md を読んでください。