Machine Learning Diagram Family

Machine learning pipeline diagrams with 20 node types covering data preparation, model training, evaluation, inference, and neural network architectures.

Machine learning family: data, preprocessing, models, training and evaluation

Table of Contents

Overview

Base Control: MLControl : MaterialControl
Namespace: Beep.Skia.ML

The MLControl is the root control for this diagram family. It inherits MaterialControl and provides shared port management, styling, and template methods for all nodes in the family.

This family contains 18 node types.

Node Types

Node ClassShapeDescription
MLDataSourceNodeDatabase/tableTraining/test data source with format, size, and schema.
MLPreprocessNodeGear/clean iconData preprocessing: normalization, encoding, imputation.
MLFeatureEngineeringNodeFeature iconFeature creation, selection, transformation.
MLDataAugmentationNodeMultiply iconData augmentation (rotation, flip, noise, synthetic).
MLDataSplitterNodeSplit arrowTrain/validation/test split with configurable ratios.
MLModelNodeBrain/model iconML model with hyperparameters: learning rate, layers, epochs.
MLTrainerNodeTraining iconModel training node with optimizer, loss function, batch size.
MLEvaluateNodeCheckmark/targetModel evaluation: accuracy, precision, recall, F1, ROC.
MLInferenceNodeForward arrowReal-time inference/prediction node.
MLBatchPredictionNodeBatch iconBatch prediction on dataset.
MLCrossValidationNodeK-fold iconK-fold cross-validation with fold metrics.
MLHyperparameterTuningNodeTuning knobGrid/random/Bayesian hyperparameter optimization.
MLModelExportNodeExport/disk iconExport model to ONNX, PMML, pickle, TensorFlow SavedModel.
MLModelLoadNodeImport/disk iconLoad pre-trained model from file/registry.
MLCNNNodeConvolution gridConvolutional Neural Network: conv, pool, flatten, dense.
MLRNNNodeRecurrent iconRecurrent Neural Network: LSTM/GRU with sequence length.
MLNeuralNetworkNodeNetwork layersDense/feedforward neural network with configurable layers.
MLTransformerNodeAttention gridTransformer architecture: attention, feedforward, layer norm.

MLDataSourceNode

Training/test data source with format, size, and schema.

ShapeDatabase/table
Input Ports0
Output Ports1+

MLPreprocessNode

Data preprocessing: normalization, encoding, imputation.

ShapeGear/clean icon
Input Ports1
Output Ports1

MLFeatureEngineeringNode

Feature creation, selection, transformation.

ShapeFeature icon
Input Ports1
Output Ports1

MLDataAugmentationNode

Data augmentation (rotation, flip, noise, synthetic).

ShapeMultiply icon
Input Ports1
Output Ports1

MLDataSplitterNode

Train/validation/test split with configurable ratios.

ShapeSplit arrow
Input Ports1
Output Ports2-3

MLModelNode

ML model with hyperparameters: learning rate, layers, epochs.

ShapeBrain/model icon
Input Ports1+
Output Ports1+

MLTrainerNode

Model training node with optimizer, loss function, batch size.

ShapeTraining icon
Input Ports2 (data + model)
Output Ports1 (trained model)

MLEvaluateNode

Model evaluation: accuracy, precision, recall, F1, ROC.

ShapeCheckmark/target
Input Ports1
Output Ports1

MLInferenceNode

Real-time inference/prediction node.

ShapeForward arrow
Input Ports2 (data + model)
Output Ports1 (predictions)

MLBatchPredictionNode

Batch prediction on dataset.

ShapeBatch icon
Input Ports2
Output Ports1

MLCrossValidationNode

K-fold cross-validation with fold metrics.

ShapeK-fold icon
Input Ports1
Output Ports1

MLHyperparameterTuningNode

Grid/random/Bayesian hyperparameter optimization.

ShapeTuning knob
Input Ports1
Output Ports1

MLModelExportNode

Export model to ONNX, PMML, pickle, TensorFlow SavedModel.

ShapeExport/disk icon
Input Ports1
Output Ports0

MLModelLoadNode

Load pre-trained model from file/registry.

ShapeImport/disk icon
Input Ports0
Output Ports1

MLCNNNode

Convolutional Neural Network: conv, pool, flatten, dense.

ShapeConvolution grid
Input Ports1
Output Ports1

MLRNNNode

Recurrent Neural Network: LSTM/GRU with sequence length.

ShapeRecurrent icon
Input Ports1
Output Ports1

MLNeuralNetworkNode

Dense/feedforward neural network with configurable layers.

ShapeNetwork layers
Input Ports1
Output Ports1

MLTransformerNode

Transformer architecture: attention, feedforward, layer norm.

ShapeAttention grid
Input Ports1
Output Ports1

Connection Points

Every node in this family exposes connection points (ports) for linking to other nodes. Port positions are computed lazily by LayoutPorts(), which runs when MarkPortsDirty() flags the layout as stale after a move or resize.

Node ClassInput PortsOutput PortsExtra
MLDataSourceNode01+—
MLPreprocessNode11—
MLFeatureEngineeringNode11—
MLDataAugmentationNode11—
MLDataSplitterNode12-3—
MLModelNode1+1+—
MLTrainerNode2 (data + model)1 (trained model)—
MLEvaluateNode11—
MLInferenceNode2 (data + model)1 (predictions)—
MLBatchPredictionNode21—
MLCrossValidationNode11—
MLHyperparameterTuningNode11—
MLModelExportNode10—
MLModelLoadNode01—
MLCNNNode11—
MLRNNNode11—
MLNeuralNetworkNode11—
MLTransformerNode11—

Connection Conventions

When building diagrams with this family, follow these conventions:

  • Data flows left to right through the pipeline
  • Data splitter produces train/val/test outputs
  • Trainer takes separate data and model inputs
  • Model export is a terminal node (no outputs)

Usage Example

Complete example showing creation, node placement, and connection:

C# Example

var ml = new MLControl
{
    X = 50, Y = 50,
    Width = 800, Height = 500
};
drawingManager.AddComponent(ml);

var data = new MLDataSourceNode { X = 80, Y = 100, Text = "Training Data" };
var pre = new MLPreprocessNode { X = 220, Y = 100, Text = "Normalize" };
var split = new MLDataSplitterNode { X = 360, Y = 100, TrainRatio = 0.8 };
var model = new MLModelNode { X = 500, Y = 60, ModelType = "RandomForest" };
var eval = new MLEvaluateNode { X = 640, Y = 100 };

drawingManager.AddComponent(data);
drawingManager.AddComponent(pre);
drawingManager.AddComponent(split);
drawingManager.AddComponent(model);
drawingManager.AddComponent(eval);

drawingManager.ConnectComponents(data.OutPoints[0], pre.InPoints[0]);
drawingManager.ConnectComponents(pre.OutPoints[0], split.InPoints[0]);
drawingManager.ConnectComponents(split.OutPoints[0], model.InPoints[0]);
drawingManager.ConnectComponents(model.OutPoints[0], eval.InPoints[0]);