### Build and Start Isoflow Documentation Locally

Source: https://github.com/stan-smith/fossflow/blob/master/packages/fossflow-lib/docs/pages/docs/installation.mdx

Commands to build and serve the developer documentation for Isoflow locally. This allows for offline access and local testing of documentation changes.

```bash
npm run docs:build
npm run docs:start
```

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

### Monorepo Development Setup and Workflow (Bash)

Source: https://github.com/stan-smith/fossflow/blob/master/FOSSFLOW_ENCYCLOPEDIA.md

Instructions for setting up the Fossflow monorepo development environment, including cloning the repository, installing dependencies, and starting the development server.

```bash
# Development Workflow

# Monorepo Development Setup

1. **Clone and Install**:
```bash
git clone https://github.com/stan-smith/FossFLOW
cd FossFLOW
npm install  # Installs dependencies for all workspaces
```

2. **Development Mode**:
```bash
# First build the library (required for initial setup)
npm run build:lib

# Start app development (includes library in dev mode)
npm run dev
```

```

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

### Install and Run FossFLOW Locally (Bash)

Source: https://github.com/stan-smith/fossflow/blob/master/packages/fossflow-app/README.md

Instructions to clone the FossFLOW repository, install dependencies using npm, and start the development server. Assumes npm is installed.

```bash
git clone https://github.com/stan-smith/FOSSFLOW
cd FOSSFLOW

npm install

npm start
```

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

### Run Isoflow in Development Mode

Source: https://github.com/stan-smith/fossflow/blob/master/packages/fossflow-lib/docs/pages/docs/installation.mdx

Sets up and runs the Isoflow project in a local development environment. This involves cloning the repository, installing dependencies, and starting the development server.

```bash
git clone https://github.com/markmanx/isoflow
npm i
npm run start
```

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

### Dynamic Isoflow Import for Next.js

Source: https://github.com/stan-smith/fossflow/blob/master/packages/fossflow-lib/docs/pages/docs/quickstart.mdx

Provides instructions for integrating Isoflow into a Next.js application using `next/dynamic`. This is necessary because Isoflow cannot be server-side rendered.

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

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

```jsx
import { IsoflowDynamic } from './IsoflowDynamic';

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

export default App;
```

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

### Example Git Commands for Release Scenarios

Source: https://github.com/stan-smith/fossflow/blob/master/docs/SEMANTIC_RELEASE.md

Demonstrates the command-line interface (CLI) commands used to commit code with specific message types, triggering different release scenarios in FossFLOW. This includes adding features, fixing bugs, introducing breaking changes, and updating documentation.

```bash
# Make your changes
git add .
git commit -m "feat(connector): add multi-point connector routing"
git push origin master
```

```bash
git commit -m "fix(export): resolve image export quality issue"
git push origin master
```

```bash
git commit -m "feat(api)!: redesign node creation API

BREAKING CHANGE: createNode() now requires nodeType parameter"
git push origin master
```

```bash
git commit -m "docs: update installation instructions"
git push origin master
```

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

### Clone and Run FossFLOW Locally

Source: https://github.com/stan-smith/fossflow/blob/master/CONTRIBUTING.md

Steps to clone the FossFLOW repository, install dependencies, build the library, and start the development server. Requires Node.js, npm, and Git.

```bash
git clone https://github.com/YOUR_USERNAME/FossFLOW.git
cd FossFLOW
npm install
npm run build:lib
npm run dev
```

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

### Import Isoflow as ES6 Module

Source: https://github.com/stan-smith/fossflow/blob/master/packages/fossflow-lib/docs/pages/docs/quickstart.mdx

Demonstrates the basic import statement for Isoflow as an ES6 module. This is the first step to using Isoflow in your project.

```jsx
import Isoflow from "isoflow";
```

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

### Bash Script for Local E2E Test Execution

Source: https://github.com/stan-smith/fossflow/blob/master/e2e-tests/SETUP.md

This bash script automates the local execution of E2E tests. It handles starting the Selenium Docker container, creating and activating a Python virtual environment, installing dependencies, and running the pytest suite. The script also includes cleanup steps.

