Journal MCDView : un schéma SQL en diagramme entité-association interactif, en un fichier HTML statique

Posté par  . Licence CC By‑SA.
Étiquettes :
1
1
sept.
2026

Je partage un petit outil libre que j'ai écrit, sous licence MIT : mcdview. On lui donne un schéma (SQL, dump PostgreSQL/MySQL/SQLite, modèle pgModeler .dbm, DBML ou Prisma) et il produit un diagramme entité-association interactif, dans une seule page HTML autonome.

Le schéma Chinook rendu en une page

Libre et auto-hébergeable

Le générateur est un script Python en ligne de commande, sous licence MIT :

mcdview schema.sql -o sortie.html
mcdview.dev n'est que l'instance publique ; rien n'oblige à l'utiliser, tout se fait en local. Code : https://github.com/Gheop/mcdview

Zéro traçage, zéro runtime

La page produite est un fichier statique : rien ne s'exécute à l'ouverture, aucune connexion à une base, aucun script tiers, aucune inscription. Seule la structure est lue, une fois, à la génération. Elle est donc sûre à héberger, à archiver, à rouvrir hors ligne dans dix ans.

Interactif quand même

Cliquer une table pour l'isoler avec ses relations, repérer les tables centrales et les cycles, basculer clair/sombre. Export en SVG, en Mermaid erDiagram, ou en dictionnaire de données Markdown.

Isoler une table et ses relations

Intégration CI

Une action GitHub et un composant GitLab régénèrent le diagramme à chaque push, derrière un lien stable, avec un badge README (identité par OIDC, sans clé à stocker). Chaque push devient une version : on peut comparer deux états (diff) ou dérouler un time-lapse du schéma.

Diff entre deux versions du schéma

Ce que ça ne fait pas

Ce n'est pas un éditeur visuel de schéma (on visualise un schéma existant, on ne le dessine pas), et ça ne se connecte pas à une base vivante (on lui fournit le fichier).

Instance publique : https://mcdview.dev . Notes techniques : https://blog.mcdview.dev/fr/ .

Retours et critiques bienvenus, notamment sur le parsing des dialectes SQL et l'intégration CI.

  • # Bonus méta : le schéma de LinuxFr.org lui-même, en time-lapse

    Posté par  . Évalué à 1 (+1/-0).

    Petit bonus méta pour ce journal : j'ai passé le schéma de LinuxFr.org lui-même dans mcdview.

    Le dépôt linuxfrorg/linuxfr.org versionne db/schema.rb. Je l'ai converti en SQL (tables, colonnes, clés étrangères) et donné à mcdview :

    Un truc qui surprend dans la time-lapse : pendant des années, les tables flottent sans aucune relation. C'est fidèle au dépôt : jusqu'en 2018, LinuxFr ne déclarait aucune clé étrangère au niveau de la base (les associations vivaient côté modèles Rails). Elles arrivent d'un coup le 24 mars 2018, 29 FK dans le même commit.

    Le diff que je préfère : le passage à Doorkeeper pour OAuth2 en septembre 2014. Deux tables maison retirées (client_applications, access_grants), trois tables Doorkeeper (oauth_*) ajoutées : https://mcdview.dev/d/iLZLe1NA40nAHy6Wdk7x8A/41

    Historique des versions du schéma LinuxFr dans mcdview, de 2010 à 2026

    C'est reconstruit depuis le schema.rb public : la structure (tables, colonnes, FK), pas les index ni les types exacts, et rien n'est branché sur la base de prod. schema.rb étant du Ruby, mcdview ne le parse pas encore nativement, je suis passé par une petite moulinette schema.rb vers SQL.

  • # cool

    Posté par  (site web personnel) . Évalué à 2 (+0/-0). Dernière modification le 01 septembre 2026 à 23:26.

    je l'ai aussi appliqué à la base de LinuxFr.org ;-)

    ça donne :

    https://mcdview.dev/v/NJKyP0vScbH9OXt5vqkisg

    le bouton réorganiser est pas mal mais éloigne un peu les tables et les liens (clés étrangères) peuvent se croiser… ce serait pas mal de pouvoir annuler l'action (j'avais tout bien rangé avant :/)
    J'ai gardé un export SVG, mais tu ne vas pas repartir de là ?

    j'ai la case à cocher FK (pour Foreign Keys) qu'il n'y a pas pour ton diagramme

    • [^] # Re: cool

      Posté par  . Évalué à 1 (+1/-0).

      Good job ! Merci de me confirmer que ça marche bien :D

      Annuler la/les dernières actions seraient top en effet … faut que j'y réfléchisse, les positions déplacées sont déjà mémorisées en localStorage par visiteur, c'est devrait être assez facilement faisable sans alourdir le single file html. Je me le todolist.

      Pour la case à cocher, je suppose que tu parles de "FK d'audit" ? C'est la possibilité de cacher/afficher les FK de traçabilité (créateur, modificateur… qui servent pour l'historisation et qui relient toutes les tables à une table "utilisateur modificateur") qui brouillent le diagramme. Ca se configure dans la page de gestion juste après l'import du fichier sur le site (on peut cocher/décocher les fk) et les plus reconnaissables sont normalement détectées par défaut. Ou configurable par regex par l'API aussi.

      • [^] # Re: cool

        Posté par  (site web personnel) . Évalué à 2 (+0/-0). Dernière modification le 02 septembre 2026 à 00:03.

        les positions déplacées sont déjà mémorisées en localStorage par visiteur

        ah c'est pour ça que je les retrouve dans Firefox, mais pas dans epiphany ouvert sur la même page :/

        mais bon, après on va te demander de pouvoir mettre à disposition le rangement effectué, pouvoir caler au milieu / gauche / droite les tables quand les unes au-dessus des autres ou milieu / haut / bas quand côte à côte ;-) puis ensuite d'avoir des groupes d'entités pour zoomer sur le schéma avec un ensemble cohérent de tables…

        Pour la case à cocher, je suppose que tu parles de "FK d'audit" ?

        oui, sans la cocher, les relations entre tables via clé étrangère n'apparaissaient pas sur le schéma général (peut-être parce que j'ai intégré le fichier .rb directement, sans me poser de question… ni faire quelque conversion que ce soit).

        Je vais essayer avec le schéma de VHFFS — cf. https://vhffs.org — qui utilise du postgreSQL, dès que je remets la main sur mon arbo git, vu que notre cgit est en rade…

Envoyer un commentaire

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.