mermaid

Mermaidで図を作成する

直近のやり取りのコンテキストをもとに、Mermaidで図を作成します。背景を透明にしたPNG画像を生成し、インラインで表示されるようにMarkdown画像として出力します。

図の作成方法

1. 現在のコンテキストから、図にできるデータを抽出または導出します。
2. このセッションで以前に作成した図からEmacsの前景色と背景モードがわからない場合は、次のコマンドで確認します。

   emacsclient --eval '(face-foreground (quote default))'
   emacsclient --eval '(frame-parameter nil (quote background-mode))'
   

   1つ目のコマンドは "#eeffff" のような16進数の色を返します。2つ目は dark または light を返します。以降の図では、両方の値を再利用します。
3. Mermaidファイルを一時ファイルに書き込みます。
4. 確認した前景色でテーマ変数を上書きするJSON設定ファイルを書き込みます。背景モードに応じて "theme" を "dark" または "default" に設定します。
5. 背景モードが dark の場合は -t dark、light の場合は -t default を指定して mmdc を実行します。
6. 結果を、単独行のMarkdown画像として出力します。

   ![description](/tmp/agent-diagram-XXXX.png)
   

# Use -t dark for dark, -t default for light
PUPPETEER_EXECUTABLE_PATH=/opt/homebrew/bin/chromium mmdc \
  -i /tmp/agent-diagram-XXXX.mmd \
  -o /tmp/agent-diagram-XXXX.png \
  -t dark -b transparent --scale 2 \
  --configFile /tmp/agent-diagram-XXXX-config.json

Mermaid設定テンプレート

Emacsの前景色を適用するには、このJSON設定ファイルを書き込みます。#eeffff を確認した色に置き換えます。Emacsの背景モードに応じて "theme" を "dark" または "default" に設定します。

{
  "theme": "dark",
  "themeVariables": {
    "primaryTextColor": "#eeffff",
    "secondaryTextColor": "#eeffff",
    "tertiaryTextColor": "#eeffff",
    "primaryBorderColor": "#eeffff",
    "lineColor": "#eeffff",
    "textColor": "#eeffff",
    "actorTextColor": "#eeffff",
    "actorBorder": "#eeffff",
    "signalColor": "#eeffff",
    "signalTextColor": "#eeffff",
    "labelTextColor": "#eeffff",
    "loopTextColor": "#eeffff",
    "noteTextColor": "#eeffff",
    "noteBorderColor": "#eeffff",
    "sectionTextColor": "#eeffff",
    "titleColor": "#eeffff"
  }
}

Mermaid図のテンプレート

sequenceDiagram
    participant a as Alice
    participant b as Bob
    a->>b: Hello
    b-->>a: Hi back

ルール

• セッションごとにEmacsの前景色を一度だけ確認し、以降の図では再利用します。色がわからない場合に限り、再度確認します。
• (frame-parameter nil 'background-mode) を使って、セッションごとにEmacsの背景モードを一度だけ確認します。背景モードが dark の場合は -t dark、light の場合は -t default を使います。必ず -b transparent --scale 2 を指定します。
• mmdc の実行時には、必ず PUPPETEER_EXECUTABLE_PATH=/opt/homebrew/bin/chromium を使います。
• themeVariables に確認した前景色を設定したJSON設定ファイルを必ず作成し、--configFile で渡します。
• ファイル名には必ずタイムスタンプを使います（例：/tmp/agent-diagram-$(date +%s).png）。説明的な名前は使わないでください。
• mmdc の実行が成功したら、Markdown画像（![description](path)）を単独行で出力します。
• データに適した図の種類（シーケンス図、フローチャート、クラス図、状態遷移図、ER図、ガントチャートなど）を選びます。
• 明確さが増す場合はタイトルを付けます。
• 直近のコンテキストに図にできるデータがない場合は、ユーザーにその旨を伝えます。