```bash
# Easiest: Use the helper script
cd e2e-tests
./run-tests.sh

# The script will:
# - Start Selenium container
# - Create Python venv
# - Install dependencies
# - Prompt you to start the app
# - Run tests
# - Clean up
```

```bash
# Run all tests
pytest -v

# Run specific test file
pytest tests/test_basic_load.py -v

# Run specific test
pytest tests/test_basic_load.py::test_homepage_loads -v

# Run tests matching pattern
pytest -k "canvas" -v

# Run with more verbose output
pytest -vv --tb=long
```

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

### Commit Message Examples for Versioning

Source: https://github.com/stan-smith/fossflow/blob/master/docs/SEMANTIC_RELEASE.md

Illustrates how different commit message types correspond to version bumps (minor, patch, major) or no bump, based on the conventional commits standard. This is crucial for semantic-release to correctly determine release versions.

```markdown
| Commit Type | Version Bump | Example |
|-------------|--------------|---------|
| `feat:` | Minor (1.0.0 → 1.1.0) | New features |
| `fix:` | Patch (1.0.0 → 1.0.1) | Bug fixes |
| `perf:` | Patch (1.0.0 → 1.0.1) | Performance improvements |
| `refactor:` | Patch (1.0.0 → 1.0.1) | Code refactoring |
| `feat!:` or `BREAKING CHANGE:` | Major (1.0.0 → 2.0.0) | Breaking changes |
| `docs:`, `style:`, `test:`, `chore:` | No bump | Non-code changes |
```

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

### Install and Build FossFLOW Library

Source: https://context7.com/stan-smith/fossflow/llms.txt

Instructions to install the fossflow library via npm or clone and build from source. This sets up the project for development or direct usage.

```bash
# Install the fossflow library
npm install fossflow

# Or clone and build from source
git clone https://github.com/stan-smith/FossFLOW
cd FossFLOW
npm install
npm run build:lib
npm run dev
```

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

### GitHub Actions Workflow for E2E Tests

Source: https://github.com/stan-smith/fossflow/blob/master/e2e-tests/SETUP.md

This YAML configuration defines a GitHub Actions workflow for running E2E tests. It specifies triggers, Python environment setup with caching, Docker service setup for Selenium, application build and serving, dependency installation, and test execution using pytest. It also includes artifact uploading.

```yaml
# .github/workflows/e2e-tests.yml
name: E2E Tests

on:
  push:
    branches: [ master, main ]
  pull_request:
    branches: [ master, main ]

jobs:
  e2e:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - name: Set up Python 3.11
      uses: actions/setup-python@v5
      with:
        python-version: "3.11"
        cache: 'pip'
    - name: Build FossFLOW app
      run: |
        npm install
        npm run build
    - name: Serve FossFLOW app
      run: |
        nohup npm start > app.log 2>&1 &
    - name: Set up Selenium Docker container
      run: |
        docker run -d -p 4444:4444 --shm-size=2g selenium/standalone-chrome
    - name: Install Python test dependencies
      run: |
        cd e2e-tests
        pip install -r requirements.txt
    - name: Run E2E tests
      run: |
        cd e2e-tests
        pytest -v
    - name: Upload test artifacts
      uses: actions/upload-artifact@v4
      with:
        name: e2e-test-results
        path: e2e-tests/reports/
```

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

### Python E2E Test Setup with Selenium and Pytest

Source: https://github.com/stan-smith/fossflow/blob/master/e2e-tests/SETUP.md

This snippet demonstrates the setup for an E2E testing framework using Python, pytest, and Selenium WebDriver. It includes necessary imports for Selenium's By, WebDriverWait, and expected_conditions, along with a basic test function structure that utilizes a 'driver' fixture.

```python
import pytest
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC


def test_can_add_node(driver):
    """Test that users can add a node to the canvas."""
    driver.get("http://localhost:3000")

    # Wait for app to load
    wait = WebDriverWait(driver, 10)

    # Click the add node button
    add_button = wait.until(
        EC.element_to_be_clickable((By.CSS_SELECTOR, "button[aria-label='Add Node']"))
    )
    add_button.click()

    # Verify node library appears
    library = wait.until(
        EC.visibility_of_element_located((By.CLASS_NAME, "node-library"))
    )
    assert library.is_displayed()
```

