blog 00

このWebサイトそのものの開発についてのメモになります。

Obsidian→Git、Astro→HTML

mermaid対応

Obsidian で public_notes 配下の Markdown に Mermaid 図を追加

1. Git に commit
2. main に push/merge
3. GitHub Actions が自動で build
4. Astro build
5. rehype-mermaid
6. Playwright Chromium で Mermaid を描画
7. “SVG” を生成
8. dist/products/index.html に <“svg”> として埋め込み
9. SVG 化された HTML が Cloudflare Pages に公開

---

Astro
  Markdown/MDX を HTML に変換する

rehype-mermaid
  HTML 変換途中の Mermaid ブロックを探す
  Mermaid に渡して図として描画する
  結果を SVG として HTML に埋め込む

Playwright Chromium
  Mermaid を正しく描画するためのブラウザ実行環境

---

rehype-mermaid
  Mermaid ブロックを見つける
  Mermaid 図を生成する処理を呼ぶ
  生成された SVG を HTML に差し替える

Mermaid
  flowchart TD などの記法を解釈する
  図のノード、線、ラベル、サイズ、レイアウトを計算する
  SVG を生成する

Playwright Chromium
  Mermaid が動くための実ブラウザ環境を用意する
  テキスト幅、SVG サイズ、レイアウトなどをブラウザ上で計算できるようにする

---

mermaid
  図表記法を解釈して SVG を作る JavaScript ライブラリ

rehype-mermaid
  Markdown/HTML 変換パイプラインの中で mermaid を呼び出すプラグイン

Playwright Chromium
  mermaid ライブラリをブラウザ環境で実行するための土台