dotnet / dotnet/docfx

Triggering a tab change from interactive Mermaid diagrams

Open
#8,106 1 comment 0 reactions 0 assignees View on GitHub
markdown
Dominant language
C#
Stars
4.4k
Forks
890
Avg merge
2h 11m
Merged PRs (30d)
10

Description

**Operating System**: Windows

**DocFX Version Used**: 2.59.0

**Template used**: default

Mermaid.js has support for adding interactive elements to flowchart which can either open a new URL or trigger a javascript function: https://mermaid-js.github.io/mermaid/#/flowchart?id=interaction

I'm wondering if it's possible to combine this with the [tabbed content](https://dotnet.github.io/docfx/spec/docfx_flavored_markdown.html#tabbed-content) feature of DFM so that the selected tab switches based on which diagram element was clicked last. The closest I've gotten to is something like this:

```` markdown
``` mermaid
flowchart LR
first["First Tab"]
second["Second Tab"]

click first href "?tabs=first" _self
click second href "?tabs=second" _self
```

# [First Tab](#/tab/first)

Content for first tab.

# [Second Tab](#/tab/second)

Content for second tab.

***

````

This works, and will force the tab group below to switch to the correct tab; however, it also causes the page to reload, which can result in the reader losing their place. Is there a way I can make this work without requiring a page reload? For example, is there a javascript function the diagram could hook into to trigger the tab change?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.