Guide to Making Engineering Diagrams


Are all your plans and diagrams on paper? Wouldn’t it be useful to display them online so that they’re available for all customers and engineers, no matter where they’re located?

Sharing your engineering diagrams with clients, customers and visitors to your website is a great way to display and supply information efficiently and professionally. This post is a simple guide to give you an overview of the process and how you can get started.

A popular application for producing technical graphics is SmartDraw, which includes thousands of templates for more than 70 different diagram types and over 34,000 symbols for every discipline, including engineering. It also includes standard shapes used for flowcharts, organization charts and many other diagrams. If you create a lot of charts and diagrams and you’re interested in purchasing SmartDraw, the few hundred USD one-off price tag is a good investment.

Step 1. Select a template

The quickest way to get started is to select a template from the SmartDraw library. Select the one that most closely resembles the diagram you will be creating. Your file becomes a living, electronic document that’s easy to keep up to date.

Step 2. Edit the template

After selecting ‘Edit this Example’ a user-friendly page opens. SmartDraw can be installed on your computer and used locally or online via the Cloud. You and your team can work on the same flowchart using SmartDraw Cloud, or your favorite file sharing apps like Dropbox®, Google Drive or OneDrive®. You can also share files with non SmartDraw users by simply emailing them a link.

SmartDraw gives you simple commands (or keyboard shortcuts) to add shapes, automatically placing them and adding connecting lines. To add text, just click and type.

Drag and drop symbols onto the diagram and they’ll lock into place, even orientating themselves automatically to suit the existing diagram.

To delete a symbol or line just click on the item and hit the delete button. Made a mistake? Just hit undo.

3 - Save, display and share your diagram

There are several formats you can save your diagram in. If you’re adding it to your website as an image you should select ‘Export’ > PNG. This will create a file that’s automatically saved to your hard drive, and can then be added to a page on your site. A PDF can also be uploaded to your site and linked to. This is the best way to display a full page diagram online, and enables the visitor to print the diagram or copy it to their computer. Click here for an example.

SmartDraw help you make diagrams with powerful automation. Add, delete or move shapes and your diagram will automatically adjust and maintain its formatting. Add your own photos and images for a professional finish.

SmartDraw even provides an AutoCAD-like annotation layer that automatically resizes to match a diagram.

Electrical, Mechanical and Engineering Diagrams

If you’d prefer to hand this work over, I’d be happy to help. In addition to building specialist websites, I have years of technical drawing experience and can create and embed professional interactive complex diagrams to display on your site. Types of diagrams include graph-based, chart-based and schematic.

Send me a scanned (or photographed) copy of the paper version and I’ll convert your diagram to be interactive and add it to your website. You can also send me AutoCAD and Visio files if they’re in this format.

Once added to your site, your audience will be able to zoom, scroll, and even open hyperlinks. They will also be able to download the diagrams. If at any time in the future the diagram changes just let me know and I’ll update it. This assures that the latest version is always the one that will be available.

You can model the dynamic nature of a system using activity diagrams or show the design of an electric circuit using a circuit diagram. But it doesn’t stop at electrical, mechanical or engineering diagrams, I can also create and integrate other types of diagrams including flowcharts, floor plans, maps, and org charts.

Anita Henderson - i4websitedesign

Anita Henderson - i4websitedesign

Full Stack Developer – taking care of the backend development and frontend design of websites. Dedicated website administrator, offering everything from low-cost daily site care to help with marketing and increasing sales. Proficient in complex e-commerce transactions and search engine optimisation. Responsible for making sure client websites look great, work well on all devices, are safe, function quickly, efficiently and with the greatest stability.

Scroll to Top