Create Interactive Digital Logic Circuits in React

Jollen Moyani - Nov 6 '23 - - Dev Community

Welcome to the world of digital logic circuit design, where complexity meets creativity. The creation of a digital logic circuit diagram is no small feat.

It requires precision, clarity, and effective visual communication. However, the right tools can make this process significantly more manageable. One such tool is the versatile Syncfusion React Diagram control, which enables designers to draft high-quality logic circuits swiftly and effortlessly.

In this blog, we’ll journey through the functionalities of the React Diagram control. We’ll demonstrate how its interactive user interface, equipped with features like drag and drop, copy and paste, import and export, and pan and zoom, simplifies the process of circuit creation.

Furthermore, we’ll explore its rich feature set. By the end of this post, you’ll see why the React Diagram control is an indispensable tool for any digital logic design project.

Creating a Digital Logic Circuit Using the React Diagram Control

Creating a Digital Logic Circuit Using the React Diagram Control

Logic circuit diagram symbols

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

Logic gates

Logic gates are the basic symbols used for any digital circuit design. Logic gates 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 and a tri-state buffer. Logic gates

Flip-flops

A flip-flop is a circuit that has two stable states and can be used to store state information. The state can be changed by applying one or more control inputs and will have one or two outputs. A logic circuit designer should have SR, D, JK, and T flip-flops for designing. Flip-Flops

Input controls

Input controls can pass a high (true) or low (false) signal to logic gates or flip-flops. A logic circuit designer should provide the following input controls toggle switch, push button, clock, high constant, and low constant to design circuits. Input controls

Output controls

You can connect output controls to the output pin of a logic gate or flip-flop to showcase its output state. A logical circuit designer should, at minimum, offer a light bulb and a 4-bit digit as output controls. Output controls

Prerequisites

Creating a diagram surface

Let’s create a diagram surface by following these steps:

1.Create a folder and give it a name such as Logic Circuit Designer.
2.Open your terminal or command prompt and execute the following command to install the Create React App NPM package globally:

npm install -g create-react-app
Enter fullscreen mode Exit fullscreen mode

3.Create a new React app. Give it your preferred app name and execute the following command:

npx create-react-app logic-circuit
Enter fullscreen mode Exit fullscreen mode

4.Change your working directory to the recently created app by using the following command:

cd logic-circuit
Enter fullscreen mode Exit fullscreen mode

5.To see your app in action, start a development server using the following command:

npm start
Enter fullscreen mode Exit fullscreen mode

This will open your app in your default web browser at http://localhost:3000/.

6.Open the json file and add the following dependencies:

"dependencies": {
    "@syncfusion/ej2-react-base": "*",
    "@syncfusion/ej2-react-buttons": "*",
    "@syncfusion/ej2-react-diagrams": "*",
    "@syncfusion/ej2-react-dropdowns": "*",
    "@syncfusion/ej2-react-inputs": "*",
    "@syncfusion/ej2-react-lists": "*",
    "@syncfusion/ej2-react-navigations": "*",
    "@syncfusion/ej2-react-popups": "*",
    "@syncfusion/ej2-react-splitbuttons": "*",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
},
Enter fullscreen mode Exit fullscreen mode

7.Use the following command to install all the above dependent packages:

npm install
Enter fullscreen mode Exit fullscreen mode

8.Add the dependent scripts and style CDN reference links in the index.html file.

<head>
    <link href="https://cdn.syncfusion.com/ej2/20.4.38/fluent.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/ej2-react-buttons/styles/fluent.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/fluent.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-react-popups/styles/fluent.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-react-splitbuttons/styles/fluent.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-react-navigations/styles/fluent.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-react-inputs/styles/fluent.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-react-dropdowns/styles/fluent.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    <link href="./assets/Diagram_Builder_Icon/style.css" rel="stylesheet">
    <link href="./assets/index.css" rel="stylesheet">
    <link href="./assets/dbstyle/diagrambuilder.css" rel="stylesheet" />
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
</head>
Enter fullscreen mode Exit fullscreen mode

9.To include the Diagram component in your app, import the DiagramComponent from the ej2-react-diagrams. Then, configure the required arguments, such as the width, height, and collection of nodes and connectors to be included in the diagram in the App.js file.

Refer to the following code example:

