alexlenail/nn-svg

Publication-ready NN-architecture schematics.

NN-SVG

| Docs | Contributing

Illustrations of Neural Network architectures are often time-consuming to produce, and machine learning researchers all too often find themselves constructing these diagrams from scratch by hand.

NN-SVG is a tool for creating Neural Network (NN) architecture drawings parametrically rather than manually. It also provides the ability to export those drawings to Scalable Vector Graphics (SVG) files, suitable for inclusion in academic papers or web pages.

The tool provides the ability to generate figures of three kinds: classic Fully-Connected Neural Network (FCNN) figures, Convolutional Neural Network (CNN) figures of the sort introduced in the LeNet paper, and Deep Neural Network figures following the style introduced in the AlexNet paper. The former two are accomplished using the D3 javascript library and the latter with the javascript library Three.js. NN-SVG provides the ability to style the figure to the user's liking via many size, color, and layout parameters.

I hope this tool will save machine learning researchers time, and I hope this software might also serve as a pedagogical tool in some contexts.

Citation

LeNail, (2019). NN-SVG: Publication-Ready Neural Network Architecture Schematics.
Journal of Open Source Software, 4(33), 747, https://doi.org/10.21105/joss.00747

Related

• vdumoulin/conv_arithmetic
• TensorSpace

nn-svg's Issues

License?

This looks very promising, possibly as well to dynamically embed NN structures in web pages.

What is the license of the code?

Show dimensions text sprite issue

When I checked Show Tensor Dimensions and Show Conv Dimensions in AlexNet style, the text sprite (width and height) is showing wrong place. The width and height texts seem to be exchanged each other in location.

Request for new features: Dropout layers and Rename Layer Labels

• It would be great to be able to add dropout layers graphics between hidden, input and output layers in FCNN style drawings

• It would also be nice to be able to rename layers, and add activation labels in FCNN style drawings

I am using Keras to build a neural net, and while the internal graphviz based model visualizer does the job, it does not display an actual neural net schematic.

Being able to add layers similar to those found here would be helpful

Non-fully connected layer and allow to set weight

Hi,
it will be much better if we can delete the specific edge by ourself. And I also want to define each weight by myself because in my search topic, we are focusing on the relationship between neurons and compare with traditional method.

FCNN layers missing labels

Hey!
I really liked using this tool as a very simple visualization for models, but there might be a bug in the FCNN style.

Adding a extra node at the end of the model leads to a missing Output Layer label. Similarly, adding an extra node after that one leads to both nodes missing their labels.

I would have loved to try to PR and solve it myself, but I'm not too comfortable with JS, so I think I'm out of my league a little here!

Not an issue, but a suggestion/query

This is a very useful app, especially with the .svg download option 👍🏽

My question is - is there any plan to include more complicated Deep Learning algorithmic structures such as the Transformers (such as BERT, ViT, etc.)?

feature request: "Fully-Connected graph groups mode"

Thank you great work!
Fully-Connected groups connection support

Cannot use the web tool to configure SVGs

When I open http://alexlenail.me/NN-SVG, the picture cannot display normally with a blank in chrome, version 87.0.4280.88.
I sent the URL to friends, they encounter the same error.
The error in the console is as followed：

feature request: "infinitely" many input neurons

super useful software, thank you!
I'm wondering how I could extend this to indicate left-out neurons via "..." in the input layer? Any help would be highly appreciated.

Conv1d

Can I represent a 1-d convolution with your tool ?

Dimensionality when using FCNN and showing bias nodes

Thanks for a great tool! 👍

When using the fully connected style and checking the "Show Bias Units" and "Show Layer Labels" the bias neurons are shown correctly. However, the dimensions of the labels are not changed.

I would expect the dimensions to drop by 1, since these neurons are not contributing to the dimensionality (but just moving the hyperplane in the X dimensional space). For example a 5 neuron hidden layer without bias would be in R ∈ 5 as shown, while the same hidden layer with the bias weight shown (where the connections are dropped in the illustration) would reside in R ∈ 4.

Am I interpreting the illustration correct or am I missing something? Or is it simply that the labels aren't updated correctly? 🙂

Multiple outputs?

I am trying to draw the PPO network and I can't seem to be able to draw to output heads with the AlexNet style.

Cannot remove dense layer on LeNet Style

If I remove the dense layers, the first one is still visible anyway.

How to create jpeg(300+ dpi)/png publication quality images from NN-SVG

Hi Alex,

I am using NN-SVG tool: http://alexlenail.me/NN-SVG/index.html

I need high-quality images of a fully connected NN figure either in png/jpg. Could you please instruct me how do I use it?

Thanks
Sachin

Instructions to use API to generate and save an SVG file

Hi

Thanks for providing this code! I would like to use the library to generate figures for a custom network, for which I'm using the API directly, locally. I can produce a figure in an HTML file, but I can't find any docs about how to use the API to generate an SVG file from the figure.

Could you please provide a minimal example that generates and saves an AlexNet figure as SVG?

Thanks
Dylan.

Feature request: Scaling for vectors in LeNet

I would just like to suggest the addition of a scaling for the Vector in the LeNet style schematics, or the ability to set the Vector Length and the text over the Vector separately.

