Skill-map: See your harness

[crystian]

Hi! No issue to report, no feature request. I just wanted to say thanks.

I've been building skill-map, an open-source tool that maps the AI-agent context living inside a repo (skills, commands, agents, MCP servers) and how they all reference each other. It's a graph, fundamentally, and for a long time the honest answer to "how do we draw this?" was "we don't, and that's why nobody can see the problem."

Then I found Foblex Flow, and the graph view stopped being the scary part of the project. It became the part people actually react to when they see it for the first time. Custom nodes, connectors, pan and zoom, keyboard nav: all of it just worked, in Angular, without a wrapper around something built for another framework.

So: thank you for building this, and for still maintaining it. You saved me from writing a graph engine I had no business writing, and that time went into the thing my project is actually about.

If it's ever useful to you, happy to share screenshots or talk about how we're using it.

[siarheihuzarevich]

Means a lot, thank you for writing this 🙌

Would love to hear more about how skill-map uses it - what parts of the graph API you leaned on (custom nodes, connectors, groups?), and any rough edges you hit along the way. Feel free to drop links to the repo/demo here, happy to dig in.

And since you asked - yes, if you want to add skill-map to the showcase, open a submission in this thread. Just needs a short description, one screenshot, and links to the site/demo/source if public.

Appreciate you taking the time to write this up 🚀

[crystian]

Thanks! And yes, I'd love to be in the showcase, submission below.

The short version first: I made a video walking through the whole product, the graph view is most of it → https://www.youtube.com/watch?v=ROC0B1HAbEA (switch to english)

What we lean on (@foblex/flow 19.1.6 + @foblex/flow-dagre-layout):

• f-flow / f-canvas with fully custom nodes (fNode, fNodeId, fNodePosition, fDraggable, fNodePositionChange)
• fConnector with fConnectorType and EFConnectionConnectableSide, side selection is computed per edge from graph geometry so references read directionally instead of crossing the canvas
• f-connection with EFConnectionType / EFConnectionBehavior, arrow and circle markers, gradients, and a set of CSS modifier classes for edge states (executing, dimmed, highlighted, spawn)
• f-minimap, f-selection-area, line alignment, fZoom with programmatic EFZoomDirection
• The dagre engine for auto-layout, wrapped in our own pipeline

No groups yet. We considered them for grouping nodes by plugin, but ended up encoding that in node styling instead.

Rough edges, honestly minor:

1. [fNodePosition] takes a top-left corner while dagre returns node centres, so we carry a correction map sized per node to keep the two coordinate systems aligned. Not a bug, just a seam that cost an afternoon to find. A note in the docs would have saved it.
2. Disconnected sub-graphs: dagre positions every node, but the sub-graphs land wherever, so we do our own packing pass afterwards. Understandable, since it's dagre's behaviour and not yours, but it's the kind of thing every real-world graph hits.
3. Reconciling user-dragged positions against freshly computed layout output was the single hardest piece of our graph code. We ended up distinguishing "user pins" from "auto pins" so a re-layout moves the latter and never the former. If Foblex ever shipped a first-class notion of a pinned node, I'd delete a file.

None of these ever made me consider a different library.

---

Showcase submission

skill-map — Maps the AI-agent context inside a repo (skills, commands, agents, MCP servers) and every reference between them, as a live graph you run locally. Built with Angular + Foblex Flow.

• Site: https://skill-map.ai
• Video: https://www.youtube.com/watch?v=ROC0B1HAbEA
• Demo in real time without install it: https://skill-map.ai/demo/
• Source: https://github.com/crystian/skill-map
• Screenshot below 👇

Thanks again for the offer, and for the library 🙏