computation-graph

Generate interactive HTML computation graphs with draggable nodes and SVG edges.

Updated Jan 24, 2026
One-click install
npx skills add https://github.com/Albatross679/snake-hrl-torchrl --skill computation-graph
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: computation-graph
Source: https://github.com/Albatross679/snake-hrl-torchrl/tree/main/.claude/skills/computation-graph
Command: npx skills add https://github.com/Albatross679/snake-hrl-torchrl --skill computation-graph

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill simplifies the creation and modification of complex computation graphs, making it easy to visualize intricate model architectures and data flows.

Core Features & Use Cases

  • Interactive HTML Graphs: Generate dynamic, draggable, and zoomable computation graphs.
  • Consistent Visual Style: Ensures all graphs adhere to a predefined, professional aesthetic.
  • Formula Rendering: Integrates KaTeX for rendering mathematical formulas within nodes.
  • Use Case: Visualize a multi-layer transformer model, showing the flow of data through self-attention, feed-forward networks, and residual connections.

Quick Start

Generate an interactive HTML computation graph for a 2-layer transformer encoder.

Frequently Asked Questions about computation-graph

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I visualize a neural network architecture as an interactive HTML diagram?

You can visualize a neural network architecture by generating an interactive HTML computation graph that features draggable nodes, zoomable SVG edges, and consistent visual styling to map model data flows.

Can I render mathematical formulas inside my computation graph nodes?

Yes, the computation graph supports KaTeX formula rendering within nodes, allowing you to display detailed mathematical representations directly alongside your model architecture visualizations.

What is the best way to generate a transformer architecture diagram with residual connections?

Generating an interactive HTML computation graph is an effective way to visualize transformer architectures, clearly mapping data flow through self-attention, feed-forward networks, and residual connections.

Does this model visualization approach require any external dependencies?

No, this model visualization approach requires zero external dependencies, allowing you to generate and modify interactive HTML computation graphs with draggable nodes and SVG edges directly in your environment.

How do I capture high-resolution snapshots of my computation graph?

You can capture high-resolution snapshots of your computation graph after generating the interactive HTML visualization with draggable nodes, zoomable SVG edges, and consistent visual styling.

Why use an interactive computation graph instead of static model visualization?

An interactive computation graph provides draggable and zoomable HTML nodes with SVG edges, enabling dynamic exploration of complex model architectures and data flows that static model visualizations cannot offer.