For example, if a Dense layer connects 16@100x100 to 1x2048, the length of the vector looks too long for a printed figure.

Font size

Hi, Great tool! Is there any way of increasing the size of the font for tensor dimensions (alexnet)? Thanks!

FCNN layer labels remain even after layer is deleted

Hello again!

Another thing I found while experimenting a little bit is that layer labels stay on the screen even after the layer is deleted. Using the default model and deleting every layer except the input layer gives this:

Link to Underscore.js is broken

Hello!

Alexnet and Lenet isn´t working in demo and repo because <script type="text/javascript" src="https://underscorejs.org/underscore-min.js"></script> is not available.

For solving this issue just replace it for:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script>

Add filter size in Image

Like AlexNet has filter size in image.

Thanks~~

support line arrow

Change width and height separately

Hello,

this tool is very neat but I can't use it because my feature maps are not squares. Right now you can adjust the feature map resolution but the feature map is always a square. It would be great if you could change the width and height separately.
Thanks

Download Issue for AlexNet Style SVG

Hello. First thank you for the great work. I found this tool to be very handy and well-made. However, I do find an issue when trying to download the SVG file for AlexNet style schematics. The downloaded files seem to be empty. Could you take a look? Thanks!

Bias should be added to input layer

Hello Alex,

I am fairly new to the field of machine learning and found your awesome tool for NN visualization during my research. One thing that came to my mind when ticking the "Show bias button" is that the bias is not added to the input layer, or am I wrong? I get that the input features are no "real" layer but shouldn't be the bias added to the input of each neuron of each layer after the input layer, or am I wrong?

Greetings from Germany!
Erik

Feature request: Color each layer of nodes individually

Add a feature where the user can select the color of nodes for each layer to differentiate the layers more visually

Height and width confusion in show dimensions text using AlexNet webGL

Tensor width and height order seems to to be incorrect. (For filter size dimensions, it is not wrong)

feature request: compute&show activation based on random input

great software already. I wonder how it could be extended to color the nodes according to activation (given the weights) based on arbitrary input? Any help would be highly appreciated!

Adding captions for each layer

I found this tool very helpful when drawing an image for CNNs. It would be great if I can enter captions for each layer otherwise I have to add them afterwards.

Feature request: Export as PNG

Love the tool. I use it in my notes quite often but the note app I use doesn't support svg weep. I think there are a lot of use cases for these diagrams outside of publications (education for example) where SVGs would need to be converted. I'll continue to convert them as needed but if it was possible to have an option to download them as PNG directly from the page I would have your puppies.

feature request: "Being able to upload weights and biases to the web interface"

Thank you for the great package.
I was wondering if you can enable uploading weights and biases (as matrices, either in python's numpy format or Mathworks' MATLAB, or simple txt, etc.) so that when we use "Edge width proportional to edge weights" feature, it actually represents the uploaded ANN structure.
Thanks

Label the edges with weight values

Wondering if there is a way to label the edges connecting the nodes with the weight values.

Unicode characters not supported

Can you add support for unicode characters in layer description?
Right now it raises following error when "Download SVG" is clicked:

LeNet.html:371 Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
at HTMLAnchorElement. (http://alexlenail.me/NN-SVG/LeNet.html:371:63)
at HTMLAnchorElement. (https://d3js.org/d3.v5.min.js:2:10935)

I found this solution online: btoa(unescape(encodeURIComponent(str)))

Can we save the architecture settings?

Hi, nice work! unfortunately, it seems that we cannot save the parameters of the network for working back later. It can be interesting to save and load an ASCII file.

localization

it would be nice to be able to set the preferred language for the labels shown in the figures. Of course, this would mean that the corresponding strings need to be factored out somewhere. I don't know any pre-existing infrastructure for doing such things in JS but it's definitely not difficult and would be quite useful.

Support residual/skip connections

Not an issue, just a simple suggestion, could it be possible to introduce residual/skip connections in the form of extra directed arrows in the network graph? perhaps the skip connection could feed into a node where the aggregation operator can be specified in LaTeX (Addition, or any other function).

I understand that skip connections might be complext on the UX side since they kind of break the "linearity" of the list of layers, however, having them would allow a complete modeling of almost all possible architectures using CNNs, so I'd really appreciate the addition.

Feature Request: Models with Branches

Thank you for the great website.

Models with branches have become very common these days. Having a feature to draw them as well would be great.
Examples include Siamese Network, Most Multi Modal Models and so on

Download SVG button not working on Safari 12.0.2

Hey,

I was experimenting around with NN-SVG and I discovered that the 'Download SVG' functionality does not work on safari 12.0.2

It seems to be browser specific as it works as expected on Chrome

Feature request: optional display of input picture instead of grey background

Option to upload an input picture to fill the default grey empty picture.

This would increase the uniqueness of the plot. :))

thanks!

3D CNN

Could this repository add a new feature that can draw 3D CNN architecture?

Tutorial

This is really a great work.
but I must say a little tutorial or write explaining what the parameters mean could really help a newbie?
thanks

Feature request: Export as NN code

It would be super awesome to have the ability to actually generate the networks themselves (python code in various architectures) from this!