question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

A node notes feature request for graph and flowchart

See original GitHub issue

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: image

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;

image

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

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:7
  • Comments:6

github_iconTop GitHub Comments

2reactions
SamHaslercommented, Feb 28, 2022

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

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

1reaction
khinacidcommented, Feb 22, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using GraphEdit and GraphNode to create flow charts
On this first video I cover the basics and the quirks that these nodes have.Part 2: https://youtu.be/AX5pN3mwfBcThe code for this tutorial ...
Read more >
How to add this type of node description by Mermaid?
While some types of Mermaid diagrams explicitly support notes (e.g. sequence diagrams), flowcharts do not. I believe the closest you're ...
Read more >
Ultimate Flowchart Guide 2022: Definition, Examples ...
Flowchart 101 - All you need to know: What is a flowchart, history, how to make, flowchart symbols, examples & templates. Presented by...
Read more >
Node Graph for Document Links - DEVONthink
That tool leverages this awesome capability of a graph to filter based on graph properties. I am experimenting with my notes from Devon...
Read more >
20+ Flow Chart Templates, Design Tips and Examples
Flow charts are perfect to use in project plan templates, ... some of our templates are free to use and some require a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found