```python
def test_example(driver):
    driver.get("http://localhost:3000")
    # driver is automatically created and cleaned up
```

```python
def test_example(driver):
    try:
        # Your test code
        assert something
    except AssertionError:
        driver.save_screenshot("failure.png")
        raise
```

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

### Python Pytest Configuration and Fixtures

Source: https://github.com/stan-smith/fossflow/blob/master/e2e-tests/SETUP.md

This snippet illustrates how pytest is configured and used within the E2E testing framework. It shows the basic structure of a test file, the use of the `driver` fixture for Selenium WebDriver instances, and examples of how to run specific tests or groups of tests using pytest commands.

```python
# tests/test_basic_load.py

# Example test using the driver fixture
def test_homepage_loads(driver):
    driver.get("http://localhost:3000")
    assert "FossFLOW" in driver.title or "isometric" in driver.title
    assert driver.find_element(By.TAG_NAME, "body")
    assert driver.find_element(By.ID, "root")

def test_page_has_canvas(driver):
    driver.get("http://localhost:3000")
    assert driver.find_element(By.TAG_NAME, "canvas")

def test_page_renders_without_crash(driver):
    driver.get("http://localhost:3000")
    body = driver.find_element(By.TAG_NAME, "body")
    root = driver.find_element(By.ID, "root")
    canvas = driver.find_element(By.TAG_NAME, "canvas")
    assert body.is_displayed()
    assert root.is_displayed()
    assert canvas.is_displayed()
    assert len(driver.page_source) > 1000 # Basic check for substantial content
```

```python
# pytest.ini
[pytest]
addopts = --headless
markers =
    slow: marks tests as slow (deselect with '-m "not slow"')

```

```python
def test_example(driver):
    driver.get("http://localhost:3000")
    # driver is automatically created and cleaned up
```

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

### Install Python Test Dependencies

Source: https://github.com/stan-smith/fossflow/blob/master/e2e-tests/README.md

Sets up a Python virtual environment and installs the necessary dependencies for running the E2E tests, as defined in requirements.txt.

```bash
cd e2e-tests
python3 -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate
pip install -r requirements.txt
```

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

### Install Isoflow using yarn

Source: https://github.com/stan-smith/fossflow/blob/master/packages/fossflow-lib/docs/pages/docs/installation.mdx

Installs the Isoflow React component using the yarn package manager. This command adds Isoflow as a dependency to your project.

```bash
yarn add isoflow
```

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

### Start Backend Server

Source: https://github.com/stan-smith/fossflow/blob/master/FOSSFLOW_ENCYCLOPEDIA.md

Command to start the backend development server. This is typically run in a separate terminal to allow for simultaneous development of the frontend and backend.

```bash
npm run dev:backend
```

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

### Semantic Release Configuration (.releaserc.json)

Source: https://github.com/stan-smith/fossflow/blob/master/docs/SEMANTIC_RELEASE.md

Example configuration file for semantic-release. It specifies release branches, commit analysis rules, changelog generation settings, and files to be committed after a release. This file is essential for customizing the release process.

```json
{
  "branches": ["master", "main"],
  "plugins": [
    "@semantic-release/commit-analyzer",
    "@semantic-release/release-notes-generator",
    "@semantic-release/changelog",
    [
      "@semantic-release/exec",
      {
        "prepareCmd": "./scripts/update-version.js ${nextRelease.version}"
      }
    ],
    "@semantic-release/github",
    "@semantic-release/git"
  ]
}
```

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

### Basic Isoflow Component Usage

Source: https://github.com/stan-smith/fossflow/blob/master/packages/fossflow-lib/docs/pages/docs/quickstart.mdx

Shows how to render the Isoflow component within a React application. This basic usage will display a blank editor. For a functional editor with icons, refer to the Isopacks documentation.

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

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

