Le template de votre projet fournit un composant prêt à l’emploi qui affiche un schéma ou un PCB KiCad directement dans une page, avec zoom et déplacement. Ce tutoriel explique comment l’utiliser, comment documenter la nomenclature, et une méthode de secours par images.
Ce qu’il faut documenter
Une carte électronique bien documentée répond à quatre questions : à quoi
sert chaque partie du circuit, quels composants exactement, comment c’est
câblé, et pourquoi ces choix. Ce dernier point rejoint
Tracer ses choix techniques.
Où ranger les fichiers
Deux emplacements, deux rôles :
Emplacement
Contenu
Rôle
project/ecad/<nom-de-la-carte>/
Le projet KiCad complet (.kicad_pro, .kicad_sch, .kicad_pcb)
Les sources : c’est là que vous travaillez
docs/assets/kicad/
Une copie des fichiers .kicad_sch et .kicad_pcb
Ce que le site affiche
Le site n’affiche que ce qui se trouve dans le dossier docs/. Recopiez vos
fichiers dans docs/assets/kicad/ à chaque évolution importante de la
carte, sinon le site montre une ancienne version. Complétez aussi le
README.md de project/ecad/ (un tableau : carte, dossier, rôle).
Afficher le schéma et le PCB
Étape 1 : Dupliquer la page d'exemple
Le dossier docs/conception/electronique/ contient la page d’exemple carte-principale.md. Copiez-la dans le même dossier, nommez la copie d’après votre carte (par exemple carte-capteurs.md), puis changez son title et son nav_order. Son parent (« Électronique ») et son grand_parent (« Conception ») restent identiques. Voir Personnaliser le template de son projet pour le fonctionnement du menu.
Copiez le .kicad_sch et le .kicad_pcb de votre carte dans docs/assets/kicad/. Comme partout dans le repo, des noms de fichiers sans espace ni accent : carte-capteurs.kicad_sch, pas Carte Capteurs.kicad_sch.
Deux options : controles="full" ajoute une barre latérale avec la liste des composants, et hauteur="700px" agrandit la zone d’affichage (500 px par défaut).
Une fois vos fichiers affichés, supprimez de docs/assets/kicad/ les fichiers Otto-ESP32-XIAO-REFEREE du template (la carte du robot Otto), et le bloc À modifier de votre page.
L’affichage est un visualiseur en lecture seule, chargé depuis kicanvas.org : il demande une connexion internet, et il ne génère ni ne modifie rien. En particulier, il ne calcule pas de nomenclature : celle-ci se génère avec KiCad lui-même (voir plus bas).
Méthode de secours : exporter une image
Si votre carte n’est pas faite sous KiCad, ou si vous voulez une figure
figée (pour un poster, par exemple), exportez une image. C’est la méthode
qui marche toujours, sans rien installer de plus.
Étape 1 : Ouvrir l'export dans KiCad
Dans l’éditeur de schéma d’KiCad (Eeschema), ouvrez le menu Fichier (ou File) puis Tracer… (ou Plot…).
Dans la fenêtre qui s’ouvre, choisissez le format de sortie SVG (KiCad n’exporte pas directement en PNG depuis cette fenêtre ; le SVG a l’avantage d’être net à n’importe quelle taille d’affichage, contrairement à une image). Choisissez un dossier de sortie, par exemple docs/assets/images/.
Cliquez sur Tracer (ou Plot). Un fichier .svg est généré. Faites la même opération dans l’éditeur de PCB (Pcbnew) si vous voulez aussi exporter une image de votre circuit imprimé.
Le fichier .svg doit se trouver dans docs/assets/images/. Puis, dans votre page (ici une page à deux niveaux de dossier, comme docs/conception/electronique/carte-capteurs.md) :

