Garden

Garden is a specification, backed by JSON Schema , for modeling ecosystems of products, services, and any other relational collections. A React-based visualization component is provided (NPM: @omnidotdev/garden) that enables you to create interactive, hierarchical diagrams of your ecosystem.

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} />;