export default App;
```

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

### FossFLOW InitialData Structure Example

Source: https://context7.com/stan-smith/fossflow/llms.txt

Illustrates the structure of the `initialData` prop for the Isoflow component. It defines icons, colors, items, views, connectors, rectangles, and text boxes for diagram elements.

```javascript
const initialData = {
  version: '1.0.0',
  title: 'Architecture Diagram',
  description: 'Cloud infrastructure overview',

  // Define icons available in the diagram
  icons: [
    { id: 'server', name: 'Server', url: '/icons/server.svg', isIsometric: true, collection: 'infrastructure' },
    { id: 'database', name: 'Database', url: '/icons/database.svg', isIsometric: true, collection: 'infrastructure' },
    { id: 'cloud', name: 'Cloud', url: '/icons/cloud.svg', isIsometric: false, collection: 'services' }
  ],

  // Define colors for connectors and rectangles
  colors: [
    { id: 'primary', value: '#0392ff' },
    { id: 'success', value: '#4caf50' },
    { id: 'warning', value: '#ff9800' }
  ],

  // Define items (nodes) in the diagram
  items: [
    { id: 'web-server', name: 'Web Server', description: 'Nginx load balancer', icon: 'server' },
    { id: 'app-server', name: 'App Server', description: 'Node.js application', icon: 'server' },
    { id: 'main-db', name: 'Main Database', description: 'PostgreSQL primary', icon: 'database' }
  ],

  // Define views with positioned items and connections
  views: [
    {
      id: 'main-view',
      name: 'Main Architecture',
      description: 'Primary system view',
      items: [
        { id: 'web-server', tile: { x: 0, y: 0 }, labelHeight: 80 },
        { id: 'app-server', tile: { x: 2, y: 1 }, labelHeight: 80 },
        { id: 'main-db', tile: { x: 4, y: 2 }, labelHeight: 80 }
      ],
      connectors: [
        {
          id: 'conn-1',
          description: 'HTTP Traffic',
          color: 'primary',
          width: 10,
          style: 'SOLID',
          lineType: 'SINGLE',
          showArrow: true,
          labels: [
            { id: 'label-1', text: 'HTTPS', position: 50, height: 20 }
          ],
          anchors: [
            { id: 'anchor-1', ref: { item: 'web-server' } },
            { id: 'anchor-2', ref: { item: 'app-server' } }
          ]
        },
        {
          id: 'conn-2',
          description: 'Database Connection',
          color: 'success',
          style: 'DASHED',
          anchors: [
            { id: 'anchor-3', ref: { item: 'app-server' } },
            { id: 'anchor-4', ref: { item: 'main-db' } }
          ]
        }
      ],
      rectangles: [
        { id: 'rect-1', color: 'primary', from: { x: -1, y: -1 }, to: { x: 5, y: 3 } }
      ],
      textBoxes: [
        { id: 'text-1', tile: { x: 0, y: -2 }, content: 'Production Environment', fontSize: 0.8, orientation: 'X' }
      ]
    }
  ],

  fitToView: true,
  view: 'main-view'
};
```

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

### Run FossFLOW E2E Tests Script

Source: https://github.com/stan-smith/fossflow/blob/master/e2e-tests/README.md

Executes the end-to-end tests for FossFLOW. This script automates dependency checks, Selenium container startup, virtual environment setup, dependency installation, and test execution.

```bash
cd e2e-tests
./run-tests.sh
```

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

### TypeScript Interface and React Component Example (TypeScript)

Source: https://github.com/stan-smith/fossflow/blob/master/CONTRIBUTING.md

An example demonstrating TypeScript interface definition for component props and a functional React component implementation using those props.

```typescript
interface NodeProps {
  id: string;
  position: { x: number; y: number };
  icon: IconType;
  isSelected?: boolean;
}

const Node: React.FC<NodeProps> = ({ id, position, icon, isSelected = false }) => {
  // Component implementation
};
```

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

### Start Selenium Standalone Chrome Container

Source: https://github.com/stan-smith/fossflow/blob/master/e2e-tests/README.md

Starts a Docker container for Selenium WebDriver with Chrome. This is a prerequisite for running tests manually or as part of a CI/CD pipeline.

```bash
docker run -d --name fossflow-selenium -p 4444:4444 -p 7900:7900 --shm-size="2g" selenium/standalone-chrome:latest
```

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

### Write a Basic Selenium Test with Pytest Fixture

Source: https://github.com/stan-smith/fossflow/blob/master/e2e-tests/README.md

A simple example of a test function using the 'driver' fixture provided by pytest-selenium to interact with the web page.

```python
def test_my_feature(driver):
    driver.get("http://localhost:3000")
    element = driver.find_element(By.ID, "my-element")
    assert element.is_displayed()