<div id="diagramContainerDiv" className='db-current-diagram-container'>
  <DiagramComponent ref={diagram=>
    (this.diagram = diagram)} id="diagram" width={"100%"} height={"100%"}
    scrollSettings={this.scrollSettings} rulerSettings={this.rulerSettings}
    pageSettings={this.pageSettings} nodes={this.nodes} connectors={this.connectors}
    backgroundColor="transparent" getConnectorDefaults={this.getConnectorDefaults.bind(this)}
    getNodeDefaults={this.getNodeDefaults.bind(this)}/>
</div>
Enter fullscreen mode Exit fullscreen mode

The following image shows the initial Diagram appearance.

Creating a Diagram Canvas Using the React Diagram Library

Creating a Diagram Canvas Using the React Diagram Library

Creating reusable logic circuit diagram symbols

The React Diagram control provides a gallery of reusable nodes and connectors called SymbolPalette. It displays a collection of palettes, each showing a set of nodes and connectors. We can drag and drop them onto the diagram canvas any number of times.

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

1.Create an HTML div element that will act as the container for the Diagram symbol palette.

Refer to the following code example:

<div className='sidebar show-overview'>
 <div className="db-palette-parent">
  <SymbolPaletteComponent ref={symbolpalette => (this.symbolpalette) = symbolpalette} id="symbolpalette />
 </div>
</div>
Enter fullscreen mode Exit fullscreen mode

2.Initialize the Syncfusion Diagram symbol palette by passing the required arguments, such as the width, height, and collection of symbols to be included in the palette.

<div className='sidebar show-overview'>
 <div className="db-palette-parent">
  <SymbolPaletteComponent ref={symbolpalette => (this.symbolpalette) = symbolpalette} id="symbolpalette" width="100%" height="100%" 
         expandMode={this.palettes.expandMode} 
         palettes={this.palettes.palettes}  
         symbolPreview={this.palettes.symbolPreview} symbolMargin={this.palettes.symbolMargin} 
         getSymbolInfo={this.palettes.getSymbolInfo} />
 </div>
</div>
Enter fullscreen mode Exit fullscreen mode

3.Define and customize your palette symbols as needed. Refer to the following code:

export class Palettes {
  constructor() {
    this.expandMode = 'Multiple';
    this.symbolPreview = {height : 50, width : 50};
    this.symbolMargin = {left : 5, right : 5, top : 10, bottom : 10};
    this.palettes = [
      {
        id : 'input',
        expanded : true,
        symbols : this.input(),
        title : 'Input Controls'
      },
      {
        id : 'output',
        expanded : true,
        symbols : this.output(),
        title : 'Output Controls'
      },
      {
        id : 'flow',
        expanded : true,
        symbols : this.gates(),
        title : 'Logic Gates'
      },
      {
        id : 'flipflop',
        expanded : true,
        symbols : this.flipflops(),
        title : 'Flip flops'
      },
      {id : 'other', expanded : true, symbols : this.other(), title : 'Other'},
    ];
  }
  getSymbolInfo(symbol) {
    return {
      description : {
        text : symbol.shape['shape'],
        overflow : 'Wrap',
        fontSize : 12,
        margin : {top : 10, left : 0, right : 0, bottom : 0}
      }
    };
  }
  setPaletteNodeDefaults(node) {
    if (!(node.addInfo&& node.addInfo.type == = 'CustomShapes') &&
        (!node.children)) {
      if (node.id == = 'Terminator' || node.id == = 'Process') {
        node.width = 130;
        node.height = 65;
      } else {
        node.width = 50;
        node.height = 50;
      }
      node.ports = [
        {
          offset : {x : 0, y : 0.5},
          style : {fill : 'white'},
          visibility : PortVisibility.Connect | PortVisibility.Hover,
          constraints : PortConstraints.Draw
        },
        {
          offset : {x : 0.5, y : 0},
          style : {fill : 'white'},
          visibility : PortVisibility.Connect | PortVisibility.Hover,
          constraints : PortConstraints.Draw
        },
        {
          offset : {x : 1, y : 0.5},
          style : {fill : 'white'},
          visibility : PortVisibility.Connect | PortVisibility.Hover,
          constraints : PortConstraints.Draw
        },
        {
          offset : {x : 0.5, y : 1},
          style : {fill : 'white'},
          visibility : PortVisibility.Connect | PortVisibility.Hover,
          constraints : PortConstraints.Draw
        }
      ];
      node.style.strokeColor = '#3A3A3A';
    }
  }
  getPalettes(text) {
    let palettes = [];
    if (text.indexOf('Flow') != = -1) {
      palettes.push({
        id : 'flow',
        expanded : true,
        symbols : this.getFlowShapes(),
        title : 'Flow Shapes'
      });
    }
    if (text.indexOf('Basic') != = -1) {
      palettes.push({
        id : 'basic',
        expanded : false,
        symbols : this.getBasicShapes(),
        title : 'Basic Shapes'
      });
    }
    if (text.indexOf('BPMN') != = -1) {
      palettes.push({
        id : 'bpmn',
        expanded : false,
        symbols : this.getBPMNShapes(),
        title : 'BPMN Shapes'
      });
    }
    if (text.indexOf('Connectors') != = -1) {
      palettes.push({
        id : 'connectors',
        expanded : false,
        symbols : this.getConnectors(),
        title : 'Connectors'
      });
    }
    if (text.indexOf('Electrical') != = -1) {
      palettes = palettes.concat(this.electricalShapes.getElectricalShapes());
    }
    if (text.indexOf('Network') != = -1) {
      palettes.push({
        id : 'network',
        expanded : false,
        symbols : this.networkShapes.getNetworkShapes(),
        title : 'Network Shapes'
      });
    }
    if (text.indexOf('Floorplan') != = -1) {
      palettes.push({
        id : 'floorplan',
        expanded : false,
        symbols : this.floorplans.getFloorPlans(),
        title : 'Floorplan Shapes'
      });
    }
    return palettes;
  }
  output() {
    const output = [
      {
        id : 'FullPath',
        height : 40,
        width : 30,
        offsetX : 140,
        offsetY : 100,
        shape : {type : 'Path', data : BulbCompletePath},
        style : {strokeColor : 'black', fill : 'black'},
        constraints : NodeConstraints.Default & ~NodeConstraints.Select &
            ~NodeConstraints.InConnect,
      },

      {
        id : 'BlackPart',
        height : 8,
        width : 14,
        offsetX : 140,
        offsetY : 108,
        shape : {type : 'Path', data : BulbBlackPart},
        style : {strokeColor : 'black', fill : 'black'},
        constraints : NodeConstraints.Default & ~NodeConstraints.Select &
            ~NodeConstraints.InConnect,
      },

      {
        id : 'InnerBluePart',
        height : 10,
        width : 14,
        offsetX : 140,
        offsetY : 97,
        shape : {type : 'Path', data : BulbInnerBluePart},
        style : {strokeColor : 'black', fill : 'white'},
        constraints : NodeConstraints.Default & ~NodeConstraints.Select &
            ~NodeConstraints.InConnect,
        visible : false,
      },

      {
        id : 'OuterBluePart',
        height : 28,
        width : 32,
        offsetX : 140,
        offsetY : 90,
        shape : {type : 'Path', data : BulbOuterBluePart},
        style : {strokeColor : 'black', fill : 'white'},
        constraints : NodeConstraints.Default & ~NodeConstraints.Select &
            ~NodeConstraints.InConnect,
        visible : false,
      },

      {
        id : 'Bulb',
        children :
            ['FullPath', 'BlackPart', 'InnerBluePart', 'OuterBluePart'],
        shape : {shape : 'Light Bulb'},
        style : {fill : 'none', padding : '2'},
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },

      {
        id : '4-Bit Digit',
        shape : {type : 'Path', data : digitdata, shape : '4-Bit Digit'},
        style : {fill : '#000000', strokeWidth : 0},
        height : 55,
        width : 70,
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },
    ];
    return output;
  }
  input() {
    const input = [
      {
        id : 'SwOffOuter',
        height : 50,
        width : 65,
        offsetX : 140,
        offsetY : 100,
        shape : {type : 'Path', data : SwitchOffOuterRect},
        style : {strokeColor : 'black', strokeWidth : 2},
        constraints : NodeConstraints.Default & ~NodeConstraints.Select &
            ~NodeConstraints.InConnect,
      },
      {
        id : 'SwOffInner',
        height : 40,
        width : 30,
        offsetX : 127.5,
        offsetY : 100,
        shape : {type : 'Path', data : SwitchOffInnerRect},
        style : {strokeColor : 'black', strokeWidth : 2},
        constraints : NodeConstraints.Default & ~NodeConstraints.Select &
            ~NodeConstraints.InConnect,
      },

      {
        id : 'SwOff',
        height : 25,
        width : 20,
        offsetX : 127.5,
        offsetY : 100,
        shape : {type : 'Path', data : SwitchoffButton},
        style : {strokeColor : 'black', strokeWidth : 2},
        constraints : NodeConstraints.Default & ~NodeConstraints.Select &
            ~NodeConstraints.InConnect,
      },

      {
        id : 'SwOn',
        height : 25,
        width : 20,
        offsetX : 127.5,
        offsetY : 100,
        shape : {type : 'Path', data : SWitchOnButton},
        style : {
          strokeColor : 'transparent',
          strokeWidth : 2,
          fill : 'transparent'
        },
        constraints : NodeConstraints.Default & ~NodeConstraints.Select &
            ~NodeConstraints.InConnect,
        visible : false,
      },

      {
        id : 'Toggle Switch',
        children : ['SwOffOuter', 'SwOffInner', 'SwOff', 'SwOn'],
        shape : {shape : 'Toggle Switch'},
        style : {fill : 'none'},
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },

      {
        id : 'PBOuterRect',
        height : 50,
        width : 65,
        offsetX : 140,
        offsetY : 100,
        shape : {type : 'Path', data : PushButtonOuterRect},
        style : {strokeColor : 'black', strokeWidth : 0, fill : 'black'},
        constraints : NodeConstraints.Default & ~NodeConstraints.Select &
            ~NodeConstraints.InConnect,
      },

      {
        id : 'PBOuterCircle',
        height : 27,
        width : 27,
        offsetX : 128,
        offsetY : 100,
        shape : {type : 'Path', data : PushButtonOuterCircle},
        style : {strokeColor : 'black', strokeWidth : 2, fill : 'white'},
        constraints : NodeConstraints.Default & ~NodeConstraints.Select &
            ~NodeConstraints.InConnect,
      },

      {
        id : 'PBInnerCircle',
        height : 20,
        width : 20,
        offsetX : 128,
        offsetY : 100,
        shape : {type : 'Path', data : PushButtonInnerCircle},
        style : {strokeColor : 'black', strokeWidth : 2, fill : 'white'},
        constraints : NodeConstraints.Default & ~NodeConstraints.Select &
            ~NodeConstraints.InConnect,
      },

      {
        id : 'PushButton',
        children : ['PBOuterRect', 'PBOuterCircle', 'PBInnerCircle'],
        shape : {shape : 'Push Button'},
        style : {fill : 'white'},
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },

      {
        id : 'CLKOuterRect',
        height : 35,
        width : 65,
        offsetX : 140,
        offsetY : 100,
        shape : {type : 'Path', data : ClockOuterRectangle},
        style : {strokeColor : 'black', strokeWidth : 2},
        constraints : NodeConstraints.Default & ~NodeConstraints.Select &
            ~NodeConstraints.InConnect,
      },

      {
        id : 'CLKInnerPart',
        height : 20,
        width : 30,
        offsetX : 130,
        offsetY : 100,
        shape : {type : 'Path', data : ClockInnerPart},
        style : {strokeColor : 'black', strokeWidth : 2, fill : 'white'},
        constraints : NodeConstraints.Default & ~NodeConstraints.Select &
            ~NodeConstraints.InConnect,
      },

      {
        id : 'Clock',
        children : ['CLKOuterRect', 'CLKInnerPart'],
        shape : {shape : 'Clock'},
        style : {fill : 'none'},
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },

      {
        id : 'High Constant',
        shape :
            {shape : 'High Constant', type : 'Path', data : highconstantdata},
        style : {fill : '#000000', strokeWidth : 0},
        height : 55,
        width : 70,
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },

      {
        id : 'Low Constant',
        shape : {shape : 'Low Constant', type : 'Path', data : lowconstantdata},
        style : {fill : '#000000', strokeWidth : 0},
        height : 55,
        width : 70,
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },
    ];
    return input;
  }
  gates() {
    const gates = [
      {
        id : 'OR Gate',
        shape : {type : 'Path', data : orData, shape : 'OR Gate'},
        style : {fill : '#000000', strokeWidth : 0},
        height : 45,
        width : 79,
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },
      {
        id : 'NOR Gate',
        shape : {type : 'Path', data : nordata, shape : 'NOR Gate'},
        style : {fill : '#000000', strokeWidth : 0},
        height : 45,
        width : 79,
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },

      {
        id : 'AND Gate',
        shape : {type : 'Path', data : andData, shape : 'AND Gate'},
        style : {fill : '#000000', strokeWidth : 0},
        height : 45,
        width : 79,
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },

      {
        id : 'NAND Gate',
        shape : {type : 'Path', data : nanddata, shape : 'NAND Gate'},
        style : {fill : '#000000', strokeWidth : 0},
        height : 45,
        width : 79,
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },

      {
        id : 'Buffer Gate',
        shape : {type : 'Path', data : buffer, shape : 'Buffer'},
        style : {fill : '#000000', strokeWidth : 0},
        height : 45,
        width : 79,
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },

      {
        id : 'Not Gate',
        shape : {type : 'Path', data : notData, shape : 'NOT Gate'},
        style : {fill : '#000000', strokeWidth : 0},
        height : 45,
        width : 79,
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },

      {
        id : 'XOR Gate',
        shape : {type : 'Path', data : xorData, shape : 'XOR Gate'},
        style : {fill : '#000000', strokeWidth : 0},
        height : 45,
        width : 79,
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },

      {
        id : 'XNOR Gate',
        shape : {type : 'Path', data : xnorData, shape : 'XNOR Gate'},
        style : {fill : '#000000', strokeWidth : 0},
        height : 45,
        width : 79,
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },
    ];
    return gates;
  }
  flipflops() {
    const flipflops = [
      {
        id : 'JK Flip-Flop',
        shape : {shape : 'JK Flip-Flop', type : 'Path', data : jkflipflopdata},
        style : {fill : '#000000', strokeWidth : 0},
        height : 90,
        width : 70,
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },

      {
        id : 'D Flip-Flop',
        shape : {shape : 'D Flip-Flop', type : 'Path', data : dflipflop},
        style : {fill : '#000000', strokeWidth : 0},
        height : 90,
        width : 65,
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },

      {
        id : 'T Flip-Flop',
        shape : {shape : 'T Flip-Flop', type : 'Path', data : tflipflopdata},
        style : {fill : '#000000', strokeWidth : 0},
        height : 90,
        width : 65,
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },

      {
        id : 'SR Flip-Flop',
        shape : {shape : 'SR Flip-Flop', type : 'Path', data : srflipflopdata},
        style : {fill : '#000000', strokeWidth : 0},
        height : 78,
        width : 73,
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },
    ];
    return flipflops;
  }

