dagre-react-flow
✓React Flow (@xyflow/react) で dagre を使用した自動グラフ レイアウト。自動レイアウト、階層レイアウト、ツリー構造を実装する場合、またはプログラムでノードを配置する場合に使用します。 dagre、自動レイアウト、自動レイアウト、getLayoutedElements、rankdir、階層グラフでトリガーします。
SKILL.md
Dagre is a JavaScript library for laying out directed graphs. It computes optimal node positions for hierarchical/tree layouts. React Flow handles rendering; dagre handles positioning.
| TB | Top to Bottom | Org charts, decision trees | | BT | Bottom to Top | Dependency graphs (deps at bottom) | | LR | Left to Right | Timelines, horizontal flows | | RL | Right to Left | RTL layouts |
weight: Higher weight edges are prioritized for shorter, more direct paths.
React Flow (@xyflow/react) で dagre を使用した自動グラフ レイアウト。自動レイアウト、階層レイアウト、ツリー構造を実装する場合、またはプログラムでノードを配置する場合に使用します。 dagre、自動レイアウト、自動レイアウト、getLayoutedElements、rankdir、階層グラフでトリガーします。 ソース: existential-birds/beagle。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/existential-birds/beagle --skill dagre-react-flow- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
dagre-react-flow とは？
React Flow (@xyflow/react) で dagre を使用した自動グラフ レイアウト。自動レイアウト、階層レイアウト、ツリー構造を実装する場合、またはプログラムでノードを配置する場合に使用します。 dagre、自動レイアウト、自動レイアウト、getLayoutedElements、rankdir、階層グラフでトリガーします。 ソース: existential-birds/beagle。
dagre-react-flow のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/existential-birds/beagle --skill dagre-react-flow インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/existential-birds/beagle
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-01