### Initialize Isoflow in React

Source: https://github.com/markmanx/isoflow/blob/main/docs/pages/docs/quickstart.mdx

Demonstrates the basic import and rendering of the Isoflow component within a standard React application. Note that the container must have defined dimensions for the editor to render correctly.

```jsx
import Isoflow from "isoflow";

import React from 'react';
import Isoflow from 'isoflow';

const App = () => {
  return (
    <Isoflow />
  );
}

export default App;
```

--------------------------------

### Integrate Isoflow with Next.js

Source: https://github.com/markmanx/isoflow/blob/main/docs/pages/docs/quickstart.mdx

Provides a pattern for using Isoflow in Next.js by disabling server-side rendering via dynamic imports. This is necessary because the library relies on browser-specific APIs.

```jsx
import dynamic from 'next/dynamic';

export const IsoflowDynamic = dynamic(() => {
    return import('isoflow');
  },
  {
    ssr: false
  }
);

// Usage in App.jsx
import { IsoflowDynamic } from './IsoflowDynamic';

const App = () => {
  return (
    <IsoflowDynamic />
  );
}

export default App;
```

--------------------------------

### Install Isopacks npm Package

Source: https://github.com/markmanx/isoflow/blob/main/docs/pages/docs/isopacks.mdx

Installs the necessary Isopacks npm package for use with Isoflow. This is the first step to integrating Isopacks into your project.

```bash
npm i @isoflow/isopacks
```

--------------------------------

### Import and Load Isopacks into Isoflow App

Source: https://github.com/markmanx/isoflow/blob/main/docs/pages/docs/isopacks.mdx

Demonstrates how to import selected Isopacks and flatten their icon collections for use within an Isoflow application. This allows for a customized set of icons to be available in your diagramming tool.

```jsx
import Isoflow from 'isoflow';
import { flattenCollections } from '@isoflow/isopacks/dist/utils';
import isoflowIsopack from '@isoflow/isopacks/dist/isoflow';
import awsIsopack from '@isoflow/isopacks/dist/aws';
import gcpIsopack from '@isoflow/isopacks/dist/gcp';
import azureIsopack from '@isoflow/isopacks/dist/azure';
import kubernetesIsopack from '@isoflow/isopacks/dist/kubernetes';

const icons = flattenCollections([
  isoflowIsopack,
  awsIsopack,
  azureIsopack,
  gcpIsopack,
  kubernetesIsopack
]);

const App = () => {
  return (
    <Isoflow initialData={{
      title: 'Example scene',
      icons,
      colors: [],
      items: [],
      views: []
    }} />
  );
}

export default App;
```

--------------------------------

### Define TextBox structure

Source: https://github.com/markmanx/isoflow/blob/main/docs/pages/docs/api/initialData.mdx

Defines the schema for a text box, including content, font size, and orientation.

```typescript
{
  id: string;
  tile: {
    x: number;
    y: number;
  };
  content: string;
  fontSize?: number;
  orientation?: 'X' | 'Y';
}
```

--------------------------------

### Define Icon structure

Source: https://github.com/markmanx/isoflow/blob/main/docs/pages/docs/api/initialData.mdx

Defines the schema for an icon, including its identifier, URL, and optional isometric perspective settings.

```typescript
{
  id: string;
  name: string;
  url: string;
  collection?: string;
  isIsometric?: boolean;
}
```

--------------------------------

### Define Item structure

Source: https://github.com/markmanx/isoflow/blob/main/docs/pages/docs/api/initialData.mdx

Defines the schema for an item, linking it to an icon identifier and allowing for markdown-supported descriptions.

```typescript
{
  id: string;
  name: string;
  description?: string;
  icon: string;
}
```

--------------------------------

### Define ViewItem structure

Source: https://github.com/markmanx/isoflow/blob/main/docs/pages/docs/api/initialData.mdx

Defines the schema for an item instance within a view, specifying its position via tile coordinates.

```typescript
{
  id: string;
  labelHeight?: number;
  tile: {
    x: number;
    y: number;
  }
}
```

--------------------------------

### Define View structure

Source: https://github.com/markmanx/isoflow/blob/main/docs/pages/docs/api/initialData.mdx

Defines the schema for a view, which aggregates items, rectangles, connectors, and text boxes into a single scene.

```typescript
{
  id: string;
  name: string;
  description?: string;
  items: ViewItem[];
  rectangles?: Rectangle[];
  connectors?: Connector[];
  textBoxes?: TextBox[];
}
```

--------------------------------

### Define ConnectorAnchor structure

Source: https://github.com/markmanx/isoflow/blob/main/docs/pages/docs/api/initialData.mdx

Defines the schema for connector anchors, which can be fixed to a tile coordinate or dynamically tied to an item ID.

```typescript
id: string;
ref: 
  | {
      tile: {
        x: number;
        y: number;
      }
    }
  | {
      item: string;
    }
```

--------------------------------

### Define Connector structure

Source: https://github.com/markmanx/isoflow/blob/main/docs/pages/docs/api/initialData.mdx

Defines the schema for connectors, which require at least two anchors to establish a path between points or items.

```typescript
{
  id: string;
  description?: string;
  color?: string;
  width?: number;
  style?: 'SOLID' | 'DOTTED' | 'DASHED';
  anchors: ConnectorAnchor[];
}
```

--------------------------------

### Define Color structure

Source: https://github.com/markmanx/isoflow/blob/main/docs/pages/docs/api/initialData.mdx

Defines the schema for a color, where the value property accepts standard CSS color formats.

```typescript
{
  id: string;
  value: string;
}
```

--------------------------------

### Define Rectangle structure

Source: https://github.com/markmanx/isoflow/blob/main/docs/pages/docs/api/initialData.mdx

Defines the schema for a rectangular shape, requiring 'from' and 'to' coordinates.

```typescript
{
  id: string;
  color?: string;
  from: {
    x: number;
    y: number;
  };
  to: {
    x: number;
    y: number;
  };
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.