Graphvizでグラフ構造を図にする

 

1.Graphvizとは

• グラフ構造を「図」に自動変換するオープンソースのツールです。
• もともとはベル研究所（AT&T Labs）で開発され、今もメンテナンスが続いています。
• ネットワーク図、フローチャート、依存関係図、組織図など「ノードとエッジ（点と線）」で表現できるものをレイアウトして描画するのが得意です。

2.簡単な使い方

DOT言語（シンプルなテキスト記述）で「ノード（丸や四角）」「エッジ（矢印）」を指定

例：

digraph G {
  A -> B;
  B -> C;
  A -> C;
}

3.Macに構成

brewで本体、pipでpythonライブラリをインストール

$ brew install graphviz
$ pip install graphviz

 

4.使用例

from graphviz import Digraph

dot = Digraph(comment="Tarot Cloud Functions Architecture (Extended)", format="png")
dot.attr(rankdir="LR", fontsize="10")

# Users
dot.node("user", "ユーザー\n(ブラウザ)", shape="oval", style="filled", fillcolor="lightyellow")

# Frontend 
dot.node("hosting", "Firebase Hosting\n(静的ページ+JS)", shape="box", style="filled", fillcolor="lightblue")

# Backend Functions
dot.node("functions", "Cloud Functions (Gen2)\n/session, /draw, /read", shape="box", style="filled", fillcolor="lightgreen")

# Firestore
dot.node("firestore", "Firestore\n(セッション/ログ)", shape="cylinder", style="filled", fillcolor="lightgray")

# Vertex AI
dot.node("vertex", "Vertex AI\n(Geminiで基本鑑定)", shape="box3d", style="filled", fillcolor="mistyrose")

# reCAPTCHA
dot.node("recaptcha", "reCAPTCHA\n(ボット対策)", shape="octagon", style="filled", fillcolor="lightpink")

# External CTA (Coconala)
dot.node("coconala", "ココナラ\n(詳細鑑定誘導)", shape="note", style="filled", fillcolor="white")

# Cloud Tasks (future)
dot.node("tasks", "Cloud Tasks\n(非同期処理/メール/PDF生成)", shape="box", style="filled", fillcolor="lightgoldenrod")

# Cloud Storage (future)
dot.node("storage", "Cloud Storage + CDN\n(カード画像/大容量アセット)", shape="cylinder", style="filled", fillcolor="azure")

# Monitoring
dot.node("monitor", "Cloud Logging / Monitoring", shape="component", style="filled", fillcolor="lightcyan")

# Edges
dot.edge("user", "hosting", label="HTTP(S) アクセス")
dot.edge("hosting", "functions", label="API呼び出し /api/*")
dot.edge("functions", "firestore", label="セッション保存/参照")
dot.edge("functions", "vertex", label="基本鑑定リクエスト")
dot.edge("user", "recaptcha", label="トークン取得", style="dashed")
dot.edge("functions", "recaptcha", label="トークン検証", style="dashed")
dot.edge("functions", "coconala", label="結果にリンクを返却")

# Future edges
dot.edge("functions", "tasks", label="重処理/非同期ジョブ", style="dashed")
dot.edge("functions", "storage", label="カード画像参照", style="dashed")
dot.edge("functions", "monitor", label="ログ/エラー", style="dashed")

# 出力
out_path = "./tarot_architecture_extended"
dot.render(out_path, format="png", cleanup=False)
out_path + ".png"