```

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

### Write Unit Tests with Jest

Source: https://github.com/stan-smith/fossflow/blob/master/CONTRIBUTING.md

An example of writing a unit test using Jest for a TypeScript function. It demonstrates testing a specific functionality, `tileToScreen`, and asserting the expected output.

```typescript
describe('useIsoProjection', () => {
  it('should convert tile coordinates to screen coordinates', () => {
    const { tileToScreen } = useIsoProjection();
    const result = tileToScreen({ x: 1, y: 1 });
    expect(result).toEqual({ x: 100, y: 50 });
  });
});
```

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

### Conventional Commits Examples (Bash)

Source: https://github.com/stan-smith/fossflow/blob/master/CONTRIBUTING.md

Examples of Git commit messages following the Conventional Commits specification, including basic commits, breaking changes using '!', and breaking changes using a footer.

```bash
git commit -m "feat: add undo/redo functionality"
git commit -m "fix: prevent menu from opening during drag"
git commit -m "docs: update installation instructions"
git commit -m "feat(connector)!: change default connector mode to click"

# Option 1: Using ! in type
git commit -m "feat(api)!: remove deprecated exportImage function"

# Option 2: Using footer
git commit -m "feat: update node API

BREAKING CHANGE: Node.position is now an object with x,y properties instead of array"
```

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

### Local Semantic Release Dry Run Commands

Source: https://github.com/stan-smith/fossflow/blob/master/docs/SEMANTIC_RELEASE.md

Provides commands to test the semantic-release process locally without making actual changes or publishing. The `--dry-run` flag simulates the release, while `--no-ci` ensures it runs even if CI environment variables are not present.

```bash
# Dry run (no changes made)
npx semantic-release --dry-run
```

```bash
# See what version would be released
npx semantic-release --dry-run --no-ci
```

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

### Monorepo App Development Commands (Bash)

Source: https://github.com/stan-smith/fossflow/blob/master/CONTRIBUTING.md

Commands to manage the development and building of the fossflow-app package within the monorepo. Includes starting the development server and building for production.

```bash
# Start app dev server
npm run dev

# Build app for production
npm run build:app

# The app automatically uses the local library
```

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

### Install Isopacks npm Package

Source: https://github.com/stan-smith/fossflow/blob/master/packages/fossflow-lib/docs/pages/docs/isopacks.mdx

Installs the necessary npm package for using Isopacks within your Isoflow application. This is the first step to integrating custom or pre-built asset collections.

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

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

### FossFLOW Library Entry Points

Source: https://github.com/stan-smith/fossflow/blob/master/FOSSFLOW_ENCYCLOPEDIA.md

The 'fossflow-lib' package provides multiple entry points for different usage scenarios. 'index.tsx' is for development with examples, 'Isoflow.tsx' is the main component export, and 'index-docker.tsx' is specifically for Docker builds.

```typescript
// packages/fossflow-lib/src/index.tsx: Development entry point with examples
// packages/fossflow-lib/src/Isoflow.tsx: Main component exported for library usage
// packages/fossflow-lib/src/index-docker.tsx: Docker-specific entry point

```

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

### Monorepo Library Development Commands (Bash)

Source: https://github.com/stan-smith/fossflow/blob/master/CONTRIBUTING.md

Commands to manage the development and building of the fossflow-lib package within the monorepo. Includes starting in watch mode, building for production, and running tests.

```bash
# Start library in watch mode
npm run dev:lib

# Build library
npm run build:lib

