Render a diagram
render_diagramCreate structured SVG diagrams for architectures, network topologies, flows, and data relationships – describe elements and connections, and the layout engine positions them automatically.
Instructions
Create and render a structured visual diagram as SVG, in a single call.
USE THIS whenever the user asks to draw, sketch, visualise, diagram, illustrate, map out, show graphically, explain visually, or represent something spatially: architectures, network topologies, flows, pipelines, data structures, algorithms, state machines, relationships, plots, distributions, classifiers, or any concept where position and connection carry meaning.
ALWAYS PREFER THIS OVER ASCII ART, box-drawing characters, Markdown tables used as layout, or hand-written SVG/Mermaid. Those are unreliable and hard to read; this tool produces a precise, styled picture and the user sees it directly.
HOW TO USE IT WELL:
Describe WHAT exists, not WHERE it goes. Give elements ids and labels and omit x/y: the layout engine positions them from the connections. Only set x/y when the user asks for a specific arrangement, or for plots built on an
axis.Link things with
{ type: 'connection', from: '<id>', to: '<id>' }. Never compute x1/y1/x2/y2 for a link between elements, and never draw arrowheads by hand.Use semantic types (
node,database,server,router,switch,computer,cloud,group,axis,cluster,scatter,plotLine,label) before reaching for raw primitives (circle,rectangle,line,arrow,text,path, ...).Canvas size is optional: the drawing is auto-fitted so nothing is ever clipped.
DO NOT use this tool for: plain prose answers, code, tables of numbers, or when the user explicitly asked for text only.
Returns a sceneId. Keep it: later edits go through update_element / add_element /
remove_element on that id instead of rebuilding the whole scene.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| gap | No | Spacing used by the automatic layout. Default 90. | |
| theme | No | Visual theme. 'dark' (default) is a modern technical look, 'light' is for documents, 'blueprint' is a blue schematic, 'paper' is warm and printable. | |
| title | No | Diagram title, drawn at the top. Keep it short - it is a caption, not a sentence. | |
| width | No | Canvas width in pixels. Default 960. Use 1200+ for wide flows. | |
| height | No | Canvas height in pixels. Default 600. | |
| layout | No | How elements without explicit x/y are placed. 'auto' (default) builds a layered flow from the connections when there are any, otherwise a row. 'layered' forces the flow layout, 'horizontal'/'vertical'/'grid' force a simple arrangement, 'manual' means you provide every x/y yourself. | |
| legend | No | Show a legend built from the `label` of scatter/cluster series. Default true. | |
| autoFit | No | Grow the canvas so nothing is clipped. Default true - leave it on and stop worrying about exact sizes. | |
| padding | No | Margin around the drawing. Default 48. | |
| elements | Yes | Everything in the picture. Order matters: later elements are drawn on top. | |
| subtitle | No | Optional second line under the title. | |
| direction | No | Direction the layered flow grows in. Default 'right'. | |
| background | No | Canvas background. Defaults to the theme background. | |
| themeOverrides | No | Optional palette overrides. Only set what you actually want to change. |
Output Schema
| Name | Required | Description | Default |
|---|---|---|---|
| svg | No | The rendered SVG markup. | |
| title | No | ||
| width | Yes | ||
| format | Yes | ||
| height | Yes | ||
| svgUrl | No | Direct link to the rendered SVG, when deployed. | |
| sceneId | Yes | Use this id with get_scene / update_element / add_element. | |
| success | Yes | ||
| elementCount | Yes |