npm package: @flowuent/diagramming-core
Description: <a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
Latest version: 1.1.0

# Flowuent Diagramming Examples

<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>

✨ **This workspace contains examples for Flowuent Diagramming Core library** ✨

## Overview

This repository provides examples and implementations for the Flowuent Diagramming Core library. It demonstrates how to create and use different types of diagrams including:

- **Workflow Creation** – When creating a workflow manually, users can drag and drop nodes onto the canvas
- **Template Workflows** – When using a workflow template, the nodes are pre-placed on the canvas, and users can rearrange their positions with drag-and-drop
- **Custom Icons** – Automation nodes support configurable icons through the `iconName` field in node data

## Getting Started

### Prerequisites

- Node.js (version 18 or higher)
- Yarn package manager
- GitHub Personal Access Token (PAT) with appropriate permissions

### Setup

1. Clone this repository
2. Create a `.npmrc` file with your GitHub PAT token:
   ```
   @flowuent:registry=https://npm.pkg.github.com/
   //npm.pkg.github.com/:_authToken=ghp_your_PAT
   ```
3. Install dependencies: `yarn install`

## Start the application

Run `yarn dev-diagramming` to start the diagramming development server.

## Build for production

Run `yarn build-diagrams` to build the diagramming application.

## Running tasks

To execute tasks with Nx use the following syntax:

```
npx nx <target> <project> <...options>
```

You can also run multiple targets:

```
npx nx run-many -t <target1> <target2>
```

..or add `-p` to filter specific projects

```
npx nx run-many -t <target1> <target2> -p <proj1> <proj2>
```

## Explore the project graph

Run `npx nx graph` to show the graph of the workspace.

## Folder structure

```
├── apps/
│   ├── diagramming/          # Main diagramming application
│   ├── authentication/       # Authentication app
│   └── workflow/            # Workflow app
├── packages/
│   ├── diagrams/            # Core diagramming components
│   ├── atoms/               # Atomic UI components
│   ├── molecules/           # Molecular UI components
│   ├── organisms/           # Organism UI components
│   ├── common/              # Common utilities
│   ├── interfaces/          # TypeScript interfaces
│   └── zustand/            # State management
├── .npmrc                   # NPM registry configuration
├── package.json             # Project dependencies
└── nx.json                  # Nx workspace configuration
```

## Dependencies

This project uses the `@flowuent/diagramming-core` library as its primary dependency, which is fetched from the Flowuent GitHub registry using the provided PAT token.

## Custom Icons Documentation

For detailed information on how to use custom icons in automation nodes, see the [Custom Icons Guide](packages/diagrams/CUSTOM_ICONS.md).

## Contributing

Please ensure all changes follow the existing code structure and patterns. The project uses Nx for monorepo management and follows React best practices.