whatisgithub

What is nn-svg?

alexlenail/nn-svg — explained in plain English

Analysis updated 2026-06-26

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

In one sentence

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
Click or tap to explore — scroll the page freely

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

What do people build with it?

USE CASE 1

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

USE CASE 2

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

USE CASE 3

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

What is it built with?

JavaScriptSVGD3.js

How does it compare?

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 get it running?

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

So what is it?

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.

Copy-paste 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

What 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.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.