节点图笔记!Blender、ComfyUI、UE5、Houdini、达芬奇、Nuke、节点式渲染引擎,此类技能的相关学习笔记

Node flow notes can be recorded. Can act as a suggested node editor.
About Blender、ComfyUI、UE5、Houdini、Vinci、Nuke、and other node rendering engine.

(下图为NodeFlow插件在Obsidian中的显示效果)

  • 当前支持:局部渲染、独立窗口渲染、自动布局
  • 当前格式支持:Obsidian Canvas、ComfyUI

解决痛点:以往像这一类知识的学习,笔记是非常难做的……当年我学习的时候就非常痛苦!

以往我是怎么学习这方面的知识呢?

方案一,用mermaid图表

如图……这是我在2020年3月学习虚幻引擎时写的笔记。

现在再看,我只能说太抽象啦!我已经看不懂啦!

方案二,对单独的节点进行截图、以及对整一个工作流进行截图

这些笔记主要也是2020年的时候写的。

截图完了放笔记后,然后再在下面进行各种参数的标注

也非常麻烦……

如果对单独节点截图,无法体现节点之间的关联、联系

而如果对整一个工作流进行截图?有的工作流是非常复杂的……根本截不了

我这里截个比较较庞大一点的工作流的图,发现细节根本看不清:

方案三,画布/excalidraw插件

为什么我前面没说画布?我前面也说了2020年写的……当时没这么高端的东西

再说,这两就真的好用吗?

画布的一个弊端就是,像这种节点图,一个节点有多个输入和输出口(socket/handle)。Obsidian的Canvas画布没办法指定哪个handle连哪个handle,其Handle只有四个,上下左右。

像Excalidraw,由于线段箭头可以是任意的,可以每个节点给一个节点的截图,然后根据输入输出Handle的大概位置连起来……其实也能说是比较好的解决方案了

1 个赞

方案四,用这些可以进行节点编辑的软件,记笔记

由于以上的种种限制,其实一般来说,还远不如在软件内部做好demo,然后保存格式并命名。

需要学习时再打开参考来得方便。(即用这些复杂软件的本地来做笔记,而不是用笔记软件来做笔记)

我当年也是这样想的……于是我那会儿学UE、学Houdini的学习项目……挺难整理,也似乎没有被怎么整理……可能丢了。现在脑袋空空,回忆不起来当初学习的任何细节……也不想找,找回来了我现在也没有软件环境可以打开他们了

