htmx + mermaid.js, ER図表示

概要:

htmx + mermaid.js、ER図を表示するメモです。

• 前scrap続編で、htmx関連でjavscriptなし目標で、インタラクティブ機能追加メモになります。
• ほぼSSR構成です。
• D1連携し、mermaidデータ保存します

[ 作成日: 2024/07/20 ]

---

環境

• htmx
• Vite
• react-dom, JSX
• express
• tailwindcss

---

関連

• https://mermaid.js.org/

---

• sample/er_chart/src/pages/ErChartShow.tsx

https://github.com/kuc-arc-f/express_47htmx/blob/main/sample/er_chart/src/pages/ErChartShow.tsx

---

• className=mermaidに、mermaidデータ配置します

  {item.content ? (
  <pre className="mermaid">{item.content}</pre>
  ) : null}

---

• 一覧
• sample/er_chart/src/pages/ErChart.tsx

https://github.com/kuc-arc-f/express_47htmx/blob/main/sample/er_chart/src/pages/ErChart.tsx

---

GIF

https://x.com/kuc_arc_f/status/1814491949891785107

---