Can I draw flow chart in MarkDown with in page link?

Question

I'm on Windows 10, editing MarkDown files with VS-Code.

I would like to draw a flow chart like graph and adding in page links to nodes in the graph.

I read through the documentation of both mermaid and flowchat.js, they only provide the net link method.

What I am looking for is an in page jump after the click, lead the readers to the place where the detail explanation of the node is located in the file.

Would there be a way to create that kind of graph? Thanks a lot!

Answer 1

According to documentation Interaction this can be done with click:

It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab.

Examples of tooltip usage below:

<script>
    var callback = function(){
        alert('A callback was triggered');
    }
<script>
graph LR;
    A-->B;
    click A callback "Tooltip for a callback"
    click B "http://www.github.com" "This is a tooltip for a link"

To get an in page link you can use the # in the link. I put together the following example:

```mermaid
graph LR;
    A-->B;
    click B ".#test" "Tooltip..."
```

(some text...)

## Test