# Run library tests
cd packages/fossflow-lib && npm test
```

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

### Update Semantic Release Packages (npm)

Source: https://github.com/stan-smith/fossflow/blob/master/docs/SEMANTIC_RELEASE.md

Updates the core semantic-release package and its associated plugins to their latest versions using npm. This ensures access to the newest features and bug fixes. No specific inputs are required beyond executing the command in the project's root directory.

```bash
npm update semantic-release @semantic-release/changelog @semantic-release/git @semantic-release/exec
```

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

### Check Backend Storage Status (Bash)

Source: https://context7.com/stan-smith/fossflow/llms.txt

This command-line snippet shows how to check the server-side storage status using a cURL request to the `/api/storage/status` endpoint. It includes an example of the expected JSON response indicating whether storage is enabled and if Git backup is configured.

```bash
# Check storage status
curl http://localhost:3001/api/storage/status

# Response
{
  "enabled": true,
  "gitBackup": false,
  "version": "1.0.0"
}
```

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

### GitHub Actions Workflow for Release (.github/workflows/release.yml)

Source: https://github.com/stan-smith/fossflow/blob/master/docs/SEMANTIC_RELEASE.md

This GitHub Actions workflow orchestrates the semantic-release process. It triggers on pushes to the main branches, runs tests, and if successful, executes semantic-release to handle versioning, changelog, tagging, and GitHub releases. It utilizes GITHUB_TOKEN for API access and optionally NPM_TOKEN for publishing.

```yaml
name: Release

on:
  push:
    branches:
      - master
      - main

jobs:
  release:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install dependencies
        run: npm ci
      - name: Run tests
        run: npm test
      - name: Release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
        run: npx semantic-release
```

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

### Internationalization (i18n) with Fossflow (JSX)

Source: https://context7.com/stan-smith/fossflow/llms.txt

This JSX snippet demonstrates how to implement internationalization in Fossflow by providing locale data. It shows how to use built-in locales like `enUS` and `zhCN`, and how to define and pass a custom locale object for UI translations, including examples for common elements, main menu items, and settings.

```jsx
import Isoflow, { enUS, zhCN } from 'fossflow';

// Use built-in locales
<Isoflow locale={enUS} />
<Isoflow locale={zhCN} />

// Or provide custom locale
const customLocale = {
  common: { exampleText: 'Example' },
  mainMenu: {
    undo: 'Undo',
    redo: 'Redo',
    open: 'Open',
    exportJson: 'Export JSON',
    exportCompactJson: 'Export Compact JSON',
    exportImage: 'Export Image',
    clearCanvas: 'Clear Canvas',
    settings: 'Settings',
    gitHub: 'GitHub'
  },
  helpDialog: {
    title: 'Help',
    close: 'Close',
    keyboardShortcuts: 'Keyboard Shortcuts',
    // ... other translations
  },
  settings: {
    hotkeys: { title: 'Hotkeys', profile: 'Profile', /* ... */ },
    pan: { title: 'Pan Controls', /* ... */ },
    connector: { title: 'Connector Settings', /* ... */ }
  }
};

<Isoflow locale={customLocale} />
```

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

### Install Isoflow using npm

Source: https://github.com/stan-smith/fossflow/blob/master/packages/fossflow-lib/docs/pages/docs/installation.mdx

Installs the Isoflow React component using the npm package manager. This is the standard way to add Isoflow to your project's dependencies.

```bash
npm install isoflow
```

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

### Docker Deployment Options for Fossflow (Bash)

Source: https://context7.com/stan-smith/fossflow/llms.txt

This section provides bash commands for deploying Fossflow using Docker. It includes instructions for using Docker Compose, running the container directly with volume mounts for persistent storage, disabling server storage, and lists available environment variables for configuration.

```bash
# Using Docker Compose (recommended)
docker compose up

# Or run directly with volume mount
docker run -p 80:80 -v $(pwd)/diagrams:/data/diagrams stnsmith/fossflow:latest

# Disable server storage
docker run -p 80:80 -e ENABLE_SERVER_STORAGE=false stnsmith/fossflow:latest

