mermaid

since 2023-04-09

https://mermaid-js.github.io/mermaid/#/

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

目次

mermaid

streamlit から使う

機能