New Component for *Interactive* Mermaid Diagrams

Custom Components
, ,
1

New Component: streamlit-mermaid-interactive – Interactive Mermaid Diagrams with Click Events

I’ve just released streamlit-mermaid-interactive, a component that lets you render Mermaid diagrams and respond to click events on nodes/entities.

Demo

https://mermaid-component.streamlit.app/

Installation

pip install streamlit-mermaid-interactive

Why this component?

While there are a few Mermaid components out there, I wanted one that would let users click on diagram elements and have that interaction available in Python. This makes it possible to build apps where clicking a node in a flowchart triggers a query, updates another widget, or navigates to more detail.

Basic Usage

import streamlit as st
from streamlit_mermaid_interactive import mermaid

flowchart_code = """
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[OK]
    B -->|No| D[End]
"""

result = mermaid(flowchart_code, theme="neutral", key="flowchart")

if result.get("entity_clicked"):
    st.info(f"Clicked: {result['entity_clicked']}")

Supported Diagram Types

Fully Interactive (click events work):

  • Flowcharts
  • Sequence Diagrams
  • Entity Relationship Diagrams (ERD)
  • State Diagrams
  • Class Diagrams

Rendered but not yet clickable:

  • Pie Chart, Gantt, Git Graph, User Journey, Timeline

(PRs welcome if anyone wants to tackle click detection for those!)

Themes

Supports "neutral" (default), "dark", "forest", and "base".

Let me know if you run into issues or have feature requests!

4 Likes
2

Welcome to the Streamlit community and thanks for sharing your new component! :tada: The streamlit-mermaid-interactive component allows you to render Mermaid diagrams in Streamlit and capture click events on diagram entities, making it possible to build interactive apps that respond to user actions on diagrams. You can install it with pip install streamlit-mermaid-interactive and use it as shown in your example to detect clicks and update your app accordingly.

This approach aligns with best practices for custom Streamlit components, leveraging the ability to pass data and events between JavaScript and Python, as described in the Streamlit Components documentation and API reference. Your component extends the interactivity of Mermaid diagrams beyond what’s available in existing solutions, and your use of themes and support for multiple diagram types is a great touch. Community members can check out your demo app and GitHub repo for more details.

Sources:

3

This is fantastic, exactly what I need! If this would be included in Snowflake’s supported packages, I’d be overjoyed.

1 Like
4

Many thanks. I love using Mermaid. Like that it’s using components v2!

1 Like