CMLSnap Tutorial

Software requirements

To view the animations all that is required is an HTML browser with an SVG plugin (e.g. from Adobe, v.i.) or a native SVG viewer that supports animation (e.g. Batik from Apache).

To create animations from scratch requires the following:

  1. a Java runtime environment
  2. A chemical editor that can save individual molecules in CML, or tools to convert legacy formats into CML
  3. JUMBO4.4

We would recommend the use of Marvin from ChemAxon for the production of the snapshots. Although there are many other chemical editors around at the moment, we recommend this one as it is the only one which completely preserves the atom identities. The preservation of these atom id's is very important in the automatic generation of the animation. Marvin can be found at In order to download Marvin you will need to register at ChemAxon. Tips for using Marvin can be found in the accompanying file MarvinTips.html. Whilst we recommend the use of a CML aware editor, it is not mandatory. It should also be possible to use an authoring tool that is not CML-aware (e.g. ISIS Draw) and then converting the result to CML using OpenBabel ( We have not used this process but it ought to work. We are also working with the OpenSource groups such as JChemPaint to allow CML files to be saved in the correct manner.

Creating Snapshots

The input for the animation process consists of a series of CML files, each one containing the molecules which are to react. The following methodology uses a Class A beta-lactamase mechanism4,5,6 as an example.

Each snapshot depicts a point upon the reaction coordinate and is usually a local minimum. The following screenshots demonstrate teh authoring process.

It is important when saving the diagram that the file is names correctly.

Once the snapshot is saved, simply alter the diagram to reflect the next step in the reaction.

This process is then repeated until the final step has been saved.

The Class A beta-lactamase example has five mechanistic steps in total, each of which can be represented by a starting state and a final point, both these states are saved as separate snapshots. A diagram of the reaction mechanism can be seen below. Curly arrows represent electron pair movement.

Once all the files have been saved, the animation can be created.

The Animation Process

Once all the snapshots have been created the animation can be created. This is done with a single command line command.

The whole process will produce an animation like the one shown below.

To view the animation from the beginning, simply refresh the page or spawn a new window