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.
1---2name: msagljs3description: Use MSAGL-JS (Microsoft Automatic Graph Layout) to lay out and visualize networks in JavaScript or TypeScript. Use for graph and network layout, DOT/JSON/JGF parsing, live embedded SVG or WebGL graphs, Sugiyama/MDS/IPSepCola layouts, edge routing, and exporting SVG, PDF, PNG, EPS, or PostScript figures for LaTeX and other documents.4license: MIT5---67# MSAGL-JS89Use this skill to add automatic graph layout or network visualization with the10`@msagl/*` packages.1112## Choose the workflow1314| Goal | Workflow |15| --- | --- |16| Compute node positions and routed edge curves without a viewer | [Core layout](references/core-layout.md) |17| Embed an interactive graph that appears when a page loads | [Live web embedding](references/live-web-embedding.md) |18| Add or configure the SVG or WebGL renderer | [Browser renderers](references/browser-renderers.md) |19| Select a layout algorithm or edge-routing mode | [Layout and routing](references/layout-and-routing.md) |20| Generate SVG, PDF, PNG, EPS, or PostScript for a document | [Document export](references/document-export.md) |21| Choose packages or parse graph inputs | [Packages and inputs](references/packages-and-inputs.md) |22| Diagnose an integration problem | [Troubleshooting](references/troubleshooting.md) |2324## Required process25261. Inspect the target project's package manager, framework, runtime, and existing27 build or test commands.282. Determine whether the result should be core geometry, a live SVG viewer, a29 live WebGL viewer, or a static document figure.303. Identify the graph source: programmatic nodes and edges, inline DOT/JSON, a31 local graph file, or an API response.324. Install every `@msagl/*` package imported directly by the code. Do not rely33 on transitive dependencies.345. Select the layout and routing based on graph direction, graph size, and the35 desired visual style.366. Implement the matching workflow using public package exports.377. Validate with the target project's existing typecheck, build, tests, or a38 browser smoke test. Confirm the output is visibly non-empty.3940## Invariants4142- `new Edge(source, target)` registers the edge with both endpoint nodes. Do not43 invent a separate `addEdge` call.44- Add every node to its `Graph`.45- Direct core layout requires a `GeomGraph`, a `GeomNode` with a boundary curve46 for each node, and a `GeomEdge` for each edge before `layoutGeomGraph`.47- `RendererSvg.setGraph()` is synchronous. WebGL `Renderer.setGraph()` is48 asynchronous and must be awaited.49- Browser renderers require `window`, `document`, canvas text measurement, and50 a mounted container with nonzero dimensions. Do not run them during SSR.51- Pass a dedicated container to a renderer. Do not rely on its `document.body`52 default in an embedded application.53- Retain one renderer instance per mounted container and update it with54 `setGraph()` or `setOptions()`. Do not reconstruct it on every framework55 render.56- Omit `layoutType` to use the renderer default. The string `'default'` is not a57 valid `LayoutOptions.layoutType`.58- Use only public package exports, not internal source paths.59- Preserve the textual graph source when generating PDF, EPS, or PostScript.60 The binary figure should not be the only editable artifact.6162## Static export helper6364For a repository without an existing browser application, install the helper's65locked dependencies from this skill directory:6667```bash68npm ci --prefix scripts69```7071Then render a graph:7273```bash74node scripts/render-network.mjs examples/network.dot figures/network.pdf \75 --layout sugiyama-lr \76 --routing spline77```7879The output extension selects `svg`, `pdf`, `png`, `eps`, or `ps`. PDF is the80default choice for pdfLaTeX, LuaLaTeX, and XeLaTeX. EPS is intended for legacy81LaTeX-to-DVI-to-PostScript workflows.8283Do not pre-approve shell execution for this skill. Let the agent host apply its84normal permission policy before installing dependencies or running commands.8586## Completion criteria8788- The graph input is retained or generated in a reviewable text format.89- The selected packages, layout, routing, and renderer match the use case.90- Live viewers show loading and error states and render after their container is91 mounted.92- Static outputs use vector SVG/PDF/EPS unless raster output was requested.93- Generated code compiles, and the resulting graph or document asset has been94 opened or otherwise checked for non-empty output.
Microsoft