🌱 Garden

Garden graphs are composed of:

• Sprouts: Individual entities within gardens representing products, services, tools, or any other element in your ecosystem
• Gardens: Collections of sprouts or other gardens (subgardens). Gardens may also be nested within other gardens (supergardens)

Demo

Below, Omni Ecosystem is a supergarden of the Omni Products and Omni Dev Tools gardens, which are subgardens in this case.

Omni Docs is a sprout of the Omni Ecosystem garden. Backfeed is a sprout of the Omni Products garden, while Sigil is a sprout of the Omni Dev Tools garden.

Features

• Interactive Visualization: Navigate through your ecosystem with an intuitive, interactive graph interface via the
  <Garden /> component shipped with @omnidotdev/garden
• Hierarchical Navigation: Explore complex relationships with support for nested gardens (subgardens/supergardens)
• Customizable Nodes: Personalize node appearance with custom themes, colors, and styling
• Smart Layout: Automatic layout calculation ensures optimal presentation of your garden
• Edge Customization: Choose from various edge types and animations to visualize connections
• Responsive Design: Works across different screen sizes and devices
• React Integration: Easily integrate with React applications as a standalone component
• Rich Node Content: Support for images, descriptions, call-to-action buttons, and external links
• Garden Switching: Navigate between multiple gardens within the same visualization
• Minimap & Controls: Optional navigation aids for larger garden structures

Getting Started

To integrate Garden in your React application, first bun add @omnidotdev/garden, then:

import { Garden } from "@omnidotdev/garden";

import type { GardenSchema } from "@omnidotdev/garden";

// import required Garden styles
import "@omnidotdev/garden/styles.css";

const schema: GardenSchema = {
  name: "Ecosystem",
  // ...
};

/**
 * Render the Garden component with the provided ecosystem schema.
 *
 * `schema` is validated against the Garden specification at runtime.
 * If the schema is invalid, an error will be thrown.
 */
const App = () => <Garden schema={schema} />;