ConvoFlow Documentation

Node styling allows you to customize how nodes appear in the workflow canvas. You can control colors, shapes, icons, and even create custom HTML templates.

Basic Styling

python

def _define_styling(self) -> NodeStyling:
    return NodeStyling(
        icon="🔧",                    # Emoji, SVG, or image URL
        background_color="#3b82f6",   # Background color
        border_color="#2563eb",       # Border color
        text_color="#ffffff",         # Text color
        shape="rounded",              # Shape: rectangle, rounded, circle, etc.
        width=200,                    # Fixed width (optional)
        height=100                    # Fixed height (optional)
    )

Available Shapes

rectangle - Standard rectangle
rounded - Rounded corners
circle - Circular shape
pill - Pill-shaped (rounded ends)
hexagon - Hexagonal shape
diamond - Diamond shape

Custom HTML Templates

For advanced styling, you can use custom HTML templates:

python

def _define_styling(self) -> NodeStyling:
    return NodeStyling(
        html_template="""
        <div class="custom-node">
            <div class="node-icon">⚡</div>
            <div class="node-content">
                <div class="node-title">Custom Node</div>
                <div class="node-subtitle">CUSTOM</div>
            </div>
        </div>
        """,
        custom_css="""
        .custom-node {
            display: flex;
            align-items: center;
            padding: 16px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .node-icon {
            font-size: 24px;
            margin-right: 12px;
        }
        .node-title {
            font-weight: 600;
            color: white;
        }
        .node-subtitle {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.8);
        }
        """
    )

Icon Options

Icons can be specified in several ways:

Emoji: icon="🔧"
SVG: Inline SVG string
Image URL: URL to an image file

Best Practices

Use consistent color schemes for related nodes
Choose icons that clearly represent the node's function
Keep custom CSS simple and maintainable
Test node appearance at different zoom levels
Ensure sufficient contrast for readability

Next Steps