pengmn23/sketchnote-diagram

Illustration pédagogique au style sketchnote (dessin par code)

Une image = un fichier JSON. scripts/render.py utilise Google Chrome (ou Microsoft Edge) installé localement pour ouvrir scripts/sketchnote.html sans interface, dessiner selon le JSON et capturer une capture d'écran. Le texte provient entièrement du JSON, donc aucune erreur de caractère ; en contrepartie, le résultat est plus structuré que les modèles de génération d'images.

Nécessite : les polices système macOS « Hannotate SC » (Shouti) et « HanziPen SC » (Pianpian), Google Chrome, Python 3 (uniquement la bibliothèque standard).

Fichiers

Emplacement	Qu'est-ce que c'est	Quand le lire
scripts/render.py	Ligne de commande : créer, vérifier, générer, ouvrir l'éditeur	À chaque utilisation
scripts/sketchnote.html, editor.js	Programme de dessin et éditeur navigateur	Ne pas lire, render.py les appelle
scripts/templates/*.json	5 modèles pour créer de nouvelles images	--list-templates pour voir les descriptions
scripts/templates.js	Empaquetage des modèles pour l'éditeur, généré automatiquement, ne pas modifier à la main	Exécuter --templates après avoir modifié les modèles
references/json-format.md	Chaque champ, section, icône, gribouillage, nom de couleur, limitations connues du JSON	Avant de modifier le JSON
references/style.md	Règles de style : zones de mise en page, palette de couleurs, signification des formes, nombre de caractères, ce qu'il ne faut pas dessiner, vérifications après génération	Lors de la première conception, pour définir les types de nœuds et le nombre de caractères
references/editor.md	Comment utiliser l'éditeur navigateur	Lorsque l'utilisateur doit ajuster manuellement
assets/examples/	Une version verticale 3:4 et une version horizontale 16:9 (JSON + PNG)	En cas de doute sur la mise en page, servez-vous de référence

Dans les commandes ci-dessous, R fait référence au scripts/render.py de cette compétence (utilisez le chemin absolu). Le JSON et l'image générée de chaque diagramme doivent être placés dans le projet de l'utilisateur, pas dans la compétence.

Commandes

python3 R --list-templates                          # Voir les modèles disponibles
python3 R --new 03_02_ordre_champs --from 1              # Créer specs/03_02_ordre_champs.json à partir du modèle 1 (specs dans le dossier courant)
python3 R --new couverture --dir specs --output ../images/couverture.png   # Spécifier où placer le JSON et l'image de sortie
python3 R --check specs/03_02_ordre_champs.json          # Vérifier uniquement la mise en page (chevauchement, dépassement du canevas), quelques secondes ; code de sortie 1 en cas d'avertissement
python3 R specs/03_02_ordre_champs.json --scale 1        # Générer une petite image 1x pour aperçu (1600×900)
python3 R specs/03_*.json                           # Générer l'image officielle 2x (3200×1800), sauvegardée selon le output de chacune
python3 R specs/xxx.json --svg                      # Sauvegarder également une copie SVG
python3 R --edit specs/xxx.json                     # Ouvrir l'éditeur dans Chrome pour que l'utilisateur ajuste par glisser-déposer
python3 R --templates                               # Reconditionner après modification de scripts/templates/

• Si le nom avec --new est écrit sous la forme <numéro_chapitre>_<numéro_figure>_<contenu>, l'outil recherchera le fichier de notes <numéro_chapitre>_*.md dans les répertoires parents, et définira output dans le dossier du même nom à côté de ce fichier pour <numéro_figure>.png. S'il n'est pas trouvé, output n'est pas défini ; il faut le compléter avant la génération ou utiliser --output.
• output est un chemin relatif par rapport à ce JSON.

Processus de création d'un diagramme

1. Déterminez d'abord ce que ce diagramme explique et où il sera placé dans le texte. Les mots du diagramme ne doivent utiliser que ceux présents dans le texte, sans ajouter de nouvelles formulations. Pour les diagrammes avec beaucoup de texte, convenez d'abord du contenu avec l'utilisateur dans la conversation, puis écrivez le JSON.
2. Choisissez un modèle : --list-templates, sélectionnez celui dont la structure est la plus proche (boucle fermée de processus, deux groupes comparés en haut et en bas, cycle en quatre étapes, version horizontale vierge, version verticale 3:4), puis --new pour créer.
3. Modifiez le JSON : Suivez references/json-format.md pour remplacer le texte et les coordonnées (estimez les coordonnées en 1600×900, les x, y des nœuds sont le centre). Suivez la section 5 de references/style.md pour déterminer le type de chaque nœud :
   • input cercle bleu : données, idées, inspiration, sources
   • produce carré orange : ce qui est produit, actions
   • feedback hexagone vert : vérification, rétrospective, capitalisation Dans une même image, utilisez la même forme pour le même type d'élément ; ajoutez une légende.
4. Vérifiez avec --check jusqu'à ce qu'il n'y ait plus d'avertissements, puis générez une petite image 1x, ouvrez-la réellement pour vérifier : direction des flèches, texte masqué, espacement uniforme, nombre de caractères conforme à la section 6 de style.md. Si la mise en page est difficile à ajuster, utilisez --edit pour laisser l'utilisateur glisser-déposer dans le navigateur, puis l'utilisateur enregistre avec ⌘S avant de générer l'image.
5. Générez l'image officielle 2x, sauvegardez-la dans output.
6. Indiquez à l'utilisateur où elle se trouve : après quelle phrase du texte placer chaque image, syntaxe d'insertion.

Remarques

• Le chinois ne passe pas automatiquement à la ligne : utilisez \n dans le JSON ; dans l'éditeur, double-cliquez pour modifier le texte avec « / ».
• Lors de l'échange entre 16:9 et 3:4, les positions des éléments ne sont pas automatiquement converties ; il faut les réorganiser selon les avertissements de --check.
• La signature n'est pas dessinée par défaut. Si l'utilisateur en veut une, ajoutez "signature": { "text": "Signature", "x": 40, "y": 862 } dans le JSON ; demandez à l'utilisateur ce qu'il souhaite écrire une fois, puis réutilisez pour les images suivantes.
• Si vous modifiez les couleurs dans references/style.md, les constantes de couleur dans scripts/sketchnote.html doivent également être mises à jour.