コードとしてのアーキテクチャ図

# 図のエディタとビューアをインストール
go install goa.design/model/cmd/mdl@latest

package design

import . "goa.design/model/dsl"

var _ = Design("はじめに", "これは私のソフトウェアシステムのモデルです。", func() {
    // メインのソフトウェアシステムを定義 - これはアプリケーション全体を表す
    var System = SoftwareSystem("ソフトウェアシステム", "私のソフトウェアシステム。", func() {
        // システム内のデータベースコンテナを定義
        Database = Container("データベース", "情報を保存", "MySQL", func() {
            Tag("Database")  // スタイリングとフィルタリングに役立つタグ
        })
        
        // データベースを使用するサービスコンテナを定義
        Container("サービス", "私のサービス", "Go and Goa", func() {
            Uses(Database, "データの読み書き")
        })
    })

    // システムの外部ユーザーを定義
    Person("ユーザー", "私のソフトウェアシステムのユーザー。", func() {
        Uses(System, "使用")  // システムとの関係を作成
        Tag("person")        // スタイリング用のタグ
    })

    // アーキテクチャを可視化するビューを作成
    Views(func() {
        SystemContextView(System, "システム", "システムコンテキスト図。", func() {
            AddAll()                    // すべての要素を含める
            AutoLayout(RankLeftRight)   // 要素を自動的に配置
        })
    })
})

Views(func() {
    // システムランドスケープ：企業ランドスケープ内のすべてのシステムと人を表示
    SystemLandscapeView("landscape", "概要", func() {
        AddAll()
        AutoLayout(RankTopBottom)
    })

    // システムコンテキスト：1つのシステムとその直接の関係に焦点を当てる
    SystemContextView(System, "context", func() {
        AddAll()
        AutoLayout(RankLeftRight)
    })

    // コンテナ：高レベルの技術的な構成要素を表示
    ContainerView(System, "containers", func() {
        AddAll()
        AutoLayout(RankTopBottom)
    })

    // コンポーネント：特定のコンテナの内部を詳細に表示
    ComponentView("System/Container", "components", func() {
        AddAll()
        AutoLayout(RankLeftRight)
    })
})

# デフォルトの出力ディレクトリ（./gen）で起動
mdl serve goa.design/examples/model/design

# または、カスタム出力ディレクトリを指定
mdl serve goa.design/examples/model/design -dir diagrams

Views(func() {
    // ビューを定義
    SystemContextView(System, "context", func() {
        AddAll()
        AutoLayout(RankTopBottom)
    })
    
    // カスタムスタイルを適用
    Styles(func() {
        // "system"タグが付いた要素のスタイル
        ElementStyle("system", func() {
            Background("#1168bd")  // 青い背景
            Color("#ffffff")       // 白いテキスト
        })
        
        // "person"タグが付いた要素のスタイル
        ElementStyle("person", func() {
            Shape(ShapePerson)     // 人物アイコンを使用
            Background("#08427b")  // 濃い青の背景
            Color("#ffffff")       // 白いテキスト
        })
    })
})