Diagram-design , c'est un skill pour Claude Code, Codex et Pi qui vous fabrique un schéma technique sous forme de fichier HTML autonome. Vous double-cliquez, ça s'ouvre dans le navigateur, et le diagramme est là, super clean et sans avoir à faire de build ou importer des images.

27 types de diagrammes sont couverts, du schéma d'architecture au diagramme de séquence en passant par la machine à états, le Gantt et le quadrant, chacun en 3 variantes : claire, sombre et éditoriale. Bref, de quoi illustrer une doc ou un article de blog sans dessiner les boîboîtes vous-même, une par une comme dans un Excalidraw .

Le type Loop, avec son moyeu de mémoire partagée. Les pointillés sont les écritures en retour.

Il sait aussi partir de ce que vous avez déjà. Vous lui pointez un fichier draw.io ou un bloc Mermaid planqué dans un README, et il le reprend. Attention, ce n'est pas une conversion hein, mais un re-dessin (ça se dit ?? j'sais pas mais je m'en fous) complet. Il va même récupérer le diagramme embarqué dans un .drawio.png, vous savez, celui qui ressemble à du charabia quand vous ouvrez le fichier dans un éditeur.

Ce qu'il jette au passage ce sont les coordonnées de la source, sa palette, ses polices, les connecteurs en diagonale de draw.io et la mise en page automatique de Mermaid. Ce qu'il garde par contre, ce sont les composants, les relations, les regroupements et le sens de lecture.

À la fin de l'import, il rend même un genre de relevé de fidélité en vous indiquant les noeuds en entrée, les noeuds qu'il a dessinés et les noeuds orphelins qu'il a supprimé.

Un fichier draw.io de 12 nœuds redessiné en niveau de détail équilibré, pour un billet de blog.

La sortie se règle ensuite sur 4 critères. Le format d'abord, HTML, SVG ou PNG. Puis la taille, qui ne touche pas que le cadre. Une planche 16:9 destinée au vidéoprojecteur reçoit des libellés en 16px, une image de doc en reçoit des 12px.

Le troisième critère élague votre dessin, avec 24 nœuds au maximum en mode fidèle, 12 en équilibré, 7 en simplifié, et la coupe suit toujours le même ordre : les décorations, puis les doublons, puis les grappes de feuilles, puis l'infrastructure.

Le quatrième change le vocabulaire, mais pas le nombre de boîtes pour s'adapter au public à qui est destiné le diagramme. Pratique pour passer d'un diagramme hyper technique à quelque chose qui pourra être compris de la direction ou des commerciaux.

Reste l'allure du diagramme... Vous lui donnez par exemple l'URL de votre site, il lit la page d'accueil, en tire la couleur de fond, celle du texte, celle des boutons et la pile de polices, puis range tout ça dans des rôles, et voilà vous avez le design de vos rêves.

Mais surtout, avant d'écrire quoi que ce soit, il contrôle le contraste en AA. Si une de vos couleurs ne tient pas la route à la taille où vivent les libellés, entre 9 et 12px, il propose une valeur corrigée et explique pourquoi. Vous validez le diff, et le guide de style du skill est mis à jour pour tous les schémas suivants.

Et au premier schéma dans un nouveau projet, il refusera même de partir sur le thème par défaut sans vous demander. Il vous proposera naturellement d'aller consulter votre site, de coller vos couleurs à la main, ou encore d'assumer le défaut en connaissance de cause.

Côté installation, ça passe par les plugins pour Claude Code et Codex, par npx pour Codex, par une ligne pour Pi. C'est sous licence MIT et c'est gratuit. Tout est ensuite produit en local, et l'import Mermaid se contente de lire le texte, sans rendu ni appel réseau. Il n'y a que l'export PNG qui réclame un extra, à savoir Playwright, à installer à côté.

Maintenant, c'est pas le même usage qu'un bloc Mermaid qui lui est destiné à évoluer en permanence. Là c'est vraiment pour faire des rendus sous la forme d'une image finie et jolie. Donc à vous de voir !

À découvrir ici !

Dark Hours est à l'origine une petite web app qui vous dit ce qu'il y a à voir dans le ciel ce soir et si ça vaut le coup de mettre le museau dehors. Le développeur Terry Godier l'a construite avec l'aide de Claude et lancée début août mais au moment où j'écris ces lignes, elle n'existe plus... En effet, son site darkhours.io redirige maintenant vers DarkHours.app , un autre projet signé Miguel Beher et sous licence MIT.

C'est ce dernier qui a vu le problème, et je vais vous expliquer...

En fait, les 2 apps avaient non seulement le même nom, mais également les mêmes fonctions, et le même nom de domaine (à part le TLD). Quand Beher a signalé le souci à Godier , ce dernier a d'abord proposé de changer de nom et de différencier les fonctionnalités mais une heure plus tard il retirait tout, annulait l'app iOS qu'il préparait, et publiait un mea culpa où il parle de son "usage irresponsable de l'IA".

