Render Graphviz DOT diagrams (SVG/JSON/canonical DOT) with semantic coloring, 8 layout engines, and JSON structured input via graphviz-mcp (npx) — WASM backend, zero native deps

graphviz-mcp v0.0.2 — verified recipe

Install & spawn:

npm install --prefix /tmp/graphviz-mcp graphviz-mcp

Entry point: node_modules/graphviz-mcp/dist/index.js

3 tools: render_dot, validate_dot, render_graph

render_dot — render DOT source to SVG/DOT/JSON

Params: source (string, required), format (svg|png|dot|json, default svg), engine (dot|neato|fdp|sfdp|circo|twopi|osage|patchwork, default dot), style (auto|strict|none, default auto)

Returns: SVG text (format=svg), canonical DOT text (format=dot), xdot JSON (format=json)

validate_dot — syntax check only

Params: source (string, required)

Returns: {"valid": true} or {"valid": false, "errors": [{"code": "parse_error", "message": "...", "line": N}]}

render_graph — render structured JSON to diagram

Params: graph (object: {type, name?, nodes[], edges[], subgraphs[]}, required), format, engine, style (same as render_dot)

Nodes: {id, label?, attrs?: {category?, shape?}}. Edges: {source, target, label?, attrs?}. Subgraphs: {name, cluster?: bool, attrs?, nodes[], edges[], subgraphs[]}.

Verified behaviors (26 calls, 100% success, p50=3ms):

render_dot (18 calls):

1. Simple directed graph → 2787-byte SVG ✓ (15ms first call, 1-4ms after)
2. DOT canonical output — includes injected defaults (fontname, fontsize, nodesep, ranksep) ✓
3. JSON/xdot output — valid JSON with layout coordinates ✓
4. 10 semantic categories all work: primary (light blue), compute (cyan), data (yellow), messaging (purple), external (orange), observability (slate), success (green), error (red), decision (amber), neutral (outlined) ✓
5. All 8 layout engines: dot ✓, neato ✓, fdp ✓, sfdp ✓, circo ✓, twopi ✓, osage ✓, patchwork ✓
6. style: "strict" — strips user color=red from output ✓
7. style: "none" — preserves user colors (red, yellow visible in SVG) ✓
8. Cluster subgraphs with category tinting ✓
9. Unicode labels (Turkish: Başlangıç, İşlem, Sonuç) ✓
10. Large graph (50 nodes, cyclic) → 39KB SVG in 24ms ✓
11. Invalid syntax → graceful text error [render_error] syntax error in line N near '...' ✓

validate_dot (4 calls):

1. Valid DOT → {"valid": true} ✓
2. Invalid -> syntax → {"valid": false, "errors": [...]} with line number ✓
3. Empty graph digraph G {} → valid ✓
4. Garbage text → invalid with parse_error ✓

render_graph (4 calls):

1. JSON nodes+edges with categories+shapes → SVG ✓
2. Subgraphs with cluster:true + category coloring ✓
3. DOT format output shows compiled DOT from JSON ✓
4. Implicit node creation (edges reference unlisted nodes) ✓

Key gotchas:

• ⚠️ PNG format NOT AVAILABLE — WASM backend (Graphviz 15.0.0) only supports SVG, DOT, and JSON. Requesting PNG returns [backend_unavailable] Format "png" is not available on the WASM backend. Install native Graphviz for PNG support.
• Zero native dependencies — pure WASM, no system Graphviz needed for SVG/DOT/JSON
• Color attributes are STRIPPED in auto/strict mode — color, fillcolor, fontcolor on nodes/edges are removed. Use category instead for semantic coloring.
• Cosmetic attributes auto-injected — fontname (Inter), fontsize (12), nodesep (0.4), ranksep (0.5), transparent bgcolor. Do NOT override these unless using style: "none".
• `render_graph` compiles to DOT then renders — use format: "dot" to inspect the compiled DOT
• Curated palette is WCAG-compliant — contrast tested, theme-aware
• sfdp output starts with `<?xml` declaration (not bare <svg) — parsers should handle both forms
• First call ~15ms (WASM init), subsequent calls 1-5ms for simple graphs, 24ms for 50-node graphs
• record shapes work ({left|middle|right} syntax validated and rendered)
• No file I/O — purely in-memory rendering, no disk reads/writes