Yodoo Diagram

Advanced Diagram View with SVG Support

Overview

Yodoo Diagram extends Odoo's standard diagram view with powerful visualization capabilities including custom SVG shapes, badges, flexible styling, and comprehensive configuration options.

📸 Screenshot 1: Main diagram view showing nodes with different shapes and badges

Suggested: Diagram with various node shapes (circle, rectangle, diamond, SVG) and badges

Key Features

• Custom Node Shapes: Circle, Ellipse, Rectangle, Diamond, Triangle, Hexagon, Octagon, Star, Parallelogram, and custom SVG
• SVG Support: Use custom SVG graphics for nodes with automatic scaling and positioning
• Badge System: Add SVG badges to nodes with configurable size, position, and offset
• Flexible Styling: Configure colors, stroke width, fill patterns for nodes and edges
• Edge Customization: Multiple arrow types (standard, open, diamond, circle) and line styles (solid, dashed, dotted)
• Position Control: 9-position grid system for precise label and badge placement
• Global Settings: Centralized configuration with context-specific overrides
• Auto-layout: Automatic graph layout with manual positioning support

📸 Screenshot 2: Diagram Settings configuration page

Suggested: Settings form showing node styles, edge styles, and badge settings

Configuration

1. Diagram Settings

Navigate to Settings → Diagram → Settings to configure:

• Default Node Style: Shape, fill color, stroke color, stroke width, label color
• Default Edge Style: Edge color, width, line style, arrow type
• Graph Layout: Node size (width/height), label font size, outline width
• Edge Label Settings: Font size and font family for edge labels
• Badge Settings: Badge size percentage (10-100%), offset distance
• Position Settings: Label position (9-grid), badge position (9-grid)

2. SVG Badges

Navigate to Settings → Diagram → SVG Badges to manage badge library:

• Upload SVG files for use as badges
• Preview badges in the list view
• Assign badges to nodes via Many2one field

📸 Screenshot 3: SVG Badges management page with preview

Suggested: Badge list showing SVG preview column with various badge icons

Usage

1. Define Diagram View in XML

Add a diagram view to your model:

<record id="view_your_model_diagram" model="ir.ui.view">
    <field name="name">your.model.diagram</field>
    <field name="model">your.model</field>
    <field name="type">yodoo_diagram</field>
    <field name="arch" type="xml">
        <yodoo_diagram auto_layout="false">
            <node object="your.stage.model"
                  bgcolor="gray:closed"
                  bg_color_field="bg_color"
                  fg_color_field="label_color"
                  shape_field="node_shape"
                  stroke_color_field="stroke_color"
                  stroke_width_field="stroke_width"
                  svg_shape_field="svg_shape"
                  badge_field="badge_id"
                  d_position_field="diagram_position">
                <field name="name"/>
                <field name="description"/>
            </node>
            <arrow object="your.transition.model"
                   source="stage_from_id"
                   destination="stage_to_id"
                   label="['name']"
                   edge_color_field="arrow_color"
                   edge_width_field="arrow_width"
                   edge_style_field="arrow_style"
                   arrow_type_field="arrow_type">
                <field name="name"/>
            </arrow>
        </yodoo_diagram>
    </field>
</record>

2. Add Required Fields to Your Model

Add fields to your stage/node model:

class YourStage(models.Model):
    _name = 'your.stage.model'
    _description = 'Your Stage'
    
    name = fields.Char(required=True)
    
    # Node styling fields
    node_shape = fields.Selection([
        ('circle', 'Circle'),
        ('ellipse', 'Ellipse'),
        ('rect', 'Rectangle'),
        ('diamond', 'Diamond'),
        ('triangle', 'Triangle'),
        ('hexagon', 'Hexagon'),
        ('svg', 'SVG Custom'),
    ], default='ellipse')
    
    bg_color = fields.Char(string='Background Color', default='#D3D3D3')
    label_color = fields.Char(string='Label Color', default='#000000')
    stroke_color = fields.Char(string='Stroke Color', default='#000000')
    stroke_width = fields.Integer(string='Stroke Width', default=2)
    
    # SVG shape (Binary field for SVG file)
    svg_shape = fields.Binary(string='SVG Shape', attachment=True)
    svg_shape_filename = fields.Char(string='SVG Filename')
    
    # Badge
    badge_id = fields.Many2one('badge.badge', string='Badge')
    
    # Position storage
    diagram_position = fields.Char(string='Diagram Position')

3. Add Transition/Arrow Model

Create a model for transitions between stages:

class YourTransition(models.Model):
    _name = 'your.transition.model'
    _description = 'Stage Transition'
    
    name = fields.Char(required=True)
    stage_from_id = fields.Many2one('your.stage.model', required=True)
    stage_to_id = fields.Many2one('your.stage.model', required=True)
    
    # Arrow styling fields
    arrow_color = fields.Char(string='Arrow Color', default='#000000')
    arrow_width = fields.Integer(string='Arrow Width', default=2)
    arrow_style = fields.Selection([
        ('solid', 'Solid'),
        ('dashed', 'Dashed'),
        ('dotted', 'Dotted'),
    ], default='solid')
    arrow_type = fields.Selection([
        ('standard', 'Standard'),
        ('open', 'Open'),
        ('diamond', 'Diamond'),
        ('circle', 'Circle'),
    ], default='standard')

📸 Screenshot 4: Diagram showing custom SVG shapes as nodes

Suggested: Diagram with nodes using custom SVG shapes (e.g., icons, logos)

Available Node Shapes

Position Grid System

Both labels and badges use a 9-position grid system for precise placement:

Note: For SVG nodes, labels automatically position at Top Center (2) with black color

📸 Screenshot 5: Different arrow styles and types

Suggested: Diagram showing various arrow types (standard, open, diamond, circle) and line styles (solid, dashed, dotted)

Tips & Best Practices

• SVG Files: Use simple, clean SVG files for best results. Complex SVGs may impact performance.
• Badge Size: Recommended badge size is 30-50% of node size for optimal visibility.
• Badge Offset: Use positive offset values (10-30px) to prevent badge overlap with node edges.
• Colors: Use hex color codes (#RRGGBB) for consistent styling across browsers.
• Auto-layout: Set auto_layout="true" for automatic graph layout, or "false" for manual positioning.
• Context Settings: Create model-specific settings by setting the context_model field.
• Edge Labels: Keep edge labels short for better readability. Adjust font size in settings if needed.

Example: Development Workflow

The included test module (test_yodoo_diagram) demonstrates a complete implementation:

• Model: development.stage - Workflow stages with custom shapes and badges
• Transitions: development.stage.route - Arrows between stages with styling
• Features Used: SVG shapes, badges, custom colors, various arrow types

Review the test module code for a complete working example.

Support

For questions, bug reports, or feature requests:

• 📧 Email: info@crnd.pro
• 🌐 Website: https://crnd.pro
• 🐛 Bug Tracker: https://crnd.pro/requests

This module is maintained by the Center of Research & Development