# Environment variables
# ENABLE_SERVER_STORAGE=true     # Enable/disable storage endpoints
# STORAGE_PATH=/data/diagrams    # Directory for diagram files
# BACKEND_PORT=3001              # Server port
# ENABLE_GIT_BACKUP=false        # Enable Git version control
```

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

### Build FossFLOW for Production (Bash)

Source: https://github.com/stan-smith/fossflow/blob/master/packages/fossflow-app/README.md

Commands to create an optimized production build of FossFLOW and serve it locally using npx serve. Also includes instructions for setting a public URL for custom deployment paths.

```bash
# Create optimized production build
npm run build

# Serve the production build locally
npx serve -s build

# Create optimized production build for given path
PUBLIC_URL="https://mydomain.tld/path/to/app" npm run build
```

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

### Run Tests with npm

Source: https://github.com/stan-smith/fossflow/blob/master/CONTRIBUTING.md

Commands to run tests using npm, including options for watching changes and generating coverage reports. These commands are essential for verifying code integrity.

```bash
npm test                    # Run all tests
npm test -- --watch        # Watch mode
npm test -- --coverage     # Coverage report
```

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

### Build and Run Docker Images

Source: https://github.com/stan-smith/fossflow/blob/master/CONTRIBUTING.md

Commands for building multi-architecture Docker images and running containers using Docker Compose or directly. These are used for local development and deployment.

```bash
# Build multi-architecture image
docker buildx build --platform linux/amd64,linux/arm64 -t fossflow:local .

# Run with Docker Compose
docker compose up

# Or pull from Docker Hub
docker run -p 80:80 stnsmith/fossflow:latest
```

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

### React App Initialization with PWA and i18n

Source: https://github.com/stan-smith/fossflow/blob/master/FOSSFLOW_ENCYCLOPEDIA.md

Initializes the React application, registers the service worker for Progressive Web App (PWA) capabilities, sets up Quill editor styles, and initializes internationalization (i18n). This is the entry point for the `fossflow-app`.

```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import './i18n'; // Import i18n initialization

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
serviceWorkerRegistration.register();

```

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

### Basic Isoflow Component Usage in React

Source: https://context7.com/stan-smith/fossflow/llms.txt

Demonstrates how to integrate the Isoflow component into a React application. It shows how to pass initial data and handle model updates via callbacks.

```jsx
import React from 'react';
import Isoflow from 'fossflow';

const App = () => {
  const handleModelUpdated = (model) => {
    console.log('Model updated:', model);
    // Persist to backend or local storage
  };

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Isoflow
        initialData={{
          title: 'My Network Diagram',
          icons: [],
          colors: [{ id: 'blue', value: '#0392ff' }],
          items: [],
          views: [],
          fitToView: true
        }}
        onModelUpdated={handleModelUpdated}
        editorMode="EDITABLE"
        enableDebugTools={false}
        mainMenuOptions={['ACTION.OPEN', 'EXPORT.JSON', 'EXPORT.PNG', 'ACTION.CLEAR_CANVAS']}
        renderer={{ showGrid: true, backgroundColor: '#f5f5f5' }}
      />
    </div>
  );
};

export default App;
```

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

### Git Branch Creation (Bash)

Source: https://github.com/stan-smith/fossflow/blob/master/CONTRIBUTING.md

Demonstrates how to create new Git branches for features or bug fixes using descriptive naming conventions.

```bash
git checkout -b feature/your-feature-name
# or
git checkout -b fix/bug-description
```

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

### Get Diagram API

Source: https://context7.com/stan-smith/fossflow/llms.txt

Retrieve the full JSON content of a specific diagram by its ID.

```APIDOC
## GET /api/diagrams/{diagramId}

### Description
Fetches the complete JSON representation of a single diagram, identified by its unique ID.

### Method
GET

### Endpoint
/api/diagrams/{diagramId}

### Parameters
#### Path Parameters
- **diagramId** (string) - Required - The unique identifier of the diagram to retrieve.

### Request Example
```bash
curl http://localhost:3001/api/diagrams/my-diagram
```

### Response
#### Success Response (200)
- **Diagram Object**: The full JSON structure of the requested diagram.
  - **id** (string) - Unique identifier for the diagram.
  - **title** (string) - The title of the diagram.
  - **version** (string) - The version of the diagram.
  - **icons** (array) - List of icons used in the diagram.
  - **items** (array) - List of items (nodes, shapes) in the diagram.
  - **views** (array) - Different views or layouts of the diagram.
  - **lastModified** (string) - Timestamp of the last modification.

