alexlenail/nn-svg

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

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

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

Things people build with this

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

Tech stack

JavaScriptSVGD3.js

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

In plain English

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?

Open on GitHub → Explain another repo

← alexlenail on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.