Asterlas for VS Code
Draws the asterlas diagram for a package, and makes it a way of
moving around the code rather than a picture of it.
Every node and every connection is a link back to the tag that produced it.
Click db and the AsterNodeTag<"cyl", "db", …> declaration opens, selected,
doc comment and all. It works the other way too: put the cursor in a tagged
declaration and the panel lights up the matching node.
Commands
| Command |
What it does |
| Asterlas: Show Diagram |
Opens the panel, asking which project to draw the first time |
| Asterlas: Refresh Diagram |
Re-analyzes now, without waiting for a save |
| Asterlas: Select Project to Diagram |
Points the panel at a different package |
Each tagged declaration also carries a Reveal in diagram action above it.
Settings
| Setting |
Default |
|
asterlas.root |
(ask) |
Package directory or tsconfig.json to draw. Overrides the remembered choice. |
asterlas.refreshOnSave |
true |
Redraw when a TypeScript file is saved. |
asterlas.direction |
TD |
Flowchart rank direction — TD, TB, BT, LR or RL. |
asterlas.codeLens.enabled |
true |
Show the "Reveal in diagram" action. |
When neither the setting nor a remembered choice applies, you are asked once
per workspace and the answer is kept in workspace state.
How navigation works
Mermaid renders an SVG that knows nothing about your code, so the panel works
out the mapping itself after each render. render() hands it an index: nodes
keyed by the id Mermaid drew them under, connections keyed by position.
Two details make that reliable, and both are load-bearing:
- Node ids get rewritten when they have to be.
orders-api is not a legal
Mermaid node name, so it is drawn as n_orders_api with orders-api as the
label. The panel reverses that through the index rather than guessing.
- Connections are matched by order. Flowchart edges carry no id that
survives rendering, but Mermaid emits them in declaration order — the same
order
linkStyle 0,1 addresses them in — so the nth edge is the nth link.
Clicks are wired by walking the rendered SVG, not with Mermaid's click
directives. Directives cover nodes but not connections, they require
securityLevel: "loose", and they would have to be written into the Mermaid
source that also gets saved to DIAGRAM.md.
Analysis timing
Analysis reads from disk, so the panel refreshes on save rather than on
keystroke. A refresh runs a fresh compiler session each time — around 20ms for
a small package — because a session caches file contents for its lifetime and
will otherwise keep serving the version it first read.
