Note in flowchart diagram

[iCirconflexe]

is it possible to add some note in flowchart diagram ? It's possible a with gantt diagram

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[knsv]

It is not possible right now. What kind of not do you mean? I can see general notes to be placed anywhere and notes related to some node, then that relation needs to be defined.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you are still interested in it, and it is still relevant, you can comment or remove the label to revive it.

[gianpaj]

I would be great to put a note beside any decision or square.

For example to use a smaller space:

graph TD;

    Buyer -->|press buy| Product
    Product --> Shared{Has Been Shared}
    Shared -->|No| D[Show message saying 'Invite your friends to chat on Onova' Ok or Cancel]
    Shared -->|Yes| ProductAvailable{Product is Available?}

On Shared -> No I want to give more context.

[knsv]

This could be implemented by creating a hidden subgraph with two nodes, the actual node and the node with the note.

I would suggest synax similar to notes in plan uml state diagrams.

Product --> Shared{Has Been Shared}
note left of Product : this is a short<br />note

note right of Product
  A note can also
  be defined on
  several lines
end note

[gianpaj]

State or Sequence Diagram wouldn't make a lot of sense for me. I have few code paths I'm trying document and, for example, this is just the beginning:

[IOrlandoni]

@gianpaj Note that the suggestion was to use a similar syntax to PlantUML's state diagrams for the development of the feature. Not for you to use state / sequence instead of flowcharts.

[frackham]

No activity on this for a while (understandably), just wondering if still the case that we'd need to use a workaround? Have used the syntax that @knsv describes in plantuml.

[jgreywolf]

@frackham you are correct, Notes are currently not supported in flowcharts.

[JJTell]

Just wanted to verify that notes still aren't supported in flowcharts? It would be really handy, but I can see there isn't much activity on this thread so I get if it hasn't been looked at.

[cyri113]

Notes would be great for flowcharts!

[abourget]

Would love the same notation herein: https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=notes to be available in a flowchart

[janzheng]

This is probably not really a good idea, but (in Notion's Mermaid plugin, at least) you can just use HTML:

flowchart
    A-->B[<div style='text-align: left'><h3>Well well well...</h3><ul><li>this is a really</li><li>round-about way to</li><li>do stuff lol...</li></ul><br></div>];
    B-->C;

[zcstarr]

I'd like to be able to use notes as well

[GabrielMMelo]

+1

[zcstarr]

What would it take to make this enhancement @knsv , happy to take a crack at a PR! If you have pointers on the code path or example to follow that would be great. I saw earlier your suggestion of making a hidden subgraph. Where in the code should I have peak?

[numbworks]

I'm also interested in having notes in flowcharts!

[xenoterracide]

this is not a flowchart specific feature, should be available in all UML diagrams, see #3699 for UML spec.

[christian-toscano]

This feature would be really useful to better explain flow charts

[skbolton]

I think footnote notation could be the play. That way you can annotate with a number or something and have a section at the bottom of the chart hyperlinkable with additional details

[MathishaN]

@skbolton 's idea of footnotes allows for a lot of annotation without clutter. Adding notes like in the sequence diagram doesn't allow room for extended comments.

It would be great if the footnote links could be in markdown syntax that could be included anywhere in the diagram.

[alramalho]

bump

[pradeipp]

+1

[skbolton]

Circling back on this. It seems that some of the note features of class diagrams are what I was suggesting with the footnote approach. I was new to mermaid and had only used flow charts.

If there was the option of adding links to flowcharts it would be possible to link to another place in the document where footnotes could be located.

[JohnRusk]

This feature would be super useful. E.g. right now I'm looking at a complex flowchart. I want to leave notes on it, about questions I want to ask a colleague in a few days.

I really think folks would find this feature very useful.

[stevancorre]

yup, would be a really useful feature to make graphs more understandable instead of having graph + legend with few words

[1337spectra]

I'm adding my +1.

[mradilla]

+1 🙏

[hatvik]

This would be very useful +1

[piperdeck]

Adding my +1 here as well

[Angelles]

I would also love notes in flowcharts.

[caleb-terry]

I've travelled through time and space to land here for this feature

[eugenenekh]

This is what I've come up with so far as a workaround:

graph TD
    style noteB opacity:0

    A --> B
    A & B --> C

    subgraph noteB [" "]
        B -.- note[I AM NOTE]
    end

graph TD
    style noteB opacity:0

    A --> B
    A & B --> C

    subgraph noteB [" "]
        B -.- note[I AM NOTE]
    end

[jgreywolf]

I am working on this right now

[jgreywolf]

FYI - in practice this is probably going to end up looking a lot like the workaround posted by @eugenenekh, though the syntax will be along the lines of "note for nodename this is a note"

[jsteinfort]

FYI - in practice this is probably going to end up looking a lot like the workaround posted by @eugenenekh, though the syntax will be along the lines of "note for nodename this is a note"

You know... after this many years, I think we get what we get. :-) Thank you for your work.

[joewinger]

Any movement on this? Sorry to beg!

[erivanmoura]

Following your idea I created another alternative

graph TD
    classDef sub opacity:0
    classDef note fill:#ffd, stroke:#ccb

    A --> B
    A & B --> C

    subgraph subA [" "]
        A
        noteA[I AM THE FIRST NOTE]
    end

    subgraph subB [" "]
        B
        noteB[I AM THE SECOND NOTE]
    end

    subgraph subC [" "]
        C
        noteC[I AM THE THIRD NOTE<br>...WITH 2 LINES]
    end

    class subA,subB,subC sub
    class noteA,noteB,noteC note

graph TD
    classDef sub opacity:0
    classDef note fill:#ffd, stroke:#ccb

    A --> B
    A & B --> C

    subgraph subA [" "]
        A
        noteA[I AM THE FIRST NOTE]
    end

    subgraph subB [" "]
        B
        noteB[I AM THE SECOND NOTE]
    end

    subgraph subC [" "]
        C
        noteC[I AM THE THIRD NOTE<br>...WITH 2 LINES]
    end

    class subA,subB,subC sub
    class noteA,noteB,noteC note

[zlatko-minev]

Great answer @erivanmoura

[CJyoung524]

mark it! it's cool

[nirname]

Any updates? I know there is a plan on universal syntax for a bunch of similar diagrams, should we wait for it or will this feature be implemented regardless of other plans?

[danielthedifficult]

Came here looking for this feature! Yes please!

[luisarojas]

Hey, was wondering if there's been any movement on this one? Notes with flowcharts would be so handy

[Youllou]

Would love to see this implemented ! As a workarround I use subgraphs and put my comment in the subgraph name It's not ideal but it kinda works while waiting for the actual note feature