♟ Documentation — Chessdiag.org
Éditeur de diagrammes d'échecs en ligne · Plugin WordPress v4 · API PNG
🖊 1. L'éditeur en ligne1. The online editor
L'éditeur est accessible directement sur chessdiag.org. Il vous permet de construire n'importe quelle position d'échecs puis de l'exporter ou de la partager en un clic.
The editor is available at chessdiag.org. Use it to build any chess position, then export or share it instantly.
1
Sélectionnez une pièce dans la palette (en bas de l'échiquier) puis cliquez sur la case cible. La gomme (✕) efface la pièce de la case.
Select a piece from the palette below the board, then click the target square. The eraser (✕) removes any piece from a square.
2
Glissez-déposez les pièces pour les déplacer rapidement.
Drag and drop pieces to move them quickly.
3
Retournez l'échiquier avec le bouton ⇅ pour voir la position du côté des Noirs.
Flip the board with the ⇅ button to view the position from Black's side.
4
Masquez les coordonnées avec le bouton a1-h8 pour un diagramme épuré.
Hide coordinates with the a1-h8 button for a clean diagram.
5
Tracez des flèches : activez le mode flèches (↗), choisissez une couleur, puis cliquez-glissez sur l'échiquier. Un clic simple sur une case colore la case elle-même.
Draw arrows: activate arrow mode (↗), pick a color, then click-drag on the board. A simple click highlights a square with the chosen color.
6
Personnalisez les couleurs des cases claires et foncées avec les sélecteurs de couleur dans la barre d'outils.
Customize square colors using the color pickers in the toolbar.
7
Chargez une position FEN : collez-la dans le champ FEN et cliquez Charger. Vous pouvez aussi copier la FEN courante avec Copier.
Load a FEN position: paste it into the FEN field and click Load. You can also copy the current FEN with Copy.
8
Exportez : cliquez sur PNG pour ouvrir l'image dans un nouvel onglet, ou sur l'icône SVG pour télécharger un vecteur sans pertes. La barre latérale donne accès aux codes WordPress, BBCode, HTML, Markdown et URL de partage.
Export: click PNG to open the image in a new tab, or the SVG icon to download a lossless vector. The sidebar provides WordPress, BBCode, HTML, Markdown and share URL codes.
🔤 2. Notation de position (encodage)2. Position notation (encoding)
Chessdiag utilise sa propre notation compacte, indépendante de la FEN. L'échiquier est lu de haut en gauche (a8) à bas à droite (h1), rangée par rangée.
Chessdiag uses its own compact notation, independent from FEN. The board is read from top-left (a8) to bottom-right (h1), row by row.
Symboles des pièces
Piece symbols
| Symbole | Pièce | Côté |
Symbol | Piece | Side |
| K Q R B N P | Roi Dame Tour Fou Cavalier Pion | Noirs ⬛ | King Queen Rook Bishop Knight Pawn | Black ⬛ |
| k q r b n p | Roi Dame Tour Fou Cavalier Pion | Blancs ⬜ | King Queen Rook Bishop Knight Pawn | White ⬜ |
| s | Case vide | — | Empty square |
Attention : la convention est l'inverse du FEN standard — ici les majuscules représentent les Noirs et les minuscules les Blancs. C'est l'encodage historique de Chessdiag depuis sa version 1.
Note: this is the opposite of standard FEN — here uppercase letters represent Black pieces, lowercase represent White. This is Chessdiag's historical encoding since version 1.
Compression (répétitions)
Compression (repetitions)
Un chiffre suivi d'un symbole signifie que ce symbole est répété n fois.
A number followed by a symbol means that symbol is repeated n times.
8s → ssssssss
32s → ssssssss ssssssss ssssssss ssssssss
8P → PPPPPPPP
Raccourci all
Shorthand all
Le mot-clé all est un alias pour la position de départ complète.
The keyword all is an alias for the full starting position.
all → RNBQKBNR8P32s8prnbqkbnr
Encodage URL (serveur)
URL encoding (server-side)
Dans les URL, les majuscules (Noirs) sont précédées de m pour éviter les problèmes de casse dans les noms de fichiers. L'éditeur gère cette conversion automatiquement.
In URLs, uppercase letters (Black pieces) are prefixed with m to avoid case-sensitivity issues in file names. The editor handles this conversion automatically.
R → mr
K → mk
🖼 3. API PNG / URL directe3. PNG API / Direct URL
Chaque position génère une image PNG accessible directement par URL. L'image est mise en cache côté serveur.
Every position generates a PNG image accessible directly via URL. Images are cached server-side.
https://chessdiag.org/{code}.png
https://chessdiag.org/{code}.png?param1=val1¶m2=val2
La même URL avec l'extension .diag ouvre l'éditeur chargé avec cette position :
The same URL with the .diag extension opens the editor loaded with that position:
https://chessdiag.org/{code}.diag
Paramètres GET
GET parameters
| Paramètre |
Valeur |
Description |
Value |
Description |
| flip |
1 |
Vue côté Noirs (échiquier retourné) |
Black's point of view (flipped board) |
| nocoords |
1 |
Supprime la marge et les coordonnées |
Remove margin and coordinates |
| cl |
hex 6 chiffres |
Couleur des cases claires (ex. f7f1e8) |
6-digit hex |
Light square color (e.g. f7f1e8) |
| cd |
hex 6 chiffres |
Couleur des cases foncées (ex. 898480) |
6-digit hex |
Dark square color (e.g. 898480) |
| arrows |
voir ci-dessous |
Flèches colorées sur l'échiquier |
see below |
Colored arrows on the board |
| squares |
voir ci-dessous |
Cases en surbrillance colorée |
see below |
Highlighted squares |
Syntaxe des flèches (arrows=)
Arrow syntax (arrows=)
Chaque flèche s'écrit {case_départ}{case_arrivée}{couleur}. Plusieurs flèches sont séparées par -.
Each arrow is written {from_square}{to_square}{color}. Multiple arrows are separated by -.
arrows=e2e4g-d1h5r
Syntaxe des cases colorées (squares=)
Highlighted squares syntax (squares=)
Chaque case s'écrit {case}{couleur}. Plusieurs cases sont séparées par -.
Each square is written {square}{color}. Multiple squares are separated by -.
squares=d4r-e5g
Codes couleur
Color codes
| Code | Couleur | Color |
|---|
| g | Vert / Green |
| r | Rouge / Red |
| b | Bleu / Blue |
| y | Jaune / Yellow |
Exemple complet d'URL
Full URL example
https://chessdiag.org/mrmnmbmqmkmbmnmr8mp32s8prnbqkbnr.png
?flip=1&cl=f7f1e8&cd=898480&arrows=e2e4g-d1h5r&squares=e4y
Position de départ
Starting position
Sans coordonnées
No coordinates
Vue côté Noirs
Black's view
Couleurs custom
Custom colors
Flèches
Arrows
📋 4. Codes d'intégration4. Embed codes
L'éditeur génère automatiquement tous les codes d'intégration dans le panneau de droite. Cliquez sur un code pour le copier.
The editor automatically generates all embed codes in the right panel. Click any code to copy it.
| Type | Format |
Type | Format |
| WordPress |
[diag flip=1]RNBQKBNR8P32s8prnbqkbnr[/diag] |
| BBCode |
[url=…][img]…/code.png[/img][/url] |
| HTML |
<a href="…"><img src="…/code.png"/></a> |
| Markdown |
[](…/code.diag) |
| URL partage |
Share URL |
https://chessdiag.org/code.diag |
Le lien pointe toujours vers l'URL .diag (éditeur) ; l'image est toujours l'URL .png. Les deux acceptent les mêmes paramètres GET.
The link always points to the .diag URL (editor); the image always uses the .png URL. Both accept the same GET parameters.
🔌 5. Plugin WordPress v45. WordPress plugin v4
Le plugin Chessdiag permet d'insérer des diagrammes d'échecs dans vos articles et commentaires WordPress via un simple shortcode. Aucune image à héberger sur votre serveur.
The Chessdiag plugin lets you insert chess diagrams into your WordPress posts and comments using a simple shortcode. No images to host on your own server.
Installation
Installation
2
Dans votre administration WordPress, allez dans Extensions → Ajouter → Téléverser, sélectionnez le ZIP et cliquez Installer maintenant.
In your WordPress admin, go to Plugins → Add New → Upload Plugin, select the ZIP and click Install Now.
3
Activez le plugin. C'est tout — aucun réglage nécessaire.
Activate the plugin. That's it — no settings required.
Mise à jour depuis la v3
Upgrading from v3
La v4 est 100 % rétrocompatible avec la v3. Désactivez et supprimez l'ancienne version, uploadez la nouvelle, réactivez. Aucun article existant n'est à modifier.
v4 is 100% backward compatible with v3. Deactivate and delete the old version, upload the new one, reactivate. No existing posts need to be changed.
Diagrammes dans les commentaires
Diagrams in comments
Le plugin supporte également les shortcodes dans les commentaires WordPress. Vos lecteurs peuvent répondre avec leur propre diagramme en copiant simplement le code depuis l'éditeur.
The plugin also supports shortcodes in WordPress comments. Your readers can reply with their own diagram by simply copying the code from the editor.
Astuce : afficher un shortcode sans le déclencher
Tip: show a shortcode without triggering it
Pour afficher un shortcode dans un tutoriel sans qu'il soit interprété, remplacez la balise diag par diag_code. Exemple :
To display a shortcode in a tutorial without triggering it, replace the diag tag with diag_code. Example:
[diag_code]all[/diag_code]
📖 6. Référence du shortcode6. Shortcode reference
[diag ATTRIBUTS]POSITION[/diag]
La POSITION utilise la notation décrite en §2. Les attributs sont tous optionnels.
The POSITION uses the notation described in §2. All attributes are optional.
| Attribut | Valeur par défaut | Description |
Attribute | Default | Description |
| flip |
0 |
Retourner l'échiquier (1 = vue côté Noirs) |
Flip the board (1 = Black's view) |
| nocoords |
0 |
Masquer coordonnées et cadre (1 = sans marge) |
Hide coordinates and frame (1 = no margin) |
| cl |
f0d9b5 |
Couleur cases claires (hex 6 chiffres, sans #) |
Light square color (6-digit hex, no #) |
| cd |
b58863 |
Couleur cases foncées (hex 6 chiffres, sans #) |
Dark square color (6-digit hex, no #) |
| arrows |
— |
Flèches : case1case2couleur séparées par - |
Arrows: sq1sq2color separated by - |
| squares |
— |
Cases colorées : casecouleur séparées par - |
Highlighted squares: sqcolor separated by - |
| size |
300 |
Taille d'affichage en pixels (50–1200) |
Display size in pixels (50–1200) |
Rétrocompatibilité :Backward compatibility:
Les attributs flip, nocoords, cl, cd, arrows, squares et size sont nouveaux en v4. Tous les shortcodes v3 fonctionnent sans modification.
The attributes flip, nocoords, cl, cd, arrows, squares and size are new in v4. All v3 shortcodes work without any change.
💡 7. Exemples complets7. Full examples
Position de départ
Starting position
[diag]all[/diag]
Position de départ vue côté Noirs, sans coordonnées
Starting position from Black's side, no coordinates
[diag flip=1 nocoords=1]all[/diag]
Annoter un coup avec une flèche verte
Annotate a move with a green arrow
[diag arrows=e2e4g]all[/diag]
Mettre en évidence deux cases clés
Highlight two key squares
[diag squares=d4r-e5g]all[/diag]
Échiquier bois clair, grande taille, flèches multiples
Light wood board, large size, multiple arrows
[diag cl=f7f1e8 cd=898480 size=600 arrows=e2e4g-d2d4g-c2c4g]all[/diag]
Position personnalisée (8 pions noirs sur la 5e rangée)
Custom position (8 black pawns on rank 5)
[diag]32s8P24s[/diag]
Image PNG directe dans un article HTML ou un forum
Direct PNG image in an HTML article or forum post
<a href="https://chessdiag.org/mrmnmbmqmkmbmnmr8mp32s8prnbqkbnr.diag">
<img src="https://chessdiag.org/mrmnmbmqmkmbmnmr8mp32s8prnbqkbnr.png"
alt="Position de départ" width="300"/>
</a>
[url=https://chessdiag.org/mrmnmbmqmkmbmnmr8mp32s8prnbqkbnr.diag]
[img]https://chessdiag.org/mrmnmbmqmkmbmnmr8mp32s8prnbqkbnr.png[/img]
[/url]