A node notes feature request for graph and flowchart

[Juddd]

While some types of Mermaid diagrams explicitly support notes, I don't know why graph and flowchart don't support, I have a habit to make such graphs, and I currently use drawio to draw it:

An awkward workaroud

The current mermaid is difficult to implement Description1. This is my current solution from here:

graph TB
    A -->|"Description2:A how to B"| B --> C
    A ---|"Description1:Properties of A"|A
    B --> D
    D -.-> F
    F ---|"Description1:Properties of F"|F
    C -->|"Description2:C how to F"| F
    F --> H & G & K
    H --> M
    G & K -.-> M
    linkStyle 2,5 stroke:#fff,stroke-width:0px;

But I have to say this solution to implement Description1 is little awkward, It has some defects:

1. Hard to compute the number of this edge when there are many edges
2. This solution will seriously affect the layout of nodes
3. It is very not convenient to distinguish Description2 with different css styles

Suggestion

I think what I need is a node notes feature, such as note right of A: "Description1 Properties of A"? I strongly suggest to add this feature for graph and flowchart

[khinacid]

Your difficulties can be solved by a note feature of node , which meets your needs with beautiful layout @Juddd

[SamHasler]

A workaround I've used for this is to use subgraphs with unlinked nodes with no style:

flowchart TB

    subgraph A
        A-DESC("Description1:Properties of A")
    end

    subgraph F
        F-DESC("Description1:Properties of F")
    end

    A -->|"Description2:A how to B"| B --> C
    B --> D
    D -.-> F
    C -->|"Description2:C how to F"| F
    F --> H & G & K
    H --> M
    G & K -.-> M

    classDef desc fill:#0000,stroke:#0000,stroke-width:0px;
    classDef subgraphnode fill:#000,stroke:#81B1DB
    class A-DESC desc;
    class F-DESC desc;
    class A subgraphnode;
    class F subgraphnode;

NB: I switched from graph to flowchart

[khinacid]

@SamHasler Good job！

[Juddd]

@SamHasler When you note node C with subgraphs, it will a bad layout:

BTW, Can we adjust the size of these subgraphs?

[SamHasler]

@Juddd

If you want long descriptions you can use line returns to format them:

flowchart TB

    subgraph A
        A-DESC("Description1:Properties of A")
    end

    subgraph F
        F-DESC("Description1:Properties of F")
    end

    subgraph C
        C-DESC("
        Description1:Properties of C
        Description1:Properties of C
        ")
    end

    A -->|"Description2:A how to B"| B --> C
    B --> D
    D -.-> F
    C -->|"Description2:C how to F"| F
    F --> H & G & K
    H --> M
    G & K -.-> M

    classDef desc fill:#0000,stroke:#0000,stroke-width:0px;
    classDef subgraphnode fill:#000,stroke:#81B1DB
    class A-DESC desc;
    class F-DESC desc;
    class C-DESC desc;
    class A subgraphnode;
    class F subgraphnode;
    class C subgraphnode;

[Juddd]

@sidharthv96 Hello, I am very reluctant to disturb you. But may I ask if I can expect this feature?

[sidharthv96]

@Juddd, there are no technical difficulties blocking the implementation. We do have notes in other diagrams, so we can borrow that syntax here too.

But, as it's going to be a heavily involved task, spanning grammar, layout and drawing, we'll need someone volunteers to dedicate some solid effort.

PS: I've seen issues with bounties being taken up by people. https://github.com/mermaid-js/mermaid/issues/1052#issuecomment-1207995713 https://github.com/mermaid-js/mermaid/issues/1505

[Juddd]

@sidharthv96 In fact, I've tried all types of diagrams, and if only flowchart added this feature, it would be perfect!

[Juddd]

@knsv Look developers plan implementation, may I know the progress?

[Juddd]

@sidharthv96 Could you support this feature?

[sidharthv96]

@Juddd, I understand your concern, but, as I mentioned in my comment above

@Juddd, there are no technical difficulties blocking the implementation. We do have notes in other diagrams, so we can borrow that syntax here too.

But, as it's going to be a heavily involved task, spanning grammar, layout and drawing, we'll need someone volunteers to dedicate some solid effort.

This feature is sadly not in the immediate roadmap of the core team, but we will assist anyone who is willing to create the PR. We will update in this issue if the priority changes.