C4ダイアグラムビューアとエディタ

著者
  • C4ダイアグラムビューアとエディタ
シリーズ: UML and Software Architecture
エピソード: (2/7)

C4 ダイアグラムビューアおよびエディター: MassiveDiag Playground

MassiveDiagにおけるC4モデルダイアグラミングの紹介

MassiveDiag Playgroundは、テキストベースのダイアグラムコードをプロフェッショナルなシステムアーキテクチャビジュアライゼーションにリアルタイムで変換する強力なC4ダイアグラムビューアおよびエディターを提供します。このツールは、C4モデルライブエディターとして優れた機能を発揮し、ソフトウェアアーキテクチャのダイアグラムを開発しながら即座に確認および調整することができます。

必要な場合には：

  • C4ダイアグラムコードをSVGに変換してウェブドキュメントとして使用
  • C4ダイアグラムコードをWord文書にエクスポートして技術仕様書として使用
  • C4モデルコードをPNGにしてプレゼンテーションで使用
  • C4モデルをPDFにして正式なドキュメントとして使用

MassiveDiag Playgroundは、効率的なワークフローを提供します。

my Image

MassiveDiagのC4ダイアグラムエディターを今すぐ試す →

C4モデルとは？

C4モデルは、Simon Brownによって作成されたソフトウェアアーキテクチャを視覚化するための階層的なアプローチです。このモデルは、4つのレベルのダイアグラムを通じてソフトウェアシステムを標準化して文書化する方法を提供します：

  1. コンテキストダイアグラム - システム間の相互作用を示す大きな絵
  2. コンテナダイアグラム - 高レベルの技術選定
  3. コンポーネントダイアグラム - コンテナ内の論理的コンポーネント
  4. コードダイアグラム - 実装の詳細（オプション）

MassiveDiagは強力なC4モデルコードダイアグラムジェネレーターとして機能し、開発者や技術アーキテクトがアクセスできるアーキテクチャダイアグラムを提供します。

C4ダイアグラムコードの使用方法

コンテキストダイアグラムの例

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

title Internet Banking Systemのシステムコンテキストダイアグラム

Person(customer, "Banking Customer", "個人の銀行口座を持つ銀行のお客様")
System(banking_system, "Internet Banking System", "顧客が自分の銀行口座情報を確認したり、支払いを行ったりするシステム")
System_Ext(mail_system, "E-mail system", "内部のMicrosoft Exchangeメールシステム")
System_Ext(mainframe, "Mainframe Banking System", "顧客、口座、取引などの銀行のコア情報を保存するシステム")

Rel(customer, banking_system, "利用する")
Rel(banking_system, mail_system, "メール送信")
Rel(banking_system, mainframe, "使用する")
@enduml

my Image

コンテナダイアグラムの例

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

title Internet Banking Systemのコンテナダイアグラム

Person(customer, "Banking Customer", "個人の銀行口座を持つ銀行のお客様")

System_Boundary(c1, "Internet Banking System") {
    Container(web_app, "Web Application", "JavaおよびSpring MVC", "静的コンテンツとインターネットバンキングSPAを提供")
    Container(spa, "Single-Page App", "JavaScriptおよびAngular", "顧客にインターネットバンキング機能を提供")
    Container(mobile_app, "Mobile App", "Xamarin", "顧客にインターネットバンキングの一部機能を提供")
    Container(api, "API Application", "JavaおよびSpring MVC", "インターネットバンキング機能をJSON/HTTPS APIを介して提供")
    Container(database, "Database", "Oracle Database Schema", "ユーザー登録情報、認証資格情報、アクセスログなどを保存")
}

System_Ext(mainframe, "Mainframe Banking System", "顧客、口座、取引などの銀行のコア情報を保存するシステム")
System_Ext(email, "E-mail System", "内部のMicrosoft Exchangeメールシステム")

