Flowuent Diagramming Examples

✨ 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.

Contributing

Please ensure all changes follow the existing code structure and patterns. The project uses Nx for monorepo management and follows React best practices.