Diagram Designer

This page lets you design a diagram that you can include on one of your pages without the need to upload any graphics. To keep the form parallel with the image, further instructions follow below the form.

Once you have designed your diagram, get the URL from the diagram image, or copy the HTML displayed below, but do not copy the URL in the address bar. That URL is for this page, not for your diagram.

If you wish to include piece graphics on your page, you may modify the code shown below. For each piece, it creates a block of HTML code, enclosed in DIV tags of the piece class. Since each piece may be represented twice in your diagram with different colors, each piece may be represented twice in the code below. To use it, copy it to your page, delete the portion you don't want to use, replace the label between FIGCAPTION tags with the piece's name, and insert the description of your piece between the P tags. You may rearrange pieces by cutting and pasting DIV blocks. Let the whole section end with <BR CLEAR=ALL>.

The drawdiagram.php script will work properly from the Chess Variant Pages and from selected search engines and social media sharing sites, but if you use it from another website or by itself, it will obscure the diagram by displaying a message in the middle. This designer is based on Game Courier, which lets you design, program, and play Chess variants online. It uses some of the same parameters as Game Courier uses, but it keeps things simpler and focuses on graphic design, not on rules. These parameters are described in more detail in the Game Courier Developer's Guide, and for each parameter you can change in the form, I have provided a link to the section on it.

Unlike Game Courier, this can be used for movement diagrams. To mark a space a piece may move to, use a pound symbol (#) or an exclamation mark (!) for a piece label. The pound will show up as a dot in the color of the border, and an exclamation mark will show up as a dot in the color of last color. If the color you want is not already listed, you can add it to the end of the color list. If you enter a digit between braces, such as {3}, it will display a box with the digit as its color index. Additionally, you use braces to put multiple images on the same space, which is useful for showing the ability to capture a piece. Within braces, separate each symbol with a space, and it will draw them in the order it finds them. So, if you want a dot over a piece, list the piece first, such as {n #}. If you use a digit, it will draw a box.
You may check "No coordinates" to display a diagram without coordinate labels.