Rel(customer, web_app, "利用する", "HTTPS")
Rel(customer, spa, "利用する", "HTTPS")
Rel(customer, mobile_app, "利用する")
Rel(web_app, spa, "顧客のWebブラウザに提供")
Rel(spa, api, "API呼び出しを行う", "JSON/HTTPS")
Rel(mobile_app, api, "API呼び出しを行う", "JSON/HTTPS")
Rel(api, database, "読み書きする", "JDBC")
Rel(api, mainframe, "API呼び出しを行う", "XML/HTTPS")
Rel(api, email, "メール送信")
@enduml

my Image

MassiveDiagをC4ダイアグラムビューアとして使用する方法

1. C4モデルコードを生成または準備する

自分でC4モデルコードを作成するか、ChatGPTなどのAIツールを使用して基本的なC4ダイアグラム構造を生成できます。

@startuml Basic Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person(admin, "Administrator", $sprite="person2", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md#hide_person_sprite-or-show_person_spritesprite")
System_Boundary(c1, "Sample System", $link="https://github.com/plantuml-stdlib/C4-PlantUML") {
    Container(web_app, "Web Application", "C#, ASP.NET Core 2.1 MVC", $descr="複数のTwitterタイムラインを比較するユーザー向けアプリ", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md")
}
System(twitter, "Twitter", $link="https://github.com/plantuml-stdlib/C4-PlantUML")

Rel(admin, web_app, "利用する", "HTTPS", $link="https://plantuml.com/link")
Rel(web_app, twitter, "ツイートを取得する", "HTTPS", $link="https://plantuml.com/link")
@enduml

2. MassiveDiag Playgroundにコードを貼り付ける

MassiveDiag Playgroundに移動して、コードを挿入またはアップロードします。

my Image

3. C4をダイアグラムタイプとして選択

プレイグラウンドは自動的にダイアグラムタイプを検出しますが、必要に応じて**「C4 PlantUML」**を手動で選択できます。

my Image

4. ダイアグラムを作成する

**「Create Diagram」**ボタンをクリックして、コードを視覚的なC4ダイアグラムに変換します。

my Image

5. 編集と調整

デュアルペインインターフェースを使用して：

  • コードを編集し、リアルタイムで更新
  • SVGエディタで視覚的な調整

6. お好きなフォーマットでエクスポート

複数のエクスポートオプションから選択できます：

  • SVG（ウェブ用）
  • PNG（プレゼンテーション用）
  • PDF（ドキュメント用）
  • Word文書（仕様書用）
  • React JSX（インタラクティブウェブコンポーネント用）

my Image

今すぐC4ダイアグラムを作成 →

C4ダイアグラムの実用的な利用ケース

ソフトウェアアーキテクチャの文書化

異なるレベルでシステム設計を文書化するためにC4ダイアグラムを使用します：

  • コンテキストダイアグラム（ステークホルダー向け）
  • コンテナダイアグラム（開発チーム向け）
  • コンポーネントダイアグラム（実装計画用）

技術仕様書

アーキテクチャダイアグラムを生成します：

  • システム提案書
  • アーキテクチャ決定記録（ADR）
  • 技術要件仕様書

オンボーディングとナレッジトランスファー

新しいチームメンバーが理解しやすいシステム概要図を作成します：

  • システムの境界と相互作用
  • 技術スタックの視覚化
  • コンポーネントの責任と関係

C4ダイアグラムおよびMassiveDiagに関するFAQ

C4は他のダイアグラムアプローチと何が違うのですか？

C4は標準化された階層的なアプローチで、ソフトウェアアーキテクチャの文書化を提供します。

C4ダイアグラムビューアを使用するのにコーディングの経験は必要ですか？

基本的なコードの構文に慣れていることは有利ですが、必須ではありません。

C4ダイアグラムで他の人と共同作業できますか？

はい、C4ダイアグラムコードを共有したり、ダイアグラムをエクスポートして共同作業やレビューができます。

C4ダイアグラムをドキュメントにどう含めますか？

  • SVG/PNGをウェブやプレゼンテーションに
  • PDF/Wordを正式なドキュメントに

プロフェッショナルなC4ダイアグラムを今すぐ作成 →

シェア