d3_force

d3_force diagram (uml-mcp plugin d3)

diagram_type: d3_force
Backend: plugin:d3 (bundled with uml-mcp, on by default)
Output formats: html, svg

Interactive force-directed graph (D3): drag and pin nodes, zoom, pan, hover to highlight. JSON nodes and links; html or svg

Load the workflow skill uml-mcp-diagrams and the focused guide skill://uml-mcp-guides/d3-plugins/SKILL.md. This file is notation only; it does not add an MCP tool.

Example prompt

Show our microservices as a force graph, grouped by team.

Notation tips

• nodes (id, label, group) and links (from, to, label).
• Keep it under a few hundred nodes; the page lets readers drag and pin them.

Styling

Pass theme (auto, dark or light) to generate_uml / generate_uml_image, or set it in the source. auto follows the reader's system in the HTML page and is dark in static SVG and PNG.

Example source

{"title":"Service dependencies","directed":true,"nodes":[{"id":"web","label":"Web app","group":"frontend","size":1.4},{"id":"mobile","label":"Mobile app","group":"frontend"},{"id":"gateway","label":"API gateway","group":"edge","size":1.6},{"id":"auth","label":"Auth","group":"backend"},{"id":"orders","label":"Orders","group":"backend","size":1.3},{"id":"billing","label":"Billing","group":"backend"},{"id":"db","label":"Postgres","group":"data","size":1.4,"note":"primary + replica"},{"id":"queue","label":"Events","group":"data"}],"links":[{"source":"web","target":"gateway"},{"source":"mobile","target":"gateway"},{"source":"gateway","target":"auth"},{"source":"gateway","target":"orders","label":"REST"},{"source":"orders","target":"db"},{"source":"orders","target":"queue","label":"publishes"},{"source":"billing","target":"queue","label":"consumes"},{"source":"billing","target":"db"}]}