我那会儿要是能方便地做这些笔记,现在会是这吊样?早成为TA大佬、蓝图大佬了!(bushi


补充:为什么说这类型的项目很难整理?

  • 一是这类项目本身庞大,难以整理
    (以UE项目与代码笔记的对比为例,特别是对于python这种单文件脚本来说,或者对于ipynb这种自带md注释的文件来说,这类项目是一整个文件夹,里面甚至自带非常多缓存和临时文件(即小文件特别多),非常不利于归档)
  • 二是某些软件有“项目”这种明显的切割
    有的软件允许在同一个项目中,有多个工作流,类比一个编程项目中有多个程序。这类可以在同项目中来回切换编程文件,以学习、复习。还不错。
    但有时一个项目由于涉及很多资源,那么会出现某个知识点在A项目,某个知识点在B项目。
    这个就像是有时我编程碰到了个问题,突然想起C项目中好像有解决过这个问题,于是就去打开C项目就翻
    而项目的切换是有代价的(项目打开就加载个十几秒),这种上下文切换通常比较麻烦
  • 三是哪怕这是非常细小的单项目也可能有一些问题
    (排除掉任何大项目的情况),例如单文件可运行的python、再例如我前面说的comfyUI的工作流文件也是单个json文件。
    仔细想想,其实我们大部分以前学程序的,其实也是用的这种方式吧……当年写的笔记还有存吗?似乎个别技能的学习我有保留……但以及不会再打开了。
    而且有些东西在检索系统中也挺难检索到的……

代码笔记总体来说我还是建议的。特别是有一个跨项目的检索技巧:上传Github。然后在Github中按code搜索自己的仓库(不过需要注意,只能检索公开仓库,但对于学习来说,写的都是学习项目,够用了)

1 个赞

方案五,一个支持多种格式的全新的节点流编辑和查看软件!

回归主题……燕国地图有点长……

例如如果有人会用ComfyUI,就会知道,这玩意儿可以非常方便地导出和共享给别人。方便他人复刻你的工作流。

那么配合插件,就可以做到……直接把工作流文件丢到Obsidian来,Obsidian可以直接打开该工作流软件,进行查看和管理!!!

也可以黏贴工作流到代码块中,进行局部查看。

优点:一是非常贴合节点编辑器的UI体验,二是对于某些导出方便的软件,无需自己画图,直接导出后放Ob里就行了

方案六,diagrams (draw.io)

这个绘制比较方便,嵌入元数据到图片的功能更是导致后期变更变得可能

也比较推荐

结语

那么……可以在哪里使用这种插件呢???

nowhere…………developing…………在写了在写了 :sob: (可以看到一楼的图,就是插件写了一部分后的效果)

什么时候写完?遥遥无期,看有没有人踢我催进度……不过感觉小众需求……估计没啥人关注这个

1 个赞

做图像笔记的话,我现在首选excalidraw,可以天马行空。

如果需要做比较工作风格的图表,我会用diagrams插件来做,生成SVG。有需要再嵌入到Excalidraw

就算有这类插件,也需要长期维护一堆软件的节点样式和链接逻辑,显然不是办法

直接贴图到画布里应该是最优的方案了,但官方和excalidraw的性能都不太行,我目前还是截图贴到笔记里用quickadd一键转换为callout折叠的

实际上这些软件网上的文档、教程也都是通过截图展示的,可能并没有开发通用节点标记方法的必要?

我当年也是这样想的……于是我那会儿学UE、学Houdini的学习项目……似乎没有被怎么整理……丢了。

我怎么没太明白?所以不是方案四有问题,而是楼主的之前用方案四写笔记,结果丢了,所以有问题?

节点的信息是在json中的,并不需要事先去设置每种类型的节点的各个socket名和内容

当然,有预设的话,节点和线会五颜六色,效果更好。但没预设也能支持

像一楼中的那个图,没并没有去提前知道工作流中有哪些节点,

不能以网上的教程做得不充分,就降低需求。举几个例子:

ComfyUI

以前我学习的环境中,我没看到。但我最近在学习ComfyUI时,发现有,并且效果相当不错(还允许拖拽缩放)

这种网站,对于我的学习帮助非常大。我不再需要去下载源文件并在本地运行,才能了解。

编码空间

例如去研究Github项目。我现在github上直接在codespace上就能修改、运行、加编译。学习过程完全不需要对本地环境的依赖……在网吧也能不耗费一个小时在那搞环境就能coding

除了Github的codespace,我在学习其他的一些东西时,很多网站的教程也提供了像 StackBlitz 这种东西:

越来越多的 “互动教程”

例如vue和svelte那边的框架。我学那会19年,那会云计算和虚拟化技术还没这么广泛应用。网站上没那么多实时交互的窗口让你直接在官网边coding边学,以前不都是自己下载软件,然后按教程里一步一步自己在本地写么。还有前端工具的官网教程,有个 “互动教程” 是最基础的要求。


说起来现在的学习环境真的方便很多,以前哪有这种东西……现在真鸡毛多学习工具


1025补充:

UE (虚幻引擎) 文档

发现ue的文档也有在线视图(大部分是截图,可能是为了节约资源,只有在部分的图表才有这种编辑画布),在有编辑画布的时候,还可以通过左下角的复制代码,快速将工作流复制到自己的UE当中,比较方便

1 个赞

前面没说清楚

  1. 一是这类项目本身庞大,难以整理(以UE项目与代码笔记的对比为例,特别是对于python这种单文件脚本来说,或者对于ipynb这种自带md注释的文件来说,这类项目是一整个文件夹,里面甚至自带非常多缓存和临时文件(即小文件特别多),非常不利于归档)
  2. 二是某些软件有“项目”这种明显的切割。有的软件允许在同一个项目中,有多个工作流,类比一个编程项目中有多个程序。这类可以在同项目中来回切换编程文件,以学习、复习。还不错。
    但有时一个项目由于涉及很多资源,那么会出现某个知识点在A项目,某个知识点在B项目。(就像是有时我编程碰到了个问题,突然想起C项目中好像有解决过这个问题,于是就去打开C项目就翻)而项目的切换是有代价的。这种上下文切换通常比较麻烦。
  3. 三是哪怕这是非常细小的单项目(排除掉任何大项目的情况),例如单文件可运行的python、再例如我前面说的comfyUI的工作流文件也是单个json文件。
    仔细想想,其实我们大部分以前学程序的,其实也是用的这种方式吧……当年写的笔记还有存吗?似乎个别技能的学习我有保留……但以及不会再打开了。而且在检索系统中也挺难检索到的……

这种方案的优势不就是样式么?如果没有预设,用excalidraw贴图+连线标记不就可以了

这里有三个人的笔记:(假装上图中的这两个人的仓库是两个笔记库)

  • 张三的笔记(对应图左)
    • 记录:完全没有自己画,导出完事
    • 使用:需要使用时导入回软件
    • 查看:在Ob+插件环境,以及原软件的环境,可随时方便查看内容。但在其他环境(Github)上不行能查看
  • 李四的笔记(对应图右)
    • 记录:截图(这里应该是使用了截图插件,进行超大截图)
    • 使用:按图片的显示,一个一个添加节点,并连线(其实ComfyUI支持识别图片内嵌的元格式,直接拖拽图片进去是可以识别的。但非ComfyUI的其他节点流软件则不行)
    • 查看:随时查看,非常方便
  • 王五的笔记(全用Excalidraw格式记录)
    • 记录:一个一个添加节点、截图、连线
    • 使用:同李四
    • 查看:同张三,但在原软件环境中不能查看

所以楼主的意思是 一个可导出至多平台的画布?

除非普及了类似 jsoncanvas 这种统一格式到各厂的节点软件,否则不太现实吧?

是 ”支持多种画布“ 的说法更贴切,接口只有不同画布格式转成一个 ”统一显示用“ 的格式,反向转换功能暂不支持


格式转化其实还算简单,当前都是将各种格式转化为一种很像jsoncanvas的超集的json格式。目前我还没开始碰到傻逼格式,json格式的互相转化很简单,没怎么花时间。

我就怕后面兼容碰到一些不是用json的画布格式……点名一下Excalidraw格式,他写的是”json压缩格式“,不过我Base64解不出来,不知道是不是加密了(ex不是节点编辑流结构,不在我兼容的范畴里……只是举例一下没看懂他的Base64源码是不是进行了加密)

另外,我只负责适配三四个,并保证程序复用性写得足够好就行。更多地就让需要用的人自己适配去
(感觉不会如我所愿……就像大伙似乎并不将其他格式转化成ob的canvas格式……我是想转了,但ob节点的handle太少了,不能转他那个,得用他那个的超集json格式)

1 个赞

当前进度:

  • 已经实现在vuepress中与obsidian中共同使用(LincZero出品,代码复用与通用性拉满!)
  • 但vuepress中暂时只能通过vue标签使用,obsidian暂时只能通过代码块使用。还有很多工作需要做

TODO:

  • 在两端支持独立文件的识别 (非通用逻辑,两端需分别开发一次)
    • 计划该功能支持后,能在网络博客中支持obsidian canvas ! 这是该插件的另一个应用,能够将obsidian画布的通用性往上抬一个台阶!
  • 修复自动布局获取尺寸失败
  • 新增非json的新语言描述方案,使图像能像写mermaid一样流程。计划用yaml或配合anyblock使用list,后转json,再转统一格式

2 个赞

一种基于Markdown列表的便于输入的节点描述语言

新增一种能手写的格式,说真的有时设计语法比开发成就感还强……大家讨论讨论语法,看有没有什么可以优化的地方

  1. 该格式可以和AnyBlock插件配合,从列表进行声明
  2. 参考了:JSON、JSONL、YAML、Mermaid/Mehrmaid 流程图语法

语法示例

语法规则 (仅两条)

  1. 一行一个项,“项” 有四种:节点、节点上I/O Socket或属性项、线、节点组,他们的声明方式:
    • 节点/组:id:name, type,不写冒号表示id和节点名是一样的,type建议不写,缺省自动判断为 “node/group”
    • socket:id:name, type,type为input/output表述输入或输出节点,value表示节点的内部属性
    • 线:从哪个节点id,的哪个socket id,到哪个节点id,的哪个socket id
  2. 缩进关系表示包含关系。例如节点组可以包含节点,节点可以包含节点组

特殊规则 (进阶)

  1. 最外层是两个特殊组,nodes和edges,固定的。
    • 当然,有一个写法变形可以去掉最外层,用如果该项有四个参数就是edges组,否则则为nodes组,但我觉得虽然能写少了,但可能更容易造成混乱?待定
  2. 当不声明节点socket时,会默认声明四个隐藏节点:left、right、top、bottom
1 个赞

给个更符合平时习惯的demo:

1 个赞

这种复杂的节点图,手写的难度是否大了些;不过确实可以作为类原生 markdown 的嵌入格式?