The Chess Variant Pages
Custom Search



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. 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 period or an exclamation mark for a piece label. The period 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 the text. You may check "No coordinates" to display a diagram without coordinate labels.

Common Parameters for all Shapes
FEN Code:
Shape: Scale:
Set Group Set
File Labels: Rank Labels:
Font:Point Size:
Columns: Upside Down No Coordinates
Parameters for Squares and Hexagons
Checker Pattern:
Colors:
Border Color: Text Color:
Border Size:
Parameters for Custom Grid
Background Image:
Next File: Next Rank:
a
A
b
B
c
C
d
D
e
E
f
F
g
G
h
H
i
I
j
J
k
K
l
L
m
M
n
N
o
O
p
P
q
Q
r
R
s
S
t
T
u
U
v
V
w
W
x
X
y
Y
z
Z