  other() {
    const other = [
      {
        id : 'Label',
        shape : {type : 'Text', content : 'Text'},
        style : {
          strokeColor : 'black',
          strokeWidth : 2,
          fill : 'black',
          color : 'white'
        },
        height : 50,
        width : 60,
        constraints : NodeConstraints.Default &
            ~(NodeConstraints.InConnect | NodeConstraints.OutConnect),
      },

      {
        id : 'Bus',
        shape : {type : 'Path', data : busdata, shape : 'Bus'},
        style : {fill : '#000000', strokeWidth : 0},
        height : 45,
        width : 80,
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },

      {
        id : 'Pull Up',
        shape : {type : 'Path', data : pullupdata, shape : 'Pull Up'},
        style : {fill : '#000000', strokeWidth : 0},
        height : 45,
        width : 73,
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },

      {
        id : 'Pull Down',
        shape : {type : 'Path', data : pulldowndata, shape : 'Pull Down'},
        style : {fill : '#000000', strokeWidth : 0},
        height : 45,
        width : 73,
        constraints : NodeConstraints.Default & ~NodeConstraints.InConnect,
      },
    ];
    return other;
  }
}
Enter fullscreen mode Exit fullscreen mode

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

A Gallery of Reusable Logic Circuit Shapes in the React Diagram Control

