Render n8n nodes
planned
Joel DeTeves
It would be amazing if WikiJS could render N8N nodes.
Each node consists of a simple JSON contained in markdown.
The N8N team has set up their website and forums to render the same way as the nodes show up in their app.
You can see an example here: https://n8n.io/workflows/1554-get-data-from-multiple-rss-feeds-to-telegram/
N8N is a workflow automation app that uses NodeJS
We are a heavy user of both apps (N8N + WikiJS) and would love to be able to document templates / workflows for N8N in WikiJS!
Nicolas Giard
planned
Nicolas Giard
closed
Looking at the link you provided, it looks like it's a simple iframe (which can already do).
As for native rendering support, it's not that simple. n8n is a standalone app, not a library that can be imported directly. This would require an external n8n server to be running and communicate via an API. This is getting very complex for something that can be achieved via Mermaid, which is already supported.
I suggest looking at Mermaid to create flowcharts in Wiki.js: https://mermaid-js.github.io/
Joel DeTeves
Nicolas Giard: Thanks Nicolas - I understand this is purely a 'nice to have' and may never happen due to the complexity of it. That said, I've also reached out to the N8N developers and linked them to this thread. Perhaps a collaboration can happen some day.
Joel DeTeves
Nicolas Giard: Hey Nicolas - check out this answer from Jan Oberhauser, the founder @ N8N (screenshot).
Here's the Discourse plugin they're using: https://github.com/n8n-io/discourse-n8n-wf
Wondering if WikiJS has a plugin feature we can use? Perhaps we can re-factor the Discourse plugin to work here :-)
Nicolas Giard
Joel DeTeves: The server part is quite straightforward, that's not the issue. Once it gets converted to a <n8n-demo /> component, where is that component taken from? There's a missing piece in the linked repository...
Joel DeTeves
Nicolas Giard: Hi Nicolas, not sure if this answers your quesiton but looking at the settings.yaml file it looks like it connects to an N8N server of your choice, either internal or external: https://github.com/n8n-io/discourse-n8n-wf/blob/main/config/settings.yml
That seems to align with your earlier comments on how it would be able to present the correct render in an iframe.
Does WikiJS have a plugins feature? I looked at https://js.wiki/modules. If this is the correct option, is there a specific documentation / guideline on designing Modules for WikiJS?
Nicolas Giard
Joel DeTeves: That's not what I was referring to. The discourse plugin repo takes a code block and converts it into a <n8n-demo> component with the workflow JSON code in an encoded string. That's what gets rendered on the page. However, there needs to be an actual component n8n-demo (whether in vue/react/other) that actually takes that component and displays it. There's no mention of that in the repo. How does the component gets rendered once its injected in the page?
Yes, Wiki.js has plugins. A very similar example would be https://github.com/requarks/wiki/tree/main/server/modules/rendering/markdown-plantuml . But again, this is only the server part where the code blocks get transformed into something the frontend will pickup and display correctly.
Joel DeTeves
Nicolas Giard: Hi Nicolas, I believe the documentation is located here: https://n8n-io.github.io/n8n-demo-webcomponent/examples/customize-styles/