gitwtfhub

wtf is nn-svg?

alexlenail/nn-svg — explained in plain English

Analysis updated 2026-06-26

5,665JavaScriptAudience · researcherComplexity · 1/5LicenseSetup · easy

TL;DR

A browser tool for drawing publication-ready neural network architecture diagrams as scalable SVG files, supporting fully-connected, convolutional, and modern 3D AlexNet-style visualizations.

Mindmap

mindmap
  root((NN-SVG))
    Diagram styles
      Fully-connected
      Convolutional
      3D AlexNet style
    Output
      SVG vector export
      Paper-ready quality
    Parameters
      Layer count
      Node size
      Colors
      Spacing
    Audience
      ML researchers
      Paper authors

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Create a convolutional network diagram for a machine learning research paper in minutes instead of drawing shapes manually

REASON 2

Export a fully-connected network visualization as SVG to embed in a presentation or website at any size without quality loss

REASON 3

Design a 3D-style architecture diagram in the style of AlexNet publications for an academic poster or conference slide

What's in the stack?

JavaScriptSVGD3.js

How it stacks up

alexlenail/nn-svgpshenok/server-survivalarachnys/cabot
Stars5,6655,6635,668
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyeasymoderate
Complexity1/51/53/5
Audienceresearcherdeveloperops devops

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

Wtf does this do

NN-SVG is a browser-based tool for drawing diagrams of neural network architectures. Researchers working on machine learning papers often need these kinds of diagrams to illustrate how their models are structured, and drawing them by hand is slow and inconsistent. This tool lets you create them by setting parameters like the number of layers, sizes, colors, and spacing, rather than placing shapes manually. The tool supports three styles of diagram. The first is a classic fully-connected network diagram where each node in one layer connects to every node in the next. The second is a convolutional network diagram showing stacked rectangular feature maps, in the style used in early influential image-recognition papers. The third is a deeper, more modern-looking 3D-style diagram inspired by how architectures like AlexNet were visualised in academic publications. Once you have designed your diagram, you can export it as an SVG file. SVG is a vector format, which means it stays sharp at any size and is suitable for inserting directly into papers, presentations, or web pages without quality loss. The project is a web application hosted at alexlenail.me/NN-SVG and is also published as a research tool in the Journal of Open Source Software. The code is open source under the MIT license. Documentation and contribution guidelines are available in the project's wiki on GitHub.

Yoink these prompts

Prompt 1
How do I use NN-SVG to draw a convolutional neural network with 5 conv layers and 2 fully connected layers, then export it as SVG for a paper?
Prompt 2
I want to recreate an AlexNet-style 3D architecture visualization in NN-SVG, what settings control the depth, color, and spacing of the feature map blocks?
Prompt 3
How do I run the alexlenail/nn-svg project locally from the GitHub repo so I can use it without an internet connection?
Prompt 4
What parameters in NN-SVG control node size, layer spacing, and color so I can match my institution's style guide for figures?
Prompt 5
Can I use the NN-SVG exported SVG file directly in a LaTeX paper, what format adjustments do I need to make?

Frequently asked questions

wtf is nn-svg?

A browser tool for drawing publication-ready neural network architecture diagrams as scalable SVG files, supporting fully-connected, convolutional, and modern 3D AlexNet-style visualizations.

What language is nn-svg written in?

Mainly JavaScript. The stack also includes JavaScript, SVG, D3.js.

What license does nn-svg use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is nn-svg to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is nn-svg for?

Mainly researcher.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.