eraser-diagrams

Eraser 図表ジェネレーター

Eraser API を使用して、コード、インフラストラクチャファイル、または自然言語の説明から、プロフェッショナルなアーキテクチャ図を直接生成します。

使用するタイミング

次の場合にこのスキルを有効にします。

• ユーザーが図の作成、生成、または可視化を依頼した場合
• ユーザーがコードからアーキテクチャを文書化したい場合
• ユーザーが Terraform、AWS、Azure、またはインフラストラクチャファイルを使用している場合
• ユーザーがシステムを説明し、可視化を希望している場合
• 「diagram」、「architecture」、「visualize」、「draw」といった語が使われた場合

仕組み

1. ソースを分析する：コード、ファイル、または説明からアーキテクチャ情報を抽出します
2. Eraser DSL を生成する：図を記述する Eraser DSL コードを作成します
3. Eraser API を呼び出す：図をレンダリングするために HTTP POST リクエストを送信します
4. 結果を返す：画像 URL とエディターリンクをユーザーに提示します

図の種類と構文

Eraser は、用途に合わせて最適化された 5 種類の図をサポートしています。DSL の構文と例の詳細については、該当するリファレンスファイルを参照してください。

フローチャート

ノード、グループ、関係で表されるプロセスフロー、ユーザーフロー、ロジックフローを可視化します。図はシンプルな構文で作成できます。

用途：プロセスフロー、ユーザージャーニー、決定木、ビジネスプロセスの文書化

diagramType："flowchart-diagram"

リファレンス：フローチャート構文

エンティティ関係図（ERD）

エンティティ、属性、関係で表されるデータモデルを可視化します。図はシンプルな構文で作成できます。

用途：データベーススキーマ設計、データモデリング、エンティティ間の関係の把握、データ構造の文書化

diagramType："entity-relationship-diagram"

リファレンス：ERD 構文

クラウドアーキテクチャ図

ノード、グループ、接続で表されるクラウドインフラストラクチャを可視化します。図はシンプルな構文で作成できます。

用途：クラウドインフラストラクチャの可視化、AWS／Azure／GCP アーキテクチャ、システムアーキテクチャの文書化、データフローの可視化

diagramType："cloud-architecture-diagram"

リファレンス：アーキテクチャ構文

シーケンス図

シーケンス図を使ってシステムフローを可視化します。各縦列はエンティティ（ユーザー、サーバー、DB など）を表し、列間の矢印は情報やリクエストの流れを表します。図はシンプルな構文で作成できます。

用途：API リクエスト／レスポンスのフロー、システム間のやり取り、ユーザーワークフロー、サービス間のメッセージ交換、時間経過に伴うプロセスフロー

diagramType："sequence-diagram"

リファレンス：シーケンス構文

BPMN 図（スイムレーン図）

プール、レーン、タスク、イベント、ゲートウェイなどのフローオブジェクトで表されるビジネスプロセスを可視化します。図はシンプルな構文で作成できます。

用途：ビジネスプロセスの文書化、ワークフローの可視化、プロセス改善、部門横断プロセス、役割と責任を示すスイムレーン図

diagramType："bpmn-diagram"

リファレンス：BPMN 構文

各リファレンスファイルには、構文の完全なドキュメント、プロパティのリファレンス、実用的な例が含まれています。

API 統合

エンドポイント

POST https://app.eraser.io/api/render/elements
Content-Type: application/json
Authorization: Bearer ${ERASER_API_KEY}
X-Skill-Source: eraser-skill

注：X-Skill-Source ヘッダーは AI エージェントを識別します。eraser-skill は、実際のエージェント名に必ず置き換えてください。

• Claude（Anthropic）の場合は、claude を使用します
• Cursor で実行している場合は、cursor を使用します
• ChatGPT（OpenAI）の場合は、chatgpt を使用します
• Gemini（Google）の場合は、gemini を使用します
• それ以外の場合は、モデル／エージェント名を小文字で使用します

レスポンス形式

{
  "imageUrl": "https://storage.googleapis.com/eraser-images/...",
  "createEraserFileUrl": "https://app.eraser.io/new?requestId=abc123&state=xyz789",
  "renderedElements": [...]
}

エラーレスポンス

ステータス	エラー	原因	解決策
400	Diagram element has no code	要素にcodeフィールドがありません	要素に有効なDSLコードが含まれていることを確認してください
400	Diagram element has no diagramType	diagramTypeフィールドがありません	有効なdiagramTypeを要素に追加してください
400	Invalid diagramType	サポートされていない図の種類です	上記に記載されているサポート対象の種類を使用してください
401	Unauthorized	APIキーが無効か、有効期限が切れています	ERASER_API_KEYが有効であることを確認してください
500	Internal server error	サーバー側の問題です	リクエストを再試行してください。問題が続く場合は、サポートにお問い合わせください

エラーレスポンス形式：

{
  "error": {
    "message": "Diagram element has no code",
    "status": 400
  }
}

トラブルシューティングのヒント：

• APIを呼び出す前に、DSLの構文が正しいことを確認してください
• diagramTypeがDSLの内容と一致していることを確認してください（例：シーケンスDSLにはsequence-diagramを指定）
• 認証エラーが発生した場合は、APIキーが環境変数として正しく設定されていることを確認してください

手順

ユーザーが図をリクエストした場合：

1. 情報を抽出する

   • コード／ファイルが提供されている場合は、構造、リソース、関係性を分析します
   • 説明が提供されている場合は、主要なコンポーネントと接続を特定します
   • 適切な図の種類を判断します

