# JSON flows in node description README.md - how resp. howto

**URL:** <https://discourse.nodered.org/t/json-flows-in-node-description-readme-md-how-resp-howto/32540>\
**Category:** Developing Nodes\
**Created:** [7 September 2020 10:31 UTC](https://discourse.nodered.org/t/json-flows-in-node-description-readme-md-how-resp-howto/32540 "2020-09-07T10:31:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![StephanStS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/stephansts/32/28514_2.png) [@StephanStS](https://discourse.nodered.org/u/StephanStS)\
**Post date:** [7 September 2020 10:31 UTC](https://discourse.nodered.org/t/json-flows-in-node-description-readme-md-how-resp-howto/32540/1 "2020-09-07T10:31:52Z")

</div>

I have difficulties embedding JSON flows in the node description.

## 1. What do I know about JSON embedding in the markdown text?

- **JSON or javascript** (and also other languages) code can be embedded into the README.md via **triple backquotes ```**
- The triple backquotes (starting and ending) must be in a **single line**
- I use the keyword **'javascript' at the starting** to get a coloured display, e.g. when displaying a Node-RED function node contents.
  - This works at least in `GitHub.com`, `npmjs.com` and also in most Markdown-Editors
  - Example: ```javascript
  - See also there: `https://github.com/windkh/node-red-contrib-telegrambot`, e.g. chapter "Sending live locations"
  - **Remark:** Coloured output does not work on [flows.nodered.org](http://flows.nodered.org) (not a big problem for me)

- You can generate **collapsed sections** via the **`<details>`** option
  - Definition: [https://www.w3schools.com/TAGS/tag\_details.asp](https://www.w3schools.com/TAGS/tag_details.asp)
  - See also there: `https://github.com/windkh/node-red-contrib-telegrambot`, e.g. see below Fig. 11

## 2. Beside: What do I know about image embedding in the markdown text (important for later question)?

- **Images** can be embedded, e.g. via an '!'
  - Example: `![echo flow](images/TelegramBotEcho.png?raw=true "Echo Flow")`

- These images can be seen in the `flows.nodered.org`, because they are embedded via this type of link: `https://raw.githubusercontent.com/`
  - Example: This image: `https://raw.githubusercontent.com/windkh/node-red-contrib-telegrambot/master/images/TelegramBotEcho.png` is embedded Fig. 1 here: `https://github.com/windkh/node-red-contrib-telegrambot`

- **Important:** These images can also seen on the `flows.nodered.org` pages, e.g. there: `https://flows.nodered.org/node/node-red-contrib-telegrambot`

## 3. Beside: What do I know about JSON flow examples?

- If you have a **subdirectory named 'examples'** in your flow, then JSON files located there are shown in the vertical tab 'examples' in the **Node-RED importing dialog**. This is a nice feature
  - It looks like this:  
 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/7/877476f7a873bccafab636a170aa445077b6aa89.png)

## 4. What is a problem?

Embedding JSON files with a **relative link** in the .md file does only work in `GitHub.com` and `npmjs.com`, but not on `flows.nodered.org`

- Example: See there: `https://github.com/windkh/node-red-contrib-telegrambot`, e.g. Fig. 1:  
 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/5/2545b1be6d57e8da2c471d2f62d78f4dc9ec53f3.png)

- The flow is defined by this markdown code: `[**echo flow**](examples/echo.json)`

- Klicking the **link 'echo flow'** leads to a page where you can **copy the flow text** (e.g. for importing it via the clipboard).

- **Problem:** On `flows.nodered.org` an error message occurs: _ **404 - Thing not found** _

- **Question:** Is there a solution for that, that `flows.nodered.org` treats these flow links identical like images? Any ideas?

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [7 September 2020 13:15 UTC](https://discourse.nodered.org/t/json-flows-in-node-description-readme-md-how-resp-howto/32540/2 "2020-09-07T13:15:27Z")

</div>

> [@StephanStS](#):
>
> Is there a solution for that, that `flows.nodered.org` treats these flow links identical like images? Any ideas?

The Flow Library has to do a lot of work to spot relative links and to rewrite them to use the GitHub url equivalent. It was only doing that for images - not links to other files. I've just pushed a fix to handle links - reload the page and you should find your links work as you'd want now.

---

<div class="post-metadata">

**Author:** ![StephanStS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/stephansts/32/28514_2.png) [@StephanStS](https://discourse.nodered.org/u/StephanStS)\
**Post date:** [7 September 2020 13:32 UTC](https://discourse.nodered.org/t/json-flows-in-node-description-readme-md-how-resp-howto/32540/3 "2020-09-07T13:32:33Z")

</div>

Brilliant. Many thanks.  
Now it works.

---

<div class="post-metadata">

**Author:** ![StephanStS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/stephansts/32/28514_2.png) [@StephanStS](https://discourse.nodered.org/u/StephanStS)\
**Post date:** [7 September 2020 16:05 UTC](https://discourse.nodered.org/t/json-flows-in-node-description-readme-md-how-resp-howto/32540/4 "2020-09-07T16:05:16Z")

</div>

@knolleary  
What about adding a subpage about the README.md [there](https://nodered.org/docs/creating-nodes/)?  
Describe about generating the node documentation as Markdown and some of the stuff described above. I would offer to start with parts of the description.

---

<div class="post-metadata">

**Author:** ![StephanStS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/stephansts/32/28514_2.png) [@StephanStS](https://discourse.nodered.org/u/StephanStS)\
**Post date:** [13 September 2020 06:58 UTC](https://discourse.nodered.org/t/json-flows-in-node-description-readme-md-how-resp-howto/32540/5 "2020-09-13T06:58:04Z")

</div>

@knolleary  
There: [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506) you mentioned not to use the ```javascript expression for embedding code.  
I thought that worked a couple of weeks ago, but not it does not work. It would be nice if the javascript syntax highlighting would be active, this is useful when you describe the contents of a function node.

For an example see [https://flows.nodered.org/node/node-red-contrib-telegrambot](https://flows.nodered.org/node/node-red-contrib-telegrambot) and go to Fig. 11. Below this figure click to expand the function node contents.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [27 September 2020 06:58 UTC](https://discourse.nodered.org/t/json-flows-in-node-description-readme-md-how-resp-howto/32540/6 "2020-09-27T06:58:12Z")

</div>

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