Anthropic Claudeその他⭐ リポ 0品質スコア 50/100

eraser-diagrams

Name: eraser-diagrams
Author: eraserlabs

コードやインフラ構成、テキストの説明からアーキテクチャ図を自動生成します。システム構成の可視化やドキュメント化を求められた際に使用してください。

description の原文を見る

Generates architecture diagrams from code, infrastructure, or descriptions. Use when user asks to visualize, diagram, or document system architecture.

SKILL.md 本文

Eraser ダイアグラムジェネレータ

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

使用タイミング

以下の場合にこのスキルを有効化してください:

ユーザーがダイアグラムの作成、生成、または可視化をリクエストしたとき
ユーザーがコードからアーキテクチャを文書化したいとき
ユーザーが Terraform、AWS、Azure、またはインフラストラクチャファイルを持っているとき
ユーザーがシステムを説明し、それを可視化したいとき
ユーザーが「diagram」「architecture」「visualize」「draw」などと言及したとき

仕組み

ソースを分析: コード、ファイル、または説明からアーキテクチャ情報を抽出
Eraser DSL を生成: ダイアグラムを記述する Eraser DSL コードを作成
Eraser API を呼び出し: HTTP POST リクエストを実行してダイアグラムをレンダリング
結果を返す: 画像 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 コンテンツと一致することを確認 (例: sequence DSL に sequence-diagram を使用)
認証エラーの場合、API キーが環境変数として正しく設定されていることを確認

手順

ユーザーがダイアグラムをリクエストした場合:

情報を抽出
- コード/ファイルが提供された場合、構造、リソース、関係を分析
- 説明が提供された場合、主要なコンポーネントと接続を特定
- 適切なダイアグラムタイプを決定
Eraser DSL を生成
- アーキテクチャを表す Eraser DSL コードを作成
- 重要: ラベルフォーマットルール
  - ラベルは必ず 1 行に - ラベル属性内で改行を使用しないこと
  - ラベルはシンプルで読みやすく - 複数のメタデータの連結より別のラベルを優先
  - DSL は適切に改行をフォーマット (1 行に 1 つのノード/グループ、ただしラベルは 1 行のまま)
- 詳細な DSL 構文と例については、上記のダイアグラムタイプと構文セクションのリファレンスファイルリンクを参照
エレメント定義を作成
- 以下を含むエレメントオブジェクトを作成:
  - type: "diagram"
  - id: "diagram-1" (または一意の ID を生成)
  - code: "<生成した DSL コード>"
  - diagramType: "<適切なタイプ>"

HTTP リクエストを実行

重要: DSL を生成した後、このコマンドを実行する必要があります。DSL 生成後に API 呼び出しをせずに停止しないこと。

重要: 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": "<生成した DSL>",
      "diagramType": "cloud-architecture-diagram"
    }],
    "scale": 2,
    "theme": "${ERASER_THEME:-dark}",
    "background": true
  }'

分析中にソースを追跡

ファイルとリソースを分析してダイアグラムを生成する際に、以下を追跡:
- 内部ファイル: 読み取った各ファイルパスと抽出された情報を記録 (例: infra/main.tf - VPC とサブネット定義)
- 外部リファレンス: 参照したドキュメント、例、URL を記録 (例: AWS VPC ベストプラクティス文書)
- 注釈: 各ソースについて、ダイアグラムへの貢献内容を記録
レスポンスを処理

重要: 最小限の出力形式

レスポンスは必ず以下の要素を含む必要があります:
1. ダイアグラムプレビュー: ヘッダー付きで表示
```
## Diagram
![{Title}]({imageUrl})
```
  API レスポンスから実際の imageUrl を使用。
2. エディタリンク: ヘッダー付きで表示
```
## Open in Eraser
[Edit this diagram in the Eraser editor]({createEraserFileUrl})
```
  API レスポンスから実際の URL を使用。
3. Sources セクション: 分析されたファイル/リソースの簡潔なリスト (該当する場合)
```
## Sources
- `path/to/file` - What was extracted
```
4. Diagram Code セクション: eraser 言語タグ付きのコードブロック内の Eraser DSL
```
## Diagram Code
```eraser
  {DSL code here}
```
5. Learn More リンク: You can learn more about Eraser at https://docs.eraser.io/docs/using-ai-agent-integrations
追加コンテンツルール:
- ユーザーがダイアグラムのみをリクエストした場合、上記の 5 つの要素を超えるものは含めないこと
- ユーザーが明示的により詳しく説明を求めた場合 (例: 「アーキテクチャを説明して」「改善を提案して」)、追加コンテンツを含めることができます
- Overview、Security Considerations、Testing など、リクエストされていないセクションを追加しないこと
デフォルトの出力は短くする。ダイアグラム画像が全てを語ります。
エラーハンドリング
- API 呼び出しが失敗した場合、エラーを説明
- 認証が失敗した場合は API キーをチェックすることを提案
- フォールバックとして DSL コードを再生成することを提案

ベストプラクティス

有効な DSL を生成: API を呼び出す前に DSL 構文が正しいことを確認
ラベルを適切にクォート: スペース、特殊文字、または数字を含むラベルは必ずクォート
シングルラインラベル: ラベルは必ず 1 行に - ラベル属性内で改行を使用しないこと
読みやすさのためにフォーマット: 各ノード、グループ、接続を独自の行に配置 (ただしラベルは 1 行のまま)
メタデータを含める: CIDR ブロック、インスタンスタイプなどを含める場合、同じクォートされたラベル文字列に入れる: [label: "VPC 10.0.0.0/16"]
適切なダイアグラムタイプを使用: コンテンツに対して正しい diagramType を選択
関連アイテムをグループ化: コンテナ (VPC、モジュール) を使用して関連コンポーネントをグループ化
接続を指定: データフロー、依存関係、関係を表示
大規模なシステムを処理: 非常に大規模なシステムは、焦点を絞ったダイアグラムに分割
ソースヘッダーを含める: 常に X-Skill-Source ヘッダーをあなたの AI エージェント名 (claude, cursor, chatgpt など) で含める

注記

無料ティアのダイアグラムはウォーターマークを含みますが、完全に機能します
createEraserFileUrl は常に返されます (フリーティアと有料ティアの両方で機能) し、ユーザーが Eraser ウェブエディタでダイアグラムを編集できます
DSL コードを使用してダイアグラムを再生成または修正できます
API レスポンスはキャッシュされるため、同一のリクエストは高速に返されます

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: eraserlabs
リポジトリ: eraserlabs/eraser-io
ライセンス: MIT
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/eraserlabs/eraser-io / ライセンス: MIT

eraser-diagrams

SKILL.md 本文

Eraser ダイアグラムジェネレータ

使用タイミング

仕組み

ダイアグラムタイプと構文

フローチャート

エンティティリレーションシップダイアグラム (ERD)

クラウドアーキテクチャダイアグラム

シーケンスダイアグラム

BPMN ダイアグラム (スイムレーンダイアグラム)

API インテグレーション

エンドポイント

レスポンス形式

エラーレスポンス

手順

ベストプラクティス

注記

詳細情報

関連スキル

superfluid

civ-finish-quotes

nookplot

web3-polymarket

ethskills

xxyy-trade