Rendre 18 types de diagrammes déterministes depuis du typed JSON

Pour qui

Pour qui veut qu’un modèle produise des diagrammes depuis du typed JSON et ne peut accepter ni DSL ni navigateur headless. La formulation officielle est : le modèle décrit le diagramme, Glyphic le rend, deterministic SVG & PNG, 18 types, validated before it draws, no DSL and no headless browser.

C’est une diagram infrastructure que vous pouvez posséder et continuer à construire, pas un hébergement Mermaid en ligne. La sortie peut être SVG, PNG ou React Flow JSON.

Page officielle :

https://github.com/MS-Teja/Glyphic

Réussir le premier essai en 3 minutes

Suivre uniquement le chemin MCP officiel : stdio via npx, no install.

claude mcp add glyphic -- npx -y @glyphicjs/mcp-server

La configuration équivalente a command égal à npx, et args égal à -y et @glyphicjs/mcp-server. Ne cherchez pas un installeur qui n’apparaît pas. Le site officiel mentionne aussi l’installation bibliothèque npm install @glyphicjs/core @glyphicjs/schema ; au premier essai, ne passez pas aux appels bibliothèque.

Prérequis : cette machine peut exécuter npx. Préparez du typed JSON conforme au « single validated schema », et choisissez d’abord flowchart, le type nommé officiellement. Aucune table de champs JSON n’est donnée ; n’inventez pas les clés manquantes. N’inventez pas non plus de noms de fonctions d’outils MCP.

Emplacement de configuration : claude mcp add ou mcpServers.glyphic. Les notes d’installation officielles ne citent que Claude Code, pas d’autres produits clients ni chemins de fichiers de configuration.

Premier appel : faites rendre ce flowchart par le serveur, et demandez uniquement du SVG. Signal de succès : un SVG validé est renvoyé (le texte officiel indique accessible : role="img" + <title>), et aucun navigateur n’a été lancé.

Ne lisez pas « navigateur headless » comme un risque zéro. Le rendu a toujours lieu sur cette machine, et le PNG passe par @resvg/resvg-js (Rust). La description JSON entre dans le processus de rendu.

Cas d’usage

Cas 1 : produire d’abord un diagramme vectoriel scalable. Soumettez le typed JSON d’un flowchart et prenez le SVG. Le texte officiel dit pure, scalable vector markup. Aucun plafond de nœuds n’est donné.

Cas 2 : la même charge utile ou un autre type exige une image raster, ou des données de canevas interactif. Prenez du PNG (high-resolution raster, rendered natively via Rust), ou du React Flow JSON (nodes/edges mapped for an interactive React Flow canvas). Les 18 types incluent aussi architecture, sequence, ERD, UML class, state machines, Gantt, timelines, Sankey, Git trees, mindmaps, pie, quadrant, user journeys, Kanban, C4, treemaps et freeform canvas. Ne traitez pas comme point d’entrée de retour des noms de fonctions bibliothèque qui n’apparaissent pas.

Limites

Limites d’installation : le chemin MCP principal est npx -y @glyphicjs/mcp-server ; le chemin bibliothèque est un autre ensemble de paquets npm. Ne le mélangez pas avec le premier essai.

Limites de capacité : 18 types, un schema, trois sorties. Le texte officiel ne parle ni d’hébergement distant, ni de secrets, ni d’aperçu navigateur. Ne supposez pas que des types de diagrammes non listés sont disponibles.