mermaid
since 2023-04-09
streamlit から使う
<html> <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">なるほど Steamlit から Mermaid を使えた <a href="https://t.co/8Zk5eRgViW">pic.twitter.com/8Zk5eRgViW</a></p>— にしもつ (@24motz) <a href="https://twitter.com/24motz/status/1644854965960318976?ref_src=twsrc%5Etfw">April 9, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </html>
import streamlit as st # Mermaidのスクリプトを追加 mermaid_js = """ <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script> """ # Mermaidのダイアグラムを定義 mermaid_diagram = """ <div class="mermaid"> graph TD; A[Start] --> B[Do something]; B --> C[Do another thing]; C --> D[End]; </div> """ # Mermaidを初期化するスクリプト mermaid_init = """ <script> mermaid.initialize({startOnLoad:true}); </script> """ # スクリプトとダイアグラムをStreamlitに埋め込む st.components.v1.html(mermaid_js + mermaid_diagram + mermaid_init, height=300)
機能
graph TD A[Start] --> B[Do something] B --> C[Do another thing] C --> D[End] sequenceDiagram participant A as Alice participant B as Bob A->>B: Hello Bob, how are you? B->>A: I'm good, thanks! classDiagram Class01 <|-- Class02 Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 -- Class10 stateDiagram [*] --> State1 State1 --> [*] State1 : This is a state State1 --> State2 : Transition gantt dateFormat YYYY-MM-DD title Sample Gantt Chart section Section 1 Task 1 :a1, 2021-04-01, 30d Task 2 :a2, after a1, 20d
