Any way to embed the interactive flow diagrams into notion?

Is there any way to replicate the way we share templates here on the forum within notion pages? (eg Creating an API endpoint | n8n workflow template)

We use notion for documentation purposes and I’d love to be able to use the interactive viewer inside of notion to document flows we have built.

It looks like your topic is missing some important information. Could you provide the following if applicable.

  • n8n version:
  • Database (default: SQLite):
  • n8n EXECUTIONS_PROCESS setting (default: own, main):
  • Running n8n via (Docker, npm, n8n cloud, desktop app):
  • Operating system:

hello @MartinDevon

Do you mean something like this?
https://n8n-io.github.io/n8n-demo-webcomponent/

2 Likes

Looks perfect! thanks will give this a go.

Hey @MartinDevon,

The quick answer is yes…

However… Notion doesn’t allow custom embed plugins so getting it to work is a bit tricky and I don’t have a full guide on how to do it prepared, The way ended up doing it was using an n8n workflow to return a webpage that has the workflow in it based on the ID.

You can then paste the ID into Notion and use the embed option and you get the above, It is not pretty and it may be better with a static site that you load them from but I like how dynamic it is. The workflow I use is below if you wanted to have a play.

To use this add a tag to any workflow you want to be available called allowPreview the workflow will use that to make sure it is allowed to show it, Then just paste the webhook link with ?id=XXX at the end so something like https://n8n.your-domain.com/webhook/wf/template?id=1234 and you should be good to go.

You can find the worklfow json here: Embed Workflow · GitHub

2 Likes

Hey @Jon That’s exactly what I needed - brilliant! Thanks very much!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.