NN-SVG 是一个给做机器学习的人用的开源画图工具。它能用设置参数的方法，很快做出神经网络的图，用来放在论文或者演示里，还能导出 SVG 文件。这个工具支持三种画法，分别是 FCNN（全连接）、LeNet 风格的 CNN 和 AlexNet 风格的深度网络。前两种用 D3.js 画成平面，后一种用 Three.js 画成立体，这样在写论文或者上课时用起来比较清楚、一致。

NN SVG如何使用

NN SVG在线用

可以直接打开网页：

  • LeNet/CNN 风格：https://alexlenail.me/NN-SVG/LeNet.html

  • FCNN 风格：https://alexlenail.me/NN-SVG/FCNN.html

在页面上可以调网络大小、节点和间距、颜色和连线的样子，一边改一边看效果，然后导出 SVG。这个方法不用装到电脑，适合急着要图的时候用。

装在本地用

1. 先下载代码：

git clone https://gitcode.com/gh_mirrors/nn/NN-SVG.git
cd NN-SVG

2. 启动方法选一个：

用 Python：python -m http.server 8000

用 Node.js：npx http-server -p 8080

3. 然后在浏览器打开 http://localhost:8000或 http://localhost:8080。

4. 装在本地适合需要一直能用、一次导出很多图或者想自己改样式的人。

NN SVG主要功能和应用

可以调节点大小、层之间的距离、连线的粗细和不透明程度。FCNN 还能按权重让颜色和线变深或变浅，一眼看出正负和大小。

三种画法分别是：

  • FCNN：点和线很清楚，适合上课讲全连接网络。

  • LeNet 风格 CNN：把卷积和池化层画成特征图的样子，容易看通道和核的大小。

  • AlexNet 风格 3D：有立体层次，还能转着看，适合演讲时说明深度网络结构。

NN SVG做的 SVG 可以放进论文、报告或者网页。3D 图适合演示和讲课，2D 图适合排论文和打印。

导出和兼容

  • 点页面上的 Export SVG 就能拿到矢量图。如果导出有问题，可以在浏览器里打开开发者工具，把 <svg>...</svg> 这一段复制出来，存成 .svg 文件。

  • 不同浏览器情况不一样。Chrome 和 Firefox 导出和字体比较好用。Safari 有时不行，可以右键另存或者复制 SVG 代码。

  • Word 对 SVG 支持不好，可能显示不对。可以截屏存成 PNG，或者用 Inkscape 转成 EMF，这样还是矢量，适合论文。

常见问题和办法

  • 本地打开样式乱或者 MIME 报错，先用 http-server 启动。如果用 Python 启动样式不对，就换端口或者改用 http-server。

  • 导出空白或者受跨域限制，不要用 file:// 直接打开，要用 HTTP 服务器打开，不行就关掉一些浏览器插件。

  • 图太大运行慢，可以减少节点数、不显示文字、分开画。很复杂的图可以分几次导出，再用矢量软件拼起来。

  • 打印和投稿最好用 SVG。用 Inkscape 看看页面大小和字体有没有嵌好，不行就导出 PDF 或 EPS，方便走期刊流程。