Check out Symmetric Chess, our featured variant for March, 2024.

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.

The Controls

Common Parameters for all Shapes

Parameters for Squares and Hexagons

Parameters for Custom Grid

The Diagram



The Piece Set

Set:abstract1
Directory: /graphics.dir/abstract/
LabelImageFilename
aBKnightBishop.gif
AWKnightBishop.gif
bBBishop.gif
BWBishop.gif
cBCamel.gif
CWCamel.gif
dBWarmachine.gif
DWWarmachine.gif
eBElephant.gif
EWElephant.gif
fBFers.gif
FWFers.gif
gBGrasshopper.gif
GWGrasshopper.gif
hBHorse.gif
HWHorse.gif
iBNightrider.gif
IWNightrider.gif
jBGiraffe.gif
JWGiraffe.gif
kBKing.gif
KWKing.gif
lBLion.gif
LWLion.gif
mBKnightRook.gif
MWKnightRook.gif
nBKnight.gif
NWKnight.gif
oBKingRook.gif
OWKingRook.gif
pBPawn.gif
PWPawn.gif
qBQueen.gif
QWQueen.gif
rBRook.gif
RWRook.gif
sBBerlinPawn.gif
SWBerlinPawn.gif
tBAmazon.gif
TWAmazon.gif
uBNightPrincess.gif
UWNightPrincess.gif
vBVao.gif
VWVao.gif
wBWazir.gif
WWWazir.gif
xBKnightKing.gif
XWKnightKing.gif
yBKingBishop.gif
YWKingBishop.gif
zBZebra.gif
ZWZebra.gif

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.

Code for Your Webpage

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.

Displaying Individual Pieces

While some people have used the drawdiagram.php script to display individual pieces, that is not its intended purpose, and it ends up putting the piece on a colored space with a border around it. Here are some simpler options for just displaying pieces.

Display Pieces with Shortcodes

Within comments or member-submitted pages, you may display pieces with the [set] and [pc] shortcodes. Note that shortcodes go between square brackets. First, use [set] to indicate the set you wish to use. The use [pc] for each individual piece, identifying it by the label used for it in the set.

The [set] shortcode takes one parameter, which is the name of the set. If you used the Diagram Designer to produce your diagram, the URL it gives you will be to a PHP script with a query string describing the board. One of the parameters should be of the form set=something. Use that as your set name. For example, if it was set=alfaerie, use the short code [set alfaerie]. If set does not appear in your diagram's query string, it is using the default value of abstract1. For that, use the code [set abstract1]. This shortcode will determine which set is used to display pieces with the [pc] shortcode

Next, for each piece, use the [pc] shortcode. Within the square brackets, follow the pc by a space and then by the same piece label used in the FEN code. You should already be familiar with which letter matches each piece if you used the Diagram Designer. If not, look in your diagram's query string for the value of code. To display the name with the piece, follow the label by another space, and enter the name before the closing bracket. To include a piece description, write it between the opening [pc] tag and a closing [/pc] tag.

Display Pieces with the showpiece.php script

Like the shortcodes above, this script will let you identify a piece by its set and label. Unlike the shortcode, it will also work on .html pages, and it provides the option of recoloring the piece. It is a script that outputs an image, and like a regular image file, it should be provided as the value of SRC in an IMG tag. Unlike a regular image, it accepts a query string with values for options. Here are the options. To use them, add them to the query string.

OptionDescription
blackThe color to color black pieces
colorThe color to color the piece
flipflip=true to use the flipped version of the piece
imageRelative URL of image
originalblackThe color that the black pieces are actually colored
originalcolorThe color that the piece is colored
originalwhiteThe color that the white pieces are actually colored
pieceThe label used for a piece in a set
setThe name of the set to be used
whiteThe color to color white pieces

Note that there are two ways to identify a piece image. One is to name the set and piece label separately, such as /play/pbm/showpiece.php?set=magnetic&piece=q, and the other is to give it the relative URL of the image, such as /play/pbm/showpiece.php?image=/graphics.dir/magnetic/BQueen.gif. This allows you to shorten the query string, such as /play/pbm/showpiece.php?image=magnetic/BQueen.gif, and it prevents the use of external images.

To recolor a piece, it has to know which color in the image to target and which color to change it to. It will often know the original color of the piece, either from its set or its filename. If not, there are three options for telling it what the original color is. You would want to use originalblack and originalwhite mainly when you don't know ahead of time if the piece is black or white, such as when creating query strings for use with Interactive Diagrams. Likewise for white and black. If you already know which side the piece is on, you can use color to define its color.

Display Pieces with HTML

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>.

Making Movement Diagrams

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.