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", alt=None)

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.

alt (str or None)

A short, plain-text accessible name for the diagram. If this is None (default), the diagram keeps any Mermaid accTitle / accDescr directives in body, or falls back to a type-derived name such as "Mermaid flowchart".

An empty or whitespace-only string is treated the same as None and is logged so authors notice the dual meaning of alt="" across commands (decorative only on st.image / st.pyplot).

When alt is set, it replaces any accTitle or accDescr directives for the accessible name. Streamlit records the normalized one-line value in the diagram source as a Mermaid comment (%% stAlt: …, visible via Copy Source) so every diagram type keeps rendering. Describe what the diagram shows rather than repeating text that is already visible on the page. This is a short name, not a full text alternative for a dense diagram.

Examples

import streamlit as st

st.mermaid_chart(
    '''
    graph LR
        A[Start] --> B{Decision}
        B -->|Yes| C[OK]
        B -->|No| D[Cancel]
    ''',
    alt="Decision flow from start to 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.