MSAGL-JS skill
Microsoft's official skill lays out graphs and networks in JavaScript and TypeScript and exports figures to SVG, PDF, PNG and EPS.
- 175 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill gives visualization code instructions and the export helper runs locally on Node.js.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/msagl-jsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill gives visualization code instructions and the export helper runs locally on Node.js.
This is third-party code. Review the repository files before installing.
What it does
The `msagljs` skill teaches an agent to work with MSAGL-JS, Microsoft's JavaScript implementation of automatic graph layout algorithms. The agent computes node positions and edge routes without a viewer, embeds live SVG or WebGL network visualizations in web pages, loads DOT, JSON, JGF and delimited edge-list data, and chooses the Sugiyama, MDS and IPSepCola algorithms and edge-routing modes. For documents the skill exports figures as SVG, PDF, PNG, EPS and PostScript and adds vector figures to LaTeX. Each task has a reference: core layout, page embedding, browser renderers, algorithm choice, export, packages and inputs, and integration diagnostics. Examples live in `skills/msagljs/examples/`, including SVG and WebGL pages and a LaTeX template.
Who it is for. Web developers and document authors who need automatic network and diagram layout with export to print formats.
Good fit when
- A page needs an embedded interactive dependency graph on SVG or WebGL.
- Data arrives in DOT or JGF and a laid-out diagram with routed edges is needed.
- A network figure for a paper is needed as EPS or PDF and goes into LaTeX.
- You choose between Sugiyama, MDS and IPSepCola for a clustered network.
Not a fit when
- The task is outside JavaScript and TypeScript: the skill targets `@msagl/*` packages.
- A ready diagram in Mermaid or draw.io is needed with no programming.
- Offline EPS export is needed without Ghostscript.
Example request
Use the msagljs skill to embed an interactive graph from `network.dot` on WebGL and export a PDF version for the paper.Limitations
The skill works with JavaScript and TypeScript. Rendering to SVG and WebGL needs browser APIs. The static export helper requires Node.js 20 or newer, and EPS and PostScript also need Ghostscript. Installing with `gh skill install` expects GitHub CLI 2.90 or newer, and the example uses the `@dev` branch. The skill does not replace MSAGL-JS documentation: algorithm details live in the bundled references and on the project site.
How to disable. Delete the `msagljs` folder from the agent skills directory (project or user depending on install scope). The package manager removes `@msagl/*` packages from project dependencies.
FAQ
How do I install the msagljs skill?
Run `gh skill install microsoft/msagljs msagljs@dev --agent github-copilot --scope project`. `--scope user` makes it available across projects and another agent is picked with `--agent`. GitHub CLI 2.90 or newer is required.
How do I check the skill is visible?
In an active Copilot CLI session run `/skills reload` and then `/skills info msagljs`. Activation can be forced with a prompt like "Use the /msagljs skill to embed this network in the page".
Which data formats does the skill read?
DOT, JSON, JGF and delimited edge lists. The format is chosen with the packages-and-inputs reference.
Which formats can a figure be exported to?
SVG, PDF, PNG, EPS and PostScript. EPS and PostScript additionally need Ghostscript and the export script runs on Node.js 20 or newer.
What is MSAGL-JS?
It is a JavaScript implementation of Microsoft's automatic graph layout algorithms. Microsoft publishes the repository and the documentation is at `microsoft.github.io/msagljs`.
Discussion
No questions or reviews yet.
Related
SkillsA skill that turns images, GIFs, video and 3D models into ASCII and builds ASCII components and GPU backgrounds via asciify-engine
A skill builds and debugs GLSL shaders from reusable blocks, bundles dependencies into one file and checks WebGL2-oriented code.
Official GreenSock skills that teach agents correct GSAP animation code, from tweens and timelines to ScrollTrigger, plugins and React
The rhp skill and checker teach an agent to build charts from HTML elements on SolidJS and check them at several widths.
Skill and MCP server for Shaders: the agent builds backgrounds, glass, gradients and cursor effects on WebGPU for React, Vue, Svelte, Solid and JS
Three.js Awesome Graphics Skills
threejs-awesome-graphics-agent-skills
A three.js skills pack for great scene and game graphics: lighting, PBR, shaders, TSL and WebGPU, post-processing, particles
README in short
The skill follows the open Agent Skills standard: the agent matches a request to name and description and loads detailed references and scripts only when needed.