Et ce qui l'a décidé à tout stopper comme ça, c'est juste un bug. En effet, son application envoyait les gens observer les étoiles au milieu de champs perdus au Mexique, ou dans l'océan Pacifique et Beher avait exactement le même souci de son côté à ce moment-là (il l'a résolu depuis).

Alors se ressembler sur des fonctionnalités, ça arrive et ça ne me choque pas mais se ressembler jusque dans les bugs, là ça pique un peu beaucoup. Les procès en pompage IA, j'en ai déjà parlé , et ils se trompent souvent de coupable, et dans le cas de Godier, celui-ci n'a pas pompé le code du Dark Hours original. Non, il a juste développé son app avec Claude Code, sans se poser trop de question.

Pour lui, il est juste parti d'un code d'éphémérides qu'il a écrit en janvier mais comme Dark Hours est un projet open source, et bien ce qui s'est passé, c'est que son agent IA a récupéré de gros bouts de cette app, jusqu'à son nom pour en faire sa nouvelle app. Hé oui, la vie c'est facile quand on se repose sur le code des autres.

Dark Hours, le vrai

En effet, Claude Code, Codex et les autres sont des outils connectés. Ils lisent des pages, clonent des dépôts, fouillent GitHub quand ça les arrange, du coup, si votre demande ressemble à un truc qui existe déjà, et bien l'agent peut aller le consulter et s'en servir de modèle. Et même sans aller sur le net, comme les modèles ont été entraînés sur tout ce qui traîne publiquement sur le net, dépôts de code compris, il est capable de restituer une structure vue mille fois, sans même aller la chercher sur le net. Un peu comme les modèles de diffusion d'images qui reproduisent le style des artistes.

C'est pour ça que je trouve la mésaventure de Godier et Beher intéressante. Ça nous enseigne qu'il faut faire extrêmement attention quand on code avec l'IA. Pour limiter les risques qu'elle aille se servir dans du code libre, il faut donc indiquer expressément à l'agent de NE PAS récupérer le code source de projets open source, ne pas l'analyser, ne pas pomper du code ni les interfaces. Bref, lui dire qu'on part d'une page blanche...

C'est le même principe que celui de la clean room qui a permis à Compaq de cloner légalement le BIOS d'IBM, comme on peut le voir dans la série Halt and Catch Fire... On implémente les bonnes idées, mais jamais les lignes de code.

Charger la vidéo depuis YouTube Ce clic autorise une connexion à Google : adresse IP transmise et traceurs possibles. En savoir plus Voir cette vidéo sur YouTube

Pour ma part, je fais quasiment que des outils internes et des bidules perso, mais je le précise quand même pour que tout soit clean. Toutefois, ça ne règle pas le problème de l'entraînement qui a été fait en amont pour forger le modèle IA.

Donc avant de coder, deux réflexes à avoir : 1/ Chercher le nom de votre app (ou de votre nouvelle entreprise) pour de vrai, ce qui vous évitera de vous lancer dans un move de contrefaçon sans le savoir. Et 2/ Installer tout ce qui existe dans le même genre pour être sûr de ne pas vous faire berner par l'IA... Sachez que rien que cette année, j'ai été victime moi-même 2 fois, de gens qui n'ont pas pris ces précautions et qui se sont attribués les noms de mes projets pour leurs propres trucs en se reposant, je le suppose, uniquement sur l'IA sans se poser la moindre question. Pour l'un des projets, VoxDrop, j'ai changé le nom en Kassis pour pas me prendre le chou car c'était un projet jeune. Mais pour l'autre problème, c'est plus épineux et je ne peux pas vous en parler encore mais rassurez-vous, dès que je le pourrais, vous ferai un article qui détaillera tout en détail pour vous raconter cette histoire hallucinante qui m'arrive.

Après, ce que je vous conseille de faire aussi c'est qu'une fois que votre projet est fini, pensez à lancer une phase de contrôle. Ça personne ne le fait, mais c'est pas mal de récupérer le code des projets qui vous ont inspiré ou projet concurrents, de le poser à côté du vôtre et faire vous-même ou demander à un agent IA une comparaison, un peu comme la passe sécurité que vous faites en fin de projet.

Reprendre une fonctionnalité qu'on trouve bien ailleurs et la réimplémenter dans son projet, c'est normal et c'est ce que tout le monde fait d'ailleurs. Mais reprendre le nom, le look de l'interface et le code, qui plus est, sans mentionner la licence, c'est vraiment moche. Et c'est exactement ce que peut faire votre agent IA dans votre dos, alors soyez vigilant parce qu'après, vous pourrez dire que vous ne le saviez pas, tout le monde vous traitera de voleur. La frontière est là, et il n'y a qu'une comparaison explicite du code et de l'interface qui vous dira de quel côté vous êtes tombé...

Source