streamlit 学习笔记2：如何在streamlit渲染mermaid |
您所在的位置：网站首页 › 包装渲染图英文 › streamlit 学习笔记2：如何在streamlit渲染mermaid |
|
下面两种亲测可行 第一种 import streamlit as st def mermaid(code: str) -> None: st.components.v1.html( f""" {code} import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'; mermaid.initialize({{ startOnLoad: true }}); """ ) mermaid( """ graph LR A --> B --> C """ ) 这里用到了js，mermaid在js中的用法在此文档第二种 感觉非常牛，用到了一个可以的叫streamlit_js_eval的开源python包 SJE 是一个自定义的 Streamlit 组件,可以评估 JavaScript 表达式,返回结果。 它让你可以在 Streamlit 中运行 JavaScript,做一些 Streamlit 本身无法做的事情。 比如: 管理 Cookie 、 写入剪贴板 、 获取浏览器信息 、 与 Android 共享功能交互 如下代码是复制的论坛里面的 # 发现一个很强的组件：streamlit_js_eval from time import sleep import streamlit as st from streamlit.components.v1 import html from streamlit_js_eval import streamlit_js_eval if "svg_height" not in st.session_state: st.session_state["svg_height"] = 200 if "previous_mermaid" not in st.session_state: st.session_state["previous_mermaid"] = "" def mermaid(code: str) -> None: html( f""" {code} import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'; mermaid.initialize({{ startOnLoad: true }}); """, height=st.session_state["svg_height"] + 50, ) selection = st.selectbox( "Choose example", ["Simple", "Class Diagram", "Flowchart"]) if selection == "Simple": code = """ graph LR A --> B --> C """ elif selection == "Class Diagram": code = """ classDiagram Animal |Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car] """ mermaid(code) if code != st.session_state["previous_mermaid"]: st.session_state["previous_mermaid"] = code sleep(1) streamlit_js_eval( js_expressions='parent.document.getElementsByTagName("iframe")[0].contentDocument.getElementsByClassName("mermaid")[0].getElementsByTagName("svg")[0].getBBox().height', key="svg_height", ) |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |