In a workflow graph, how to show text under a shape (like rectangle)?

[georgelichen]

Currently the text can be displayed in the center of a step shape (let's say a rectangle) in a workflow graph. In addition to showing the name of the step, sometime I need to show some additional information, like the step execution time, under or above the shape. How can I achieve this?

[IOrlandoni]

@georgelichen Could you provide a base sample in the live editor and a crude image of what you're trying to achieve?

[georgelichen]

@georgelichen Could you provide a base sample in the live editor and a crude image of what you're trying to achieve?

Here is a sample graph. My goal is to show additional information under each "Task*" node. Please help me about this. Thank you. https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggTFJcbiAgICBBW1Rhc2sxXSAtLT58VGV4dHwgQihUYXNrMilcbiAgICBCIC0tPiBDe0RlY2lzaW9ufVxuICAgIEMgLS0-fE9uZXwgRFtUYXNrM11cbiAgICBDIC0tPnxUd298IEVbVGFzazRdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0

[ashishjain0512]

@georgelichen This is not supported right now. How do you intend to use it, like a short single line or more like text block? Also, could you suggest how the syntax should look like?

[georgelichen]

@georgelichen This is not supported right now. How do you intend to use it, like a short single line or more like text block? Also, could you suggest how the syntax should look like?

Thank you for the reply. Multi-line text would be better to show under the node. Regarding the syntax, we could put the text after the node notation. And it seems character ` is rarely used, we could take advantage of it to separate the lines of a multiple line text. The text in the node and on the line can also take advantage of this delimiter to separate lines. Based upon this idea, the example below will show two lines of text "Line1" and "Line2" under the node Task2.

graph LR A[Task1] -->|Text| B(Task2)Line1`Line2 B --> C{Decision} C -->|One| D[Task3] C -->|Two| E[Task4]

[yoyomule]

Very useful requirements, which are useful for enriching the associated information of a flowchart.

[knsv]

@georgelichen I like your idea of using ` character. We have been using <br/> for this in other graphs. Would it interfere with markdown parsing maybe? Here is how I usually write my mermaid graphs from markdown:

```mermaid
graph LR
   A[Task1] -->|Text| B(Task2)Line1`Line2 
   B --> C{Decision}
   C -->|One| D[Task3]
   C -->|Two| E[Task4]
```            

[go2null]

why not use the | which is currently used as a delimiter? Each | will indicate a new line. This maintains backwards compatibility.

graph LR
   A[Task1] --> |Text| B("Task2|Line1|Line2")
   B        -->        C{"Decision|Line1|Line2"}
   C        --> |One| D["Task3|Line1|Line2"]
   C        --> |Two| E["Task4|Line1|Line2"]

[jgreywolf]

Can someone confirm for me if this is still needed? As there have been many changes in the past 4 years ;)

I will close this after 30 days if no response

[agoldstein03]

@jgreywolf I would use this, or some feature like it. Having all the text have to be inside boxes is rather restrictive and makes spacing more difficult. Sometimes longer explanations are helpful, but don't make sense to put in a box. Being able to add text that floats on some side of the box would be very helpful. Same with connections honestly; being able to put some text above and/or below the line instead of just always in the middle would be helpful as well. Has some other mechanism for this kind of behavior been added?

[jfy133]

The nf-core organisation would be really interested in having text outside the node.

We have inadvertently popularised (at least within bioinformatics) a 'metro map' style of diagram for workflows (examples here: https://nf-co.re/docs/contributing/design_guidelines#examples) but would like to somehow automise this somewhat.

One of the blockers for recreating the style is indeed that you're required to have node labels in the middle of the shape, so floating would be really cool to allow more 'compact' diagrams with the 'textual detail' in a secondary level.