A Gallery of Reusable Logic Circuit Shapes in the React Diagram Control

Note: Refer to the symbol palette in React Diagram documentation for more info on adding symbols, grouping symbols, and customizing the symbol palette appearance.

Creating a digital logic circuit

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

Step #1: Add logic circuit symbols to the editor

To add the logic circuit symbols in the editor, drag the desired symbols from the symbol palette onto the diagramming canvas.

Refer to the following GIF image. Add logic circuit symbols to the React Diagram editor

Step #2: Moving symbols

You can change the position of a symbol on the diagram surface by clicking the symbol and dragging it anywhere. Moving symbols in the React Diagram editor

Step #3: Connect symbols

You’ll notice that each diagram symbol has input and output connection points, represented by small circles on the symbol. These points let you easily and consistently draw connectors between circuit components.

Creating a connection is straightforward. Hover over the connection point, and a colored dot will appear to indicate the start of the connection. Click, drag the connector, and drop it onto another symbol’s input connection point. Connecting the Symbols to the React Diagram editor

Note: For more details, refer to the connection ports documentation.

Step #4: Loading and saving the diagram

The Diagram control also supports saving your current work and resuming it later by loading the saved diagram back to the diagram canvas. You can achieve this using the load and save functionality shown in the following image. Load and save the diagram

