{"id":31900789,"url":"https://github.com/dsnchz/solid-g6","last_synced_at":"2025-10-13T12:27:45.204Z","repository":{"id":298442564,"uuid":"997015852","full_name":"dsnchz/solid-g6","owner":"dsnchz","description":"A SolidJS component library for graph visualization, powered by @antv/g6","archived":false,"fork":false,"pushed_at":"2025-06-11T17:47:38.000Z","size":220,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-29T08:58:20.285Z","etag":null,"topics":["analysis","data-analysis","data-visualization","graph","graph-visualization","node-ui","solidjs","visualization"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dsnchz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-05T20:19:31.000Z","updated_at":"2025-07-13T13:34:15.000Z","dependencies_parsed_at":"2025-06-11T06:11:27.821Z","dependency_job_id":"73879ef3-bbb5-4d21-9ccf-a0b8fed70f51","html_url":"https://github.com/dsnchz/solid-g6","commit_stats":null,"previous_names":["dsnchz/solid-g6"],"tags_count":1,"template":false,"template_full_name":"thedanchez/template-solidjs-library","purl":"pkg:github/dsnchz/solid-g6","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-g6","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-g6/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-g6/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-g6/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dsnchz","download_url":"https://codeload.github.com/dsnchz/solid-g6/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-g6/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279015061,"owners_count":26085643,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analysis","data-analysis","data-visualization","graph","graph-visualization","node-ui","solidjs","visualization"],"created_at":"2025-10-13T12:27:42.228Z","updated_at":"2025-10-13T12:27:45.196Z","avatar_url":"https://github.com/dsnchz.png","language":"TypeScript","readme":"\u003cp\u003e\n  \u003cimg width=\"100%\" src=\"https://assets.solidjs.com/banner?type=Ecosystem\u0026background=tiles\u0026project=Solid-G6\" alt=\"solid-g6\"\u003e\n\u003c/p\u003e\n\n# @dschz/solid-g6\n\n[![License](https://img.shields.io/badge/license-MIT-green)](LICENSE)\n[![@antv/g6](https://img.shields.io/badge/@antv/g6-5.0.0+-orange?style=flat-square)](https://github.com/tradingview/lightweight-charts)\n[![npm](https://img.shields.io/npm/v/@dschz/solid-g6?color=blue)](https://www.npmjs.com/package/@dschz/solid-g6)\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@dschz/solid-uplot)](https://bundlephobia.com/package/@dschz/solid-g6)\n[![JSR](https://jsr.io/badges/@dschz/solid-g6/score)](https://jsr.io/@dschz/solid-g6)\n[![CI](https://github.com/dsnchz/solid-g6/actions/workflows/ci.yaml/badge.svg)](https://github.com/dsnchz/solid-g6/actions/workflows/ci.yaml)\n[![Discord](https://img.shields.io/badge/Discord-%235865F2.svg?logo=discord\u0026logoColor=white)](https://discord.gg/ct5eR58XQS)\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable style=\"border: none; border-collapse: collapse;\"\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" style=\"border: none; padding: 0;\"\u003e\n        \u003cimg src=\"https://www.solidjs.com/img/logo/without-wordmark/logo.svg\" alt=\"SolidJS\" width=\"80\" height=\"80\"\u003e\n      \u003c/td\u003e\n      \u003ctd align=\"center\" style=\"border: none; padding: 0 20px; vertical-align: middle; font-size: 32px; font-weight: bold;\"\u003e\n        +\n      \u003c/td\u003e\n      \u003ctd align=\"center\" style=\"border: none; padding: 0;\"\u003e\n        \u003ca href=\"https://g6.antv.antgroup.com/en\" target=\"_blank\"\u003e\n          \u003cimg src=\"https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png\" alt=\"AntV\" width=\"80\" height=\"80\"\u003e\n        \u003c/a\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eBringing together SolidJS reactivity with AntV G6's powerful graph visualization capabilities\u003c/strong\u003e\n\u003c/p\u003e\n\nA comprehensive graph visualization library for [SolidJS](https://www.solidjs.com/) built on top of [AntV G6](https://g6.antv.antgroup.com/). Create interactive, customizable graph visualizations with powerful layout algorithms and real-time controls.\n\nTo see the kinds of graphs you can create using G6, ckeck out their [Playground](https://g6.antv.antgroup.com/en/examples) page.\n\n## 📚 Table of Contents\n\n- [🚀 Features](#-features)\n- [🛠️ Developer Experience](#️-developer-experience)\n- [🚀 Roadmap \u0026 Future Enhancements](#-roadmap--future-enhancements)\n- [📦 Installation](#-installation)\n- [📚 Library Exports](#-library-exports)\n- [⚡ Quick Start](#-quick-start)\n- [🎮 Interactive Playground](#-interactive-playground)\n- [🎨 Visual Elements](#-visual-elements)\n  - [🔵 Nodes](#-nodes)\n  - [🔗 Edges](#-edges)\n  - [📦 Combos](#-combos)\n  - [🖼️ Canvas](#️-canvas)\n  - [🎯 Styling \u0026 Themes](#-styling--themes)\n- [🎯 Supported Layouts](#-supported-layouts)\n  - [⚡ Force-Directed Layouts](#-force-directed-layouts)\n  - [🌳 Hierarchical Layouts](#-hierarchical-layouts)\n  - [⭕ Circular Layouts](#-circular-layouts)\n  - [📊 Grid \u0026 Specialized Layouts](#-grid--specialized-layouts)\n  - [🔧 Custom Layouts](#-custom-layouts)\n- [📖 API Reference](#-api-reference)\n  - [Graph Component](#graph-component)\n  - [Context API](#context-api)\n  - [Utility Functions](#utility-functions)\n- [🤝 Contributing](#-contributing)\n- [📄 License](#-license)\n\n## 🚀 Features\n\n- **13+ Layout Algorithms**: Comprehensive collection of graph layout algorithms for different visualization needs\n- **Real-time Controls**: Interactive parameter adjustment with immediate visual feedback\n- **Physics Simulation**: Advanced force-directed layouts with customizable physics parameters\n- **Clustering Support**: Built-in clustering capabilities for organizing related nodes\n- **TypeScript Support**: Full type safety with comprehensive TypeScript definitions\n- **Responsive Design**: Mobile-friendly layouts that adapt to different screen sizes\n- **Educational Content**: Detailed explanations of algorithms and use cases\n- **Performance Optimized**: Efficient rendering for large graphs with thousands of nodes\n- **Extensible Architecture**: Easy to add custom layouts and behaviors\n- **SolidJS Integration**: Leverages SolidJS reactivity for optimal performance\n\n## 🛠️ Developer Experience\n\nSolid G6 significantly enhances the developer experience when working with AntV G6 by providing:\n\n### 🎯 **Enhanced Type Safety**\n\n- **Generic Type Support**: Adds generics and data type inference that G6's TypeScript definitions lack\n- **Cross-field Type Inference**: Utility functions automatically infer types across data structures and configurations\n- **Enhanced IntelliSense**: Improved autocomplete that understands your specific data shapes\n- **Type-safe Data Access**: Strong typing for node/edge/combo data properties throughout the API\n\n### 🔧 **Simplified Configuration**\n\n- **Utility Functions**: Type-safe helpers that eliminate guesswork and reduce boilerplate\n- **Consistent Patterns**: Standardized approach to creating graphs, layouts, and styling\n- **Composition-friendly**: Easy to compose and reuse configurations across your application\n- **Zero Runtime Overhead**: All utilities are compile-time only - no bundle size impact\n\n### 📚 **Improved Documentation**\n\n- **Inline Documentation**: JSDoc comments with examples for every option and parameter\n- **Type Definitions as Documentation**: Your IDE shows exactly what options are available\n- **Real-world Examples**: Comprehensive playground with 13+ layout examples and use cases\n\n### 🚀 **Productivity Benefits**\n\n```tsx\n// Before: G6 with TypeScript (lacks generics \u0026 data inference)\nconst graph = new G6Graph({\n  container: containerRef,\n  data: myData, // Basic typing, no data shape inference\n  layout: { type: \"force\", gravity: 1 }, // Layout options typed, but not connected to data\n  node: {\n    style: {\n      labelText: (d) =\u003e d.data?.label, // 'd.data' is 'unknown' - no autocomplete\n    },\n  },\n});\n\n// After: Solid G6 (adds generics \u0026 cross-field inference)\nconst data = createGraphData({\n  nodes: [{ id: \"1\", data: { label: \"Node 1\", category: \"important\" } }],\n  edges: [{ source: \"1\", target: \"2\" }],\n});\n\nconst nodeConfig = createGraphNodeOptions\u003ctypeof data\u003e({\n  style: {\n    labelText: (d) =\u003e d.data.label, // Full autocomplete - knows 'label' exists\n    fill: (d) =\u003e (d.data.category === \"important\" ? \"red\" : \"blue\"), // 'category' typed\n  },\n});\n\n\u003cGraph data={data} node={nodeConfig} /\u003e;\n```\n\n**Result**: Builds upon G6's solid TypeScript foundation by adding the missing generics and data inference for a significantly improved developer experience.\n\n## 🚀 Roadmap \u0026 Future Enhancements\n\n### SolidJS JSX Custom Nodes (Coming Soon)\n\nA [community-driven effort](https://github.com/antvis/G6/pull/7199) is underway to add `g6-extension-solid` (very much inspired by `g6-extension-react`) to the core G6 library, which will enable **Solid JSX-Powered Custom Nodes**\n\n#### ✨ **Key Benefits**\n\n- **True JSX Integration**: Use familiar SolidJS components for complex node designs\n- **Fine-Grained Reactivity**: Leverage SolidJS's superior reactivity for real-time updates\n- **Zero Virtual DOM Overhead**: Maximum performance with direct DOM manipulation\n- **Component Reusability**: Share node components across different graphs\n- **CSS-in-JS Support**: Full styling capabilities with your preferred CSS solution\n\n#### 🎨 **Advanced Use Cases**\n\n- **Rich Data Visualizations**: Embed charts, progress bars, and complex layouts within nodes\n- **Interactive Elements**: Buttons, forms, and controls directly in graph nodes\n- **Real-Time Data Binding**: Live updates without manual re-rendering\n- **Responsive Node Design**: Nodes that adapt to zoom levels and screen sizes\n\nThis extension will make `@dschz/solid-g6` an even more powerful and flexible graph visualization library for SolidJS applications.\n\n**Status**: 🚧 Work in Progress [G6 PR #7199](https://github.com/antvis/G6/pull/7199)\n\n## 📦 Installation\n\n### Install Dependencies\n\n```bash\n# Using npm\nnpm install @antv/g6 @dschz/solid-g6\n\n# Using pnpm\npnpm install @antv/g6 @dschz/solid-g6\n\n# Using yarn\nyarn install @antv/g6 @dschz/solid-g6\n\n# Using bun\nbun install @antv/g6 @dschz/solid-g6\n```\n\n## 📚 Library Exports\n\nSolid G6 provides a comprehensive set of components, utilities, and types for graph visualization:\n\n### Core Components \u0026 Hooks\n\n- **`Graph`** - Main graph visualization component\n- **`useGraph`** - SolidJS hook for accessing graph context and methods\n\n### Utility Functions (Type-Safe)\n\n- **`createGraphData`** - Create type-safe graph data structures\n- **`createGraphOptions`** - Configure complete graph options\n- **`createGraphLayout`** - Set up layout algorithms with type inference\n- **`createGraphBehaviors`** - Define interaction behaviors\n- **`createGraphNodeOptions`** - Configure node styling and behavior\n- **`createGraphEdgeOptions`** - Configure edge styling and behavior\n- **`createGraphComboOptions`** - Configure combo (group) styling and behavior\n\n### TypeScript Types\n\nAll TypeScript interfaces and types are exported for advanced usage scenarios, including `G6GraphData`, `G6GraphOptions`, `NodeData`, `EdgeData`, and layout-specific types.\n\n## ⚡ Quick Start\n\n```tsx\nimport { Graph, createGraphData } from \"@dschz/solid-g6\";\nimport { createSignal } from \"solid-js\";\n\nfunction App() {\n  const [graphData] = createSignal(\n    createGraphData({\n      nodes: [\n        { id: \"node1\", data: { label: \"Node 1\" } },\n        { id: \"node2\", data: { label: \"Node 2\" } },\n        { id: \"node3\", data: { label: \"Node 3\" } },\n      ],\n      edges: [\n        { source: \"node1\", target: \"node2\" },\n        { source: \"node2\", target: \"node3\" },\n      ],\n    }),\n  );\n\n  return (\n    \u003cGraph\n      data={graphData()}\n      layout={{\n        type: \"force\",\n        gravity: 1,\n        edgeStrength: 0.5,\n        nodeStrength: -10,\n      }}\n      style={{ width: \"800px\", height: \"600px\" }}\n    /\u003e\n  );\n}\n```\n\n## 🎮 Interactive Playground\n\n**The best way to explore Solid G6 is through our comprehensive interactive playground!**\n\n### 🚀 **Run Locally for Full Experience**\n\nWe **highly recommend** cloning the repository and running the playground locally to access:\n\n- **Live Interactive Examples** - 13+ layout algorithms with real-time parameter controls\n- **Complete Source Code** - View and copy implementation details for each example\n- **Multiple Demo Scenarios** - Each layout includes 2-3 different use cases and data structures\n- **Educational Content** - Algorithm explanations, physics concepts, and best practice guides\n- **Responsive Testing** - See how layouts adapt to different screen sizes\n- **Performance Insights** - Test with larger datasets and observe behavior\n\n### 📥 **Get Started in 2 Minutes**\n\n```bash\n# Clone the repository\ngit clone https://github.com/dsnchz/solid-g6.git\ncd solid-g6\n\n# Install dependencies\nbun install\n\n# Start the playground\nbun start\n\n# Open http://localhost:3000 in your browser\n```\n\n### 🎯 **What You'll Find**\n\nThe playground includes comprehensive examples for:\n\n- **Force-Directed Layouts** (4 types) - Physics simulations with clustering\n- **Hierarchical Layouts** (2 types) - Tree structures and organizational charts\n- **Circular Layouts** (3 types) - Radial arrangements and concentric circles\n- **Grid-Based Layouts** (1 type) - Regular matrix arrangements\n- **Specialized Layouts** (3 types) - MDS, Fishbone diagrams, and sequential flows\n\nEach example features:\n\n- 🎛️ **Interactive Controls** - Sliders, toggles, and dropdowns for real-time adjustment\n- 📊 **Demo Scenarios** - Multiple pre-configured datasets showing different use cases\n- 📖 **Algorithm Explanations** - Educational content about how each layout works\n- 💾 **Copy-Ready Code** - Implementation snippets you can use directly\n- 🔗 **Official Documentation Links** - Direct links to G6's layout documentation\n\n### 💡 **Why Run Locally?**\n\nWhile this README provides comprehensive information, the **interactive playground offers the most effective learning experience**:\n\n- **Visual Learning** - See algorithms in action with your own data\n- **Parameter Understanding** - Experiment with settings to understand their impact\n- **Implementation Clarity** - Full source code with TypeScript types\n- **Real-world Context** - Multiple scenarios showing practical applications\n\n**Start exploring: `bun start` and visit `http://localhost:3000`** 🚀\n\n## 🎨 Visual Elements\n\n### 🔵 **Nodes**\n\nIndividual graph elements with comprehensive styling and interaction capabilities:\n\n- **Built-in Shapes**: `circle`, `rect`, `ellipse`, `diamond`, `triangle`, `star`, `image`, `donut`, `3d-sphere`\n- **Custom Node Types**: Create fully custom node renderers with unique shapes, behaviors, and interactions\n- **Custom Styling**: Colors, sizes, borders, shadows, opacity, and CSS properties\n- **Interactive States**: Hover, selected, disabled with automatic state management\n- **Rich Labels**: Text positioning, formatting, multi-line support, and custom fonts\n- **Data Binding**: Automatic visual mapping from node data properties\n\n### 🔗 **Edges**\n\nConnections between nodes with flexible routing and styling:\n\n- **Edge Types**: `line`, `polyline`, `cubic`, `quadratic`, `cubic-horizontal`, `cubic-vertical`, `loop-edge`\n- **Custom Edge Types**: Build custom edge renderers with unique routing algorithms and visual effects\n- **Visual Styling**: Colors, thickness, dash patterns, opacity, and gradients\n- **Smart Routing**: Automatic collision avoidance and optimal path calculation\n- **Directional Flow**: Arrows, labels, and markers for directed relationships\n- **Curved Connections**: Bezier curves and custom bend points for complex routing\n\n### 📦 **Combos**\n\nGrouping containers for organizing related nodes:\n\n- **Flexible Grouping**: Logical organization of related nodes with visual boundaries\n- **Custom Combo Types**: Design custom group containers with specialized layouts and behaviors\n- **Interactive Management**: Expand/collapse, drag groups, and nested hierarchies\n- **Custom Styling**: Background colors, borders, padding, and visual themes\n- **Dynamic Updates**: Real-time group membership changes and visual updates\n- **Label Support**: Group titles, descriptions, and metadata display\n\n### 🖼️ **Canvas**\n\nRendering context and interaction surface:\n\n- **Multiple Renderers**: SVG, Canvas, and WebGL rendering backends for different performance needs\n- **Custom Canvas Types**: Implement specialized rendering engines or interaction layers\n- **Zoom \u0026 Pan**: Built-in viewport controls with smooth animations and boundaries\n- **Event Handling**: Comprehensive event system for mouse, touch, and keyboard interactions\n- **Performance Optimization**: Automatic LOD (Level of Detail) and viewport culling\n\n### 🎯 **Styling \u0026 Themes**\n\nAll elements support comprehensive customization:\n\n```tsx\n\u003cGraph\n  node={{\n    style: { fill: \"#1890ff\", stroke: \"#096dd9\", lineWidth: 2 },\n    labelStyle: { fontSize: 12, fontWeight: \"bold\" },\n    state: {\n      hover: { fill: \"#40a9ff\" },\n      selected: { stroke: \"#722ed1\", lineWidth: 3 },\n    },\n  }}\n  edge={{\n    style: { stroke: \"#d9d9d9\", lineWidth: 1 },\n    labelStyle: { background: \"white\", padding: [2, 4] },\n  }}\n  combo={{\n    style: { fill: \"#f0f0f0\", stroke: \"#d9d9d9\" },\n    labelStyle: { fontSize: 14, fontWeight: \"bold\" },\n  }}\n/\u003e\n```\n\n**🎨 Explore Styling**: See all visual customization options in the [**interactive playground**](#-interactive-playground) with live style editors and preset themes.\n\n## 🎯 Supported Layouts\n\nSolid G6 supports 13+ built-in layout algorithms covering all major visualization patterns:\n\n### ⚡ **Force-Directed Layouts**\n\n- **`force`** - Classic physics simulation with gravity and clustering\n- **`d3-force`** - Advanced D3 force system with 5 configurable force types\n- **`forceAtlas2`** - High-performance algorithm for large networks\n- **`fruchterman`** - Aesthetic force-directed with community detection\n\n### 🌳 **Hierarchical Layouts**\n\n- **`dagre`** - Directed graphs with sophisticated edge routing\n- **`antv-dagre`** - Enhanced Dagre with improved visual appeal\n\n### ⭕ **Circular Layouts**\n\n- **`circular`** - Even distribution around a circle\n- **`radial`** - Tree structures in concentric circles\n- **`concentric`** - Multiple circles based on node properties\n\n### 📊 **Grid \u0026 Specialized Layouts**\n\n- **`grid`** - Regular matrix arrangement\n- **`mds`** - Multidimensional scaling for similarity visualization\n- **`fishbone`** - Cause-and-effect diagrams\n- **`snake`** - Sequential flow arrangements\n\n### 🔧 **Custom Layouts**\n\nRegister your own layout algorithms for specialized use cases:\n\n```tsx\nimport { BaseLayout, register, type GraphData }\nimport { Graph } from \"@dschz/solid-g6\";\n\nclass DiagonalLayout extends BaseLayout {\n  id = 'diagonal-layout';\n\n  async execute(data: GraphData): Promise\u003cGraphData\u003e {\n    const { nodes = [] } = data;\n    return {\n      nodes: nodes.map((node, index) =\u003e ({\n        id: node.id,\n        style: {\n          x: 50 * index + 25,\n          y: 50 * index + 25,\n        },\n      })),\n    };\n  }\n}\n\n// Register custom layout\nregister(\"diagonal-layout\", DiagonalLayout);\n\n// Use in graph\n\u003cGraph layout={{ type: \"diagonal-layout\", customParam: \"value\" }} /\u003e;\n```\n\n### 📚 **Interactive Examples**\n\nExplore all layouts with live examples and controls in our [**interactive playground**](#-interactive-playground) - the best way to understand each algorithm's capabilities and use cases.\n\n## 📖 API Reference\n\n### Graph Component\n\nThe main component for rendering graphs.\n\n```tsx\ninterface GraphProps\u003cD extends G6GraphData = G6GraphData\u003e {\n  // Graph data\n  data: D;\n\n  // Layout configuration\n  layout?: LayoutOptions;\n\n  // Visual styling\n  node?: NodeStyle;\n  edge?: EdgeStyle;\n  combo?: ComboStyle;\n\n  // Event handlers\n  events?: G6EventsMap;\n  onInit?: (graph: G6Graph) =\u003e void;\n  onReady?: (graph: G6Graph) =\u003e void;\n  onDestroy?: () =\u003e void;\n\n  // Container properties\n  id?: string;\n  class?: string;\n  style?: JSX.CSSProperties;\n}\n```\n\n### Context API\n\nAccess graph instance and data within components.\n\n```tsx\nimport { useGraph } from \"@dschz/solid-g6\";\n\nfunction GraphComponent() {\n  const { graph, graphData, setGraphOptions } = useGraph();\n\n  // Access graph instance\n  const g = graph();\n\n  // Get current data\n  const data = graphData();\n\n  // Update options\n  await setGraphOptions({ layout: { type: \"circular\" } });\n}\n```\n\n### Utility Functions\n\nSolid G6 provides a comprehensive set of utility functions for type-safe graph creation and configuration. These utilities provide:\n\n- **Type Safety**: Full TypeScript support with generic type inference\n- **Consistency**: Standardized patterns across your application\n- **Developer Experience**: Better autocomplete and error detection\n- **Flexibility**: Easy composition and reusability\n\n#### Core Utilities\n\n```tsx\nimport {\n  createGraphData,\n  createGraphOptions,\n  createGraphLayout,\n  createGraphBehaviors,\n  createGraphNodeOptions,\n  createGraphEdgeOptions,\n  createGraphComboOptions,\n} from \"@dschz/solid-g6\";\n\n// Create type-safe graph data\nconst data = createGraphData({\n  nodes: [\n    { id: \"node1\", data: { label: \"Node 1\", category: \"important\" } },\n    { id: \"node2\", data: { label: \"Node 2\", category: \"normal\" } },\n  ],\n  edges: [{ source: \"node1\", target: \"node2\" }],\n  combos: [{ id: \"group1\", data: { label: \"Group 1\" } }],\n});\n\n// Create layout configuration with type inference\nconst layout = createGraphLayout({\n  type: \"force\",\n  gravity: 1,\n  clustering: true,\n  clusterNodeStrength: -5,\n});\n\n// Create node styling with proper typing\nconst nodeConfig = createGraphNodeOptions\u003ctypeof data\u003e({\n  style: {\n    fill: (node) =\u003e (node.data.category === \"important\" ? \"#ff4d4f\" : \"#1890ff\"),\n    stroke: \"#fff\",\n    r: 20,\n    labelText: (node) =\u003e node.data.label,\n  },\n});\n\n// Create edge styling\nconst edgeConfig = createGraphEdgeOptions\u003ctypeof data\u003e({\n  style: {\n    stroke: \"#e6f7ff\",\n    strokeWidth: 2,\n  },\n});\n\n// Create interaction behaviors\nconst behaviors = createGraphBehaviors([\"drag-canvas\", \"zoom-canvas\", \"drag-element\"]);\n\n// Combine into complete graph options\nconst graphOptions = createGraphOptions({\n  data,\n  layout,\n  node: nodeConfig,\n  edge: edgeConfig,\n  behaviors,\n});\n```\n\n#### Why Use Utility Functions?\n\n1. **Type Safety**: Utilities provide full TypeScript support with generic type inference\n2. **Consistency**: Standardized patterns ensure consistent configuration across your app\n3. **Validation**: Runtime validation of configuration options (where applicable)\n4. **Composition**: Easy to compose and reuse configurations\n5. **IDE Support**: Better autocomplete, IntelliSense, and error detection\n6. **Future-proof**: Updates to G6 options are handled through utility updates\n\n### Types\n\nComprehensive TypeScript definitions for all components.\n\n```tsx\ninterface G6GraphData {\n  nodes: NodeData[];\n  edges: EdgeData[];\n  combos?: ComboData[];\n}\n\ninterface NodeData {\n  id: string;\n  data?: {\n    label?: string;\n    cluster?: string;\n    size?: number;\n    type?: string;\n    [key: string]: any;\n  };\n}\n\ninterface EdgeData {\n  source: string;\n  target: string;\n  data?: {\n    weight?: number;\n    label?: string;\n    [key: string]: any;\n  };\n}\n```\n\n## 🎨 Styling \u0026 Theming\n\n### Custom Node Styles\n\n```tsx\n\u003cGraph\n  node={{\n    style: (node) =\u003e ({\n      fill: getNodeColor(node),\n      stroke: \"#333\",\n      strokeWidth: 2,\n      r: getNodeSize(node),\n    }),\n    labelText: (node) =\u003e node.data?.label,\n    labelStyle: {\n      fontSize: 12,\n      fill: \"#333\",\n      fontWeight: \"bold\",\n    },\n  }}\n/\u003e\n```\n\n### Edge Customization\n\n```tsx\n\u003cGraph\n  edge={{\n    style: (edge) =\u003e ({\n      stroke: getEdgeColor(edge),\n      strokeWidth: getEdgeWidth(edge),\n      strokeOpacity: 0.8,\n    }),\n    labelText: (edge) =\u003e edge.data?.label,\n  }}\n/\u003e\n```\n\n## 🔧 Advanced Usage\n\n### Custom Layout Implementation\n\n```tsx\n// Register custom layout\nimport { Graph, register } from \"@dschz/solid-g6\";\n\nregister(\"custom-layout\", CustomLayoutAlgorithm);\n\n// Use in graph\n\u003cGraph\n  layout={{\n    type: \"custom-layout\",\n    customParam: \"value\",\n  }}\n/\u003e;\n```\n\n### Dynamic Data Updates\n\n```tsx\nimport { createGraphData } from \"@dschz/solid-g6\";\n\nfunction DynamicGraph() {\n  const [data, setData] = createSignal(\n    createGraphData({\n      nodes: [{ id: \"node1\", data: { label: \"Initial Node\" } }],\n      edges: [],\n    }),\n  );\n\n  // Update data reactively\n  createEffect(() =\u003e {\n    const newGraphData = createGraphData({\n      nodes: [\n        { id: \"node1\", data: { label: \"Updated Node\" } },\n        { id: \"node2\", data: { label: \"New Node\" } },\n      ],\n      edges: [{ source: \"node1\", target: \"node2\" }],\n    });\n    setData(newGraphData);\n  });\n\n  return \u003cGraph data={data()} /\u003e;\n}\n```\n\n### Event Handling\n\n```tsx\n\u003cGraph\n  events={{\n    \"node:click\": (event) =\u003e {\n      console.log(\"Node clicked:\", event.itemId);\n    },\n    \"edge:hover\": (event) =\u003e {\n      console.log(\"Edge hovered:\", event.itemId);\n    },\n    \"canvas:drag\": (event) =\u003e {\n      console.log(\"Canvas dragged\");\n    },\n  }}\n/\u003e\n```\n\n## 📱 Responsive Design\n\nAll layouts automatically adapt to different screen sizes:\n\n```tsx\n\u003cGraph\n  style={{\n    width: \"100%\",\n    height: \"60vh\",\n    \"min-width\": \"300px\",\n    \"min-height\": \"400px\",\n  }}\n  layout={{\n    type: \"force\",\n    // Layout automatically adjusts for container size\n  }}\n/\u003e\n```\n\n## 🤝 Contributing\n\nCode contributions are welcome! Please follow these guidelines:\n\n### Development Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/dsnchz/solid-g6.git\n\n# Install dependencies\nbun install\n\n# Run playground app\nbun start\n```\n\n### Code Quality\n\n```bash\n# Lint code\nbun run lint\n\n# Format code\nbun run format\n\n# Fix linting issues\nbun run lint:fix\n\n# Fix formatting issues\nbun run format:fix\n```\n\n### Commit Guidelines\n\n- Use [conventional commits](https://www.conventionalcommits.org/)\n- Keep git history clean with rebasing\n- Ensure CI checks pass before merging\n\n### Adding New Layouts\n\n1. Create layout example in `playground/pages/layouts/examples/`\n2. Register in `LayoutExampleRegistry.ts`\n3. Add comprehensive documentation\n4. Include multiple demo scenarios\n5. Add interactive controls\n6. Update this README\n\n## 📄 License\n\nMIT License - see [LICENSE](LICENSE) for details.\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**[⬆ Back to Top](#-table-of-contents)**\n\nMade with ❤️ using [SolidJS](https://solidjs.com) and [AntV G6](https://g6.antv.antgroup.com)\n\n\u003c/div\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsnchz%2Fsolid-g6","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdsnchz%2Fsolid-g6","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsnchz%2Fsolid-g6/lists"}