Le nombre de ../ dépend de la profondeur de la page : une page directement dans docs/ n’en a pas besoin (assets/images/schema.svg), une page dans docs/fabrication/ en a un (../assets/images/schema.svg).
La nomenclature liste chaque composant du circuit. Elle se génère avec KiCad,
pas à la main.
Générer la nomenclature depuis KiCad
Dans l’éditeur de schéma (Eeschema), menu Outils > Générer une nomenclature… (Tools > Generate Bill of Materials…, le libellé exact varie légèrement selon la version de KiCad). Choisissez un format de sortie (CSV fonctionne partout), un dossier, puis lancez la génération. Vous obtenez un fichier listant automatiquement chaque référence, valeur et quantité de votre schéma : pas besoin de les retaper à la main.
Une fois le CSV généré, reformatez les colonnes utiles en tableau Markdown
pour l’intégrer proprement à votre page (référence exacte, pas juste “une
résistance”). C’est le tableau que contient la page d’exemple du template :
Le CSV brut fonctionne aussi, mais pas n'importe où
Si reformater à la main prend trop de temps, déposez le fichier .csv généré dans docs/assets/data/ et faites-y un lien direct (moins joli qu’un tableau, mais toujours exact). Attention : le .gitignore du template ignore les fichiers .csv et .xml partout sauf dans docs/. Une nomenclature exportée dans project/ecad/ n’apparaîtra donc pas dans GitHub Desktop et ne sera jamais envoyée sur GitHub.
Pour aller plus loin : nomenclature interactive avec un plugin KiCad
Réservé à ceux qui veulent creuser
Ce plugin s’installe dans KiCad (pas dans votre site), et son résultat est un fichier HTML autonome : il s’intègre par un simple lien, sans rien changer à la configuration du site.
Le plugin InteractiveHtmlBom
génère un fichier HTML autonome qui affiche le PCB et la nomenclature
côte à côte : cliquez une ligne de la BOM, le composant correspondant
s’illumine sur le circuit. Particulièrement utile pour le soudage manuel
et pour Documenter l’assemblage et le montage.
Installer le plugin
Dans KiCad, ouvrez le Plugin and Content Manager (icône dédiée sur l’écran d’accueil de KiCad), recherchez Interactive Html Bom, cliquez sur Install puis Apply.
Ouvrez votre PCB dans Pcbnew, enregistrez-le. Cliquez sur l’icône du plugin dans la barre d’outils (ou menu Outils > Extensions externes > Generate Interactive HTML BOM). Dans la fenêtre qui s’ouvre, cliquez sur Generate BOM. Un fichier .html est créé : il fonctionne hors ligne, sans connexion internet.
Copiez le fichier .html généré dans docs/assets/ (par exemple docs/assets/nomenclature-interactive.html), puis faites un lien vers lui depuis votre page :
[Voir la nomenclature interactive](../../assets/nomenclature-interactive.html)
Le brochage dit quelle broche du microcontrôleur est reliée à quoi. C’est
la première question de quiconque reprend votre carte ou votre code, et
l’endroit où naissent les bugs les plus difficiles à trouver : une broche
changée sur le schéma mais pas dans le code, ou l’inverse.
Il se documente en trois couches, avec une règle simple : le code fait
foi, la documentation le reprend.
Couche
Où
Obligatoire ?
Un fichier pins.h qui regroupe toutes les broches
Dans le code du firmware
Oui
Un tableau de brochage
Sur la page de la carte (ici)
Oui
Un schéma de brochage
Sur la page de la carte, sous le tableau
Non, mais très lisible
1. Dans le code : un seul fichier pins.h
Toutes les broches sont déclarées dans un seul fichier,
include/pins.h du projet PlatformIO (par exemple
project/firmware/mon-robot/include/pins.h), avec un nom parlant et un
commentaire par ligne :
// Brochage de la carte principale (ESP32-S3).// Documenté sur la page Carte principale du site : le mettre à jour en même temps.#pragma once
// PinceconstexprintPIN_SERVO_PINCE=18;// sortie PWM, servo SG90 alimenté en 5 VconstexprintPIN_FIN_COURSE=19;// entrée, pull-up interne, appuyé = LOW// Capteur de couleur TCS3200constexprintPIN_COULEUR_S0=4;// sortie, choix de l'échelle de fréquenceconstexprintPIN_COULEUR_OUT=5;// entrée, signal en fréquence
Le reste du code n’écrit jamais un numéro de broche : il utilise
PIN_SERVO_PINCE, jamais 18. Changer une broche ne demande alors de
modifier qu’une seule ligne, et personne n’en oublie une au fond d’un autre
fichier.
2. Dans la documentation : un tableau
Sur la page de la carte, un tableau reprend pins.h. La colonne Nom dans
le code fait le pont entre le schéma KiCad et le firmware :
Broche
Nom dans le code
Composant
Sous-ensemble
Remarque
GPIO18
PIN_SERVO_PINCE
Servo SG90
Pince
Sortie PWM, servo alimenté en 5 V
GPIO19
PIN_FIN_COURSE
Microrupteur
Pince
Entrée, pull-up interne, appuyé = LOW
GPIO4
PIN_COULEUR_S0
TCS3200 (S0)
Capteur de couleur
Sortie, échelle de fréquence
GPIO5
PIN_COULEUR_OUT
TCS3200 (OUT)
Capteur de couleur
Entrée, signal en fréquence
Copier le tableau de brochage (Markdown)
| Broche | Nom dans le code | Composant | Sous-ensemble | Remarque |
|---|---|---|---|---|
| GPIO18 | `PIN_SERVO_PINCE` | Servo SG90 | Pince | Sortie PWM, servo alimenté en 5 V |
| GPIO19 | `PIN_FIN_COURSE` | Microrupteur | Pince | Entrée, pull-up interne, appuyé = LOW |
| GPIO4 | `PIN_COULEUR_S0` | TCS3200 (S0) | Capteur de couleur | Sortie, échelle de fréquence |
| GPIO5 | `PIN_COULEUR_OUT` | TCS3200 (OUT) | Capteur de couleur | Entrée, signal en fréquence |
La colonne Remarque est celle qu’on oublie le plus souvent, alors qu’elle
évite les vraies erreurs : sens (entrée ou sortie), résistance de tirage,
niveau actif, tension, broches à éviter au démarrage de la carte.
3. Pour la lisibilité : un schéma de brochage
Un schéma Mermaid, écrit en texte comme le reste de la documentation,
montre le brochage d’un coup d’œil. Le sens des flèches indique les entrées
(vers la carte) et les sorties (depuis la carte), et chaque subgraph
regroupe les composants d’un sous-ensemble :
```mermaid
flowchart LR
ESP[ESP32-S3]
subgraph Pince
SERVO[Servo SG90]
FDC[Fin de course]
end
subgraph Capteur de couleur
TCS[TCS3200]
end
ESP -- GPIO18 --> SERVO
FDC -- GPIO19 --> ESP
ESP -- GPIO4 : S0 --> TCS
TCS -- GPIO5 : OUT --> ESP```
flowchart LR
ESP[ESP32-S3]
subgraph Pince
SERVO[Servo SG90]
FDC[Fin de course]
end
subgraph Capteur de couleur
TCS[TCS3200]
end
ESP -- GPIO18 --> SERVO
FDC -- GPIO19 --> ESP
ESP -- GPIO4 : S0 --> TCS
TCS -- GPIO5 : OUT --> ESP
Le schéma KiCad, pins.h et le tableau disent la même chose de trois façons : ils se contredisent dès qu’on en oublie un. Règle d’équipe : pins.h fait foi, et toute modification d’une broche met à jour le tableau (et le schéma Mermaid s’il existe) dans le même commit. Si la carte elle-même change, le schéma KiCad de docs/assets/kicad/ est recopié au même moment.
Photos du montage réel
Le schéma montre l’intention, une photo montre la réalité, souvent
différente (fils de couleur, position des composants sur une breadboard,
bricolage temporaire). Prenez ces photos au moment du montage, pas
après coup (voir Documenter au fil de l’eau).
Une simple photo prise avec un smartphone, placée dans docs/assets/images/
(moins de 2 Mo : réduisez sa résolution si besoin) et ajoutée avec
, suffit.
Exercice
Sur votre partie électronique : copiez vos fichiers KiCad dans
docs/assets/kicad/ et affichez le schéma et le PCB sur la page de votre
carte, générez votre nomenclature depuis KiCad et intégrez-la (en tableau ou
en CSV), rédigez le tableau de brochage à partir de votre fichier pins.h
(créez-le s’il n’existe pas encore), et ajoutez au moins une photo du
montage réel.
Crédit photo : carte électronique du robot Otto, MakerSpace UniLaSalle Amiens (voir Découvrez la carte du Otto).