MCP

18 deterministische Diagrammtypen aus typed JSON rendern

Für alle, die ein Modell SVG/PNG aus JSON erzeugen lassen wollen und weder DSL noch einen Headless-Browser akzeptieren können; keine Extra-Installation, und der erste Lauf soll ein flowchart als SVG rendern.

Official source · Glyphic

Install

npx -y @glyphicjs/mcp-server

Für wen

Für alle, die ein Modell Diagramme aus typed JSON erzeugen lassen wollen und weder DSL noch einen Headless-Browser akzeptieren können. Die offizielle Formulierung lautet: das Modell beschreibt das Diagramm, Glyphic rendert, deterministic SVG & PNG, 18 types, validated before it draws, no DSL and no headless browser.

Es ist diagram infrastructure, die Sie besitzen und weiterbauen können, kein gehostetes Online-Mermaid. Die Ausgabe kann SVG, PNG oder React Flow JSON sein.

Offizielle Seite:

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

Ersten Versuch in 3 Minuten abschließen

Nur den offiziellen MCP-Pfad nutzen: stdio via npx, no install.

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

Die gleichwertige Konfiguration setzt command auf npx und args auf -y sowie @glyphicjs/mcp-server. Suchen Sie keinen Installer, der nicht vorkommt. Offiziell ist auch die Bibliotheksinstallation npm install @glyphicjs/core @glyphicjs/schema genannt; wechseln Sie beim ersten Versuch nicht zu Bibliotheksaufrufen.

Voraussetzung: dieser Rechner kann npx ausführen. Bereiten Sie typed JSON vor, das zum „single validated schema“ passt, und wählen Sie zuerst flowchart, weil die offiziellen Hinweise diesen Typ nennen. Es gibt keine JSON-Feldtabelle; erfinden Sie fehlende Schlüssel nicht. Erfinden Sie auch keine MCP-Tool-Funktionsnamen.

Konfigurationsort: claude mcp add oder mcpServers.glyphic. Die offiziellen Installationshinweise nennen nur Claude Code, keine anderen Client-Produkte und keine Konfigurationsdateipfade.

Erster Aufruf: lassen Sie den Server dieses flowchart rendern und verlangen Sie nur SVG. Erfolgssignal: validiertes SVG kommt zurück (offiziell accessible: role="img" + <title>), und kein Browser wurde gestartet.

Verstehen Sie „Headless-Browser“ nicht als Nullrisiko. Das Rendern läuft weiter lokal, PNG geht über @resvg/resvg-js (Rust). Die JSON-Beschreibung gelangt in den Renderprozess.

Anwendungsfälle

Fall 1: zuerst ein skalierbares Vektordiagramm. Reichen Sie typed JSON für flowchart ein und holen Sie SVG. Offiziell heißt es pure, scalable vector markup. Eine Obergrenze für die Knotenzahl ist nicht angegeben.

Fall 2: dieselbe Nutzlast oder ein anderer Typ braucht ein Rasterbild oder interaktive Canvas-Daten. Holen Sie PNG (high-resolution raster, rendered natively via Rust) oder React Flow JSON (nodes/edges mapped for an interactive React Flow canvas). Zu den 18 Typen gehören auch architecture, sequence, ERD, UML class, state machines, Gantt, timelines, Sankey, Git trees, mindmaps, pie, quadrant, user journeys, Kanban, C4, treemaps und freeform canvas. Behandeln Sie nicht vorkommende Bibliotheksfunktionsnamen nicht als Rückgabe-Einstieg.

Grenzen

Installationsgrenzen: der MCP-Hauptpfad ist npx -y @glyphicjs/mcp-server; der Bibliothekspfad ist eine andere Gruppe von npm-Paketen. Mischen Sie das nicht mit dem ersten Versuch.

Fähigkeitsgrenzen: 18 Typen, ein schema, drei Ausgaben. Offiziell stehen weder Remote-Hosting, Geheimnisse noch eine Browser-Vorschau. Gehen Sie nicht davon aus, dass ungenannte Diagrammtypen verfügbar sind.