Msagljs Agent Skill

MSAGL-JS

Use this skill to add automatic graph layout or network visualization with the

@msagl/* packages.

Choose the workflow

| Goal | Workflow |

| --- | --- |

| Compute node positions and routed edge curves without a viewer | Core layout |

| Embed an interactive graph that appears when a page loads | Live web embedding |

| Add or configure the SVG or WebGL renderer | Browser renderers |

| Select a layout algorithm or edge-routing mode | Layout and routing |

| Generate SVG, PDF, PNG, EPS, or PostScript for a document | Document export |

| Choose packages or parse graph inputs | Packages and inputs |

| Diagnose an integration problem | Troubleshooting |

Required process

• Inspect the target project's package manager, framework, runtime, and existing

build or test commands.

• Determine whether the result should be core geometry, a live SVG viewer, a

live WebGL viewer, or a static document figure.

• Identify the graph source: programmatic nodes and edges, inline DOT/JSON, a

local graph file, or an API response.

• Install every @msagl/* package imported directly by the code. Do not rely

on transitive dependencies.

• Select the layout and routing based on graph direction, graph size, and the

desired visual style.

• Implement the matching workflow using public package exports.
• Validate with the target project's existing typecheck, build, tests, or a

browser smoke test. Confirm the output is visibly non-empty.

Invariants

• new Edge(source, target) registers the edge with both endpoint nodes. Do not

invent a separate addEdge call.

• Add every node to its Graph.
• Direct core layout requires a GeomGraph, a GeomNode with a boundary curve

for each node, and a GeomEdge for each edge before layoutGeomGraph.

• RendererSvg.setGraph() is synchronous. WebGL Renderer.setGraph() is

asynchronous and must be awaited.

• Browser renderers require window, document, canvas text measurement, and

a mounted container with nonzero dimensions. Do not run them during SSR.

• Pass a dedicated container to a renderer. Do not rely on its document.body

default in an embedded application.

• Retain one renderer instance per mounted container and update it with

setGraph() or setOptions(). Do not reconstruct it on every framework

render.

• Omit layoutType to use the renderer default. The string 'default' is not a

valid LayoutOptions.layoutType.

• Use only public package exports, not internal source paths.
• Preserve the textual graph source when generating PDF, EPS, or PostScript.

The binary figure should not be the only editable artifact.

Static export helper

For a repository without an existing browser application, install the helper's

locked dependencies from this skill directory:

npm ci --prefix scripts

Then render a graph:

node scripts/render-network.mjs examples/network.dot figures/network.pdf \
  --layout sugiyama-lr \
  --routing spline

The output extension selects svg, pdf, png, eps, or ps. PDF is the

default choice for pdfLaTeX, LuaLaTeX, and XeLaTeX. EPS is intended for legacy

LaTeX-to-DVI-to-PostScript workflows.

Do not pre-approve shell execution for this skill. Let the agent host apply its

normal permission policy before installing dependencies or running commands.

Completion criteria

• The graph input is retained or generated in a reviewable text format.
• The selected packages, layout, routing, and renderer match the use case.
• Live viewers show loading and error states and render after their container is

mounted.

• Static outputs use vector SVG/PDF/EPS unless raster output was requested.
• Generated code compiles, and the resulting graph or document asset has been

opened or otherwise checked for non-empty output.