Flowchart / sequence diagram support - mermaid markdown

Dash Python
1

Hi Dash community,

I am trying to include a flowchart or sequence diagram in my dashboard which is dynamically rendered.

I was hoping to be able to use the dcc.Markdown in combination with mermaid, e.g.:

dcc.Markdown(
                        children='''
                        ```mermaid

                            graph TD;
                            A-->B;
                            A-->C;
                            B-->D;
                            C-->D;

                        ```
                        '''
)

Unfortunately, this does not work with Dash.

Is there any other (stable) option to render a flowchart or sequence diagram with Dash without importing a third-party JS library?

Thanks in advance for any recommendations!

2

dash-cytoscape might fit your needs :slightly_smiling_face:

https://dash.plotly.com/cytoscape

3

@chriddyp thanks a lot for the pointer, this is already a starting point.

Yet, having the features provided by markdown + mermaid (or a more sophisticated tool) would fit my needs even better.

4

I just had a look at mermaid. It looked so cool (!) that I decided to make a small Dash wrapper,

import dash
from dash_extensions import Mermaid

chart = """
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
"""
app = dash.Dash()
app.layout = Mermaid(chart=chart)

if __name__ == "__main__":
    app.run_server()

The Mermaid component is available in dash-extensions==0.0.58.

Untitled

7 Likes
5

Love to see it @emil!

6

@Emil that’s awesome work, thanks a million!

2 Likes
7

Hi,
So glad here I can find the solution for flowchart in dash!
I’m trying to make it editable in the webpage.
But I can only see the chart in the first click.
After that, if I modify the text, the ‘flowchart-output’ will print the text.
I don’t know why. Can anyone help? Thank you~

from dash import Dash, dcc, html
from dash.dependencies import Input, Output, State
from dash_extensions import Mermaid

text = """
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
"""

app = Dash(__name__)

app.layout = html.Div([
    dcc.Textarea(
        id='textarea-state-example',
        value=text,
        style={'width': '100%', 'height': 200},
    ),
    html.Button('Submit', id='textarea-state-example-button', n_clicks=0),
    html.Div(id='flowchart-output'),
])

@app.callback(
    Output('flowchart-output', 'children'),
    Input('textarea-state-example-button', 'n_clicks'),
    State('textarea-state-example', 'value')
)
def update_output(n_clicks, value):
    if n_clicks > 0:
        return Mermaid(chart=value)

if __name__ == '__main__':
    app.run_server(debug=True)
8

How can we save those images in the form of png’s or jpg format? @Emil @chriddyp

9

@WTYang @dseybo