#### Response Example
```json
{
  "id": "my-diagram",
  "title": "Cloud Infrastructure",
  "version": "1.0.0",
  "icons": [...],
  "items": [...],
  "views": [...],
  "lastModified": "2025-02-14T14:20:00.000Z"
}
```
```

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

### Available npm Scripts for FossFLOW Development

Source: https://github.com/stan-smith/fossflow/blob/master/CONTRIBUTING.md

A list of common npm scripts for managing the FossFLOW development environment, including running the app, building the library, testing, and linting.

```bash
npm run dev          # Start app development server
npm run dev:lib      # Watch mode for library development
npm run build        # Build both library and app
npm run build:lib    # Build library only
npm run build:app    # Build app only
npm test             # Run tests
npm run lint         # Check for linting errors
npm run publish:lib  # Publish library to npm
```

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

### Conventional Commit PR Titles

Source: https://github.com/stan-smith/fossflow/blob/master/CONTRIBUTING.md

Examples of pull request titles formatted according to the conventional commit specification. This format is required for automated tracking and organization of contributions.

```text
feat: add undo/redo functionality
fix: prevent menu from opening during drag
docs: update installation instructions
feat(connector)!: change default connector mode
```

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

### Testing and Linting Commands (Bash)

Source: https://github.com/stan-smith/fossflow/blob/master/CONTRIBUTING.md

Commands to execute tests, run linters, and test changes in both the library and the application within the monorepo.

```bash
# Run all tests
npm test

# Run linting
npm run lint

# Test library changes
npm run build:lib

# Test app with library changes
npm run dev
```

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

### Dockerfile for Fossflow Application Build and Deployment (Dockerfile)

Source: https://github.com/stan-smith/fossflow/blob/master/FOSSFLOW_ENCYCLOPEDIA.md

A multi-stage Dockerfile for building the Fossflow application. It first installs dependencies and builds the library and app, then creates a production stage with the backend server and frontend assets.

```dockerfile
# Multi-stage build
FROM node:22 AS build
WORKDIR /app
# Install dependencies for monorepo
RUN npm install
# Build library first, then app
RUN npm run build:lib && npm run build:app

# Production stage with backend
FROM node:22-alpine
# Install backend dependencies
COPY packages/fossflow-backend /app/backend
# Copy built frontend
COPY --from=build /app/packages/fossflow-app/build /app/frontend
# Start backend server serving frontend

```

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

### Define Connector with Labels and Styling (JavaScript)

Source: https://context7.com/stan-smith/fossflow/llms.txt

This snippet demonstrates how to define a connector object in JavaScript, specifying its ID, description, color, width, style, line type, and arrow visibility. It also shows how to add multiple labels with custom positioning and height, and define anchors for the connector path, referencing items or tiles.

```javascript
const connector = {
  id: 'data-flow-1',
  description: 'API Communication',
  color: 'primary',           // Reference to color id
  customColor: '#ff5722',     // Or use custom RGB color
  width: 12,                  // Line width in pixels
  style: 'SOLID',             // 'SOLID' | 'DOTTED' | 'DASHED'
  lineType: 'DOUBLE',         // 'SINGLE' | 'DOUBLE' | 'DOUBLE_WITH_CIRCLE'
  showArrow: true,            // Show directional arrow

  // Multiple labels along the connector path (up to 256)
  labels: [
    { id: 'l1', text: 'Start', position: 0, height: 20, line: '1', showLine: true },
    { id: 'l2', text: 'REST API', position: 50, height: 30, line: '1' },
    { id: 'l3', text: 'End', position: 100, height: 20, line: '2' }
  ],

  // Anchors define the connector path
  anchors: [
    { id: 'a1', ref: { item: 'source-node' } },           // Anchor to item
    { id: 'a2', ref: { tile: { x: 3, y: 2 } } },          // Anchor to tile (waypoint)
    { id: 'a3', ref: { item: 'destination-node' } }       // Anchor to item
  ]
};
```