Visualizing Chemical Structures 绘制化学物质的结构式

3月 5 2025 Tech 4 分钟 read (About 567 words)

For the purpose of visualizing chemical structures, I will now post a few method that can achive this goal.

1. ChemDraw

ChemDraw is a software that can be used to draw chemical structures (though commerical).

2. RDKit

RDKit Python library can reproduce the structurs based on the smiles code.

from rdkit import Chem
from rdkit.Chem import Draw

# Define the correct Myosmine SMILES
precursor_smiles = "C1CC(=NC1)C2=CN=CC=C2"  # Correct Myosmine (C9H10N2)
precursor_mol = Chem.MolFromSmiles(precursor_smiles)

# Define predicted fragment SMILES
fragments_smiles = {
    "79.0544": "C1CC(=NC1)",  # Benzene radical cation C6H6-H+
    "104.0495": "C1=CC=C(C=C1)C=[NH+]",  # Pyridine-benzyl cation
    "106.0653": "C1=CC=C(C=N1)C=[NH+]",  # Methyl-pyridine
    "132.0683": "CCC(=[NH+])C2=CN=CC=C2",  # Pyridine-imidazole
    "147.0919": "C1CC(=NC1)C2=CN=CC=C2"  # Correct Myosmine (precursor)
}
# Convert SMILES to RDKit molecules
fragment_mols = {mz: Chem.MolFromSmiles(smiles) for mz, smiles in fragments_smiles.items()}

# Draw precursor and fragments
Draw.MolsToGridImage(
    [precursor_mol] + list(fragment_mols.values()),
    molsPerRow=3,
    subImgSize=(200, 200),
    legends=["Precursor"] + list(fragments_smiles.keys())
)

alt text

Save the structures to SVG vector file.

from rdkit import Chem
from rdkit.Chem import Draw

# Define the molecule
precursor_smiles = "CC1=CN2C=CC=C2C(=N1)C"
precursor_mol = Chem.MolFromSmiles(precursor_smiles)

# Generate SVG as a string
drawer = Draw.MolDraw2DSVG(600, 600)  # width, height in pixels
drawer.DrawMolecule(precursor_mol)
drawer.FinishDrawing()
svg = drawer.GetDrawingText()

# Save SVG to file
with open("C9H10N2_structure_pyrazine.svg", "w") as f:
    f.write(svg)

alt text

3. SmileDrawer

SmileDrawer is a lightweight JS library that renders chemical structures from SMILES strings in the browser. It supports canvas and SVG, with optional export and styling.

I receommend this method with the nice looking and the interactive feature.

Relevant link:

Two examples for pasting

3.1. Quick draw using Canvas

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="x-ua-compatible" content="ie=edge" />
	<title>Smiles Drawer Example</title>
	<meta name="description" content="A minimal smiles drawer example." />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<link href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet" />
</head>

<body>
	<input id="example-input" name="example-input" />
	<canvas id="example-canvas" width="500" height="500"></canvas>

	<script src="https://unpkg.com/smiles-drawer@1.0.10/dist/smiles-drawer.min.js"></script>
	<script>
		let input = document.getElementById("example-input");
      let options = {};

      // Initialize the drawer to draw to canvas
      let smilesDrawer = new SmilesDrawer.Drawer(options);
      // Alternatively, initialize the SVG drawer:
      // let svgDrawer = new SmilesDrawer.SvgDrawer(options);

      input.addEventListener("input", function() {
        // Clean the input (remove unrecognized characters, such as spaces and tabs) and parse it
        SmilesDrawer.parse(input.value, function(tree) {
          // Draw to the canvas
          smilesDrawer.draw(tree, "example-canvas", "light", false);
          // Alternatively, draw to SVG:
          // svgDrawer.draw(tree, 'output-svg', 'dark', false);
        });
      });
	</script>
</body>

</html>

3.2 Exportable SVG with Save Button

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>SmilesDrawer SVG Example</title>
</head>

<body>
	<input id="example-input" name="example-input" value="C1=CC=CC=C1" />
	<svg id="example-svg" width="500" height="500" style="background:white; border:1px solid #ccc;"></svg>
	<br>
	<button id="saveBtn">💾 Save SVG</button>

	<script src="https://unpkg.com/smiles-drawer@2.0.1/dist/smiles-drawer.min.js"></script>
	<script>
		const input = document.getElementById("example-input");
    const svg = document.getElementById("example-svg");
    const svgDrawer = new SmilesDrawer.SvgDrawer({ width: 500, height: 500 });

    input.addEventListener("input", () => {
      while (svg.firstChild) svg.removeChild(svg.firstChild); // Clear old structure
      SmilesDrawer.parse(input.value, tree => {
        svgDrawer.draw(tree, svg, "light");
      }, err => {
        console.error("SMILES parse error:", err);
      });
    });

    // Initial draw
    input.dispatchEvent(new Event("input"));

    // Save as SVG
    document.getElementById("saveBtn").addEventListener("click", () => {
      const serializer = new XMLSerializer();
      const svgString = serializer.serializeToString(svg);
      const blob = new Blob([svgString], { type: "image/svg+xml" });
      const url = URL.createObjectURL(blob);

      const a = document.createElement("a");
      a.href = url;
      a.download = "molecule.svg";
      a.click();
      URL.revokeObjectURL(url);
    });
	</script>
</body>

</html>

#Python #Visualization #Chemistry