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

mermaind示例

code = """
flowchart LRmarkdown["`This **is** _Markdown_`"]newLines["`Line1Line 2Line 3`"]markdown --> newLinesmarkdown["`This **is** _Markdown_`"]newLines["`Line1Line 2Line 3`"]markdown --> newLinesmarkdown["`This **is** _Markdown_`"]newLines["`Line1Line 2Line 3`"]markdown --> newLines
"""

方案一

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

方案二

import streamlit.components.v1 as componentscomponents.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,
)