Show API reference for

st.mermaid_chart

Display a Mermaid diagram.

Mermaid is a diagramming and charting tool that uses text-based definitions to create diagrams dynamically. For more information about Mermaid syntax, see https://mermaid.js.org/.

Function signature[source]

st.mermaid_chart(body, *, width="stretch")

Parameters

body (str)

The Mermaid diagram definition as a string. This uses Mermaid's text-based syntax to define flowcharts, sequence diagrams, class diagrams, state diagrams, and more.

width ("stretch", "content", or int)

The width of the element. This can be one of the following:

  • "stretch" (default): The width of the element matches the width of the parent container.
  • "content": The width of the element matches the width of its content, but doesn't exceed the width of the parent container.
  • An integer specifying the width in pixels: The element has a fixed width. If the specified width is greater than the width of the parent container, the width of the element matches the width of the parent container.

Examples

import streamlit as st

st.mermaid_chart('''
    graph LR
        A[Start] --> B{Decision}
        B -->|Yes| C[OK]
        B -->|No| D[Cancel]
''')
Built with Streamlit 🎈
star

Tip

Want a new st.mermaid_chart feature or found a bug? Browse open issues and react with a 👍 on the initial post of the ones that matter to you. Your votes help us prioritize what to work on next.

arrow_backPrevious: st.graphviz_chartarrow_forwardNext: st.plotly_chart
forum

Still have questions?

Our forums are full of helpful information and Streamlit experts.