Crafting Interactive Digital Logic Circuits Made Easy with Blazor Diagram Component
Tags: blazor, syncfusion, diagram, logiccircuits
Published: 2024-04-24 03:57:49

---
title: Crafting Interactive Digital Logic Circuits Made Easy with Blazor Diagram Component
published: true
date: 2024-04-22 13:10:58 UTC
tags: blazor, syncfusion, diagram, logiccircuits
canonical_url: https://www.syncfusion.com/blogs/post/digital-logic-circuits-with-blazor-diagram-component
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mstueb0vtjpo0azqe2nx.png
---
**TL;DR:** Unleash your creativity with Syncfusion’s Blazor Diagram component! Design digital logic circuits with ease using features like copy-paste, import-export, and a wide array of symbols. By the end, you’ll see why the Blazor Diagram component is indispensable for any digital logic design project.

Creating a digital logic circuit diagram requires precision, clarity, and effective visual communication. Using the right tools, we can make it much easier. One such tool is the versatile Syncfusion Blazor Diagram control. It helps designers to create high-quality logic circuits quickly and with ease.

Let’s learn to create interactive digital logic circuit diagrams using the versatile features of the [Blazor Diagram component](https://www.syncfusion.com/blazor-components/blazor-diagram "Blazor Diagram component")!
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Creating-a-digital-logic-circuit-using-the-Blazor-Diagram-component.png" alt="Creating a digital logic circuit using the Blazor Diagram component" style="width:100%">

  <figcaption>Creating a digital logic circuit using the Blazor Diagram component</figcaption>

</figure>

## Logic circuit diagram symbols

The logic circuit designer provides a variety of symbols for universal logical gates, flip-flops, input and output controls, and other components used in logic circuit diagrams.

### Logic gates

Logic gates are the basic symbols used in any digital circuit design. They perform a Boolean logic function with one or more inputs and produce a single output. A logic circuit designer should have a collection of universal logic gates, including a buffer. ![Logic gates](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Logic-gates.png)

### Flip-flops

A flip-flop is a circuit with two stable states. It is used to store state information. Its state can be changed using control inputs, and it typically has one or two outputs. A logic circuit designer will have SR, D, JK, and T flip-flops in their design toolkit. ![Flip-Flops](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Flip-Flops.png)

### Input controls

Input controls can pass a high (true) or low (false) signal to logic gates or flip-flops. The logic circuit designer has the following input controls: toggle switch, push button, clock, high constant, and low constant to design circuits. ![Input controls](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Input-controls.png)

### Output controls

You can connect output devices to the output pin of a logic gate or flip-flop to showcase its output state. At a minimum, a logical circuit designer should provide a light bulb and a 4-bit digital display as output devices. ![Output controls](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Output-controls.png)

## Creating a digital logic circuit using the Blazor Diagram component

Follow these steps to design a digital logic circuit with the Syncfusion Blazor Diagram component:

### Step 1: Create a diagram surface

1.Create a [Blazor WebAssembly app](https://blazor.syncfusion.com/documentation/diagram/getting-started-with-wasm-app "Getting Started with Diagram Component in the Blazor WASM app").
2.Then, install the [Syncfusion.Blazor.Diagram](https://www.nuget.org/packages/Syncfusion.Blazor.Diagram/ "Syncfusion.Blazor.Diagram NuGet package") the NuGet package in the app using the NuGet package manager.
3.Add the scripts and style resources through CDN or from the NuGet package in the head element of the  **~/wwwroot/index.html** page.
```xml
<head>
    ………
    ………
 <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
 <script src="https://cdn.syncfusion.com/blazor/20.4.38/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>

```

4.Open the  **~/\_Imports.Blazor** file and import the  **Syncfusion**. **Diagram.Diagram**  package in it.
```
@using Syncfusion.Blazor.Diagram
```

5.In the **Program.cs** file, add the services required for the Syncfusion components using the **builder.Services.AddSyncfusionBlazor()** method.
```csharp
using Syncfusion.Blazor;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
. . . . .
. . . . .
builder.Services.AddSyncfusionBlazor();
await builder.Build().RunAsync();
```
6.Finally, add the Blazor Diagram component to the  **Pages** folder in the  **Razor** file.
```xml
<SfDiagramComponent @ref="@Diagram" NodeCreating="@OnNodeCreating" ConnectorCreating= "@OnConnectorCreating" @bind-Width="@DiagramWidth" @bind-Height="@DiagramHeight" @bind-Nodes="@nodes" @bind-Connectors="@connectors">
</SfDiagramComponent>
```

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Creating-a-diagram-canvas-Using-the-Blazor-Diagram-Library.png" alt="Creating a diagram canvas Using the Blazor Diagram Library" style="width:100%">

  <figcaption>Creating a diagram canvas Using the Blazor Diagram Library</figcaption>

</figure>
### Step 2: Creating reusable logic circuit diagram symbols

The Blazor Diagram component has a gallery of reusable nodes and connectors called [Symbol Palette](https://blazor.syncfusion.com/documentation/diagram/symbol-palette "Symbol Palette in Blazor Diagram Component"). It showcases a collection of palettes containing a unique set of nodes and connectors. These elements can be dragged and dropped onto the diagram canvas any number of times.

Follow these steps to create the diagram symbol palette with logic circuit shapes.

1.First, create an HTML div element to serve as the container for the Diagram’s symbol palette.
```xml
<div class="db-palette-parent">
</div>
```

2.Initialize the Syncfusion Diagram’s symbol palette with properties such as **Height** , **Width** , **SymbolHeight** , **SymbolWidth** , and the collection of symbols to be included in the palette.
```xml
<SfSymbolPaletteComponent @ref="@PaletteInstance" Width="100%" Height="100%" SymbolHeight="@symbolSizeHeight" SymbolWidth="@symbolSizeWidth" GetSymbolInfo="GetSymbolInfo" Palettes="@Palettes" SymbolDragPreviewSize="@SymbolPreview" SymbolMargin="@SymbolMargin"> </SfSymbolPaletteComponent>
```

3.Define a collection of symbols to be included in the palette, which can be customized according to your needs.
```csharp
public DiagramObjectCollection<NodeBase> InputSymbols { get; set; } = new DiagramObjectCollection<NodeBase>();
public DiagramObjectCollection<NodeBase> OutputSymbols { get; set; } = new DiagramObjectCollection<NodeBase>();
public DiagramObjectCollection<NodeBase> LogicSymbols { get; set; } = new DiagramObjectCollection<NodeBase>();
public DiagramObjectCollection<NodeBase> FlipFlopSymbols { get; set; } = new DiagramObjectCollection<NodeBase>();
public DiagramObjectCollection<NodeBase> OtherSymbols { get; set; } = new DiagramObjectCollection<NodeBase>();

protected override void OnInitialized()
{
    SymbolPreview = new DiagramSize();
    SymbolPreview.Width = 50;
    SymbolPreview.Height = 50;

    // Initializes the palette
    InitializePalettes();

    InputPalette = new Palette() { Symbols = InputSymbols, Title = "Input Controls", ID = "InputControls", IconCss = "e-ddb-icons e-flow" };

    OutputControlPalettee = new Palette() { Symbols = OutputSymbols, Title = "Output Controls", ID = "OutputControls", IconCss = "e-ddb-icons e-flow" };

    LogicGates = new Palette() { Symbols = LogicSymbols, Title = "Logic Gates", ID = "LogicGates", IconCss = "e-ddb-icons e-flow" };

    FlipFlops = new Palette() { Symbols = FlipFlopSymbols, Title = "Flip Flops", ID = "flipflops", IconCss = "e-ddb-icons e-flow" };

    OtherPalette = new Palette() { Symbols = OtherSymbols, Title = "Other", ID = "otherSymbols", IconCss = "e-ddb-icons e-flow" };

    Palettes = new DiagramObjectCollection<Palette>();

    if (Palettes != null && InputPalette != null)
    {
        Palettes.Add(InputPalette);
        Palettes.Add(OutputControlPalettee);
        Palettes.Add(LogicGates);
        Palettes.Add(FlipFlops);
        Palettes.Add(OtherPalette);
    }
}

private SymbolInfo GetSymbolInfo(IDiagramObject symbol)
{
    SymbolInfo SymbolInfo = new SymbolInfo();
    SymbolInfo.Fit = true;

    string? text = null;
    if (symbol != null)
    {
        if (symbol is Node node && node.Tooltip != null)
        {
            text = node.Tooltip.Content;
        }
        else if (symbol is Node nodeID && nodeID.ID != "Label")
        {
            text = nodeID.ID;
        }
    }
    SymbolInfo.Description = new SymbolDescription() { Text = text, TextWrapping = TextWrap.NoWrap };
    return SymbolInfo;
}

public DiagramObjectCollection<NodeBase> InputSymbols { get; set; } = new DiagramObjectCollection<NodeBase>();
 
public DiagramObjectCollection<NodeBase> OutputSymbols { get; set; } = new DiagramObjectCollection<NodeBase>();
 
public DiagramObjectCollection<NodeBase> LogicSymbols { get; set; } = new DiagramObjectCollection<NodeBase>();
 
public DiagramObjectCollection<NodeBase> FlipFlopSymbols { get; set; } = new DiagramObjectCollection<NodeBase>();
 
public DiagramObjectCollection<NodeBase> OtherSymbols { get; set; } = new DiagramObjectCollection<NodeBase>();        


protected override void OnInitialized() {
  SymbolPreview = new DiagramSize();
  SymbolPreview.Width = 50;
  SymbolPreview.Height = 50;
  InitializePalettes();

  InputPalette = new Palette(){Symbols = InputSymbols, Title = "Input Controls", ID = "InputControls", IconCss = "e-ddb-icons e-flow"};

  OutputControlPalettee = new Palette(){Symbols = OutputSymbols, Title = "Output Controls", ID = "OutputControls", IconCss = "e-ddb-icons e-flow"};

  LogicGates = new Palette(){Symbols = LogicSymbols, Title = "Logic Gates", ID = "LogicGates", IconCss = "e-ddb-icons e-flow"};

  FlipFlops = new Palette(){Symbols = FlipFlopSymbols, Title = "Flip Flops", ID = "flipflops", IconCss = "e-ddb-icons e-flow"};

  OtherPalette = new Palette(){Symbols = OtherSymbols, Title = "Other", ID = "otherSymbols", IconCss = "e-ddb-icons e-flow"};

  Palettes = new DiagramObjectCollection& lt;
  Palette& gt;
  ();

  if (Palettes != null && InputPalette != null) {
    Palettes.Add(InputPalette);
    Palettes.Add(OutputControlPalettee);
    Palettes.Add(LogicGates);
    Palettes.Add(FlipFlops);
    Palettes.Add(OtherPalette);
  }
}

private void InitializePalettes() {
  InputSymbols = new DiagramObjectCollection& lt;
  NodeBase& gt;
  ();
  Node switchOuter = new Node(){ID = "Outer Switch", Width = 78, Height = 60, OffsetX = 140.5, OffsetY = 100, Shape = new PathShape(){Type = NodeShapes.Path, Data = SwitchOffOuterRect}, Style = new ShapeStyle(){StrokeColor = "black", StrokeWidth = 2}, Constraints = NodeConstraints.Default & ~NodeConstraints.InConnect};
  InputSymbols.Add(switchOuter);
  Node switchInner = new Node(){ID = "Inner Switch", Width = 40, Height = 49, OffsetX = 125.5, OffsetY = 100, Shape = new PathShape(){Type = NodeShapes.Path, Data = SwitchOffInnerRect}, Style = new ShapeStyle(){StrokeColor = "black", StrokeWidth = 2}, Constraints = NodeConstraints.Default & ~NodeConstraints.Select & ~NodeConstraints.InConnect};
  InputSymbols.Add(switchInner);

  Node switchOff = new Node(){ID = "SwitchOff", Width = 20, Height = 30, OffsetX = 125.5, OffsetY = 100, Shape = new PathShape(){Type = NodeShapes.Path, Data = SwitchoffButton}, Style = new ShapeStyle(){StrokeColor = "black", StrokeWidth = 2}, Constraints = NodeConstraints.Default & ~NodeConstraints.Select & ~NodeConstraints.InConnect};
  InputSymbols.Add(switchOff);
  Node switchOn = new Node(){ID = "SwitchOn", Width = 20, Height = 25, OffsetX = 127.5, OffsetY = 100, IsVisible = false, Shape = new PathShape(){Type = NodeShapes.Path, Data = SwitchOnButton}, Style = new ShapeStyle(){StrokeColor = "transparent", Fill = "transparent", StrokeWidth = 2}, Constraints = NodeConstraints.Default & ~NodeConstraints.Select & ~NodeConstraints.InConnect};
  InputSymbols.Add(switchOn);
  NodeGroup groupNode = new NodeGroup();
  groupNode.ID = "ToggleSwitch";

  groupNode.Children = new string[]{"Outer Switch", "Inner Switch", "SwitchOff", "SwitchOn"};
  groupNode.Tooltip = new DiagramTooltip(){Content = "Toggle Switch"};
  groupNode.Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip) & ~NodeConstraints.InConnect;
  InputSymbols.Add(groupNode);

  Node pushButtonOuterRect = new Node(){ID = "OuterRect PushBtn", Width = 68, Height = 50, OffsetX = 140, OffsetY = 100, Shape = new PathShape(){Type = NodeShapes.Path, Data = PushButtonOuterRect}, Style = new ShapeStyle(){StrokeColor = "black", StrokeWidth = 0, Fill = "black"}, Constraints = NodeConstraints.Default & ~NodeConstraints.Select & ~NodeConstraints.InConnect};
  InputSymbols.Add(pushButtonOuterRect);
  Node transparentnode = new Node(){ID = "transparentNode",
                                    Width = 51,
                                    Height = 62,
                                    OffsetX = 140,
                                    OffsetY = 100,
                                    Shape =
                                        new BasicShape(){
                                            Type = NodeShapes.Basic,
                                            Shape = NodeBasicShapes.Rectangle,
                                        },
                                    Style = new ShapeStyle(){StrokeWidth = 0, Fill = "#ffffff", Opacity = 0, StrokeColor = "#ffffff"},
                                    Constraints = NodeConstraints.Default & ~NodeConstraints.Select & ~NodeConstraints.InConnect};
  InputSymbols.Add(transparentnode);
  Node pushBtnInner = new Node(){ID = "InnerCircle pushBtn", Width = 19, Height = 20, OffsetX = 128, OffsetY = 100, Shape = new PathShape(){Type = NodeShapes.Path, Data = PushButtonInnerCircle}, Style = new ShapeStyle(){StrokeColor = "black", StrokeWidth = 2, Fill = "white"}, Constraints = NodeConstraints.Default & ~NodeConstraints.Select & ~NodeConstraints.InConnect};
  InputSymbols.Add(pushBtnInner);

  Node pushBtnOuter = new Node(){ID = "OuterCircle PushBtn", Width = 27, Height = 27, OffsetX = 128, OffsetY = 100, Shape = new PathShape(){Type = NodeShapes.Path, Data = PushButtonOuterCircle}, Style = new ShapeStyle(){StrokeColor = "black", StrokeWidth = 2, Fill = "white"}, Constraints = NodeConstraints.Default & ~NodeConstraints.Select & ~NodeConstraints.InConnect};
  InputSymbols.Add(pushBtnOuter);

  NodeGroup PushButton = new NodeGroup();
  PushButton.ID = "PushButton";
  PushButton.Children = new string[]{"transparentNode", "OuterRect PushBtn", "OuterCircle PushBtn", "InnerCircle pushBtn"};
  PushButton.Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip) & ~NodeConstraints.InConnect;
  PushButton.Tooltip = new DiagramTooltip(){Content = "Push Button"};
  InputSymbols.Add(PushButton);

  Node ClkOuterRect = new Node(){ID = "clkOuterRect",
                                 Width = 65,
                                 Height = 35,
                                 OffsetX = 140,
                                 OffsetY = 100,
                                 Shape = new PathShape(){Type = NodeShapes.Path, Data = ClockOuterRectangle},
                                 Style =
                                     new ShapeStyle(){
                                         StrokeColor = "black",
                                         StrokeWidth = 2,
                                     },
                                 Constraints = NodeConstraints.Default & ~NodeConstraints.Select & ~NodeConstraints.InConnect};
  InputSymbols.Add(ClkOuterRect);
  Node ClkInnerPart = new Node(){ID = "clkInnerPart", Width = 30, Height = 20, OffsetX = 130, OffsetY = 100, Shape = new PathShape(){Type = NodeShapes.Path, Data = ClockInnerPart}, Style = new ShapeStyle(){StrokeColor = "black", StrokeWidth = 2, Fill = "white"}, Constraints = NodeConstraints.Default & ~NodeConstraints.Select & ~NodeConstraints.InConnect};
  InputSymbols.Add(ClkInnerPart);
  NodeGroup ClkButton = new NodeGroup();
  ClkButton.ID = "Clock";
  ClkButton.Children = new string[]{"clkOuterRect", "clkInnerPart"};

  ClkButton.Constraints = NodeConstraints.Default & ~NodeConstraints.InConnect;
  InputSymbols.Add(ClkButton);

  Node HighConstant = new Node(){ID = "HighConstant",
                                 Width = 78,
                                 Height = 55,
                                 Shape = new PathShape(){Type = NodeShapes.Path, Data = highconstantdata},
                                 Style =
                                     new ShapeStyle(){
                                         Fill = "#000000",
                                         StrokeWidth = 0,
                                     },
                                 Tooltip = new DiagramTooltip(){Content = "High Constant"},
                                 Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip) & ~NodeConstraints.InConnect};
  InputSymbols.Add(HighConstant);

  Node LowConstant = new Node(){ID = "LowConstant",
                                Width = 75,
                                Height = 55,
                                Shape = new PathShape(){Type = NodeShapes.Path, Data = lowconstantdata},
                                Style =
                                    new ShapeStyle(){
                                        Fill = "#000000",
                                        StrokeWidth = 0,
                                    },
                                Tooltip = new DiagramTooltip(){Content = "Low Constant"},
                                Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip) & ~NodeConstraints.InConnect};
  InputSymbols.Add(LowConstant);

  // Output Symbols
  Node BulpFullPath = new Node(){ID = "FullPath", Width = 30, Height = 40, OffsetX = 140, OffsetY = 100, Shape = new PathShape(){Type = NodeShapes.Path, Data = BulbCompletePath}, Style = new ShapeStyle(){StrokeColor = "black", Fill = "black"}, Constraints = NodeConstraints.Default & ~NodeConstraints.Select & ~NodeConstraints.InConnect};
  OutputSymbols.Add(BulpFullPath);
  Node BulpBlackPart = new Node(){ID = "BulpBlackpart", Width = 14, Height = 8, OffsetX = 140, OffsetY = 108, Shape = new PathShape(){Type = NodeShapes.Path, Data = BulbBlackPart}, Style = new ShapeStyle(){StrokeColor = "black", Fill = "black"}, Constraints = NodeConstraints.Default & ~NodeConstraints.Select & ~NodeConstraints.InConnect};
  OutputSymbols.Add(BulpBlackPart);

  Node InnerBulpPart = new Node(){ID = "InnerBulbPart", Width = 14, Height = 10, OffsetX = 140, OffsetY = 97, Shape = new PathShape(){Type = NodeShapes.Path, Data = BulbInnerBluePart}, Style = new ShapeStyle(){StrokeColor = "black", Fill = "white"}, Constraints = NodeConstraints.Default & ~NodeConstraints.Select & ~NodeConstraints.InConnect};
  OutputSymbols.Add(InnerBulpPart);
  Node OuterBulpPart = new Node(){ID = "OuterBulpPart",
                                  Width = 32,
                                  Height = 28,
                                  OffsetX = 140,
                                  OffsetY = 90,
                                  Shape = new PathShape(){Type = NodeShapes.Path, Data = BulbOuterBluePart},
                                  Style =
                                      new ShapeStyle(){
                                          StrokeColor = "black",
                                          Fill = "white",
                                      },
                                  Constraints = NodeConstraints.Default & ~NodeConstraints.Select & ~NodeConstraints.InConnect};
  OutputSymbols.Add(OuterBulpPart);
  NodeGroup Bulp = new NodeGroup();
  Bulp.ID = "Bulb";
  Bulp.Children = new string[]{"FullPath", "BulpBlackpart", "InnerBulpPart", "OuterBulpPart"};
  Bulp.Constraints = NodeConstraints.Default & ~NodeConstraints.InConnect;
  Bulp.Style = new ShapeStyle(){Fill = "none"};
  OutputSymbols.Add(Bulp);

  Node FourBitDigit = new Node(){ID = "BitDigit", Width = 70, Height = 55, Shape = new PathShape(){Type = NodeShapes.Path, Data = digitdata}, Style = new ShapeStyle(){Fill = "#000000"}, Tooltip = new DiagramTooltip(){Content = "4-Bit Digit"}, Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip) & ~NodeConstraints.InConnect};
  OutputSymbols.Add(FourBitDigit);

  // Gates symbols
  Node OrGate = new Node(){ID = "ORGate",
                           Shape = new PathShape(){Type = NodeShapes.Path, Data = orData},
                           Style =
                               new ShapeStyle(){
                                   Fill = "#000000",
                                   StrokeWidth = 0,
                               },
                           Width = 79,
                           Height = 45,
                           Tooltip = new DiagramTooltip(){Content = "OR Gate"},
                           Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip) & ~NodeConstraints.InConnect};
  LogicSymbols.Add(OrGate);
  Node NorGate = new Node(){ID = "NORGate",
                            Shape = new PathShape(){Type = NodeShapes.Path, Data = nordata},
                            Style =
                                new ShapeStyle(){
                                    Fill = "#000000",
                                    StrokeWidth = 0,
                                },
                            Width = 79,
                            Height = 45,
                            Tooltip = new DiagramTooltip(){Content = "NOR Gate"},
                            Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip) & ~NodeConstraints.InConnect};
  LogicSymbols.Add(NorGate);
  Node AndGate = new Node(){ID = "ANDGate",
                            Shape = new PathShape(){Type = NodeShapes.Path, Data = andData},
                            Style =
                                new ShapeStyle(){
                                    Fill = "#000000",
                                    StrokeWidth = 0,
                                },
                            Width = 79,
                            Height = 45,
                            Tooltip = new DiagramTooltip(){Content = "AND Gate"},
                            Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip) & ~NodeConstraints.InConnect};
  LogicSymbols.Add(AndGate);

  Node NandGate = new Node(){ID = "NANDGate",
                             Shape = new PathShape(){Type = NodeShapes.Path, Data = nanddata},
                             Style =
                                 new ShapeStyle(){
                                     Fill = "#000000",
                                     StrokeWidth = 0,
                                 },
                             Width = 79,
                             Height = 45,
                             Tooltip = new DiagramTooltip(){Content = "NAND Gate"},
                             Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip) & ~NodeConstraints.InConnect};
  LogicSymbols.Add(NandGate);
  Node BufferGate = new Node(){ID = "Buffer",
                               Shape = new PathShape(){Type = NodeShapes.Path, Data = buffer},
                               Style =
                                   new ShapeStyle(){
                                       Fill = "#000000",
                                       StrokeWidth = 0,
                                   },
                               Width = 79,
                               Height = 45,
                               Constraints = NodeConstraints.Default & ~NodeConstraints.InConnect};
  LogicSymbols.Add(BufferGate);
  Node NotGate = new Node(){ID = "NOTGate",
                            Shape = new PathShape(){Type = NodeShapes.Path, Data = notData},
                            Style =
                                new ShapeStyle(){
                                    Fill = "#000000",
                                    StrokeWidth = 0,
                                },
                            Width = 79,
                            Height = 45,
                            Tooltip = new DiagramTooltip(){Content = "NOT Gate"},
                            Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip) & ~NodeConstraints.InConnect};
  LogicSymbols.Add(NotGate);
  Node XorGate = new Node(){ID = "XORGate",
                            Shape = new PathShape(){Type = NodeShapes.Path, Data = xorData},
                            Style =
                                new ShapeStyle(){
                                    Fill = "#000000",
                                    StrokeWidth = 0,
                                },
                            Tooltip = new DiagramTooltip(){Content = "XOR Gate"},
                            Width = 79,
                            Height = 45,
                            Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip) & ~NodeConstraints.InConnect};
  LogicSymbols.Add(XorGate);

  Node XNorGate = new Node(){ID = "XNORGate",
                             Shape = new PathShape(){Type = NodeShapes.Path, Data = xnorData},
                             Style =
                                 new ShapeStyle(){
                                     Fill = "#000000",
                                     StrokeWidth = 0,
                                 },
                             Tooltip = new DiagramTooltip(){Content = "XNOR Gate"},
                             Width = 79,
                             Height = 45,
                             Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip) & ~NodeConstraints.InConnect};
  LogicSymbols.Add(XNorGate);

  // Flip-flop symbols
  Node JKFlipFlop = new Node(){ID = "JKFlip-Flop",
                               Shape = new PathShape(){Type = NodeShapes.Path, Data = jkflipflopdata},
                               Style =
                                   new ShapeStyle(){
                                       Fill = "#000000",
                                       StrokeWidth = 0,
                                   },
                               Width = 70,
                               Height = 90,
                               Tooltip = new DiagramTooltip(){Content = "JK Flip-Flop"},
                               Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip) & ~NodeConstraints.InConnect};
  FlipFlopSymbols.Add(JKFlipFlop);
  Node DFlipFlop = new Node(){ID = "DFlip-Flop",
                              Shape = new PathShape(){Type = NodeShapes.Path, Data = dflipflop},
                              Style =
                                  new ShapeStyle(){
                                      Fill = "#000000",
                                      StrokeWidth = 0,
                                  },
                              Width = 65,
                              Height = 90,
                              Tooltip = new DiagramTooltip(){Content = "D Flip-Flop"},
                              Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip) & ~NodeConstraints.InConnect};
  FlipFlopSymbols.Add(DFlipFlop);
  Node TFlipFlop = new Node(){ID = "TFlip-Flop",
                              Shape = new PathShape(){Type = NodeShapes.Path, Data = tflipflopdata},
                              Style =
                                  new ShapeStyle(){
                                      Fill = "#000000",
                                      StrokeWidth = 0,
                                  },
                              Width = 65,
                              Height = 90,
                              Tooltip = new DiagramTooltip(){Content = "T Flip-Flop"},
                              Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip) & ~NodeConstraints.InConnect};
  FlipFlopSymbols.Add(TFlipFlop);
  Node SRFlipFlop = new Node(){ID = "SRFlip-Flop",
                               Shape = new PathShape(){Type = NodeShapes.Path, Data = srflipflopdata},
                               Style =
                                   new ShapeStyle(){
                                       Fill = "#000000",
                                       StrokeWidth = 0,
                                   },
                               Width = 73,
                               Height = 78,
                               Tooltip = new DiagramTooltip(){Content = "SR Flip-Flop"},
                               Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip) & ~NodeConstraints.InConnect};
  FlipFlopSymbols.Add(SRFlipFlop);

  // Other symbols
  Node Label = new Node(){ID = "Label",
                          Shape =
                              new TextShape(){
                                  Type = NodeShapes.Text,
                                  Content = "Text",

                              },
                          Style = new TextStyle(){Fill = "black", StrokeColor = "black", StrokeWidth = 2, Color = "white"

                          },
                          Width = 50,
                          Height = 40,
                          Constraints = NodeConstraints.Default & ~NodeConstraints.InConnect

  };
  OtherSymbols.Add(Label);
  Node BusShape = new Node(){ID = "Bus",
                             Width = 80,
                             Height = 45,
                             Shape = new PathShape(){Type = NodeShapes.Path, Data = busdata},
                             Style =
                                 new ShapeStyle(){
                                     Fill = "#000000",
                                     StrokeWidth = 0,
                                 },
                             Constraints = NodeConstraints.Default & ~NodeConstraints.InConnect};
  OtherSymbols.Add(BusShape);
  Node PullUp = new Node(){ID = "PullUp",
                           Width = 73,
                           Height = 45,
                           Shape = new PathShape(){Type = NodeShapes.Path, Data = pullupdata},
                           Style =
                               new ShapeStyle(){
                                   Fill = "#000000",
                                   StrokeWidth = 0,
                               },
                           Tooltip = new DiagramTooltip(){Content = "Pull Up"},
                           Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip) & ~NodeConstraints.InConnect};
  OtherSymbols.Add(PullUp);
  Node PullDown = new Node(){ID = "PullDown",
                             Width = 73,
                             Height = 45,
                             Shape = new PathShape(){Type = NodeShapes.Path, Data = pulldowndata},
                             Style =
                                 new ShapeStyle(){
                                     Fill = "#000000",
                                     StrokeWidth = 0,
                                 },
                             Tooltip = new DiagramTooltip(){Content = "Pull Down"},
                             Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip) & ~NodeConstraints.InConnect};
  OtherSymbols.Add(PullDown);
}
```

The following image shows the symbol palette filled with the logic circuit shapes.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Creating-a-gallery-of-reusable-logic-circuit-shapes-in-the-Blazor-Diagram-component.png" alt="Creating a gallery of reusable logic circuit shapes in the Blazor Diagram component" style="width:100%">

  <figcaption>Creating a gallery of reusable logic circuit shapes in the Blazor Diagram component</figcaption>

</figure>
Now, we can easily design a digital logic circuit diagram by adding shapes from the symbol palette to the diagram surface and connecting them using the connectors.

### Step 3: Add logic circuit symbols to the editor

Drag the desired symbols from the symbol palette onto the diagramming canvas to add the logic circuit symbols in the editor.

Refer to the following GIF image. ![Adding the logic circuit to editor](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Adding-the-logic-circuit-to-editor-1.gif)

### Step 4: Change the symbol position

You can adjust the position of a symbol on the diagram surface by clicking the symbol and dragging it to the desired position. ![Changing the symbol position](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Changing-the-symbol-position-1.gif)

### Step 5: Connecting the symbols

You’ll notice that each diagram symbol has input and output connection points, represented by small circles on the symbols. These points allow you to draw connectors between the symbols.

Creating a connection is straightforward. The connection point and colored dot will appear to indicate the start of the connection. Click, drag, and drop the connector onto another symbol’s input connection point.

Refer to the following GIF image. ![Connecting the symbols](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Connecting-the-symbols-1.gif)

**Note:** For more details, refer to the [connectors in the Blazor Diagram documentation](https://blazor.syncfusion.com/documentation/diagram/connectors/connectors "Connector in Blazor Diagram Component").

### Step 6: Loading and saving a diagram

The Diagram control supports saving your current work and resuming it later by loading the saved diagram back onto the diagram canvas. You can achieve this using the [load](https://blazor.syncfusion.com/documentation/diagram/serialization#load-the-diagram-from-string "Load the diagram from string") and [save](https://blazor.syncfusion.com/documentation/diagram/serialization#save-the-diagram-as-string "Save the diagram as string") functionalities, as shown in the following image. ![Loading and saving a diagram](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Loading-and-saving-a-diagram-1.gif)

### Step 7: Print and export the diagram

You can export the created logical circuit diagram as an image or print it directly from a printer. You can achieve this using the [exporting](https://blazor.syncfusion.com/documentation/diagram/export "Exporting in Blazor Diagram Component") and [printing](https://blazor.syncfusion.com/documentation/diagram/print "Printing in Blazor Diagram Component") functionalities of the Diagram component.

### Step 8: Pan and zoom

You can zoom in or out of the diagram by holding the **Ctrl** key and scrolling the **mouse wheel** or by clicking the **drop-down button** at the top right corner of the designer and choosing the required option.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Zooming-in-the-digital-logic-circuit-diagram-2.gif" alt="Zooming in the digital logic circuit diagram" style="width:100%">

  <figcaption>Zooming in the digital logic circuit diagram</figcaption>

</figure>
Only a particular portion will be visible when we load a large diagram. The remaining portions are clipped. Clipped areas can be explored using scrollbars at the edges of the diagram surface or by panning the Diagram. You can pan the diagram by selecting the panning tool in the toolbar( represented by the hand symbol) or by choosing the **Tools -> Pan tool** option and then clicking and holding the pointer in the diagram area.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Panning-the-digital-logic-circuit-diagram-1.gif" alt="Panning the digital logic circuit diagram" style="width:100%">

  <figcaption>Panning the digital logic circuit diagram</figcaption>

</figure>
## GitHub references

For more details, refer to designing a digital logical circuit using the Blazor Diagram library [GitHub demo](https://github.com/syncfusion/blazor-showcase-logic-circuit-designer "Blazor showcase Logic Circuit Designer GitHub demo").
## Conclusion

Thanks for reading! In this blog, we’ve seen how to easily create a digital logic circuit diagram using the [Syncfusion Blazor Diagram component](https://www.syncfusion.com/blazor-components/blazor-diagram "Blazor Diagram component"). This versatile tool isn’t limited to just circuit diagrams; it’s your gateway to creating a variety of visual representations, from organizational structures to conceptual maps. Dive in and discover the simplicity and power of diagramming at your fingertips!

If you already have a Syncfusion user account, you can download the product setup from [here](https://www.syncfusion.com/account/downloads "Essential Studio License and Downloads page"). Otherwise, you can download a free [30-day trial](https://www.syncfusion.com/blazor-components/blazor-diagram "Get free evaluation of Essential Studio products") and explore what else our Blazor suite can do.

Please let us know in the comments section below if you have any questions. You can also contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Easily Render Flat Data in Blazor File Manager](https://www.syncfusion.com/blogs/post/render-flat-data-blazor-file-manager "Blog: Easily Render Flat Data in Blazor File Manager")
- [Syncfusion Blazor Diagram Library Now Supports Swimlane Diagrams](https://www.syncfusion.com/blogs/post/blazor-swimlane-diagrams "Blog: Syncfusion Blazor Diagram Library Now Supports Swimlane Diagrams")
- [Easily Customize the Toolbar in Blazor PDF Viewer](https://www.syncfusion.com/blogs/post/customize-toolbar-blazor-pdf-viewer "Blog: Easily Customize the Toolbar in Blazor PDF Viewer")
- [Introducing the New Blazor Timeline Component](https://www.syncfusion.com/blogs/post/new-blazor-timeline-component "Blog: Introducing the New Blazor Timeline Component")