アーキテクチャ図生成ツール
システム設計をテキストとしてスケッチ。Mermaidサブグラフでサービスをティアにグループ化 — クライアント、API、データストア、キュー — 設計文書用のきれいなアーキテクチャ図をレンダリング。ブラウザから外に出ません。
One step per line. Indent two spaces to branch beneath the line above.
リポジトリに存在するシステム設計
アーキテクチャ図はバイナリファイルが設計ツールになった瞬間ドリフトします。Mermaidとして書き込むことはコードの隣に保つ。各ティアをサブグラフにグループ化し、シリンダーをデータストアに、六角形をバスに使用し、図は検討中に1行編集で更新されます。
また、RFCやオンボーディング文書の適切なアーティファクトです — レビュアーは別のアプリを開かずにコンポーネントとデータフローを見ます。
ワークフローからその図へ
オートメーション（n8nまたはZapierパイプライン）を文書化している場合は、データをサービス間で移動させ、アーキテクチャ図がその動く部分を読みやすくします。トリガー、それが触れるサービス、データがどこに着地するかをスケッチし、ドキュメントにソースを保つようにフローが進化する。
よくある質問
テキストからソフトウェアアーキテクチャ図を作成するにはどうしますか?
Mermaidフローチャートを使用し、「subgraph Tier … end」で関連サービスをグループ化し、矢印で接続します。シリンダー「[(DB)]」をデータストアに使用します。ライブレンダリングされ、SVGまたはPNGにエクスポートできます。
サービスをティアにグループ化するにはどうしますか?
「subgraph Name … end」 でノードをラップします。各サブグラフはラベル付きボックスになり、プレゼンテーション/アプリケーション/データスプリット、またはマイクロサービスセットを表示する最も明確な方法です。
非同期またはキューに登録されたリンクを表示できますか?
はい — 破線リンク（ラベル付き）を使用して、例えば「A -. async .-> B」、イベントとキューを同期呼び出しから区別します。
アーキテクチャ図はプライベートですか?
はい。ブラウザで完全にレンダリングされるため、内部サービス名とトポロジーはデバイスから出ません。
データベースとキューにはどのような図形を使用すべきですか?
「[(name)]」をデータベースシリンダーに、「[[name]]」をキュー/サブルーチンに、「{{name}}」をイベントバスなどの六角形に使用します。チートシートはそれらをリストしています。