# How to enable click in Mermaid from dash\_extensions

**URL:** https://community.plotly.com/t/how-to-enable-click-in-mermaid-from-dash-extensions/72876
**Category:** Dash Python
**Created:** [February 20, 2023, 1:26pm UTC](https://community.plotly.com/t/how-to-enable-click-in-mermaid-from-dash-extensions/72876 "2023-02-20T13:26:24Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![biyani701](https://avatars.discourse-cdn.com/v4/letter/b/97f17d/32.png) [@biyani701](https://community.plotly.com/u/biyani701)
#### Post date: [February 20, 2023, 1:26pm UTC](https://community.plotly.com/t/how-to-enable-click-in-mermaid-from-dash-extensions/72876/1 "2023-02-20T13:26:24Z")

</div>

After importing Mermaid as below, when the page is rendered, the mouse pointer changes to click. But on clicking nothing happens. The client side javascript also does not get called.

Is there any way to make it work?

from dash\_extensions import Mermaid

I can render an html.Div tag like below  
html.Div(Mermaid(  
id=“id-dummy”,  
chart=my-trial,  
config={“securityLevel”: “loose”, “startOnLoad”: True},  
name=“trial”,  
),  
html.Div(id=“id-capture-mermaid-click”)

my-trial=“”"  
flowchart TB  
subgraph Credit Card System  
A[Credit Card System] --\>|1. Processes Payment| B(Payment Processor)  
A[Credit Card System] --\>|2. Authorizes Transactions| C(Acquirer)  
A[Credit Card System] --\>|3. Provides Account Information| D(Bank)  
end  
subgraph Payment Processor  
B(Payment Processor) --\>|1. Sends Payment Request| E[Payment Gateway]  
B(Payment Processor) --\>|2. Verifies Payment| F[Payment Fraud Detection]  
end  
subgraph Acquirer  
C(Acquirer) --\>|1. Sends Transaction Request| E[Payment Gateway]  
C(Acquirer) --\>|2. Approves Transaction| G[Transaction Authorization]  
end  
subgraph Bank  
D(Bank) --\>|1. Sends Account Information Request| H[Account Information Service]  
D(Bank) --\>|2. Provides Account Information| H[Account Information Service]  
end  
click A call callback() “Tooltip”  
“”"

app.clientside\_callback(  
“”"  
function(tooltip) {  
alert(“function called: " + url + " :” + tooltip);  
console.log(“function called”);  
return tooltip  
}  
“”",  
Output(‘id-capture-mermaid-click’, ‘value’),  
Input(‘id-dummy’, ‘click’),  
prevent\_initial\_call=True,  
)