dagre-graph
CommunityBuild DagreGraph visual hierarchies with ease.
System Documentation
What problem does it solve?
DagreGraph components simplify building directed graphs with automatic hierarchical layouts, enabling developers to render organizational charts, dependency trees, flowcharts, and decision trees without manual positioning.
Core Features & Use Cases
- Hierarchical layout: automatic ranking and edge routing for TB, LR, and other directions.
- Custom visuals: control node color, size, shape, and label accessors.
- Interactivity: respond to node and link events and apply dagreSettings for layout tweaks.
- Use Case: visualize a company org chart with levels and reporting lines using a single data structure.
Quick Start
Import DagreGraph from vue-chrts and render with a data object: import { DagreGraph } from 'vue-chrts'; const graphData = { nodes: [ { id: 'ceo', label: 'CEO', level: 0 }, { id: 'mgr', label: 'Manager', level: 1 } ], links: [ { source: 'ceo', target: 'mgr' } ] }; // In your component template <DagreGraph :data="graphData" :dagreSettings="{ rankdir: 'TB', nodesep: 60, ranksep: 80 }" />
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: dagre-graph Download link: https://github.com/dennisadriaans/vue-chrts/archive/main.zip#dagre-graph Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.