Check out Glinski's Hexagonal Chess, our featured variant for May, 2024.

This tool is DEPRECATED, and it shall be removed from this site once no pages are using it anymore. The output of this tool is not mobile-friendly, because it displays ranks as series of images that can get broken up if the screen width is too narrow. Diagrams created with this shall be replaced with Diagram Designer images, in which a single diagram is displayed as a single image that will not break apart and look confusing. If you should come across this page in the meantime, do not use the JavaScript scripts mentioned here. Use the Diagram Designer instead.

ffen2diag: a tool to make chess and fairy chess diagrams

ffen2diag is a simple tool, that allows to include chess and chess variant diagrams in html pages. ffen2diag is based on Javascript.

How to call ffen2diag

1. Include the library

At any spot in the html-file, before really using the diagrams (e.g., in the head), you must include a command that calls the file at If you are in the top folder of, you would use:
<SCRIPT LANGUAGE="JavaScript" src="lib/javascript/ffen2diag.js"><!--
//--> </SCRIPT>
If you are in a file that is one level deep, i.e., in a folder that is in the main directory (e.g., a file with a name like
<SCRIPT LANGUAGE="JavaScript" src="../lib/javascript/ffen2diag.js"><!--
//--> </SCRIPT>
If you are in a file that is two levels deep, e.g., a file with a name like, then use:
<SCRIPT LANGUAGE="JavaScript" src="../../lib/javascript/ffen2diag.js"><!-- 
//--> </SCRIPT>
If you want to use the tool outside the domain, please email Hans Bodlaender. Non-commercial use of the tool is free.

2. Call a subroutine that makes the diagram

To make now a diagram, we can give a javascript that generates the diagram. Calling the script goes with either ffen2diag, ffen2diag1, or ffen2diag2. If one is `one level deep', use ffen2diag1, with between (" ") a string that describes the position. This string is in `Fairy Forsythe Edwards Notation (explained below.):
<SCRIPT LANGUAGE="JavaScript" ><!-- 

//--> </SCRIPT>
And this will be the effect:

At two levels deep, use ffen2diag2:

<SCRIPT LANGUAGE="JavaScript" ><!-- 
//--> </SCRIPT>

One can also explicitly give the path to the collection of pictures that one wants to use. This allows also to use the tool with different sets of pictures, (when such are made.) In this case, use ffen2diag, and give the path in the second argument: end with a /. As the pictures from are standard used, the following has the same effect as ffen2diag1:

<SCRIPT LANGUAGE="JavaScript" ><!-- 
//--> </SCRIPT>


In a FFEN-string, you describe the position rowwise, from top to bottom, from left to right. You can use: For example,
<SCRIPT LANGUAGE="JavaScript" ><!--
//--> </SCRIPT>

Diagrams with marked columns and rows

It is also possible to mark the columns and rows with numbers and letters. For this one uses ffen2diag1b, ffen2diag2b, or ffen2diagb, i.e., the only change with respect to unlabeled rows and columns is a b at the end of the name of the method called. For example, one can use when `one level deep':
And this will be the effect:

The maximum numbers of rows and columns are around 30, but your diagrams won't look any good anyhow if they are so big.

Colored pieces

If you want to use colored pieces, then call instead of ffen2diag.js the file ffen2diagcol.js. Some of the pieces have colored variants; write the piece between brackets `(' and `)' and put the number at the end; e.g. (r2) for a yellow rook; (k3) for a green king, (general4) for a red general, and (ship5) for a blue ship.


In this way, it is relatively simple to include chess variant diagrams into your hmtl-pages without much effort. In case of questions, please contact us. If there is interest in this tool for other websites, please email us. Non-commercial use is free, but do not call the tools on the site from another site, but let us send you files you can put on your own site. The tool also works with a browser when you view the files at home, i.e., when not connected to the internet, when correctly used.

If one want to use different graphics for the pieces, one needs: for each piece two gif-files, one on a black square, and one on a white square, and gif-files for an empty black and an empty white square. All these gif files must have exactly the same number of pixels horizontally and vertically. Email if you want to make such a set of pictures.

Written by Hans Bodlaender
WWW page created: September 18, 2001.