【streamlit streamlit中 显示 mermaid 流程图有两种方式】

streamlit中显示mermaid 流程图有两种方式

mermaind示例

code = """
flowchart LR
    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines

    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines


    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines
"""

方案一

# pip install streamlit-mermaid
import streamlit_mermaid as stmd
stmd.st_mermaid(
    code,
    show_controls=False,
)

方案二

import streamlit.components.v1 as components

components.html(
    f"""
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <div class="mermaid-container" style="overflow-y: auto; max-height: 750px;">
        <div class="mermaid">
        {code}
        </div>
    </div>
    <script>
        mermaid.initialize({{
            startOnLoad: true,
            fontFamily: 'monospace, sans-serif',
            flowchart: {{
                htmlLabels: true,
                useMaxWidth: true,
            }},
            securityLevel: 'loose',
        }});
        mermaid.parseError = function(err, hash) {{
            console.error('Mermaid error:', err);
        }};
    </script>
    """,
    # height=750,
)