Step #5: Print and export 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 and printing functionality of the Diagram control.

Step #6: Pan and zoom

You can zoom in or out of the diagram by holding Ctrl and scrolling the mouse wheel or by clicking the dropdown button at the top right corner of the designer.

Refer to the following image.

Zooming in the Digital Logic Circuit Diagram

Zooming in the Digital Logic Circuit Diagram

When a large diagram is loaded, only a certain portion of the diagram is visible. The remaining portions are clipped. Clipped portions can be explored by using the 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 a hand symbol, or by choosing Tools –> Pan tool and then clicking and holding the pointer in the diagram area.

Panning the Digital Logic Circuit Diagram

Panning the Digital Logic Circuit Diagram

GitHub references

You can download the source project for this digital logical circuit designer from this GitHub location.

Conclusion

Thanks for reading! In this blog, we’ve seen how to easily create a digital logic circuit diagram designer using the Syncfusion React Diagram library. Similarly, you can use it to create other diagrams like organization charts, flow charts, and network diagrams.

If you’re already a Syncfusion user, you can download the product setup here. Otherwise, you can download a free 30-day trial and explore what else our React 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, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Image
The Ultimate Guide To Bifold Door Glass Replacement Cost
Image
Cross-Platform Mobile Test Automation: Using WebdriverIO and Appium with JavaScript

javascript, mobiletestautomation, webdriverio
Image
How To Make A Successful Bi Fold Door Repair Techniques From Home
Image
AI Data Sets

artificial, intilligence, machinelearning, ai
Image
How to Stay Updated in Tech Without Information Overload

news, developer, productivity, learning
Image
Automation of tasks: DevOps Management

automation, integrations, incidentmanagement, runbookautomation
Image
How I built PeerSplit: A free, peer-to-peer expense-splitting app—from idea to launch in just 2 weeks

javascript, nuxt, devlog, webdev
Image
Unlocking Relief: Your Guide to Medical Marijuana in Hattiesburg, MS
Image
使用SEO來增強持續業務業務的博客廣告實踐 - 【SeoNo1.Ltd】
Image
Benchmark Testing In Software: The Key To Optimizing Performance
Image
CKA Full Course 2024: Day 5/40 Kubernetes Architecture

docker, kubernetes, javascript, containers
Image
Choosing the Right E-Commerce SEO Services for Your Online Store
Image
The Development of Music Magazines: From Print to Digital
Image
Advice for my e-libary

webdev, career, html, softwaredevelopment
Image
What is Computer Vision: A Comprehensive Guide

computervision, ai
Image
Why We Need to Read Code

webdev, javascript, programming, beginners
Image
Revolutionizing React Apps with Voice UI: A Guide to React Voice UI Packages

ai, chatgpt, voicebot, voiceui
Image
How to Use Cursor AI in Best Way?

webdev, nextjs, startup, buildinpublic
Image
Unleashing the Power of Oracle: The Advantages of Transitioning from Oracle EBS 12.1 to 12.2

oracle, r12, upgrade
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .