Sandbox
@microsoft/msagljs

Agent skill and graph layout engine for Copilot

MSAGLJS is a graph layout engine for drawing network diagrams and routing edges from graph inputs. The repo packages that engine with an Agent Skill, so builders can ask an agent to lay out graphs, embed SVG or WebGL views, and export finished figures.

175 stars18 forksTypeScriptUpdated 7d ago
Who it's for

Builders who want agents to lay out graphs, render network views, or export diagram files.

What it delivers

You can turn graph data into clean layouts and usable diagrams without hand-positioning nodes and edges.

What it does

Graph layout engine

Computes advanced layouts for graphs in JavaScript and TypeScript.

Edge routing

Generates routed edge geometry for network diagrams.

Agent skill package

Includes `skills/msagljs` so supported agents can load graph-layout instructions and references on demand.

Multiple input formats

Loads DOT, JSON, JGF, and delimited edge-list data.

Multiple output formats

Exports figures as SVG, PDF, PNG, EPS, or PostScript.

Web renderers

Includes SVG and WebGL renderer modules and example apps for embedding layouts in web pages.

How to get it

  1. 1With GitHub CLI 2.90 or later, inspect and install the current development version
    gh skill preview microsoft/msagljs msagljs@dev
    gh skill install microsoft/msagljs msagljs@dev --agent github-copilot --scope project
  2. 2Use --scope user to make the skill available across projects, or select another…
    Use the /msagljs skill to embed this network in the page.
  3. 3Installed agents match prompts against the skill's name and description, then load its…
    gh skill search msagljs --owner microsoft
    gh skill search "graph layout" --owner microsoft

README

msagl-js

Test Status

MSAGLJS is a JavaScript implementation of advanced graph layout algorithms.

Agent Skill

The repository includes an open-standard msagljs Agent Skill for AI coding agents that need to:

  • compute graph layouts and routed edge geometry
  • embed live SVG or WebGL network visualizations in web pages
  • load DOT, JSON, JGF, and delimited edge-list data
  • export network figures as SVG, PDF, PNG, EPS, or PostScript
  • add generated vector figures to LaTeX documents

With GitHub CLI 2.90 or later, inspect and install the current development version:

gh skill preview microsoft/msagljs msagljs@dev
gh skill install microsoft/msagljs msagljs@dev --agent github-copilot --scope project

Use --scope user to make the skill available across projects, or select another supported host with --agent. In an active Copilot CLI session, run /skills reload after installation and /skills info msagljs to inspect it. You can force activation with a prompt such as:

Use the /msagljs skill to embed this network in the page.

Installed agents match prompts against the skill's name and description, then load its detailed references and scripts only when needed. After this skill is merged to the default branch, it can also be found through:

gh skill search msagljs --owner microsoft
gh skill search "graph layout" --owner microsoft

GitHub Code Search indexes only the default branch, so direct @dev preview/install commands are required before the skill reaches main.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.

Files in the repo

Repository payload28 top-level entries
  • .github
  • docs
  • examples
  • modules
  • skills
  • website
  • .eslintignore
  • .eslintrc.json
  • .gitignore
  • .nojekyll
  • .npmignore
  • .prettierignore
  • .prettierrc
  • CODE_OF_CONDUCT.md
  • CONTRIBUTING.md
  • deploy-webgl-sleeve.sh
  • esbuild.js
  • jest.config.js
  • lerna.json
  • LICENSE
  • package.json
  • README.md
  • SECURITY.md
  • SUPPORT.md
  • tsconfig.json
  • tsconfig.prod.json
  • tsconfig.skill-examples.json
  • yarn.lock

Discussion (0)

Ask about usage, or say what you built with it

Sign in to join the discussion.

No comments yet. Be the first to say what this is good for.

More skills

obra/
superpowers

An agentic skills framework & software development methodology that works.

285k
1 add

Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local deterministic AST parsing, every edge explained, no vector store.

117k
1 add
Vincentwei1021/
anything2explainer

Topic in, narrated explainer video out. A Claude Code / Codex skill that turns any topic into a black-canvas motion-graphics explainer video with TTS voiceover, subtitles and a chapter progress bar. Chinese or English; every frame drawn in code with Remotion.

666

Open-source AI job search: scan job portals, evaluate listings into a structured A-H report with a global 1-5 score, tailor your CV, track applications — runs locally in your AI coding CLI (Claude Code, Codex, OpenCode, Antigravity…)

71k