Implementation:FlowiseAI Flowise AgentflowStickyNote
| Knowledge Sources | |
|---|---|
| Domains | Agent Flow Editor, Visual Canvas |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
StickyNote is a ReactFlow custom node component that renders an editable sticky note with color theming, hover effects, and a toolbar with duplicate and delete actions.
Description
This component displays a styled card (CardWrapper) with a configurable border color derived from the node's data.color property. It supports three visual states: default (50% alpha), hovered (80% alpha), and selected (full color with a box shadow). The card background adapts for dark mode using MUI's darken/lighten utilities. A floating NodeToolbar appears above the note with icon buttons for duplicating and deleting the node via flowContext. The note content is rendered through the reusable Input component bound to the first input parameter.
Usage
Use this component as a custom node type (stickyNote) in the AgentFlow v2 ReactFlow canvas. It is registered in the nodeTypes map and instantiated when the user adds a sticky note to the flow.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/views/agentflowsv2/StickyNote.jsx
- Lines: 1-136
Signature
const StickyNote = ({ data }) => { ... }
export default StickyNote
Import
import StickyNote from '@/views/agentflowsv2/StickyNote'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| data | object | No | ReactFlow node data object containing id, color, selected, inputParams (array with at least one param), and inputs (key-value map of current input values) |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | React element | A styled sticky note card with a floating toolbar (duplicate/delete buttons) and an editable text input area |
Usage Examples
Basic Usage
// Registered as a custom node type in the ReactFlow canvas
const nodeTypes = {
agentFlow: AgentFlowNode,
stickyNote: StickyNote,
iteration: IterationNode
}
<ReactFlow
nodes={nodes}
edges={edges}
nodeTypes={nodeTypes}
/>