diagrams とは？
ビジュアルなフロー図、アーキテクチャ図、システム マップを SVG/PNG として生成します。ユーザーがフローチャート、ユーザー フロー図、アーキテクチャ図、システム図、インタラクション マップ、またはその他の視覚的な図を要求する場合に使用します。 SVG への自動レンダリングを備えた ELK JSON レイアウト エンジンをサポートします。 ソース: tychohq/agent-skills。
·diagrams
</>
diagrams
✓ビジュアルなフロー図、アーキテクチャ図、システム マップを SVG/PNG として生成します。ユーザーがフローチャート、ユーザー フロー図、アーキテクチャ図、システム図、インタラクション マップ、またはその他の視覚的な図を要求する場合に使用します。 SVG への自動レンダリングを備えた ELK JSON レイアウト エンジンをサポートします。
diagrams のインストール方法
コマンドラインで diagrams AI スキルを開発環境にすばやくインストール
- ターミナルを開く: ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます
- インストールコマンドを実行: このコマンドをコピーして実行します: npx skills add https://github.com/tychohq/agent-skills --skill diagrams
- インストールを確認: インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
ソース: tychohq/agent-skills。
SKILL.md
原文を見るGenerate diagrams from structured JSON → SVG (and optionally PNG).
| id | string | Required. Unique identifier | | width | number | Node width in px (default 120) | | height | number | Node height in px (default 40) | | labels | array | [{text}] — used by ELK for layout calculation | | label | string | Display text rendered in SVG (supports emoji). Falls back to id | | color | string | Color key from palette (see below) |
| subtitle | string | Smaller text below the label | | fontSize | number | Label font size (default 13) | | children | array | Nested nodes — makes this a container | | containerColor | string | Color key for container background |
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/tychohq/agent-skills --skill diagrams- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-26
- 更新日
- 2026-03-11
クイックアンサー
diagrams のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/tychohq/agent-skills --skill diagrams インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/tychohq/agent-skills
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-26