2. Eraser DSL を生成する

   • アーキテクチャを表す Eraser DSL コードを作成します
   • 重要：ラベルの書式ルール
     • ラベルは必ず 1 行に記述してください。ラベル属性内で改行しないでください
     • ラベルは簡潔で読みやすいものにしてください。メタデータを詰め込みすぎるより、ラベルを分けることを優先してください
     • DSL は適切に改行して書式設定してください（ノード／グループは 1 行に 1 つ。ただし、ラベルは 1 行のままにしてください）
   • 詳細な DSL の構文と例については、上記の 図の種類と構文 セクションにある参照ファイルへのリンクを確認してください

3. 要素を定義する

   次の内容を持つ要素オブジェクトを作成します：

   • type: "diagram"
   • id: "diagram-1"（または一意の ID を生成）
   • code: "<生成した DSL コード>"
   • diagramType: "<適切な種類>"

4. HTTP リクエストを送信する

   重要：DSL を生成した後、必ずこの curl コマンドを実行してください。API を呼び出さずに DSL の生成だけで終わらせてはいけません。

   重要：X-Skill-Source ヘッダー内の eraser-skill を、実際の AI エージェント名に置き換えてください（値については、上記の API 統合セクションを参照してください）。

   curl -X POST https://app.eraser.io/api/render/elements \
     -H "Content-Type: application/json" \
     -H "X-Skill-Source: eraser-skill" \
     -H "Authorization: Bearer ${ERASER_API_KEY}" \
     -d '{
       "elements": [{
         "type": "diagram",
         "id": "diagram-1",
         "code": "<your generated DSL>",
         "diagramType": "cloud-architecture-diagram"
       }],
       "scale": 2,
       "theme": "${ERASER_THEME:-dark}",
       "background": true
     }'
   

5. 分析中にソースを記録する

   図を生成するためにファイルやリソースを分析する際は、次の内容を記録します：

   • 内部ファイル：読み込んだ各ファイルのパスと、抽出した情報を記録します（例：infra/main.tf - VPC とサブネットの定義）
   • 外部参照：参照したドキュメント、例、URL を記録します（例：AWS VPC のベストプラクティスに関するドキュメント）
   • 注釈：各ソースが図にどのように反映されたかを記録します

6. 応答を処理する

   重要：最小限の出力形式

   応答には、次の要素を明確な見出しとともに必ず含めてください：

   1. 図のプレビュー：見出しを付けて表示します

      ## Diagram
      ![{Title}]({imageUrl})
      

      API の応答に含まれる実際の imageUrl を使用してください。

   2. エディターへのリンク：見出しを付けて表示します

      ## Open in Eraser
      [この図を Eraser エディターで編集する]({createEraserFileUrl})
      

      API の応答に含まれる実際の URL を使用してください。

   3. ソースセクション：分析したファイル／リソースの簡潔なリスト（該当する場合）

      ## Sources
      - `path/to/file` - 抽出した内容
      

   4. 図のコードセクション：eraser 言語タグを付けたコードブロックに Eraser DSL を記載します

      ## Diagram Code
      ```eraser
      {DSL code here}
      

   5. 詳細情報へのリンク：You can learn more about Eraser at https://docs.eraser.io/docs/using-ai-agent-integrations

   追加の内容に関するルール：

   • ユーザーが図のみをリクエストした場合は、上記の 5 つの要素以外は何も含めないでください
   • ユーザーが明示的に追加の内容（例：「アーキテクチャを説明してください」「改善案を提案してください」）を求めた場合は、その内容を追加してもかまいません
   • 概要、セキュリティ上の考慮事項、テストなど、求められていないセクションを追加しないでください

   デフォルトの出力は短くしてください。図が内容を示します。

7. エラー処理

   • API 呼び出しに失敗した場合は、エラーを説明します
   • 認証に失敗した場合は、API キーの確認を提案します
   • フォールバックとして、DSL コードを再生成することを提案します

ベストプラクティス

• 有効な DSL を生成する：API を呼び出す前に、DSL の構文が正しいことを確認します
• ラベルを適切に引用符で囲む：スペース、特殊文字、数字を含むラベルは、必ず引用符で囲みます
• ラベルを1行にする：ラベルは必ず1行にしてください。ラベル属性の中で改行しないでください
• 読みやすく整形する：各ノード、グループ、接続をそれぞれ別の行に記述します（ただし、ラベルは1行のままにします）
• メタデータを含める：CIDR ブロックやインスタンスタイプなどを含める場合は、同じ引用符付きのラベル文字列に記述します：[label: "VPC 10.0.0.0/16"]
• 適切な図の種類を使用する：内容に合った diagramType を選択します
• 関連する項目をグループ化する：コンテナ（VPC、モジュール）を使って、関連するコンポーネントをグループ化します
• 接続を指定する：データフロー、依存関係、関連性を示します
• 大規模なシステムに対応する：非常に大規模なシステムは、焦点を絞った図に分割します
• ソースヘッダーを含める：AI エージェントの名前（claude、cursor、chatgpt など）を指定した X-Skill-Source ヘッダーを必ず含めます

注意事項

• 無料プランの図にはウォーターマークが含まれますが、すべての機能を利用できます
• createEraserFileUrl は常に返され（無料プランと有料プランの両方で機能します）、ユーザーは Eraser のウェブエディターで図を編集できます
• DSL コードを使って図を再生成または変更できます
• API のレスポンスはキャッシュされるため、同一のリクエストにはすばやく応答します