diff --git a/.changeset/metal-facts-guess.md b/.changeset/metal-facts-guess.md new file mode 100644 index 0000000..6749e1b --- /dev/null +++ b/.changeset/metal-facts-guess.md @@ -0,0 +1,6 @@ +--- +"@llamaindex/workflow-viz-node": patch +"@llamaindex/workflow-viz": patch +--- + +Generate workflow visualization in Node.js diff --git a/demo/visualization/README.md b/demo/visualization/README.md index d3f1306..2fc9d28 100644 --- a/demo/visualization/README.md +++ b/demo/visualization/README.md @@ -1,13 +1,16 @@ -### Workflow Visualization Demo +# Workflow Visualization Demo -A minimal Vite + TypeScript + React demo that visualizes an example `@llamaindex/workflow-core` graph using `@llamaindex/workflow-viz` and Sigma.js. +This demo showcases two different ways to visualize `@llamaindex/workflow-core` graphs: -### Prerequisites +1. **Browser Visualization**: Interactive web-based graph using Sigma.js +2. **Node.js Image Generation**: Generate static PNG images using node-canvas + +## Prerequisites - **Node.js**: v20 or newer - **npm** (bundled with Node.js) -### Install +## Installation From the repo root: @@ -16,6 +19,12 @@ cd demo/visualization npm install ``` +--- + +## 🌐 Browser Visualization + +Interactive web-based workflow visualization using Sigma.js for real-time graph rendering. + ### Run in development ```bash @@ -38,13 +47,67 @@ npm run preview Open the preview server at [http://localhost:4173](http://localhost:4173) (or the port shown in the terminal). -### What this demo does +### What it does -- Defines a small workflow in `src/workflow.ts` using `createWorkflow` and wraps it with `withDrawing` to add drawing capabilities. -- Use `draw` method of the workflow to render it in a HTML container in `src/main.ts` using force-directed layout. +- Defines a workflow in `src/workflow.ts` using `createWorkflow` and wraps it with `withDrawing` to add drawing capabilities +- Uses the `draw` method to render the workflow in an HTML container using force-directed layout +- Provides interactive graph navigation, zoom, and pan capabilities ### Key files -- `src/workflow.ts`: Example workflow (events, handlers) - adding drawing capabilities -- `src/main.ts`: Renders the workflow in a HTML container using force-directed layout +- `src/workflow.ts`: Example workflow (events, handlers) with drawing capabilities +- `src/viz-browser.ts`: Browser visualization entry point +- `src/style.css`: Styling for the visualization +- `index.html`: HTML container for the visualization - `vite.config.ts`: Vite config with React SWC plugin + +--- + +## 🖼️ Node.js Image Generation + +Generate static PNG images of workflow graphs using node-canvas for documentation, reports, or automated workflows. + +### Generate Graph as PNG image + +```bash +npm run generate +``` + +This will create `workflow.png` in the current directory. + +> **Note:** This uses `node-canvas`, which requires native dependencies. +> +> **On macOS:** +> +> ```bash +> brew install pkg-config cairo pango libpng jpeg giflib librsvg +> ``` +> +> **On Ubuntu/Debian:** +> +> ```bash +> sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev +> ``` +> +> **For pnpm v10+:** Run `pnpm approve-builds` or add `enable-pnpm-unsafe-build-scripts=true` to `.npmrc`. + +### What it does + +- Uses the same workflow definition from `src/workflow.ts` +- Wraps the workflow with `withDrawingNode` for Node.js image generation +- Generates a high-quality PNG image with configurable dimensions and layout +- Perfect for automated documentation, CI/CD pipelines, or batch processing + +### Key files + +- `src/workflow.ts`: Shared workflow definition (events, handlers) +- `src/viz-node.ts`: Node.js image generation entry point +- `package.json`: Contains the `generate` script + +--- + +## Shared Components + +Both examples use the same underlying workflow definition: + +- **`src/workflow.ts`**: Contains the example workflow with events and handlers that both browser and Node.js examples can use diff --git a/demo/visualization/index.html b/demo/visualization/index.html index 0ad9f4d..e500a14 100644 --- a/demo/visualization/index.html +++ b/demo/visualization/index.html @@ -9,6 +9,6 @@
- +