Anchor viz
Draw a faithful architecture or structure diagram of a real codebase or project by scanning the actual repo, never guessing. Use for system architecture, request lifecycle, data model, state transitions, type structure, draw the architecture, map this project, 画架构图.From its SKILL.md
npx -y skills add lynxlangya/techne --skill anchor-vizAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- runs commandsInstructs the agent to run 3 commands, including `node skills/anchor-viz/scripts/validate-mermaid.mjs diagram.md --project /path/to/project --max-nodes 15` and 2 more.
SKILL.md
5.7 KB, ~1.3k tokens by cl100k_base, as published. Nobody here has run it
anchor-viz
Investigate by diagramming. The diagram is the byproduct; the value is forcing real investigation before drawing.
Forced Procedure
- Route the request. Choose one
diagramKindfrom the table below. If the user's intent fits multiple kinds, ask one short clarification instead of guessing. - Find evidence for that kind. For
architecture, enumerate roots, manifests, workspace/build/native/container/edge/infra/source-only signals. For other kinds, find the bounded entrypoint, schema, state enum, workflow, or module/type namespace before drawing. - Classify shape or scope. For
architecture, state one project shape and cite evidence:single-frontend,single-backend,coupled-fullstack,monorepo,library,native,native+edge,source-only code, ornon-code. For other kinds, state the bounded scope and the files that prove it. - Apply the non-code decision. Never declare non-code only because manifests are absent. First scan roots; then run a bounded source-extension/code-signal scan. If both are absent, or docs/vault signals clearly dominate, do not fabricate a code diagram. Draw the real top-level structure or ask what the user wants.
- Match the user's language. Human-facing diagram text follows the user's primary language: titles, display labels, edge/message labels, shape notes, and short explanations. Keep code-facing identifiers source-native: Mermaid IDs, file paths, symbols, package names, class/function/module names, and established technical terms such as API, SDK, CLI, HTTP, SwiftUI, AppKit, or React.
- Draw only evidenced relationships. Use the evidence contract for the selected kind. Every node, participant, entity, state, type, and edge/message must come from a file read.
- Enforce complexity gates. Keep
architectureat 12-15 top-level nodes by default. For other kinds, use the validator's participant/message, entity/relationship, state/transition, or type/member limits. Split into drill-down diagrams when needed. - Mark provenance. Add render-neutral comments for every element before
storing:
%% techne:source <elementRef> <path>[#<symbol>]or, for relationship-like elements only,%% techne:inferred <relationshipRef> <reason>. Entity-like elements always need verifiedtechne:source; relationship-like elements need file+symbol proof unless explicitly inferred with sourced endpoints. Useactorfor human sequence participants so the actor path-only allowance is mechanically scoped. Solid relationships mean read-from-code. Dashed or labeled relationships mean inference only where the selected Mermaid type supports it. - Emit, validate, store, build viewer, open when interactive. Write Mermaid
source first, validate it, store it with
scripts/store_viz.py, always build the self-contained viewer, and only open it when the session is interactive.
Diagram Routing
| User intent | diagramKind | Mermaid type | Evidence focus |
|---|---|---|---|
| Project architecture, module/service/package topology | architecture | flowchart / graph | Manifests, workspaces, imports, services, bindings, infra edges. |
| Request lifecycle, command/job flow, actor conversation | interaction | sequenceDiagram | Entrypoint, ordered calls/messages, handlers, clients, queues. |
| Tables, entities, persistence relationships | data-model | erDiagram | Schema, migrations, ORM/entity declarations, foreign keys, associations. |
| Status/order/task/review lifecycle | state-model | stateDiagram-v2 / stateDiagram | Status constants, state machines, reducers, guards, transition handlers. |
| Classes, interfaces, structs, protocols, bounded type structure | type-structure | classDiagram | Type declarations, inheritance, implementation, composition, public method groups. |
Examples:
- "map this project" ->
architecture. - "show how login request flows" ->
interaction. - "draw the database relationships" ->
data-model. - "how does order status change" ->
state-model. - "show the public types in this module" ->
type-structure.
Script Usage
- Validate Mermaid and altitude:
node skills/anchor-viz/scripts/validate-mermaid.mjs diagram.md --project /path/to/project --max-nodes 15 - Store a diagram in a target project:
python3 skills/anchor-viz/scripts/store_viz.py --project /path/to/project --name login-flow --title "Login flow" --diagram diagram.md --shape monorepo - Build the self-contained viewer, opening it only when interactive:
python3 skills/anchor-viz/scripts/build_viewer.py --project /path/to/project --open
The validator expects [email protected] and jsdom to be installed in one of
these places: TECHNE_VIZ_NODE_MODULES, skills/anchor-viz/scripts/node_modules, the
current working directory, or an ancestor directory.
Stop Conditions
- Stop and ask if you cannot inspect the project files.
- Stop and ask if the requested diagram kind is ambiguous.
- Stop before drawing unsupported architecture for a non-code project.
- Stop before drawing a non-architecture diagram without a bounded entrypoint, schema, status lifecycle, or module/type scope.
- Stop before storing a diagram that fails syntax validation, provenance validation, or a complexity gate.
- Do not create
.techne/content inside this repository while authoring the skill itself.
What ships with it: 13 files
3375.7 KB alongside SKILL.md, 5 of them executable
scripts/
- build_viewer.pyruns5.3 KB
- package.json115 B
- store_viz.pyruns6.5 KB
- validate-mermaid.mjsruns31.1 KB
- viewer/.gitattributes49 B
- viewer/mermaid.min.jsruns3235.3 KB
- viewer/svg-pan-zoom.min.jsruns29.1 KB
- viewer/template.html35.4 KB
- viewer/VENDOR-LICENSES.txt2.7 KB
- eval.md6.2 KB
- README-CN.md6.7 KB
- README.md7.3 KB
- reference.md10.0 KB
Gives 0 of the 12 instructions most architecture codebase skills give in ~1.3k tokens
Counted across 858 of the 1,304 authors here whose files we hold, read 2026-09-06
- Apply the deletion test to identify shallow modulesin 32 of 858, across 31 files
- Read domain glossary and ADRs before exploringin 22 of 858, across 19 files
- Use Tailwind and Mermaid via CDN for reportsin 21 of 858, across 18 files
- Document architecture decision recordsin 20 of 858, across 12 files
- Offer to record ADRs for rejected candidatesin 17 of 858, across 14 files
- Limit primary navigation to four to seven itemsin 17 of 858, across 7 files
- Write HTML report to the system temp directoryin 17 of 858, across 14 files
- Read product marketing context before asking questionsin 16 of 858, across 6 files
- Use Mermaid graph TD for visual sitemapsin 15 of 858, across 5 files
- Ensure every page has at least one internal linkin 15 of 858, across 5 files
- Use ASCII tree format for page hierarchy draftsin 15 of 858, across 5 files
- Enforce lowercase URLs with hyphensin 15 of 858, across 5 files
Said here and by no other author read
- Route the request to a specific diagram kind
- Find evidence for the diagram kind before drawing
- Match the user's language for diagram text
- Use source-native identifiers for code-facing labels
- Draw only evidenced relationships from file reads
- Add provenance comments for every diagram element
Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.