Archify Diagrams
tt-a1i/archify
Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.
Draw a faithful architecture or structure diagram of a real codebase or project by scanning the actual repo, never guessing.
Install Anchor Viz
$ npx skills add lynxlangya/techne --skill anchor-viz -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install lynxlangya/techne anchor-viz --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/lynxlangya/techne.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/anchor-viz .claude/skills/anchor-viz && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "anchor-viz" agent skill from https://github.com/lynxlangya/techne/tree/main/skills/anchor-viz into .claude/skills/anchor-viz/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "anchor-viz", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/lynxlangya/techne/tree/main/skills/anchor-vizType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add lynxlangya/techne --skill anchor-viz -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install lynxlangya/techne anchor-viz --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lynxlangya/techne.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/anchor-viz .agents/skills/anchor-viz && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "anchor-viz" agent skill from https://github.com/lynxlangya/techne/tree/main/skills/anchor-viz into .agents/skills/anchor-viz/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "anchor-viz", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add lynxlangya/techne --skill anchor-viz -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install lynxlangya/techne anchor-viz --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lynxlangya/techne.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/anchor-viz .cursor/skills/anchor-viz && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "anchor-viz" agent skill from https://github.com/lynxlangya/techne/tree/main/skills/anchor-viz into .cursor/skills/anchor-viz/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "anchor-viz", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/lynxlangya/techne.git --path skills/anchor-viz--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add lynxlangya/techne --skill anchor-viz -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install lynxlangya/techne anchor-viz --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lynxlangya/techne.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/anchor-viz .gemini/skills/anchor-viz && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "anchor-viz" agent skill from https://github.com/lynxlangya/techne/tree/main/skills/anchor-viz into .gemini/skills/anchor-viz/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "anchor-viz", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install lynxlangya/techne anchor-vizInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add lynxlangya/techne --skill anchor-viz -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/lynxlangya/techne.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/anchor-viz .github/skills/anchor-viz && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "anchor-viz" agent skill from https://github.com/lynxlangya/techne/tree/main/skills/anchor-viz into .github/skills/anchor-viz/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "anchor-viz", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add lynxlangya/techne --skill anchor-viz -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install lynxlangya/techne anchor-viz --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/lynxlangya/techne.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/anchor-viz .opencode/skills/anchor-viz && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "anchor-viz" agent skill from https://github.com/lynxlangya/techne/tree/main/skills/anchor-viz into .opencode/skills/anchor-viz/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "anchor-viz", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
anchor-viz- GitHub stars
- 105
- Token cost
- ~1.4k tokens
- SKILL.md length
- 626 words
- Files
- 14 (incl. scripts)
- Skills in repo
- 4
- Repo updated
- First seen
- Licence
- MIT
At a glance
Draw a faithful architecture or structure diagram of a real codebase or project by scanning the actual repo, never guessing.
- Works in 9 steps: Route the request. Choose one… → Find evidence for that kind. For… → Classify shape or scope. For… → …
- System architecture
- SKILL.md covers Forced Procedure, Diagram Routing, Script Usage and Stop Conditions
- Runs JavaScript and Python scripts from its folder; calls python3 and node
What it does
Anchor Viz is an agent skill from lynxlangya/techne. 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, 画架构图.
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 15 other files, including scripts (for example `README-CN.md`, `README.md` and `eval.md`).
It sits in Development, covering Diagrams. The repository describes itself as: Forcing-function skills for AI agents — validated to improve behavior, not just change it. The licence is MIT.
When your agent uses it
- System architecture
- Request lifecycle
- State transitions
- Draw the architecture
Example prompts
- “/anchor-viz”
Requirements
- Python 3
- Node.js
Workflow steps
9 steps, taken from the first numbered list in SKILL.md.
- Route the request. Choose one diagramKind from the table below. If the
- Find evidence for that kind. For architecture, enumerate roots,
- Classify shape or scope. For architecture, state one project shape and
- Apply the non-code decision. Never declare non-code only because manifests
- Match the user's language. Human-facing diagram text follows the user's
- Draw only evidenced relationships. Use the evidence contract for the
- Enforce complexity gates. Keep architecture at 12-15 top-level nodes by
- Mark provenance. Add render-neutral comments for every element before
- Emit, validate, store, build viewer, open when interactive. Write Mermaid
What it can do on your machine
Read from SKILL.md and the folder at commit 56bbe71. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 9 files in scripts/ (JavaScript and Python), which the agent can run.
Shell commands in SKILL.md call:
python3node
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Anchor Viz loads about 1.4k tokens when it runs. Until then it costs about 69 tokens; SKILL.md has 626 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from lynxlangya/techne at commit 56bbe71, republished under its MIT licence (© lynxlangya). 626 words, ~1,447 tokens.
Download SKILL.mdSave it as
.claude/skills/anchor-viz/SKILL.md (or your agent's skills folder). This skill also uses 13 other files; get the full folder from GitHub.- name
- anchor-viz
- description
- 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, 画架构图.
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.
Show full SKILL.md (256 more words)Show less
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 mermaid@11.15.0 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.
© lynxlangya, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 13 other files (scripts) in skills/anchor-viz of lynxlangya/techne.
- SKILL.md
- README-CN.md
- README.md
- eval.md
- reference.md
- scripts/build_viewer.py
- scripts/package.json
- scripts/store_viz.py
- scripts/validate-mermaid.mjs
- scripts/viewer/.gitattributes
- scripts/viewer/VENDOR-LICENSES.txt
- scripts/viewer/mermaid.min.js
- scripts/viewer/svg-pan-zoom.min.js
- scripts/viewer/template.html
Open the folder on GitHubat commit 56bbe71
Compare with similar skills
Anchor Viz next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Anchor Viz this skilllynxlangya/techne | 105 | — | ~1.4k | Automated safety check: Pass | MIT | |
| Archify Diagramstt-a1i/archify | 82k | — | ~2.9k | Automated safety check: Pass | MIT | |
| JSON Canvasheyitsnoah/claudesidian | 2.6k | 18 repos | ~3.5k | Automated safety check: Pass | MIT | |
| Diagram Designcathrynlavery/diagram-design | 49k | 1 repos | ~7.6k | Automated safety check: Pass | MIT | |
| Fireworks Tech Graphtisfeng/Easydict | 15k | 1 repos | ~1.4k | Automated safety check: Pass | MIT | |
| Excalidraw Diagramcoleam00/excalidraw-diagram-skill | 5k | 2 repos | ~6.1k | Automated safety check: Pass | None |
Similar skills
JSON Canvas
heyitsnoah/claudesidian
Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections.
Diagram Design
cathrynlavery/diagram-design
Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.
Fireworks Tech Graph
tisfeng/Easydict
Create precise SVG technical diagrams, export PNG or offline HTML, and animate supported semantic SVGs to GIF.
Excalidraw Diagram
coleam00/excalidraw-diagram-skill
Create Excalidraw diagram JSON files that make visual arguments.
Draw.io Diagram Studio
Agents365-ai/drawio-skill
Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.
More from lynxlangya/techne
Anchor Intake
lynxlangya/techne
Interrogate a written engineering implementation brief before work starts.
Anchor Repro
lynxlangya/techne
Reproduce a behavioral bug before fixing it, record the failing probe, and verify the fix with the same probe.
Anchor Vet
lynxlangya/techne
Evidence-gated diff review for PRs, branches, commit ranges, staged code changes, and merge readiness checks.
Related
Categories
Questions about Anchor Viz
What does Anchor Viz do?
Draw a faithful architecture or structure diagram of a real codebase or project by scanning the actual repo, never guessing. Anchor Viz is an agent skill from lynxlangya/techne. Draw a faithful architecture or structure diagram of a real codebase or project by scanning the actual repo, never guessing.
When should I use Anchor Viz?
Anchor Viz fits situations like: system architecture; request lifecycle; state transitions; draw the architecture.
How do I install Anchor Viz in Claude Code?
Run `npx skills add lynxlangya/techne --skill anchor-viz -a claude-code`. Or copy the skill folder (skills/anchor-viz in lynxlangya/techne) into .claude/skills/anchor-viz in your project. Claude Code loads it when a task matches its description.
How do I install Anchor Viz in Codex?
Run `npx skills add lynxlangya/techne --skill anchor-viz -a codex`. Or copy the skill folder (skills/anchor-viz in lynxlangya/techne) into .agents/skills/anchor-viz in your project. Codex loads it when a task matches its description.
Can I use Anchor Viz in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add lynxlangya/techne --skill anchor-viz -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/anchor-viz, .gemini/skills/anchor-viz, .github/skills/anchor-viz and .opencode/skills/anchor-viz in your project.
What does Anchor Viz need to run?
Going by SKILL.md and its folder, Anchor Viz needs JavaScript and Python for the scripts in its folder and the command-line tools its instructions call (python3 and node). Our summary lists: Python 3; Node.js.
Does Anchor Viz access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Anchor Viz safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Anchor Viz use?
Anchor Viz is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Anchor Viz use?
About 1.4k tokens (SKILL.md is roughly 5.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Anchor Viz?
Skills that share tags, products or a category with Anchor Viz: Archify Diagrams (tt-a1i/archify, 82k stars), JSON Canvas (heyitsnoah/claudesidian, 2.6k stars), Diagram Design (cathrynlavery/diagram-design, 49k stars) and Fireworks Tech Graph (tisfeng/Easydict, 15k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Anchor Viz?
lynxlangya (a GitHub user) maintains it in lynxlangya/techne, which has 105 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on July 2, 2026.
Source: lynxlangya/techne on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.