Represent the three-dimensional molecular shape of a chemical by drawing a structural or skeletal formula in draw.io with the two new connector shapes in the Arrows shape library - the solid wedge and the dashed wedge.

Represent a 3D chemical structure in 2D

Structural formulas in organic chemistry can represent more than molecules connected with straight lines when you use the wedge and dash notation.

Known as a Natta projection, the wedges in a skeletal formula indicate whether an atom is sticking out of the screen (or paper) toward you (a solid wedge) or away from you (a dashed wedge).

Enable the Arrows shape library

1. Click on More shapes at the bottom of the left panel.
2. Enable the checkbox next to the Arrows shape library and click Apply.
   

Tip: Add all of the shapes you will be using a lot of in your diagram from the shape libraries on the left to the drawing canvas. Drag them all one-by-one from the drawing canvas to the Scratchpad in the left panel. Then you don’t have to go searching through multiple shape libraries.

Learn how to use the scratchpad in draw.io

Draw a structural formula in draw.io

Atom name: Atoms in a structural formula are indicated with their atomic symbol (from the periodic table)

1. Double click on a blank space on the drawing canvas and select the Text shape from the shape palette that appears at your mouse cursor.
2. Type the letter(s) that represents that atom.
3. Drag a connector from one atom and drop it on the next for the bond.
   

Simple bond: Alternatively, click on the Line shape in the General shape library to add a straight line connector to the drawing canvas. Then drag and drop each end over one of the atoms on the drawing canvas.

Double bond: Select an existing (single-line) connector on the drawing canvas. In the Style tab, select the first drop down list in the Line section, then select the double line.

Drag the orange grab handles on a double bond on the canvas further apart if necessary.

Carbon molecule without a label: As you can’t join a connector end to another connector in draw.io, you’ll need to use the waypoint shape from the Misc shape library (a sub-library in the General shape library).

With the waypoint shape, you can create the common zig-zag structure of a hydrocarbon chain. The stereochemistry at each carbon is shown with solid and dashed wedges.

An example zig-zag carbon chain in a glucose molecule, omitting the single hydrogens and carbons along the chain.

How to draw chemical bonds faster

1. Draw all the bonds first as simple bonds. Make sure you draw them all in the correct direction - from the named atom to the waypoint shape (the point of the wedge).
2. Select all of the bonds that should be a solid wedge.
3. Hold Shift on the keyboard, and click on the solid wedge shape in the Arrows shape library on the left to replace them all at once.
   
4. Repeat for all of the dashed wedges.
5. Select all of the double bonds and change the Line drop-down selection in the Style tab to a double line.

How to draw different molecule projections

You can represent a molecule in two dimensions in various ways by using different projection notations.

Fischer projection: This projection notation is discouraged for being too easily confused with other notations and not necessarily an accurate representation of the 3D configuration, but is still widely used for linear sugar molecules (monosaccharides).

• The horizontal bonds in the Fischer projection are slanted towards you.
• The carbon atoms in the center of the crossing horizontal and vertical lines are often not labelled.
• Use the Waypoint shape as in the zig-zag carbon chain above at the junctions of horizontal and vertical bonds.

A glucose molecule represented in three different projection notations.

Haworth projection: This is commonly used for cyclic structures in organic chemistry and biochemistry. Thicker lines indicate atoms that are closer to you, as the observer. Both carbon and hydrogen are usually not explicitly written.

• Select the connector and increase the line width (the pt field) in the Style tab of the format panel on connectors representing these bonds.
• Use the wedge shape from the Arrows shape library to indicate a bond is coming toward you.
• Use the Waypoint shape to join connectors at each ‘joint’ in the cycle structure.

Newman projection: The molecule is visualised straight down the bond from one atom, with the front atom (proximal) represented by a dot, and the back atom (distal) indicated with a circle.

• Use the Arrange tab to organise the elements in your diagram from front to back.
• Use the Waypoint shape as the central ‘dot’.

Sawhorse projection: This is a variant of the Newman projection, looking at the same bond, but from an angle. The front carbon is usually on the left and lower than the rest of the atoms. Use the waypoint shape to ‘join’ connectors.

A butane molecule drawn in Newman and Sawhorse projections, coloured for ease of comparison.

Follow us on GitHub, Twitter, Facebook.