Add Flow Graph Editor documentation

configuration/structure.json

@@ -2627,6 +2627,97 @@
                     "children": {},
                     "content": "toolsAndResources/guiEditor"
                 },
+                "flowGraphEditor": {
+                    "friendlyName": "Flow Graph Editor",
+                    "children": {
+                        "gettingStarted": {
+                            "friendlyName": "Getting Started",
+                            "children": {},
+                            "content": "toolsAndResources/flowGraphEditor/gettingStarted"
+                        },
+                        "firstGraphExample": {
+                            "friendlyName": "Example - Your First Runnable Graph",
+                            "children": {},
+                            "content": "toolsAndResources/flowGraphEditor/firstGraphExample"
+                        },
+                        "meshPickExample": {
+                            "friendlyName": "Example - Click A Mesh And Log It",
+                            "children": {},
+                            "content": "toolsAndResources/flowGraphEditor/meshPickExample"
+                        },
+                        "multipleGraphs": {
+                            "friendlyName": "Multiple Graphs In One Editor",
+                            "children": {},
+                            "content": "toolsAndResources/flowGraphEditor/multipleGraphs"
+                        },
+                        "executionContexts": {
+                            "friendlyName": "Execution Contexts",
+                            "children": {},
+                            "content": "toolsAndResources/flowGraphEditor/executionContexts"
+                        },
+                        "authoringAndDebugging": {
+                            "friendlyName": "Authoring and Debugging",
+                            "children": {},
+                            "content": "toolsAndResources/flowGraphEditor/authoringAndDebugging"
+                        },
+                        "editorOperations": {
+                            "friendlyName": "Editor Operations and Shortcuts",
+                            "children": {},
+                            "content": "toolsAndResources/flowGraphEditor/editorOperations"
+                        },
+                        "validationAndProperties": {
+                            "friendlyName": "Validation and Property Editing",
+                            "children": {},
+                            "content": "toolsAndResources/flowGraphEditor/validationAndProperties"
+                        },
+                        "supportedBlockFamilies": {
+                            "friendlyName": "Supported Block Families",
+                            "children": {},
+                            "content": "toolsAndResources/flowGraphEditor/supportedBlockFamilies"
+                        },
+                        "blockReference": {
+                            "friendlyName": "Block Reference",
+                            "children": {},
+                            "content": "toolsAndResources/flowGraphEditor/blockReference"
+                        },
+                        "eventBlocks": {
+                            "friendlyName": "Event Blocks",
+                            "children": {},
+                            "content": "toolsAndResources/flowGraphEditor/eventBlocks"
+                        },
+                        "animationBlocks": {
+                            "friendlyName": "Animation Blocks",
+                            "children": {},
+                            "content": "toolsAndResources/flowGraphEditor/animationBlocks"
+                        },
+                        "physicsBlocks": {
+                            "friendlyName": "Physics Blocks",
+                            "children": {},
+                            "content": "toolsAndResources/flowGraphEditor/physicsBlocks"
+                        },
+                        "audioBlocks": {
+                            "friendlyName": "Audio Blocks",
+                            "children": {},
+                            "content": "toolsAndResources/flowGraphEditor/audioBlocks"
+                        },
+                        "controlFlowBlocks": {
+                            "friendlyName": "Control Flow Blocks",
+                            "children": {},
+                            "content": "toolsAndResources/flowGraphEditor/controlFlowBlocks"
+                        },
+                        "dataAccessBlocks": {
+                            "friendlyName": "Data Access Blocks",
+                            "children": {},
+                            "content": "toolsAndResources/flowGraphEditor/dataAccessBlocks"
+                        },
+                        "utilityBlocks": {
+                            "friendlyName": "Utility Blocks",
+                            "children": {},
+                            "content": "toolsAndResources/flowGraphEditor/utilityBlocks"
+                        }
+                    },
+                    "content": "toolsAndResources/flowGraphEditor"
+                },
                 "nme": {
                     "friendlyName": "Node Material Editor",
                     "children": {

content/features/featuresDeepDive/flowGraph.md

@@ -11,8 +11,8 @@ The [Flow Graph](/features/featuresDeepDive/flowGraph/flowGraphBasicConcepts) sy
 The Flow Graph system is designed to be intuitive and user-friendly, with a visual interface that allows users to create and manipulate blocks representing different actions and events. This makes it easy to create complex interactions by simply connecting blocks together.
 The Flow Graph system is particularly useful for creating interactive experiences in games, simulations, and other applications where user interaction is a key component. It allows developers to create dynamic and responsive environments that can adapt to user input in real-time.
 
-A flow graph is easy to use when it has a corresponding visual editor. For the time being, Babylon's flow graph system does not have a visual editor, but it is planned for future versions of the framework.
+A flow graph becomes much easier to author when it has a corresponding visual editor. Babylon.js now includes a dedicated [Flow Graph Editor](/toolsAndResources/flowGraphEditor) that lets you create, test, validate, and debug graphs visually.
 
 Under the hood, the flow graph is being used when glTF with interactivity is loaded. The glTF interactivity graph is converted to a Babylon flow graph, which is then executed when the user interacts with the scene.
 
-To read more, choose a section from the list below
+If you want to understand the runtime model, continue with the sections below. If you want to build graphs through a visual tool, start with the [Flow Graph Editor documentation](/toolsAndResources/flowGraphEditor).

content/toolsAndResources/flowGraphEditor.md

@@ -0,0 +1,75 @@
+---
+title: Flow Graph Editor
+image:
+description: Build Babylon.js flow graphs visually with a UI-first editor for interactive scenes.
+keywords: babylon.js, tools, resources, flow graph, flow graph editor, visual scripting, no code
+further-reading:
+    - title: Flow Graph Overview
+      url: /features/featuresDeepDive/flowGraph
+    - title: Flow Graph Basic Concepts
+      url: /features/featuresDeepDive/flowGraph/flowGraphBasicConcepts
+video-overview:
+video-content:
+---
+
+## Build Interactive Scenes Without Writing Flow Graph Code
+
+The Flow Graph Editor is a visual authoring tool for Babylon.js flow graphs. It lets you create interactions, logic, and event-driven behavior by connecting blocks in a node graph instead of writing the graph by hand in code.
+
+This makes the editor a practical companion to the core [Flow Graph documentation](/features/featuresDeepDive/flowGraph):
+
+- Use the feature deep-dive pages to understand the runtime concepts and APIs.
+- Use the Flow Graph Editor to assemble, test, and debug those graphs visually.
+
+The editor is designed for rapid iteration. You can load a scene, wire logic together, run it immediately, inspect values, pause on breakpoints, and save the graph for later use.
+
+You can try the hosted build here: [Flow Graph Editor](https://flowgraph.babylonjs.com)
+
+![Babylon.js Flow Graph Editor overview](/img/tools/flowGraphEditor/overview.png)
+
+## What The Editor Covers Today
+
+The current editor focuses on the full authoring loop:
+
+- Creating graphs with execution and data blocks
+- Managing multiple graphs in one editor session
+- Loading a test scene from a Playground snippet or local scene file
+- Saving and restoring graphs from files or the Babylon.js snippet server
+- Running, pausing, stopping, and resetting graph execution
+- Managing multiple execution contexts for the same graph definition
+- Visual debugging with execution highlights, flow animation, and breakpoints
+- Validating graphs while you edit
+- Organizing complex graphs with groups, sticky notes, and search
+- Editing block configuration and scene-aware references in a property panel
+
+The feature set is growing quickly, so this section is intentionally structured as a living set of pages rather than a single static article.
+
+## Start Here
+
+- [Getting Started With The Flow Graph Editor](/toolsAndResources/flowGraphEditor/gettingStarted)
+- [Example - Your First Runnable Graph](/toolsAndResources/flowGraphEditor/firstGraphExample)
+- [Example - Click A Mesh And Log It](/toolsAndResources/flowGraphEditor/meshPickExample)
+- [Multiple Graphs In One Editor](/toolsAndResources/flowGraphEditor/multipleGraphs)
+- [Execution Contexts](/toolsAndResources/flowGraphEditor/executionContexts)
+- [Authoring, Validation, and Debugging](/toolsAndResources/flowGraphEditor/authoringAndDebugging)
+- [Editor Operations and Shortcuts](/toolsAndResources/flowGraphEditor/editorOperations)
+- [Validation and Property Editing](/toolsAndResources/flowGraphEditor/validationAndProperties)
+- [Supported Block Families](/toolsAndResources/flowGraphEditor/supportedBlockFamilies)
+- [Block Reference](/toolsAndResources/flowGraphEditor/blockReference)
+- [Event Blocks](/toolsAndResources/flowGraphEditor/eventBlocks)
+- [Animation Blocks](/toolsAndResources/flowGraphEditor/animationBlocks)
+- [Physics Blocks](/toolsAndResources/flowGraphEditor/physicsBlocks)
+- [Audio Blocks](/toolsAndResources/flowGraphEditor/audioBlocks)
+- [Control Flow Blocks](/toolsAndResources/flowGraphEditor/controlFlowBlocks)
+- [Data Access Blocks](/toolsAndResources/flowGraphEditor/dataAccessBlocks)
+- [Utility Blocks](/toolsAndResources/flowGraphEditor/utilityBlocks)
+
+## Relationship To The Flow Graph System
+
+The editor does not replace the Flow Graph runtime. It is a visual front end for building and inspecting graphs that still run on Babylon.js Flow Graph primitives.
+
+If you are new to flow graphs, read [Flow Graph Basic Concepts](/features/featuresDeepDive/flowGraph/flowGraphBasicConcepts) first. If you already understand the runtime model and want a faster workflow for building interactive logic, continue with the editor pages in this section.
+
+## A Living Documentation Set
+
+New editor features land regularly. This documentation section is organized so it can grow in place as the tool evolves. Expect additional pages over time for topics such as block catalogs, scene integration workflows, graph reuse patterns, and new debugging capabilities.

content/toolsAndResources/flowGraphEditor/animationBlocks.md

@@ -0,0 +1,48 @@
+---
+title: Animation Blocks
+image:
+description: Detailed reference for the Animation family in the Babylon.js Flow Graph Editor.
+keywords: babylon.js, flow graph editor, animation blocks, interpolation, play animation
+further-reading:
+    - title: Block Reference
+      url: /toolsAndResources/flowGraphEditor/blockReference
+    - title: Validation and Property Editing
+      url: /toolsAndResources/flowGraphEditor/validationAndProperties
+    - title: Scene Context
+      url: /toolsAndResources/flowGraphEditor/gettingStarted
+video-overview:
+video-content:
+---
+
+## Why Animation Blocks Matter
+
+Animation blocks connect authored graph logic to time-based scene change.
+
+They are useful when the graph should start, pause, stop, or interpolate values over time instead of reacting only as discrete steps.
+
+## Core Animation Blocks
+
+### `PlayAnimation`
+
+Use `PlayAnimation` when the graph should start a configured animation group.
+
+This block is most useful when the loaded scene already contains animation groups that can be selected from the property panel.
+
+### `PauseAnimation`
+
+Use `PauseAnimation` when a running animation should be paused without being fully reset.
+
+### `StopAnimation`
+
+Use `StopAnimation` when animation playback should stop entirely.
+
+### `Interpolation`
+
+Use `Interpolation` when the graph should move a value over time rather than jump directly between states.
+
+This block is especially helpful in graphs driven by `SceneTickEvent` or other time-sensitive flows.
+
+## Choosing The Right Block
+
+- Use `PlayAnimation`, `PauseAnimation`, and `StopAnimation` for animation-group control.
+- Use `Interpolation` when the graph should shape a value over time.

content/toolsAndResources/flowGraphEditor/audioBlocks.md

@@ -0,0 +1,61 @@
+---
+title: Audio Blocks
+image:
+description: Detailed reference for the Audio families in the Babylon.js Flow Graph Editor.
+keywords: babylon.js, flow graph editor, audio blocks, sound, audio v2
+further-reading:
+    - title: Block Reference
+      url: /toolsAndResources/flowGraphEditor/blockReference
+    - title: Supported Block Families
+      url: /toolsAndResources/flowGraphEditor/supportedBlockFamilies
+    - title: Authoring, Validation, and Debugging
+      url: /toolsAndResources/flowGraphEditor/authoringAndDebugging
+video-overview:
+video-content:
+---
+
+## Why Audio Blocks Matter
+
+The Audio families let graph logic coordinate with Babylon.js Audio V2 playback.
+
+These blocks are useful when interaction logic should start, stop, pause, or inspect sounds as part of a larger scene behavior.
+
+## Audio Actions
+
+### `PlaySound`
+
+Use `PlaySound` to start an Audio V2 sound with playback options such as volume, offset, and looping.
+
+### `StopSound`
+
+Use `StopSound` when a sound should be halted immediately.
+
+### `PauseSound`
+
+Use `PauseSound` when the graph should pause a playing sound or resume one that is already paused.
+
+### `SetSoundVolume`
+
+Use `SetSoundVolume` when interaction logic should change a sound's volume dynamically.
+
+## Audio Events
+
+### `SoundEndedEvent`
+
+Use `SoundEndedEvent` when graph logic should react to playback completion.
+
+## Audio Data
+
+### `GetSoundVolume`
+
+Reads the sound's current volume.
+
+### `IsSoundPlaying`
+
+Reports whether the sound is currently playing or starting.
+
+## Practical Notes
+
+- These blocks target Audio V2 objects.
+- They are most useful when the loaded scene already contains or creates the relevant sound references.
+- Audio control often pairs well with pointer, pick, and custom event workflows.